4

I am currently working on a project that requires grabbing text from an epub.

We are using React-Native and Futurepress epubjs-rn.

Trying to Achieve:

  1. User highlights word on mobile device via longPress
  2. Highlighted text is grabbed from highlighted region and used elsewhere in application.

Current Attempts:

I have tried the onSelected prop which returns an event that contains the CFI position of the selected area, but I cannot figure out how to pull actual text from the parsed CFI location.

On the epubjs-rn Github, onMarkClicked was recommended for a similar issue, but am unable to trigger.

Here is my current code:

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Alert , WebView } from "react-native";

import { Epub } from 'epubjs-rn';

const epubCFI = require('./lib/EpubCFI/src/epubcfi');   

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onLongPress = (event) => {
        console.log("epubCFI.prototype.parse(): " , epubCFI.prototype.parse(event));
        console.log("epubCFI.prototype.getRange(): ", epubCFI.prototype.getRange(event));
    }

    selectText = (event, rendition) => {
        console.log('event', event);

        const parsedEvent = epubCFI.prototype.parse(event);
    }

    render() {

        return (
        <Epub onSelected={(event, rendition) => this.selectText(event, rendition)} 
            onLongPress={this.onLongPress.bind(this)} 
            src={"https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf"}
            flow="scrolled" />
        )
    }
}

Any help would be appreciated. Thanks~

Dylan Widjaja
  • 41
  • 3

1 Answers1

0

you can use this code to get text of selected

    onSelected={(cfiRange, rendition) => {
      console.log("selected", cfiRange)
      this.state.book.getRange(cfiRange).then(function(range) {
        console.log(`Text: ${range.endContainer.data.substring(range.startOffset, range.endOffset)}`);
      });
    }}

And for book state set that in this code too:

  onReady={(book) => {
                        console.log("Metadata", book.package.metadata);
                        console.log("Table of Contents", book.navigation.toc);
                        this.setState({
                            onChangeFirstCall: true,
                            title: book.package.metadata.title,
                            toc: book.navigation.toc,
                            book: book
                        });
Meisan Saba
  • 800
  • 2
  • 9
  • 25
  • Thanks for your answer! However, I get an error when i call `getRange()`: `No startContainer found for epubcfi(/6/6[fm01]!/4/2/2[title1]/12,/1:0,/1:6)` And the value returned for range is null... Do you have an idea of what's going wrong? – Sami Nov 09 '20 at 15:34
  • Do you set book state first? I edited answer . please check that. I hope that's your answer:) – Meisan Saba Nov 09 '20 at 18:02
  • Thanks for your reply @Meisam Saba! Yes, I set the book first in the onReady function... – Sami Nov 11 '20 at 01:35