Merge pull request #35 from altmshfkgudtjr/dev

v0.2.0

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [altmshfkgudtjr]

README.md

@@ -22,7 +22,10 @@ You can use React-Epub-Viewer together with React.
 
 ## Getting Started
 
-📢 **[Online demo](https://altmshfkgudtjr.github.io/react-epub-viewer)**
+📢 **[Online Demo](https://altmshfkgudtjr.github.io/react-epub-viewer)**
+👉 You can check the **[Demo Code](https://github.com/altmshfkgudtjr/react-epub-viewer/tree/demo)**
+
+
 
 **Features**
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-epub-viewer",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "author": {
     "name": "NB",
     "email": "altmshfkgudtjr@naver.com"

src/index.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react'
 import ReactDOM from 'react-dom';
-import EpubViewer from 'modules/epubViewer/EpubViewer'
-import ReactEpubViewer from 'modules/reactViewer/ReactViewer'
+import { EpubViewer, ReactEpubViewer } from 'modules';
 import { ViewerRef } from 'types'
 
 interface Props {

src/modules/epubViewer/EpubViewer.tsx

@@ -113,13 +113,13 @@ const EpubViewer = ({
 
   /**
    * Highlight function
-   * @param cfiRange Selecton CFIRange
-   * @param color Highlight color
+   * @param cfiRange Selected CFIRange
    * @param callback Highlight callback function when click it
+   * @param color Highlight color
    */
    const onHighlight = useCallback((
     cfiRange: string, 
-    callback: (e: any) => void,
+    callback?: (e: any) => void,
     color?: string
   ) => {
     if (!rendition) return;
@@ -133,6 +133,16 @@ const EpubViewer = ({
       { 'fill': color || '#fdf183' }
     );
   }, [rendition]);
+
+	/**
+	 * Highlight remove function
+	 * @param cfiRange Selected CFIRange
+	 */
+	const onRemoveHighlight = useCallback((cfiRange: string) => {
+		if (!rendition) return;
+
+		rendition.annotations.remove(cfiRange, 'highlight');
+	}, [rendition]);
 
   /**
    * Register viewer control function
@@ -154,11 +164,13 @@ const EpubViewer = ({
     if (onHighlight) {
       ref.current.onHighlight = onHighlight;
     }
+		if (onRemoveHighlight) {
+			ref.current.offHighlight = onRemoveHighlight;
+		}
     if (rendition) {
-      ref.current.offHighlight = (cfiRange: string) => rendition.annotations.remove(cfiRange, 'highlight');
       ref.current.setLocation = (location: string) => rendition.display(location);
     }
-  }, [ref, rendition, movePage, onHighlight]);
+  }, [ref, rendition, movePage, onHighlight, onRemoveHighlight]);
 
 
 

src/modules/reactViewer/ReactViewer.tsx

@@ -26,6 +26,7 @@ import BookType, { BookStyle, BookOption } from 'types/book'
  * @param props.url Epub file path
  * @param props.viewerLayout Viewer layout
  * @param props.viewerStyle Viewer style
+ * @param props.viewerStyleURL Viwer style - CSS URL
  * @param props.viewerOption Viewer option
  * @param props.onBookInfoChange Run when book information changed
  * @param props.onPageChange Run when page changed
@@ -38,6 +39,7 @@ const ReactViewer = ({
   url,
   viewerLayout,
   viewerStyle,
+	viewerStyleURL,
   viewerOption,
   onBookInfoChange,
   onPageChange,
@@ -227,9 +229,11 @@ const ReactViewer = ({
     onResize();
 
     const newStyle = {
+			...viewerDefaultStyles,
       "body": {
         "padding-top": "0px !important",
-        "padding-bottom": "0px !important"
+        "padding-bottom": "0px !important",
+				"font-size": `${bookStyle.fontSize}px !important`
       },
       "p": {
         "font-size": `${bookStyle.fontSize}px !important`,
@@ -255,16 +259,20 @@ const ReactViewer = ({
     } else {                                    // View 1 page
       Object.assign(newStyle.body, { });
     }
-
-    rendition.themes.register("main", viewerDefaultStyles);
+
+		if (!!viewerStyleURL) {
+			rendition.themes.registerUrl('main', viewerStyleURL);
+		}
+
     rendition.themes.register("default", newStyle);
 
-    rendition.themes.select("main");
+		rendition.themes.select("main");
   }, [
     rendition, 
     bookStyle.fontFamily,
     bookStyle.fontSize,
     bookStyle.lineHeight,
+		viewerStyleURL,
     bookOption,
     onResize
   ]);

src/types/index.d.ts

@@ -5,6 +5,7 @@ import { Contents, Rendition } from "epubjs";
 import Toc from 'types/toc'
 import Page from 'types/page'
 import ViewerLayout from 'types/viewerLayout'
+import BookType, { BookStyle, BookOption } from 'types/book'
 
 
 /**
@@ -26,7 +27,7 @@ export interface ViewerRef extends HTMLDivElement {
    */
   onHighlight: (
     cfiRange: string, 
-    callback: (e: any) => void,
+    callback?: (e: any) => void,
     color?: string
   ) => void;
   /**
@@ -79,6 +80,7 @@ declare class EpubViewer extends React.Component<EpubViewerProps, ViewerRef> {}
  * @param url Epub file path
  * @param viewerLayout Viewer layout
  * @param viewerStyle Viewer style
+ * @param viewerStyleURL Viewer style - CSS URL
  * @param viewerOption Viewer option
  * @param onBookInfoChange Run when book information changed
  * @param onPageChange Run when page changed
@@ -90,6 +92,7 @@ export interface ReactViewerProps {
   url: string;
   viewerLayout?: ViewerLayout;
   viewerStyle?: BookStyle;
+	viewerStyleURL?: string;
   viewerOption?: BookOption;
   onBookInfoChange?: (book: BookType) => void;
   onPageChange?: (page: Page) => void;

yarn.lock

@@ -6235,9 +6235,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-forge@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.2.1.tgz#82794919071ef2eb5c509293325cec8afd0fd53c"
-  integrity sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
 node-int64@^0.4.0:
   version "0.4.0"