Add support for text selection

src/modules/EpubView/EpubView.js

@@ -22,7 +22,7 @@ class EpubView extends Component {
     document.addEventListener("keyup", this.handleKeyPress, false);
   }
 
-  initBook(first) {
+  initBook() {
     const { url, tocChanged, epubInitOptions } = this.props;
     if (this.book) {
       this.book.destroy();
@@ -69,7 +69,7 @@ class EpubView extends Component {
 
   initReader() {
     const { toc } = this.state;
-    const { location, epubOptions, getRendition, handleKeyPress } = this.props;
+    const { location, epubOptions, getRendition } = this.props;
     const node = this.viewerRef.current;
     this.rendition = this.book.renderTo(node, {
       contained: true,
@@ -84,8 +84,7 @@ class EpubView extends Component {
     this.nextPage = () => {
       this.rendition.next();
     };
-    this.rendition.on("locationChanged", this.onLocationChange);
-    this.rendition.on("keyup", handleKeyPress || this.handleKeyPress);
+    this.registerEvents();
     getRendition && getRendition(this.rendition);
     this.rendition.display(
       typeof location === "string" || typeof location === "number"
@@ -94,6 +93,15 @@ class EpubView extends Component {
     );
   }
 
+  registerEvents() {
+    const { handleKeyPress, handleTextSelected } = this.props;
+    this.rendition.on("locationChanged", this.onLocationChange);
+    this.rendition.on("keyup", handleKeyPress || this.handleKeyPress);
+    if (handleTextSelected) {
+      this.rendition.on('selected', handleTextSelected);
+    }
+  }
+
   onLocationChange = loc => {
     const { location, locationChanged } = this.props;
     const newLocation = loc && loc.start;
@@ -146,7 +154,8 @@ EpubView.propTypes = {
   epubInitOptions: PropTypes.object,
   epubOptions: PropTypes.object,
   getRendition: PropTypes.func,
-  handleKeyPress: PropTypes.func
+  handleKeyPress: PropTypes.func,
+  handleTextSelected: PropTypes.func
 };
 
 export default EpubView;

types/index.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as CSS from "csstype";
 import { BookOptions } from "epubjs/types/book";
-import Rendition, { RenditionOptions } from "epubjs/types/rendition";
+import { RenditionOptions } from "epubjs/types/rendition";
+import { Contents, EpubCFI, Rendition } from "epubjs";
 
 interface EpubViewProps {
   url: string | ArrayBuffer;
@@ -15,6 +16,7 @@ interface EpubViewProps {
   tocChanged?(value: Toc): void;
   getRendition?(rendition: Rendition): void;
   handleKeyPress?(): void;
+  handleTextSelected?(cfiRange: EpubCFI, contents: Contents):void;
 }
 
 declare class EpubView extends React.Component<EpubViewProps> {}