Merge pull request #181 from victorsoares96/fix/mark-not-working-on-ios

🩹 fix: mark not working on ios
victorsoares96 · Mar 15, 2024 · 15d0da4 · 15d0da4
2 parents 3f77e14 + 71e3c9f
commit 15d0da4
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ yarn add @epubjs-react-native/file-system react-native-fs react-native-webview r
 #### Expo Installation
 
 ```sh
-expo install @epubjs-react-native/expo-file-system react-native-fs react-native-webview react-native-gesture-handler
+npx expo install @epubjs-react-native/expo-file-system react-native-fs react-native-webview react-native-gesture-handler
 ```
 
 #### If you develop for iOS use this command for install CocoaPods deps (if you use an expo managed project you don't need this)
@@ -96,6 +96,8 @@ export default function App() {
 | `onFinish`                   | `function`    | Called when the book is on the final page. Optional.         |
 | `onLayout`                   | `function`    | Called when book layout is change. Optional.                 |
 | `defaultTheme`               | `object`      | Theme object. Optional.                                      |
+| `allowScriptedContent`       | `boolean`     | Allow run scripted content on sandbox. *Default is false on Android and true in iOS* |
+| `highlightOnSelect`          | `boolean`     | Highlight text on select. Default is true.                   |
 
 ## Hooks
 
@@ -125,7 +127,7 @@ const { changeFontSize, goToLocation, ... } = useReader();
 `getMeta`              |          | Returns an object containing the book's metadata.
 
 The metadata object contains:
-- **cover** *(string, ArrayBuffer, null or undefined)*: The book's cover image `e.g.data:image/jpeg;base64,/9j/4AAQSkZJ...`  
+- **cover** *(string, ArrayBuffer, null or undefined)*: The book's cover image `e.g.data:image/jpeg;base64,/9j/4AAQSkZJ...`
 - **author** *(string)*: The name of the book's creator/author `e.g. Herman Melville`
 - **title** *(string)*: The book's title `e.g. Moby-Dick`
 - **description** *(string)*: The book's description/summary.

diff --git a/example-bare/package.json b/example-bare/package.json
@@ -9,7 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@epubjs-react-native/core": "^1.3.0",
+    "@epubjs-react-native/core": "^1.4.0-beta.1",
     "@epubjs-react-native/file-system": "^1.1.2",
     "@react-navigation/native": "^6.1.15",
     "@react-navigation/native-stack": "^6.9.24",

diff --git a/example-bare/yarn.lock b/example-bare/yarn.lock
@@ -1206,10 +1206,10 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
-"@epubjs-react-native/core@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.3.0.tgz#dd6410265098f5680cb7ac5396860b443358786f"
-  integrity sha512-wyjifLuRxyDX0msm4G85RQ0OTe+ATYvLgkFxoR1kzznUgPOuoU3s4vBZMD1KwpcwlomxJoJXBOFS7nzuW7nhRw==
+"@epubjs-react-native/core@^1.4.0-beta.1":
+  version "1.4.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.4.0-beta.1.tgz#c77a50729f64b7ac64fdcd8529b60e6ddfddb596"
+  integrity sha512-OyJsIlEkHYhHRsVMjFJO+HROdpZI8f3jxpWVDtJvBpJ7bJCG3jA2eFCBmD7WwVrub5FL/ignuOVNEz1MNx38cw==
 
 "@epubjs-react-native/file-system@^1.1.2":
   version "1.1.2"

diff --git a/example-expo/package.json b/example-expo/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@epubjs-react-native/core": "^1.3.0",
+    "@epubjs-react-native/core": "^1.4.0-beta.12",
     "@epubjs-react-native/expo-file-system": "^1.1.2",
     "@react-navigation/native": "^6.1.15",
     "@react-navigation/native-stack": "^6.9.24",

diff --git a/example-expo/yarn.lock b/example-expo/yarn.lock
@@ -1206,10 +1206,10 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
-"@epubjs-react-native/core@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.3.0.tgz#dd6410265098f5680cb7ac5396860b443358786f"
-  integrity sha512-wyjifLuRxyDX0msm4G85RQ0OTe+ATYvLgkFxoR1kzznUgPOuoU3s4vBZMD1KwpcwlomxJoJXBOFS7nzuW7nhRw==
+"@epubjs-react-native/core@^1.4.0-beta.12":
+  version "1.4.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.4.0-beta.12.tgz#8dfd154a927fe14e6c2986b12d98199b00f9ef8d"
+  integrity sha512-NDYns1JrSPlfkViSq4BAEcpiFE4uUecSrwfzBqMwF1CmjhS2U0aNaxJwxqhAQ7PUCw5+TNINGvxV4G94DHmofg==
 
 "@epubjs-react-native/expo-file-system@^1.1.2":
   version "1.1.2"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epubjs-react-native/core",
-  "version": "1.3.0",
+  "version": "1.4.0-beta.12",
   "description": "A digital book reader in .opf .epub format for react native using epub.js library inside a webview.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -30,7 +30,7 @@
     "test": "jest --watch --runInBand --passWithNoTests",
     "test:coverage": "jest --coverage --no-cache --runInBand --passWithNoTests --forceExit",
     "build": "bob build",
-    "release": "yarn build && npm publish",
+    "release": "yarn build && npm publish --tag beta",
     "release-local": "yarn build && npm link && echo [FINISH]: Run \"npm link @epubjs-react-native/core\" to link the package to your project",
     "example-bare": "yarn --cwd example-bare",
     "example-expo": "yarn --cwd example-expo",

diff --git a/src/Reader.tsx b/src/Reader.tsx
@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
 import { LoadingFile } from './utils/LoadingFile';
 import type { ReaderProps } from './types';
 import { View } from './View';
@@ -18,6 +19,8 @@ export function Reader({
   height,
   defaultTheme = initialTheme,
   initialLocations,
+  allowScriptedContent = Platform.OS === 'ios',
+  highlightOnSelect = true,
   renderLoadingFileComponent = (props) => (
     <LoadingFile {...props} width={width} height={height} />
   ),
@@ -84,6 +87,8 @@ export function Reader({
                 theme: defaultTheme,
                 locations: initialLocations,
                 enableSelection: true,
+                allowScriptedContent,
+                highlightOnSelect,
               })
             );
 
@@ -98,6 +103,8 @@ export function Reader({
                 theme: defaultTheme,
                 locations: initialLocations,
                 enableSelection: true,
+                allowScriptedContent,
+                highlightOnSelect,
               })
             );
 
@@ -122,6 +129,8 @@ export function Reader({
                 theme: defaultTheme,
                 locations: initialLocations,
                 enableSelection: true,
+                allowScriptedContent,
+                highlightOnSelect,
               })
             );
 
@@ -142,6 +151,8 @@ export function Reader({
                 theme: defaultTheme,
                 locations: initialLocations,
                 enableSelection: true,
+                allowScriptedContent,
+                highlightOnSelect,
               })
             );
 
@@ -151,9 +162,11 @@ export function Reader({
       }
     })();
   }, [
+    allowScriptedContent,
     defaultTheme,
     documentDirectory,
     downloadFile,
+    highlightOnSelect,
     initialLocations,
     injectWebVieWVariables,
     setIsLoading,

diff --git a/src/hooks/useInjectWebviewVariables.ts b/src/hooks/useInjectWebviewVariables.ts
@@ -13,6 +13,8 @@ export function useInjectWebVieWVariables() {
       theme,
       enableSelection,
       locations,
+      allowScriptedContent,
+      highlightOnSelect,
     }: {
       jszip: string;
       epubjs: string;
@@ -21,6 +23,8 @@ export function useInjectWebVieWVariables() {
       theme: Theme;
       enableSelection: boolean;
       locations?: ePubCfi[];
+      allowScriptedContent?: boolean;
+      highlightOnSelect?: boolean;
     }) => {
       return template
         .replace(
@@ -44,6 +48,14 @@ export function useInjectWebVieWVariables() {
         .replace(
           /const enableSelection = window.enable_selection;/,
           `const enableSelection = ${enableSelection};`
+        )
+        .replace(
+          /allowScriptedContent: allowScriptedContent/,
+          `allowScriptedContent: ${allowScriptedContent}`
+        )
+        .replace(
+          /const highlightOnSelect = highlightOnSelect/,
+          `const highlightOnSelect = ${highlightOnSelect}`
         );
     },
     []

diff --git a/src/template.ts b/src/template.ts
@@ -36,6 +36,7 @@ export default `
       const theme = window.theme;
       const initialLocations = window.locations;
       const enableSelection = window.enable_selection;
+      const highlightOnSelect = highlightOnSelect;
 
       if (!file) {
         alert('Failed load book');
@@ -52,6 +53,7 @@ export default `
       rendition = book.renderTo("viewer", {
         width: "100%",
         height: "100%",
+        allowScriptedContent: allowScriptedContent
       });
 
       window.ReactNativeWebView.postMessage(JSON.stringify({ type: "onStarted" }));
@@ -189,41 +191,42 @@ export default `
       });
 
       rendition.on("selected", function (cfiRange, contents) {
-        rendition.annotations.add("highlight", cfiRange, {}, (e) => {
-          console.log("highlight clicked", e.target);
-        });
+        if (highlightOnSelect) {
+          rendition.annotations.add("highlight", cfiRange, {}, (e) => {
+            console.log("highlight clicked", e.target);
+          });
+        }
 
         contents.window.getSelection().removeAllRanges();
-          book.getRange(cfiRange).then(function (range) {
-            if (range) {
-              window.ReactNativeWebView.postMessage(JSON.stringify({
-                type: 'onSelected',
-                cfiRange: cfiRange,
-                text: range.toString(),
-              }));
-            }
-          });
+        book.getRange(cfiRange).then(function (range) {
+          if (range) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'onSelected',
+              cfiRange: cfiRange,
+              text: range.toString(),
+            }));
+          }
         });
+      });
 
-        rendition.on("markClicked", function (cfiRange, contents) {
-          rendition.annotations.remove(cfiRange, "highlight");
-          book.getRange(cfiRange).then(function (range) {
-            if (range) {
-              window.ReactNativeWebView.postMessage(JSON.stringify({
-                type: 'onMarkPressed',
-                cfiRange: cfiRange,
-                text: range.toString(),
-              }));
-            }
-          });
+      rendition.on("markClicked", function (cfiRange, contents) {
+        book.getRange(cfiRange).then(function (range) {
+          if (range) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'onMarkPressed',
+              cfiRange: cfiRange,
+              text: range.toString(),
+            }));
+          }
         });
+      });
 
-        rendition.on("resized", function (layout) {
-          window.ReactNativeWebView.postMessage(JSON.stringify({
-            type: 'onResized',
-            layout: layout,
-          }));
-        });
+      rendition.on("resized", function (layout) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'onResized',
+          layout: layout,
+        }));
+      });
     </script>
   </body>
 </html>

diff --git a/src/types.ts b/src/types.ts
@@ -280,4 +280,17 @@ export interface ReaderProps {
   defaultTheme?: Theme;
 
   fileSystem(): FileSystem;
+
+  /**
+   * This will allow the sandbox content to run scripts, but currently makes the sandbox insecure.
+   *
+   * By default this option is `true` in *iOS* to fix an execution blocking issue related to the use of the `addMark()` function in iOS platform.
+   *
+   * You can get more information about this in the issue: https://github.com/victorsoares96/epubjs-react-native/issues/111
+   */
+  allowScriptedContent?: boolean;
+  /**
+   * Default is `true`
+   */
+  highlightOnSelect?: boolean;
 }