Merge pull request #183 from victorsoares96/fix/text-selection-not-di…

…sabling 🩹 fix: text selection not disabling
victorsoares96 · Mar 15, 2024 · dbe73d6 · dbe73d6
2 parents 15d0da4 + 31034ba
commit dbe73d6
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -75,6 +75,7 @@ export default function App() {
 | `fileSystem`                 | `function`    | A function that returns a `FileSystem` object. Required.     |
 | `initialLocation`            | `ePubCfi`     | Can be an ePubCfi or chapter url. Optional.                  |
 | `enableSwipe`                | `boolean`     | Enable swipe actions. Default is `true`.                     |
+| `enableSelection`            | `boolean`     | Enable text selection feature on the book. Default is `true`.|
 | `onSwipeLeft`                | `function`    | Called when swipe left gesture is detected. Optional.        |
 | `onSwipeRight`               | `function`    | Called when swipe right gesture is detected. Optional.       |
 | `renderLoadingFileComponent` | `JSX.Element` | Render when the book is loading. Optional.                   |

diff --git a/example-expo/package.json b/example-expo/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@epubjs-react-native/core": "^1.4.0-beta.12",
+    "@epubjs-react-native/core": "^1.4.0-beta.15",
     "@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.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/core@^1.4.0-beta.15":
+  version "1.4.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@epubjs-react-native/core/-/core-1.4.0-beta.15.tgz#aab300d2f3fdb779740d958fc3c668860a47d0f0"
+  integrity sha512-rZciuzNaQuXsi85U3yzY70sRl6N+SuFMTa/7oIX4MZMP8n3iWCt9IiH6ikQ8dT1gdquKHWrmh7bKQb2iPmtO8A==
 
 "@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.4.0-beta.12",
+  "version": "1.4.0-beta.15",
   "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",

diff --git a/src/Reader.tsx b/src/Reader.tsx
@@ -21,6 +21,7 @@ export function Reader({
   initialLocations,
   allowScriptedContent = Platform.OS === 'ios',
   highlightOnSelect = true,
+  enableSelection = true,
   renderLoadingFileComponent = (props) => (
     <LoadingFile {...props} width={width} height={height} />
   ),
@@ -86,7 +87,7 @@ export function Reader({
                 book: src,
                 theme: defaultTheme,
                 locations: initialLocations,
-                enableSelection: true,
+                enableSelection,
                 allowScriptedContent,
                 highlightOnSelect,
               })
@@ -102,7 +103,7 @@ export function Reader({
                 book: src,
                 theme: defaultTheme,
                 locations: initialLocations,
-                enableSelection: true,
+                enableSelection,
                 allowScriptedContent,
                 highlightOnSelect,
               })
@@ -128,7 +129,7 @@ export function Reader({
                 book: src,
                 theme: defaultTheme,
                 locations: initialLocations,
-                enableSelection: true,
+                enableSelection,
                 allowScriptedContent,
                 highlightOnSelect,
               })
@@ -150,7 +151,7 @@ export function Reader({
                 book: bookFileUri,
                 theme: defaultTheme,
                 locations: initialLocations,
-                enableSelection: true,
+                enableSelection,
                 allowScriptedContent,
                 highlightOnSelect,
               })
@@ -166,6 +167,7 @@ export function Reader({
     defaultTheme,
     documentDirectory,
     downloadFile,
+    enableSelection,
     highlightOnSelect,
     initialLocations,
     injectWebVieWVariables,

diff --git a/src/template.ts b/src/template.ts
@@ -58,6 +58,19 @@ export default `
 
       window.ReactNativeWebView.postMessage(JSON.stringify({ type: "onStarted" }));
 
+      if (!enableSelection) {
+        rendition.themes.default({
+          'body': {
+            '-webkit-touch-callout': 'none', /* iOS Safari */
+            '-webkit-user-select': 'none', /* Safari */
+            '-khtml-user-select': 'none', /* Konqueror HTML */
+            '-moz-user-select': 'none', /* Firefox */
+            '-ms-user-select': 'none', /* Internet Explorer/Edge */
+            'user-select': 'none'
+          }
+        });
+      }
+
       book.ready
         .then(function () {
           if (initialLocations) {

diff --git a/src/types.ts b/src/types.ts
@@ -237,8 +237,8 @@ export interface ReaderProps {
    */
   initialLocation?: string;
   /**
-   * Enable swipe actions
-   * @default true
+   * Enable swipe actions.
+   * Default is `true`
    */
   enableSwipe?: boolean;
   /**
@@ -262,9 +262,8 @@ export interface ReaderProps {
    */
   renderOpeningBookComponent?: () => JSX.Element;
   /**
-   * Enable text selection feature on the book
-   * @default false
-   * @description Recommend using this with `enableSwipe` disabled
+   * Enable text selection feature on the book.
+   * Default is `true`
    */
   enableSelection?: boolean;