@bbl-digital/snorre 4.1.19 → 4.1.20

package/dist/bundle.js

@@ -35538,12 +35538,13 @@ to {top: 100vh;}
         }
       }
     };
-    const handleChange = React.useCallback((delta, _oldDelta, source, instance) => {
-      const html = instance.root.innerHTML;
+    const handleChange = React.useCallback((delta, _oldDelta, source, quill) => {
+      if (!quill) return;
+      const html = quill.root.innerHTML;
       if (onChange) {
-        onChange(html, delta, source, instance);
+        onChange(html, delta, source, quill);
       }
-    }, [onChange]);
+    }, [onChange, quill]);
     const applySizes = quill => {
       if (!quill) return;
       minHeight && (quill.root.style.minHeight = `${minHeight}px`);
@@ -35561,7 +35562,10 @@ to {top: 100vh;}
       quillRef.current = new Quill__default["default"](`#editor${editorId.current}`, {
         theme: 'snow',
         modules: {
-          ...modules
+          ...modules,
+          keyboard: {
+            scrollingContainer: null
+          }
         },
         formats,
         placeholder,
@@ -35579,6 +35583,10 @@ to {top: 100vh;}
       }, (range, context) => {
         return handleBackspaceWithIndentetList(range, context, quillRef.current);
       });
+      quillRef.current.root.style.touchAction = 'pan-y';
+      quillRef.current.root.style.overflowY = 'auto';
+      quillRef.current.disable();
+      quillRef.current.enable(true);
       // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
       quillRef.current.keyboard.bindings['Backspace'].unshift(quillRef.current.keyboard.bindings['Backspace'].pop());
       quillRef.current.keyboard.addBinding({
@@ -35608,6 +35616,38 @@ to {top: 100vh;}
         quillRef.current = null;
       };
     }, [quillRef]);
+    React.useEffect(() => {
+      if (!quillRef.current) return;
+      const handleBlur = () => {
+        document.body.style.overflow = 'auto';
+      };
+      const handleFocus = () => {
+        console.log('sets hidden', document);
+        document.body.style.overflow = 'hidden';
+      };
+      quillRef.current.root.addEventListener('blur', handleBlur);
+      quillRef.current.root.addEventListener('focus', handleFocus);
+      return () => {
+        if (quillRef.current) {
+          quillRef.current.root.removeEventListener('blur', handleBlur);
+          quillRef.current.root.removeEventListener('focus', handleFocus);
+        }
+      };
+    }, [quillRef]);
+    React.useEffect(() => {
+      if (!quill) return;
+      const resizeQuill = () => {
+        const quillContainer = quill.container;
+        quillContainer.style.height = `${window.innerHeight - 100}px`; // Adjust as needed
+        quill.update();
+      };
+      window.addEventListener('resize', resizeQuill);
+      window.addEventListener('orientationchange', resizeQuill);
+      return () => {
+        window.removeEventListener('resize', resizeQuill);
+        window.removeEventListener('orientationchange', resizeQuill);
+      };
+    }, [quill]);
     React.useEffect(() => {
       if (!quill) return;
       quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {

package/esm/core/QuillEditor/QuillEditor.stories.js

@@ -10,6 +10,7 @@ export const Default = {
       onChange: e => console.log(e),
       onBlur: html => console.log('blur', html),
       onFocus: () => console.log('focus'),
+      maxHeight: 500,
       initialValue: `<p>Beskrivelse av selve styremøtet.</p><p><br></p><ol><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>test</li><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>test</li><li data-list="ordered" style="margin-left: 1em;"><span class="ql-ui" contenteditable="false"></span>test</li></ol>`,
       pasteAsText: true
     });

package/esm/core/QuillEditor/index.js

@@ -134,12 +134,13 @@ const QuillEditor = ({
       }
     }
   };
-  const handleChange = useCallback((delta, _oldDelta, source, instance) => {
-    const html = instance.root.innerHTML;
+  const handleChange = useCallback((delta, _oldDelta, source, quill) => {
+    if (!quill) return;
+    const html = quill.root.innerHTML;
     if (onChange) {
-      onChange(html, delta, source, instance);
+      onChange(html, delta, source, quill);
     }
-  }, [onChange]);
+  }, [onChange, quill]);
   const applySizes = quill => {
     if (!quill) return;
     minHeight && (quill.root.style.minHeight = `${minHeight}px`);
@@ -157,7 +158,10 @@ const QuillEditor = ({
     quillRef.current = new Quill(`#editor${editorId.current}`, {
       theme: 'snow',
       modules: {
-        ...modules
+        ...modules,
+        keyboard: {
+          scrollingContainer: null
+        }
       },
       formats,
       placeholder,
@@ -175,6 +179,10 @@ const QuillEditor = ({
     }, (range, context) => {
       return handleBackspaceWithIndentetList(range, context, quillRef.current);
     });
+    quillRef.current.root.style.touchAction = 'pan-y';
+    quillRef.current.root.style.overflowY = 'auto';
+    quillRef.current.disable();
+    quillRef.current.enable(true);
     // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
     quillRef.current.keyboard.bindings['Backspace'].unshift(quillRef.current.keyboard.bindings['Backspace'].pop());
     quillRef.current.keyboard.addBinding({
@@ -204,6 +212,38 @@ const QuillEditor = ({
       quillRef.current = null;
     };
   }, [quillRef]);
+  useEffect(() => {
+    if (!quillRef.current) return;
+    const handleBlur = () => {
+      document.body.style.overflow = 'auto';
+    };
+    const handleFocus = () => {
+      console.log('sets hidden', document);
+      document.body.style.overflow = 'hidden';
+    };
+    quillRef.current.root.addEventListener('blur', handleBlur);
+    quillRef.current.root.addEventListener('focus', handleFocus);
+    return () => {
+      if (quillRef.current) {
+        quillRef.current.root.removeEventListener('blur', handleBlur);
+        quillRef.current.root.removeEventListener('focus', handleFocus);
+      }
+    };
+  }, [quillRef]);
+  useEffect(() => {
+    if (!quill) return;
+    const resizeQuill = () => {
+      const quillContainer = quill.container;
+      quillContainer.style.height = `${window.innerHeight - 100}px`; // Adjust as needed
+      quill.update();
+    };
+    window.addEventListener('resize', resizeQuill);
+    window.addEventListener('orientationchange', resizeQuill);
+    return () => {
+      window.removeEventListener('resize', resizeQuill);
+      window.removeEventListener('orientationchange', resizeQuill);
+    };
+  }, [quill]);
   useEffect(() => {
     if (!quill) return;
     quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {

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

@@ -1 +1 @@
-{"version":3,"file":"QuillEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/QuillEditor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;wBAKlC,IAAI;AAHT,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAanB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAKtB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAKvB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAQrB,CAAA"}
+{"version":3,"file":"QuillEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/QuillEditor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;wBAKlC,IAAI;AAHT,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAcnB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAKtB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAKvB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAQrB,CAAA"}

package/lib/core/QuillEditor/QuillEditor.stories.js

@@ -10,6 +10,7 @@ export const Default = {
       onChange: e => console.log(e),
       onBlur: html => console.log('blur', html),
       onFocus: () => console.log('focus'),
+      maxHeight: 500,
       initialValue: `<p>Beskrivelse av selve styremøtet.</p><p><br></p><ol><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>test</li><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>test</li><li data-list="ordered" style="margin-left: 1em;"><span class="ql-ui" contenteditable="false"></span>test</li></ol>`,
       pasteAsText: true
     });

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":"AASA,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AA+D3C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyP3C,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/QuillEditor/index.tsx"],"names":[],"mappings":"AASA,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AA+D3C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2S3C,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/core/QuillEditor/index.js

@@ -134,12 +134,13 @@ const QuillEditor = ({
       }
     }
   };
-  const handleChange = useCallback((delta, _oldDelta, source, instance) => {
-    const html = instance.root.innerHTML;
+  const handleChange = useCallback((delta, _oldDelta, source, quill) => {
+    if (!quill) return;
+    const html = quill.root.innerHTML;
     if (onChange) {
-      onChange(html, delta, source, instance);
+      onChange(html, delta, source, quill);
     }
-  }, [onChange]);
+  }, [onChange, quill]);
   const applySizes = quill => {
     if (!quill) return;
     minHeight && (quill.root.style.minHeight = `${minHeight}px`);
@@ -157,7 +158,10 @@ const QuillEditor = ({
     quillRef.current = new Quill(`#editor${editorId.current}`, {
       theme: 'snow',
       modules: {
-        ...modules
+        ...modules,
+        keyboard: {
+          scrollingContainer: null
+        }
       },
       formats,
       placeholder,
@@ -175,6 +179,10 @@ const QuillEditor = ({
     }, (range, context) => {
       return handleBackspaceWithIndentetList(range, context, quillRef.current);
     });
+    quillRef.current.root.style.touchAction = 'pan-y';
+    quillRef.current.root.style.overflowY = 'auto';
+    quillRef.current.disable();
+    quillRef.current.enable(true);
     // Move the last binding in the list, to the top. Ensure that the custom binding is called first.
     quillRef.current.keyboard.bindings['Backspace'].unshift(quillRef.current.keyboard.bindings['Backspace'].pop());
     quillRef.current.keyboard.addBinding({
@@ -204,6 +212,38 @@ const QuillEditor = ({
       quillRef.current = null;
     };
   }, [quillRef]);
+  useEffect(() => {
+    if (!quillRef.current) return;
+    const handleBlur = () => {
+      document.body.style.overflow = 'auto';
+    };
+    const handleFocus = () => {
+      console.log('sets hidden', document);
+      document.body.style.overflow = 'hidden';
+    };
+    quillRef.current.root.addEventListener('blur', handleBlur);
+    quillRef.current.root.addEventListener('focus', handleFocus);
+    return () => {
+      if (quillRef.current) {
+        quillRef.current.root.removeEventListener('blur', handleBlur);
+        quillRef.current.root.removeEventListener('focus', handleFocus);
+      }
+    };
+  }, [quillRef]);
+  useEffect(() => {
+    if (!quill) return;
+    const resizeQuill = () => {
+      const quillContainer = quill.container;
+      quillContainer.style.height = `${window.innerHeight - 100}px`; // Adjust as needed
+      quill.update();
+    };
+    window.addEventListener('resize', resizeQuill);
+    window.addEventListener('orientationchange', resizeQuill);
+    return () => {
+      window.removeEventListener('resize', resizeQuill);
+      window.removeEventListener('orientationchange', resizeQuill);
+    };
+  }, [quill]);
   useEffect(() => {
     if (!quill) return;
     quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {

package/package.json

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