@bbl-digital/snorre 4.1.11 → 4.1.13

package/dist/bundle.js

@@ -35458,7 +35458,7 @@ to {top: 100vh;}
     'formats/ulist': MyListItem
   });
   Quill__default["default"].register(CustomLinkSanitizer, true);
-  const QuillEditor = ({
+  const QuillEditor = /*#__PURE__*/React.forwardRef(({
     height,
     width,
     maxHeight,
@@ -35485,12 +35485,15 @@ to {top: 100vh;}
     disabled,
     pasteAsText,
     name,
-    id,
-    resize // Trenger vi denne?,
-  }) => {
+    id
+  }, ref) => {
     const [quill, setQuill] = React.useState(null);
     const isMounted = React.useRef(false);
     const containerRef = React.useRef(null);
+    const defaultValueRef = React.useRef(initialValue);
+    const onTextChangeRef = React.useRef(onChange);
+    // const onFocusRef = useRef(onFocus)
+    // const onBlurRef = useRef(onBlur)
     const {
       alert
     } = react.useTheme();
@@ -35537,20 +35540,17 @@ to {top: 100vh;}
         }
       }
     };
-    const handleChange = React.useCallback((delta, _oldDelta, source) => {
-      if (quill) {
-        const html = quill.root.innerHTML;
-        if (onChange) {
-          onChange(html, delta, source, quill);
-        }
+    const handleChange = React.useCallback((delta, _oldDelta, source, instance) => {
+      const html = instance.root.innerHTML;
+      if (onChange) {
+        onChange(html, delta, source, quill);
       }
     }, [quill, onChange]);
-    const handelFocus = React.useCallback(() => {
-      if (!quill) return;
-      const html = quill.root.innerHTML;
+    const handelFocus = React.useCallback(instance => {
+      const html = instance.root.innerHTML;
       onFocus && onFocus(html);
     }, [quill, onFocus]);
-    const applySizes = () => {
+    const applySizes = quill => {
       if (!quill) return;
       minHeight && (quill.root.style.minHeight = `${minHeight}px`);
       maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
@@ -35559,86 +35559,80 @@ to {top: 100vh;}
       height && (quill.root.style.height = `${height}px`);
       minWidth && (quill.root.style.minWidth = `${minWidth}px`);
     };
+    React.useLayoutEffect(() => {
+      onTextChangeRef.current = onChange;
+    });
     React.useEffect(() => {
-      if (!isMounted.current) {
-        const editor = document.createElement('div');
-        containerRef.current?.appendChild(editor);
-        const quillInstance = new Quill__default["default"](editor, {
-          theme: 'snow',
-          modules: {
-            ...modules
-          },
-          formats,
-          placeholder,
-          bounds,
-          readOnly
-        });
-        const editorActual = editor.querySelector('.ql-editor');
-        if (editorActual) {
-          editorActual.setAttribute('id', id || 'ql-editor');
-          editorActual.setAttribute('name', name || 'ql-editor');
+      if (isMounted.current) return;
+      const container = containerRef.current;
+      const editor = container?.appendChild(container.ownerDocument.createElement('div'));
+      if (!editor) return;
+      const quillInstance = new Quill__default["default"](editor, {
+        theme: 'snow',
+        modules: {
+          ...modules
+        },
+        formats,
+        placeholder,
+        bounds,
+        readOnly
+      });
+      ref && ref.current && (ref.current = editor);
+      const editorActual = editor.querySelector('.ql-editor');
+      if (editorActual) {
+        editorActual.setAttribute('id', id || 'ql-editor');
+        editorActual.setAttribute('name', name || 'ql-editor');
+      }
+      applySizes(quillInstance);
+      quillInstance.keyboard.addBinding({
+        key: 'Backspace'
+      }, {
+        format: {
+          list: true,
+          indent: true
         }
-        quillInstance.keyboard.addBinding({
-          key: 'Backspace'
-        }, {
-          format: {
-            list: true,
-            indent: true
-          }
-        }, (range, context) => {
-          return handleBackspaceWithIndentetList(range, context, quillInstance);
-        });
-        // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
-        quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
-        quillInstance.keyboard.addBinding({
-          key: 'Escape'
-        }, () => {
-          // Remove focus from editor
-          quillInstance.blur();
+      }, (range, context) => {
+        return handleBackspaceWithIndentetList(range, context, quillInstance);
+      });
+      // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
+      quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
+      quillInstance.keyboard.addBinding({
+        key: 'Escape'
+      }, () => {
+        // Remove focus from editor
+        quillInstance.blur();
+      });
+      if (defaultValueRef.current) {
+        const delta = quillInstance.clipboard.convert({
+          html: defaultValueRef.current
         });
-        if (initialValue !== undefined) {
-          if (quillInstance.root.innerHTML !== initialValue) {
-            const delta = quillInstance.clipboard.convert({
-              html: initialValue
-            });
-            quillInstance.setContents(delta);
-          }
-        }
-        isMounted.current = true;
-        setQuill(quillInstance);
+        quillInstance.setContents(delta);
       }
-    }, []);
+      quillInstance.on(Quill__default["default"].events.TEXT_CHANGE, (...args) => handleChange(...args, quillInstance));
+      quillInstance.on(Quill__default["default"].events.SELECTION_CHANGE, range => {
+        if (!range) return;
+        handelFocus(quillInstance);
+      });
+      isMounted.current = true;
+      setQuill(quillInstance);
+      return () => {
+        ref && ref.current && (ref.current = null);
+        container.innerHTML = '';
+      };
+    }, [ref]);
     React.useEffect(() => {
       if (!quill) return;
       const handleBlur = () => {
-        const html = quill.root.innerHTML;
-        onBlur && onBlur(html);
+        setTimeout(() => {
+          const html = quill.root.innerHTML;
+          onBlur && onBlur(html);
+        }, 50);
       };
       quill.root.addEventListener('blur', handleBlur);
       return () => {
         quill.root.removeEventListener('blur', handleBlur);
       };
     }, [quill]);
-    React.useEffect(() => {
-      if (!quill) return;
-      quill.on('selection-change', (range, oldRange, source) => {
-        if (!range) return;
-        handelFocus();
-      });
-      return () => {
-        quill.off('selection-change');
-      };
-    }, [quill]);
-    React.useEffect(() => {
-      if (!quill) return;
-      quill.on('text-change', handleChange);
-      return () => {
-        quill.off('text-change', handleChange);
-      };
-    }, [quill, isMounted]);
-    React.useEffect(() => {
-      applySizes();
-    }, [quill, height, width, maxHeight, maxWidth, minHeight, minWidth]);
     React.useEffect(() => {
       if (!quill) return;
       quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
@@ -35699,7 +35693,7 @@ to {top: 100vh;}
         })
       })]
     });
-  };
+  });
 
   const getReducedArray = (array, indexesAmount) => {
     // copies x amount of indexes from array (in order) to a new array

package/esm/core/QuillEditor/index.js

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, forwardRef, useLayoutEffect } from 'react';
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
 import { basicToolbar, richToolbar } from './config';
@@ -55,7 +55,7 @@ Quill.register({
   'formats/ulist': MyListItem
 });
 Quill.register(CustomLinkSanitizer, true);
-const QuillEditor = ({
+const QuillEditor = /*#__PURE__*/forwardRef(({
   height,
   width,
   maxHeight,
@@ -82,12 +82,15 @@ const QuillEditor = ({
   disabled,
   pasteAsText,
   name,
-  id,
-  resize // Trenger vi denne?,
-}) => {
+  id
+}, ref) => {
   const [quill, setQuill] = useState(null);
   const isMounted = useRef(false);
   const containerRef = useRef(null);
+  const defaultValueRef = useRef(initialValue);
+  const onTextChangeRef = useRef(onChange);
+  // const onFocusRef = useRef(onFocus)
+  // const onBlurRef = useRef(onBlur)
   const {
     alert
   } = useTheme();
@@ -134,20 +137,17 @@ const QuillEditor = ({
       }
     }
   };
-  const handleChange = useCallback((delta, _oldDelta, source) => {
-    if (quill) {
-      const html = quill.root.innerHTML;
-      if (onChange) {
-        onChange(html, delta, source, quill);
-      }
+  const handleChange = useCallback((delta, _oldDelta, source, instance) => {
+    const html = instance.root.innerHTML;
+    if (onChange) {
+      onChange(html, delta, source, quill);
     }
   }, [quill, onChange]);
-  const handelFocus = useCallback(() => {
-    if (!quill) return;
-    const html = quill.root.innerHTML;
+  const handelFocus = useCallback(instance => {
+    const html = instance.root.innerHTML;
     onFocus && onFocus(html);
   }, [quill, onFocus]);
-  const applySizes = () => {
+  const applySizes = quill => {
     if (!quill) return;
     minHeight && (quill.root.style.minHeight = `${minHeight}px`);
     maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
@@ -156,86 +156,80 @@ const QuillEditor = ({
     height && (quill.root.style.height = `${height}px`);
     minWidth && (quill.root.style.minWidth = `${minWidth}px`);
   };
+  useLayoutEffect(() => {
+    onTextChangeRef.current = onChange;
+  });
   useEffect(() => {
-    if (!isMounted.current) {
-      const editor = document.createElement('div');
-      containerRef.current?.appendChild(editor);
-      const quillInstance = new Quill(editor, {
-        theme: 'snow',
-        modules: {
-          ...modules
-        },
-        formats,
-        placeholder,
-        bounds,
-        readOnly
-      });
-      const editorActual = editor.querySelector('.ql-editor');
-      if (editorActual) {
-        editorActual.setAttribute('id', id || 'ql-editor');
-        editorActual.setAttribute('name', name || 'ql-editor');
+    if (isMounted.current) return;
+    const container = containerRef.current;
+    const editor = container?.appendChild(container.ownerDocument.createElement('div'));
+    if (!editor) return;
+    const quillInstance = new Quill(editor, {
+      theme: 'snow',
+      modules: {
+        ...modules
+      },
+      formats,
+      placeholder,
+      bounds,
+      readOnly
+    });
+    ref && ref.current && (ref.current = editor);
+    const editorActual = editor.querySelector('.ql-editor');
+    if (editorActual) {
+      editorActual.setAttribute('id', id || 'ql-editor');
+      editorActual.setAttribute('name', name || 'ql-editor');
+    }
+    applySizes(quillInstance);
+    quillInstance.keyboard.addBinding({
+      key: 'Backspace'
+    }, {
+      format: {
+        list: true,
+        indent: true
       }
-      quillInstance.keyboard.addBinding({
-        key: 'Backspace'
-      }, {
-        format: {
-          list: true,
-          indent: true
-        }
-      }, (range, context) => {
-        return handleBackspaceWithIndentetList(range, context, quillInstance);
-      });
-      // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
-      quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
-      quillInstance.keyboard.addBinding({
-        key: 'Escape'
-      }, () => {
-        // Remove focus from editor
-        quillInstance.blur();
+    }, (range, context) => {
+      return handleBackspaceWithIndentetList(range, context, quillInstance);
+    });
+    // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
+    quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
+    quillInstance.keyboard.addBinding({
+      key: 'Escape'
+    }, () => {
+      // Remove focus from editor
+      quillInstance.blur();
+    });
+    if (defaultValueRef.current) {
+      const delta = quillInstance.clipboard.convert({
+        html: defaultValueRef.current
       });
-      if (initialValue !== undefined) {
-        if (quillInstance.root.innerHTML !== initialValue) {
-          const delta = quillInstance.clipboard.convert({
-            html: initialValue
-          });
-          quillInstance.setContents(delta);
-        }
-      }
-      isMounted.current = true;
-      setQuill(quillInstance);
+      quillInstance.setContents(delta);
     }
-  }, []);
+    quillInstance.on(Quill.events.TEXT_CHANGE, (...args) => handleChange(...args, quillInstance));
+    quillInstance.on(Quill.events.SELECTION_CHANGE, range => {
+      if (!range) return;
+      handelFocus(quillInstance);
+    });
+    isMounted.current = true;
+    setQuill(quillInstance);
+    return () => {
+      ref && ref.current && (ref.current = null);
+      container.innerHTML = '';
+    };
+  }, [ref]);
   useEffect(() => {
     if (!quill) return;
     const handleBlur = () => {
-      const html = quill.root.innerHTML;
-      onBlur && onBlur(html);
+      setTimeout(() => {
+        const html = quill.root.innerHTML;
+        onBlur && onBlur(html);
+      }, 50);
     };
     quill.root.addEventListener('blur', handleBlur);
     return () => {
       quill.root.removeEventListener('blur', handleBlur);
     };
   }, [quill]);
-  useEffect(() => {
-    if (!quill) return;
-    quill.on('selection-change', (range, oldRange, source) => {
-      if (!range) return;
-      handelFocus();
-    });
-    return () => {
-      quill.off('selection-change');
-    };
-  }, [quill]);
-  useEffect(() => {
-    if (!quill) return;
-    quill.on('text-change', handleChange);
-    return () => {
-      quill.off('text-change', handleChange);
-    };
-  }, [quill, isMounted]);
-  useEffect(() => {
-    applySizes();
-  }, [quill, height, width, maxHeight, maxWidth, minHeight, minWidth]);
   useEffect(() => {
     if (!quill) return;
     quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
@@ -296,5 +290,5 @@ const QuillEditor = ({
       })
     })]
   });
-};
+});
 export default QuillEditor;

package/lib/core/QuillEditor/index.d.ts

@@ -1,5 +1,5 @@
 import 'quill/dist/quill.snow.css';
 import { QuillEditorProps } from './models';
-declare const QuillEditor: React.FC<QuillEditorProps>;
+declare const QuillEditor: import("react").ForwardRefExoticComponent<QuillEditorProps & import("react").RefAttributes<HTMLDivElement>>;
 export default QuillEditor;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/QuillEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/index.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AA+D3C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoR3C,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/index.tsx"],"names":[],"mappings":"AAUA,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAiE3C,QAAA,MAAM,WAAW,6GA6RhB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/core/QuillEditor/index.js

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, forwardRef, useLayoutEffect } from 'react';
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
 import { basicToolbar, richToolbar } from './config';
@@ -55,7 +55,7 @@ Quill.register({
   'formats/ulist': MyListItem
 });
 Quill.register(CustomLinkSanitizer, true);
-const QuillEditor = ({
+const QuillEditor = /*#__PURE__*/forwardRef(({
   height,
   width,
   maxHeight,
@@ -82,12 +82,15 @@ const QuillEditor = ({
   disabled,
   pasteAsText,
   name,
-  id,
-  resize // Trenger vi denne?,
-}) => {
+  id
+}, ref) => {
   const [quill, setQuill] = useState(null);
   const isMounted = useRef(false);
   const containerRef = useRef(null);
+  const defaultValueRef = useRef(initialValue);
+  const onTextChangeRef = useRef(onChange);
+  // const onFocusRef = useRef(onFocus)
+  // const onBlurRef = useRef(onBlur)
   const {
     alert
   } = useTheme();
@@ -134,20 +137,17 @@ const QuillEditor = ({
       }
     }
   };
-  const handleChange = useCallback((delta, _oldDelta, source) => {
-    if (quill) {
-      const html = quill.root.innerHTML;
-      if (onChange) {
-        onChange(html, delta, source, quill);
-      }
+  const handleChange = useCallback((delta, _oldDelta, source, instance) => {
+    const html = instance.root.innerHTML;
+    if (onChange) {
+      onChange(html, delta, source, quill);
     }
   }, [quill, onChange]);
-  const handelFocus = useCallback(() => {
-    if (!quill) return;
-    const html = quill.root.innerHTML;
+  const handelFocus = useCallback(instance => {
+    const html = instance.root.innerHTML;
     onFocus && onFocus(html);
   }, [quill, onFocus]);
-  const applySizes = () => {
+  const applySizes = quill => {
     if (!quill) return;
     minHeight && (quill.root.style.minHeight = `${minHeight}px`);
     maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
@@ -156,86 +156,80 @@ const QuillEditor = ({
     height && (quill.root.style.height = `${height}px`);
     minWidth && (quill.root.style.minWidth = `${minWidth}px`);
   };
+  useLayoutEffect(() => {
+    onTextChangeRef.current = onChange;
+  });
   useEffect(() => {
-    if (!isMounted.current) {
-      const editor = document.createElement('div');
-      containerRef.current?.appendChild(editor);
-      const quillInstance = new Quill(editor, {
-        theme: 'snow',
-        modules: {
-          ...modules
-        },
-        formats,
-        placeholder,
-        bounds,
-        readOnly
-      });
-      const editorActual = editor.querySelector('.ql-editor');
-      if (editorActual) {
-        editorActual.setAttribute('id', id || 'ql-editor');
-        editorActual.setAttribute('name', name || 'ql-editor');
+    if (isMounted.current) return;
+    const container = containerRef.current;
+    const editor = container?.appendChild(container.ownerDocument.createElement('div'));
+    if (!editor) return;
+    const quillInstance = new Quill(editor, {
+      theme: 'snow',
+      modules: {
+        ...modules
+      },
+      formats,
+      placeholder,
+      bounds,
+      readOnly
+    });
+    ref && ref.current && (ref.current = editor);
+    const editorActual = editor.querySelector('.ql-editor');
+    if (editorActual) {
+      editorActual.setAttribute('id', id || 'ql-editor');
+      editorActual.setAttribute('name', name || 'ql-editor');
+    }
+    applySizes(quillInstance);
+    quillInstance.keyboard.addBinding({
+      key: 'Backspace'
+    }, {
+      format: {
+        list: true,
+        indent: true
       }
-      quillInstance.keyboard.addBinding({
-        key: 'Backspace'
-      }, {
-        format: {
-          list: true,
-          indent: true
-        }
-      }, (range, context) => {
-        return handleBackspaceWithIndentetList(range, context, quillInstance);
-      });
-      // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
-      quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
-      quillInstance.keyboard.addBinding({
-        key: 'Escape'
-      }, () => {
-        // Remove focus from editor
-        quillInstance.blur();
+    }, (range, context) => {
+      return handleBackspaceWithIndentetList(range, context, quillInstance);
+    });
+    // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
+    quillInstance.keyboard.bindings['Backspace'].unshift(quillInstance.keyboard.bindings['Backspace'].pop());
+    quillInstance.keyboard.addBinding({
+      key: 'Escape'
+    }, () => {
+      // Remove focus from editor
+      quillInstance.blur();
+    });
+    if (defaultValueRef.current) {
+      const delta = quillInstance.clipboard.convert({
+        html: defaultValueRef.current
       });
-      if (initialValue !== undefined) {
-        if (quillInstance.root.innerHTML !== initialValue) {
-          const delta = quillInstance.clipboard.convert({
-            html: initialValue
-          });
-          quillInstance.setContents(delta);
-        }
-      }
-      isMounted.current = true;
-      setQuill(quillInstance);
+      quillInstance.setContents(delta);
     }
-  }, []);
+    quillInstance.on(Quill.events.TEXT_CHANGE, (...args) => handleChange(...args, quillInstance));
+    quillInstance.on(Quill.events.SELECTION_CHANGE, range => {
+      if (!range) return;
+      handelFocus(quillInstance);
+    });
+    isMounted.current = true;
+    setQuill(quillInstance);
+    return () => {
+      ref && ref.current && (ref.current = null);
+      container.innerHTML = '';
+    };
+  }, [ref]);
   useEffect(() => {
     if (!quill) return;
     const handleBlur = () => {
-      const html = quill.root.innerHTML;
-      onBlur && onBlur(html);
+      setTimeout(() => {
+        const html = quill.root.innerHTML;
+        onBlur && onBlur(html);
+      }, 50);
     };
     quill.root.addEventListener('blur', handleBlur);
     return () => {
       quill.root.removeEventListener('blur', handleBlur);
     };
   }, [quill]);
-  useEffect(() => {
-    if (!quill) return;
-    quill.on('selection-change', (range, oldRange, source) => {
-      if (!range) return;
-      handelFocus();
-    });
-    return () => {
-      quill.off('selection-change');
-    };
-  }, [quill]);
-  useEffect(() => {
-    if (!quill) return;
-    quill.on('text-change', handleChange);
-    return () => {
-      quill.off('text-change', handleChange);
-    };
-  }, [quill, isMounted]);
-  useEffect(() => {
-    applySizes();
-  }, [quill, height, width, maxHeight, maxWidth, minHeight, minWidth]);
   useEffect(() => {
     if (!quill) return;
     quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
@@ -296,5 +290,5 @@ const QuillEditor = ({
       })
     })]
   });
-};
+});
 export default QuillEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "4.1.11",
+  "version": "4.1.13",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",