Ability to configure readonly mode and accept all react-native-webvie…

…w versions
imnapo · Nov 14, 2023 · 9a4e3ea · 9a4e3ea
1 parent 116ca0a
commit 9a4e3ea
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-webview": "^11.0.0"
+    "react-native-webview": ">=11.0.0"
   },
   "jest": {
     "preset": "react-native",

diff --git a/src/constants/editor/create_quill.ts b/src/constants/editor/create_quill.ts
@@ -7,6 +7,7 @@ export const create_quill = ({
   theme,
   customFonts = [],
   customJS,
+  readonly = false,
 }: {
   id: string;
   toolbar: 'false' | string;
@@ -16,6 +17,7 @@ export const create_quill = ({
   theme: 'snow' | 'bubble';
   customFonts: Array<string>;
   customJS: string;
+  readonly: boolean;
 }) => {
   let font = '';
   if (customFonts.length > 0) {
@@ -46,7 +48,8 @@ export const create_quill = ({
   var quill = new Quill('#${id}', {
     modules: { ${modules} },
     placeholder: '${placeholder}',
-    theme: '${theme}'
+    theme: '${theme}',
+    readonly: ${readonly},
   });
   </script>
   `;

diff --git a/src/editor/quill-editor.tsx b/src/editor/quill-editor.tsx
@@ -59,6 +59,7 @@ export interface EditorProps {
   onBlur?: () => void;
   onFocus?: () => void;
   customJS?: string;
+  readonly?: boolean;
 }
 
 export default class QuillEditor extends React.Component<
@@ -135,6 +136,7 @@ export default class QuillEditor extends React.Component<
       customStyles = [],
       defaultFontFamily = undefined,
       customJS = '',
+      readonly = false,
     } = this.props;
 
     return createHtml({
@@ -155,6 +157,7 @@ export default class QuillEditor extends React.Component<
       placeholderColor: theme.placeholder,
       customStyles,
       customJS,
+      readonly,
     });
   };
 

diff --git a/src/utils/editor-utils.ts b/src/utils/editor-utils.ts
@@ -30,6 +30,7 @@ interface CreateHtmlArgs {
   fonts: Array<CustomFont>;
   defaultFontFamily?: string;
   customJS?: string;
+  readonly?: boolean;
 }
 
 const Inital_Args = {
@@ -49,6 +50,7 @@ const Inital_Args = {
   customStyles: [],
   fonts: [],
   customJS: '',
+  readonly: false,
 } as CreateHtmlArgs;
 
 export const createHtml = (args: CreateHtmlArgs = Inital_Args) => {
@@ -101,6 +103,7 @@ export const createHtml = (args: CreateHtmlArgs = Inital_Args) => {
     theme: args.theme,
     customFonts: args.fonts.map((f) => getFontName(f.name)),
     customJS: args.customJS ? args.customJS : '',
+    readonly: args.readonly ? args.readonly : false,
   })}
   ${editor_js}
   </body>