@bbl-digital/snorre 4.0.88 → 4.0.90

package/dist/bundle.js

@@ -35435,7 +35435,7 @@ to {top: 100vh;}
   }) => {
     const [quill, setQuill] = React.useState(null);
     const isMounted = React.useRef(false);
-    const editorRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     const {
       alert
     } = react.useTheme();
@@ -35453,9 +35453,20 @@ to {top: 100vh;}
         onChange(html, delta, source, quill);
       }
     }, [quill, onChange]);
+    const applySizes = () => {
+      if (!quill) return;
+      minHeight && (quill.root.style.minHeight = `${minHeight}px`);
+      maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
+      maxWidth && (quill.root.style.maxWidth = `${maxWidth}px`);
+      width && (quill.root.style.width = `${width}px`);
+      height && (quill.root.style.height = `${height}px`);
+      minWidth && (quill.root.style.minWidth = `${minWidth}px`);
+    };
     React.useEffect(() => {
-      if (editorRef.current && !isMounted.current) {
-        const quillInstance = new Quill__default["default"](editorRef.current, {
+      if (!isMounted.current) {
+        const editor = document.createElement('div');
+        containerRef.current?.appendChild(editor);
+        const quillInstance = new Quill__default["default"](editor, {
           theme: 'snow',
           modules,
           formats,
@@ -35467,10 +35478,12 @@ to {top: 100vh;}
         if (initialValue) {
           quillInstance.root.innerHTML = initialValue;
         }
-        applySizes(quillInstance);
         setQuill(quillInstance);
       }
-    }, [editorRef, modules, formats, placeholder, readOnly, onFocus, onBlur, initialValue, handleChange]);
+    }, []);
+    React.useEffect(() => {
+      applySizes();
+    }, [quill, height, width, maxHeight, maxWidth, minHeight, minWidth]);
     React.useEffect(() => {
       if (quill && disabled) {
         quill.disable();
@@ -35508,15 +35521,6 @@ to {top: 100vh;}
         quill.off('selection-change');
       };
     }, [quill?.container]);
-    const applySizes = quill => {
-      minHeight && (quill.root.style.minHeight = `${minHeight}px`);
-      maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
-      maxWidth && (quill.root.style.maxWidth = `${maxWidth}px`);
-      width && (quill.root.style.width = `${width}px`);
-      height && (quill.root.style.height = `${height}px`);
-      minWidth && (quill.root.style.minWidth = `${minWidth}px`);
-      console.log('applied sizes', quill.root.style);
-    };
     return jsxRuntime.jsxs("div", {
       css: theme => [styles.default(theme, maxHeight)],
       children: [label && jsxRuntime.jsx(Label, {
@@ -35531,7 +35535,7 @@ to {top: 100vh;}
           ...style
         },
         children: jsxRuntime.jsx("div", {
-          ref: editorRef
+          ref: containerRef
         })
       }), invalidMessage && jsxRuntime.jsx(ErrorWrapper, {
         children: jsxRuntime.jsxs(Text, {

package/esm/core/QuillEditor/index.js

@@ -61,7 +61,7 @@ const QuillEditor = ({
 }) => {
   const [quill, setQuill] = useState(null);
   const isMounted = useRef(false);
-  const editorRef = useRef(null);
+  const containerRef = useRef(null);
   const {
     alert
   } = useTheme();
@@ -79,9 +79,20 @@ const QuillEditor = ({
       onChange(html, delta, source, quill);
     }
   }, [quill, onChange]);
+  const applySizes = () => {
+    if (!quill) return;
+    minHeight && (quill.root.style.minHeight = `${minHeight}px`);
+    maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
+    maxWidth && (quill.root.style.maxWidth = `${maxWidth}px`);
+    width && (quill.root.style.width = `${width}px`);
+    height && (quill.root.style.height = `${height}px`);
+    minWidth && (quill.root.style.minWidth = `${minWidth}px`);
+  };
   useEffect(() => {
-    if (editorRef.current && !isMounted.current) {
-      const quillInstance = new Quill(editorRef.current, {
+    if (!isMounted.current) {
+      const editor = document.createElement('div');
+      containerRef.current?.appendChild(editor);
+      const quillInstance = new Quill(editor, {
         theme: 'snow',
         modules,
         formats,
@@ -93,10 +104,12 @@ const QuillEditor = ({
       if (initialValue) {
         quillInstance.root.innerHTML = initialValue;
       }
-      applySizes(quillInstance);
       setQuill(quillInstance);
     }
-  }, [editorRef, modules, formats, placeholder, readOnly, onFocus, onBlur, initialValue, handleChange]);
+  }, []);
+  useEffect(() => {
+    applySizes();
+  }, [quill, height, width, maxHeight, maxWidth, minHeight, minWidth]);
   useEffect(() => {
     if (quill && disabled) {
       quill.disable();
@@ -134,15 +147,6 @@ const QuillEditor = ({
       quill.off('selection-change');
     };
   }, [quill?.container]);
-  const applySizes = quill => {
-    minHeight && (quill.root.style.minHeight = `${minHeight}px`);
-    maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
-    maxWidth && (quill.root.style.maxWidth = `${maxWidth}px`);
-    width && (quill.root.style.width = `${width}px`);
-    height && (quill.root.style.height = `${height}px`);
-    minWidth && (quill.root.style.minWidth = `${minWidth}px`);
-    console.log('applied sizes', quill.root.style);
-  };
   return _jsxs("div", {
     css: theme => [styles.default(theme, maxHeight)],
     children: [label && _jsx(Label, {
@@ -157,7 +161,7 @@ const QuillEditor = ({
         ...style
       },
       children: _jsx("div", {
-        ref: editorRef
+        ref: containerRef
       })
     }), invalidMessage && _jsx(ErrorWrapper, {
       children: _jsxs(Text, {

package/jest.config.js

@@ -23,7 +23,12 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    quill: '<rootDir>/node_modules/quill/dist/quill.js',
   },
+  transformIgnorePatterns: [
+    'node_modules/quill',
+    '<rootDir>/src/QuillEditor/Attributors',
+  ],
 
   testEnvironment: 'jsdom',
 }

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;AAqC3C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuK3C,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"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;AAqC3C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkK3C,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/core/QuillEditor/index.js

@@ -61,7 +61,7 @@ const QuillEditor = ({
 }) => {
   const [quill, setQuill] = useState(null);
   const isMounted = useRef(false);
-  const editorRef = useRef(null);
+  const containerRef = useRef(null);
   const {
     alert
   } = useTheme();
@@ -79,9 +79,20 @@ const QuillEditor = ({
       onChange(html, delta, source, quill);
     }
   }, [quill, onChange]);
+  const applySizes = () => {
+    if (!quill) return;
+    minHeight && (quill.root.style.minHeight = `${minHeight}px`);
+    maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
+    maxWidth && (quill.root.style.maxWidth = `${maxWidth}px`);
+    width && (quill.root.style.width = `${width}px`);
+    height && (quill.root.style.height = `${height}px`);
+    minWidth && (quill.root.style.minWidth = `${minWidth}px`);
+  };
   useEffect(() => {
-    if (editorRef.current && !isMounted.current) {
-      const quillInstance = new Quill(editorRef.current, {
+    if (!isMounted.current) {
+      const editor = document.createElement('div');
+      containerRef.current?.appendChild(editor);
+      const quillInstance = new Quill(editor, {
         theme: 'snow',
         modules,
         formats,
@@ -93,10 +104,12 @@ const QuillEditor = ({
       if (initialValue) {
         quillInstance.root.innerHTML = initialValue;
       }
-      applySizes(quillInstance);
       setQuill(quillInstance);
     }
-  }, [editorRef, modules, formats, placeholder, readOnly, onFocus, onBlur, initialValue, handleChange]);
+  }, []);
+  useEffect(() => {
+    applySizes();
+  }, [quill, height, width, maxHeight, maxWidth, minHeight, minWidth]);
   useEffect(() => {
     if (quill && disabled) {
       quill.disable();
@@ -134,15 +147,6 @@ const QuillEditor = ({
       quill.off('selection-change');
     };
   }, [quill?.container]);
-  const applySizes = quill => {
-    minHeight && (quill.root.style.minHeight = `${minHeight}px`);
-    maxHeight && (quill.root.style.maxHeight = `${maxHeight}px`);
-    maxWidth && (quill.root.style.maxWidth = `${maxWidth}px`);
-    width && (quill.root.style.width = `${width}px`);
-    height && (quill.root.style.height = `${height}px`);
-    minWidth && (quill.root.style.minWidth = `${minWidth}px`);
-    console.log('applied sizes', quill.root.style);
-  };
   return _jsxs("div", {
     css: theme => [styles.default(theme, maxHeight)],
     children: [label && _jsx(Label, {
@@ -157,7 +161,7 @@ const QuillEditor = ({
         ...style
       },
       children: _jsx("div", {
-        ref: editorRef
+        ref: containerRef
       })
     }), invalidMessage && _jsx(ErrorWrapper, {
       children: _jsxs(Text, {

package/package.json

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