Improve teardown of quill component to prevent double renders

the-curve-consulting · Jun 19, 2024 · eedc784 · eedc784
1 parent ed3243b
commit eedc784
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 52 deletions.
diff --git a/dist/components/form/Form.d.ts b/dist/components/form/Form.d.ts
@@ -18,10 +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: {
-        ({ theme, modules, value, onChange, ...rest }: import("./components/FormRichText").QuillEditorProps): 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;
     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/Form.d.ts.map b/dist/components/form/Form.d.ts.map
diff --git a/dist/components/form/components/FormRichText.d.ts b/dist/components/form/components/FormRichText.d.ts
@@ -9,9 +9,6 @@ export interface QuillEditorProps {
     theme?: string;
     onChange?(value: string): any;
 }
-declare const FormRichText: {
-    ({ theme, modules, value, onChange, ...rest }: QuillEditorProps): React.JSX.Element;
-    Feedback: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/Feedback").FeedbackProps>;
-};
+declare const FormRichText: ({ modules, value, onChange, theme, ...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,35 +25532,40 @@ Quill.register({
 }, true);
 
 var FormRichText = function (_a) {
-    var theme = _a.theme, modules = _a.modules, value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["theme", "modules", "value", "onChange"]);
-    var editorRef = React.useRef(null);
+    var modules = _a.modules, value = _a.value, onChange = _a.onChange, theme = _a.theme, rest = __rest(_a, ["modules", "value", "onChange", "theme"]);
     var quillRef = React.useRef(null);
+    var containerRef = React.useRef(null);
     var quillOptions = __assign(__assign({}, modules), { theme: theme || 'snow' });
     var setValue = function (quillRef) {
         var delta = quillRef.clipboard.convert({ html: value });
         quillRef.setContents(delta, 'silent');
     };
     var configureListeners = function (quill) {
-        quill.on('text-change', function () {
+        quill.on(Quill.events.TEXT_CHANGE, function () {
             var _a;
             if (onChange) {
                 onChange(((_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.getSemanticHTML()) || '');
             }
         });
     };
     React.useEffect(function () {
-        if (editorRef.current) {
-            var quill = new Quill(editorRef.current, quillOptions);
-            quillRef.current = quill; // Store the Quill instance in a ref
+        if (containerRef.current) {
+            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
             if (value) {
-                setValue(quill);
+                setValue(quill_1);
             }
-            configureListeners(quill);
+            configureListeners(quill_1);
+            return function () {
+                container_1.innerHTML = '';
+                quill_1.off(Quill.events.TEXT_CHANGE);
+            };
         }
     }, []);
-    return React.createElement("div", { ref: editorRef, style: rest.style, id: rest.id });
+    return React.createElement("div", { ref: containerRef, style: rest.style, id: rest.id, className: rest.className });
 };
-FormRichText.Feedback = Feedback$1;
 
 var FormDateTime = function (_a) {
     var className = _a.className, rest = __rest(_a, ["className"]);