Add optional import callback prop to enable module imports on the qui…

…ll instance
the-curve-consulting · Jun 19, 2024 · 46189ac · 46189ac
1 parent eedc784
commit 46189ac
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 19 deletions.
diff --git a/dist/components/form/Form.d.ts b/dist/components/form/Form.d.ts
@@ -18,7 +18,7 @@ declare const Form: {
         ({ type, className, ...rest }: import("./components/FormCheck").FormCheckProps): React.JSX.Element;
         Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;
     };
-    RichText: ({ modules, value, onChange, theme, ...rest }: import("./components/FormRichText").QuillEditorProps) => React.JSX.Element;
+    RichText: ({ modules, value, onChange, theme, importCallback, ...rest }: import("./components/FormRichText").QuillEditorProps) => React.JSX.Element;
     DateTime: {
         ({ className, ...rest }: import("./components/FormDateTime").FormDateTimeProps): React.JSX.Element;
         Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/Feedback").FeedbackProps>;

diff --git a/dist/components/form/components/FormRichText.d.ts b/dist/components/form/components/FormRichText.d.ts
@@ -8,7 +8,8 @@ export interface QuillEditorProps {
     value?: string;
     theme?: string;
     onChange?(value: string): any;
+    importCallback?(): any;
 }
-declare const FormRichText: ({ modules, value, onChange, theme, ...rest }: QuillEditorProps) => React.JSX.Element;
+declare const FormRichText: ({ modules, value, onChange, theme, importCallback, ...rest }: QuillEditorProps) => React.JSX.Element;
 export default FormRichText;
 //# sourceMappingURL=FormRichText.d.ts.map
diff --git a/dist/components/form/components/FormRichText.d.ts.map b/dist/components/form/components/FormRichText.d.ts.map
diff --git a/dist/components/form/components/FormRichText.js b/dist/components/form/components/FormRichText.js
diff --git a/dist/components/form/components/FormRichText.js.map b/dist/components/form/components/FormRichText.js.map
diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.js b/dist/index.js
@@ -25532,7 +25532,7 @@ Quill.register({
 }, true);
 
 var FormRichText = function (_a) {
-    var modules = _a.modules, value = _a.value, onChange = _a.onChange, theme = _a.theme, rest = __rest(_a, ["modules", "value", "onChange", "theme"]);
+    var modules = _a.modules, value = _a.value, onChange = _a.onChange, theme = _a.theme, importCallback = _a.importCallback, rest = __rest(_a, ["modules", "value", "onChange", "theme", "importCallback"]);
     var quillRef = React.useRef(null);
     var containerRef = React.useRef(null);
     var quillOptions = __assign(__assign({}, modules), { theme: theme || 'snow' });
@@ -25550,19 +25550,25 @@ var FormRichText = function (_a) {
     };
     React.useEffect(function () {
         if (containerRef.current) {
+            if (importCallback) {
+                //Callback to import new modules into quill, needs to be done within the same instance as the quill object.
+                importCallback();
+            }
             var container_1 = containerRef.current;
             var editorContainer = container_1.appendChild(container_1.ownerDocument.createElement('div'));
-            var quill_1 = new Quill(editorContainer, quillOptions);
-            quillRef.current = quill_1; // Store the Quill instance in a ref
+            var quill = new Quill(editorContainer, quillOptions);
+            quillRef.current = quill; // Store the Quill instance in a ref
             if (value) {
-                setValue(quill_1);
+                setValue(quill);
             }
-            configureListeners(quill_1);
+            configureListeners(quill);
             return function () {
                 container_1.innerHTML = '';
-                quill_1.off(Quill.events.TEXT_CHANGE);
+                quillRef.current.off(Quill.events.TEXT_CHANGE);
             };
         }
+        // NOTE: Run effect once on component mount, please recheck dependencies if effect is updated.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return React.createElement("div", { ref: containerRef, style: rest.style, id: rest.id, className: rest.className });
 };

diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/src/components/form/components/FormRichText.tsx b/src/components/form/components/FormRichText.tsx
@@ -11,13 +11,15 @@ export interface QuillEditorProps {
   theme?: string;
 
   onChange?(value: string): any;
+  importCallback?(): any;
 }
 
 const FormRichText = ({
   modules,
   value,
   onChange,
   theme,
+  importCallback,
   ...rest
 }: QuillEditorProps) => {
   const quillRef = useRef<Quill | null>(null);
@@ -43,6 +45,11 @@ const FormRichText = ({
 
   useEffect(() => {
     if (containerRef.current) {
+      if (importCallback) {
+        // Callback to import new modules into quill, needs to be done within the same instance as the quill object.
+        importCallback();
+      }
+
       const container = containerRef.current as HTMLDivElement;
       const editorContainer = container.appendChild(
         container.ownerDocument.createElement('div')
@@ -58,9 +65,12 @@ const FormRichText = ({
 
       return () => {
         container.innerHTML = '';
-        quill.off(Quill.events.TEXT_CHANGE);
+        (quillRef.current as Quill).off(Quill.events.TEXT_CHANGE);
       };
     }
+
+    // NOTE: Run effect once on component mount, please recheck dependencies if effect is updated.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (