@bbl-digital/snorre 4.1.18 → 4.1.20

package/dist/bundle.js

@@ -25790,6 +25790,7 @@
     disableOutsideClick = true,
     hideCloseButton,
     disableScroll = true,
+    disableRefFocus,
     targetRefs,
     disableScrollableContent,
     headerCss,
@@ -25833,7 +25834,7 @@
     }, []);
     React.useEffect(() => {
       if (!modalRef.current) return;
-      if (isOpen) {
+      if (isOpen && !disableRefFocus) {
         modalRef.current.focus();
       }
       if (isOpen && disableScroll) {
@@ -35537,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`);
@@ -35560,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,
@@ -35578,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({
@@ -35607,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/Modal/index.js

@@ -18,6 +18,7 @@ function Modal({
   disableOutsideClick = true,
   hideCloseButton,
   disableScroll = true,
+  disableRefFocus,
   targetRefs,
   disableScrollableContent,
   headerCss,
@@ -61,7 +62,7 @@ function Modal({
   }, []);
   useEffect(() => {
     if (!modalRef.current) return;
-    if (isOpen) {
+    if (isOpen && !disableRefFocus) {
       modalRef.current.focus();
     }
     if (isOpen && disableScroll) {

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/Modal/index.d.ts

@@ -12,6 +12,8 @@ interface IProps extends React.HTMLAttributes<HTMLDialogElement> {
     width?: string;
     /** Disable close on outside click */
     disableOutsideClick?: boolean;
+    /** Disable focus on modal ref when opened */
+    disableRefFocus?: boolean;
     /** Hide close button */
     hideCloseButton?: boolean;
     /** Refs of scrollable elements */
@@ -41,7 +43,7 @@ interface IProps extends React.HTMLAttributes<HTMLDialogElement> {
     /** Children */
     children?: React.ReactNode | React.ReactNode[];
 }
-declare function Modal({ open, header, actionButton, width, children, disableOutsideClick, hideCloseButton, disableScroll, targetRefs, disableScrollableContent, headerCss, contentCss, disableLocalClose, toggleFullscreen, defaultFullscreen, disableFocusTrap, onClose, onCollapse, onFullscreenToggle, ...restProps }: IProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Modal({ open, header, actionButton, width, children, disableOutsideClick, hideCloseButton, disableScroll, disableRefFocus, targetRefs, disableScrollableContent, headerCss, contentCss, disableLocalClose, toggleFullscreen, defaultFullscreen, disableFocusTrap, onClose, onCollapse, onFullscreenToggle, ...restProps }: IProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace Modal {
     var Actions: ({ children, className, spaceBetween }: {
         children: React.ReactNode | React.ReactNode[];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Modal/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAsD,MAAM,OAAO,CAAA;AAkB1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAKjD,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC9D,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kCAAkC;IAClC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;IAClB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8HAA8H;IAC9H,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,KAAe,EACf,QAAQ,EACR,mBAA0B,EAC1B,eAAe,EACf,aAAoB,EACpB,UAAU,EACV,wBAAwB,EACxB,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,GAAG,SAAS,EACb,EAAE,MAAM,oDAkLR;kBAvMQ,KAAK;;;;;;;AA2Md,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Modal/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAsD,MAAM,OAAO,CAAA;AAkB1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAKjD,UAAU,MAAO,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC9D,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kCAAkC;IAClC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;IAClB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8HAA8H;IAC9H,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,KAAe,EACf,QAAQ,EACR,mBAA0B,EAC1B,eAAe,EACf,aAAoB,EACpB,eAAe,EACf,UAAU,EACV,wBAAwB,EACxB,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,kBAAkB,EAClB,GAAG,SAAS,EACb,EAAE,MAAM,oDAkLR;kBAxMQ,KAAK;;;;;;;AA4Md,eAAe,KAAK,CAAA"}

package/lib/core/Modal/index.js

@@ -18,6 +18,7 @@ function Modal({
   disableOutsideClick = true,
   hideCloseButton,
   disableScroll = true,
+  disableRefFocus,
   targetRefs,
   disableScrollableContent,
   headerCss,
@@ -61,7 +62,7 @@ function Modal({
   }, []);
   useEffect(() => {
     if (!modalRef.current) return;
-    if (isOpen) {
+    if (isOpen && !disableRefFocus) {
       modalRef.current.focus();
     }
     if (isOpen && disableScroll) {

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.18",
+  "version": "4.1.20",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",