@bbl-digital/snorre 4.2.74 → 4.2.75

package/lib/core/QuillEditor/index.js

@@ -1,307 +1,245 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _quill = _interopRequireDefault(require("quill"));
-var _config = require("./config");
-var _styles = require("./styles");
-var _Text = _interopRequireDefault(require("../Text"));
-var _IconErrorOutline = _interopRequireDefault(require("../../icons/General/IconErrorOutline"));
-var _react2 = require("@emotion/react");
-var _LinkSanitizer = require("./classes/LinkSanitizer");
-var _dompurify = _interopRequireDefault(require("dompurify"));
-require("quill/dist/quill.snow.css");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /** @jsxImportSource @emotion/react */ // Colors
-_quill.default.register(_quill.default.import('attributors/style/color'), true);
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useRef, useState, useEffect, useCallback } from 'react';
+import Quill from 'quill';
+import { basicToolbar, richToolbar } from './config';
+import { ErrorWrapper, Label, styles } from './styles';
+import Text from '../Text';
+import IconErrorOutline from '../../icons/General/IconErrorOutline';
+import { useTheme } from '@emotion/react';
+import { CustomLinkSanitizer } from './classes/LinkSanitizer';
+import DOMPurify from 'dompurify';
+import 'quill/dist/quill.snow.css';
+// Colors
+Quill.register(Quill.import('attributors/style/color'), true);
 // Background colors
-_quill.default.register(_quill.default.import('attributors/style/background'), true);
+Quill.register(Quill.import('attributors/style/background'), true);
 //Text direction
-_quill.default.register(_quill.default.import('attributors/style/direction'), true);
+Quill.register(Quill.import('attributors/style/direction'), true);
 //Alignment
-_quill.default.register(_quill.default.import('attributors/style/align'), true);
+Quill.register(Quill.import('attributors/style/align'), true);
 // Image
-_quill.default.register('attributors/style/image', true);
+Quill.register('attributors/style/image', true);
 // Video
-_quill.default.register('attributors/style/video', true);
+Quill.register('attributors/style/video', true);
 // Strike
-_quill.default.register('attributors/style/strike', true);
+Quill.register('attributors/style/strike', true);
 // Table
-_quill.default.register('attributors/style/table', true);
+Quill.register('attributors/style/table', true);
 // Underline
-_quill.default.register('attributors/style/underline', true);
+Quill.register('attributors/style/underline', true);
 // Bold
-_quill.default.register('attributors/style/bold', true);
+Quill.register('attributors/style/bold', true);
 // Text sizes
-const Size = _quill.default.import('attributors/style/size');
+const Size = Quill.import('attributors/style/size');
 Size.whitelist = ['0.75em', '1em', '1.5em', '2.5em'];
-_quill.default.register(Size, true);
-
+Quill.register(Size, true);
 // Font
-const Font = _quill.default.import('formats/font');
+const Font = Quill.import('formats/font');
 Font.whitelist = ['Source Sans Pro', 'sans-serif'];
-_quill.default.register(Font, true);
-_quill.default.register(_LinkSanitizer.CustomLinkSanitizer, true);
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "108zowc",
-  styles: "display:flex;gap:4px;align-items:baseline"
-} : {
-  name: "1jvq0lt-WordCount",
-  styles: "display:flex;gap:4px;align-items:baseline;label:WordCount;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1soh0gv",
-  styles: "margin-top:4px"
-} : {
-  name: "14rbig3-QuillEditor",
-  styles: "margin-top:4px;label:QuillEditor;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const QuillEditor = ({
-  height,
-  width,
-  maxHeight,
-  minHeight = '150px',
-  maxWidth,
-  minWidth,
-  placeholder,
-  initialValue,
-  overrideValue,
-  label,
-  readOnly = false,
-  maxlenght = 0,
-  wordCount = true,
-  type = 'basic',
-  customModules = {
-    toolbar: _config.basicToolbar
-  },
-  formats = ['header', 'size', 'bold', 'italic', 'underline', 'list', 'indent', 'link', 'image', 'align'],
-  bounds,
-  onChange,
-  onFocus,
-  onBlur,
-  invalidMessage,
-  className,
-  disabled,
-  pasteAsText,
-  resizable
-}) => {
-  const [quill, setQuill] = (0, _react.useState)(null);
-  const isMounted = (0, _react.useRef)(false);
-  const quillRef = (0, _react.useRef)(null);
-  const defaultValueRef = (0, _react.useRef)(initialValue);
-  const editorId = (0, _react.useRef)(new Date().getTime() + (100 * Math.random()).toFixed(0));
-  const [currentLength, setCurrentLength] = (0, _react.useState)(initialValue?.length || 0);
-  const isWordCount = wordCount && maxlenght > 0;
-  const {
-    alert
-  } = (0, _react2.useTheme)();
-  const toolbars = {
-    basic: _config.basicToolbar,
-    rich: _config.richToolbar,
-    custom: customModules.toolbar
-  };
-  const handleBackspaceWithIndentetList = (0, _react.useCallback)((range, _context, quill) => {
-    if (!quill) return true;
-    const [line, offset] = quill.getLine(range.index);
-    const formats = line.formats();
-    if (formats.list && formats.indent) {
-      // Check if we're at the beginning of the line
-      if (range.index === range.index - offset) {
-        // Remove indent
-        const indent = parseInt(formats.indent, 10);
-        quill.format('indent', indent ? indent - 1 : false);
-        quill.format('list', formats.list);
-        return false;
-      } else if (range.length === 0 && offset > 0) {
-        // If there's content and the cursor is not at the beginning,
-        // let Quill handle it normally
-        return true;
-      } else {
-        // Remove indent
-        quill.format('indent', false);
-        quill.format('list', formats.list);
-        return false;
-      }
-    }
-    return true;
-  }, [quill]);
-  const modules = {
-    toolbar: toolbars[type || 'basic'],
-    clipboard: {
-      matchVisual: false,
-      onPaste: e => {
-        if (pasteAsText && quill) {
-          e.preventDefault();
-          const text = e.clipboardData?.getData('text/plain') || '';
-          const range = quill.getSelection();
-          if (range) {
-            quill.insertText(range.index, text);
-          }
+Quill.register(Font, true);
+Quill.register(CustomLinkSanitizer, true);
+const QuillEditor = ({ height, width, maxHeight, minHeight = '150px', maxWidth, minWidth, placeholder, initialValue, overrideValue, label, readOnly = false, maxlenght = 0, wordCount = true, type = 'basic', customModules = {
+    toolbar: basicToolbar,
+}, formats = [
+    'header',
+    'size',
+    'bold',
+    'italic',
+    'underline',
+    'list',
+    'indent',
+    'link',
+    'image',
+    'align',
+], bounds, onChange, onFocus, onBlur, invalidMessage, className, disabled, pasteAsText, resizable, }) => {
+    const [quill, setQuill] = useState(null);
+    const isMounted = useRef(false);
+    const quillRef = useRef(null);
+    const defaultValueRef = useRef(initialValue);
+    const editorId = useRef(new Date().getTime() + (100 * Math.random()).toFixed(0));
+    const [currentLength, setCurrentLength] = useState(initialValue?.length || 0);
+    const isWordCount = wordCount && maxlenght > 0;
+    const { alert } = useTheme();
+    const toolbars = {
+        basic: basicToolbar,
+        rich: richToolbar,
+        custom: customModules.toolbar,
+    };
+    const handleBackspaceWithIndentetList = useCallback((range, _context, quill) => {
+        if (!quill)
+            return true;
+        const [line, offset] = quill.getLine(range.index);
+        const formats = line.formats();
+        if (formats.list && formats.indent) {
+            // Check if we're at the beginning of the line
+            if (range.index === range.index - offset) {
+                // Remove indent
+                const indent = parseInt(formats.indent, 10);
+                quill.format('indent', indent ? indent - 1 : false);
+                quill.format('list', formats.list);
+                return false;
+            }
+            else if (range.length === 0 && offset > 0) {
+                // If there's content and the cursor is not at the beginning,
+                // let Quill handle it normally
+                return true;
+            }
+            else {
+                // Remove indent
+                quill.format('indent', false);
+                quill.format('list', formats.list);
+                return false;
+            }
         }
-      }
-    }
-  };
-  const formatOutputHtml = (0, _react.useCallback)(html => {
-    let formattedHtml = html.replace(/<p[^>]*?><\/p>/g, '<br />');
-    formattedHtml = formattedHtml.replace(/&nbsp;/g, ' ');
-    return formattedHtml;
-  }, []);
-  const handleChange = (0, _react.useCallback)(quill => {
-    if (!quill) return;
-    const html = _dompurify.default.sanitize(quill.getSemanticHTML(), {
-      USE_PROFILES: {
-        html: true
-      }
-    });
-    const formattedHtml = formatOutputHtml(html);
-    const length = quill.getLength() - 1;
-    if (length === 0) {
-      setCurrentLength(0);
-    } else {
-      setCurrentLength(formattedHtml.length);
-    }
-    onChange?.(formattedHtml, length);
-  }, [onChange, quill]);
-  const WordCount = () => {
-    return (0, _jsxRuntime.jsxs)("div", {
-      css: _ref,
-      children: [(0, _jsxRuntime.jsxs)(_Text.default, {
-        children: [currentLength, " / ", maxlenght]
-      }), (0, _jsxRuntime.jsxs)(_Text.default, {
-        small: true,
-        color: "textSecondary",
-        children: ["(NB: Formatering er inkludert i maksgrensen)", ' ']
-      })]
-    });
-  };
-  (0, _react.useEffect)(() => {
-    if (isMounted.current) return;
-    quillRef.current = new _quill.default(`#editor${editorId.current}`, {
-      debug: false,
-      theme: 'snow',
-      bounds: bounds || `#editor${editorId.current}`,
-      modules: {
-        ...modules,
-        keyboard: {
-          scrollingContainer: null
+        return true;
+    }, [quill]);
+    const modules = {
+        toolbar: toolbars[type || 'basic'],
+        clipboard: {
+            matchVisual: false,
+            onPaste: (e) => {
+                if (pasteAsText && quill) {
+                    e.preventDefault();
+                    const text = e.clipboardData?.getData('text/plain') || '';
+                    const range = quill.getSelection();
+                    if (range) {
+                        quill.insertText(range.index, text);
+                    }
+                }
+            },
+        },
+    };
+    const formatOutputHtml = useCallback((html) => {
+        let formattedHtml = html.replace(/<p[^>]*?><\/p>/g, '<br />');
+        formattedHtml = formattedHtml.replace(/&nbsp;/g, ' ');
+        return formattedHtml;
+    }, []);
+    const handleChange = useCallback((quill) => {
+        if (!quill)
+            return;
+        const html = DOMPurify.sanitize(quill.getSemanticHTML(), {
+            USE_PROFILES: { html: true },
+        });
+        const formattedHtml = formatOutputHtml(html);
+        const length = quill.getLength() - 1;
+        if (length === 0) {
+            setCurrentLength(0);
         }
-      },
-      formats,
-      placeholder,
-      readOnly
-    });
-    quillRef.current.keyboard.addBinding({
-      key: 'Backspace'
-    }, {
-      format: {
-        list: true,
-        indent: true
-      }
-    }, (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.bindings['Tab'].unshift(quillRef.current.keyboard.bindings['Tab'].pop());
-    quillRef.current.keyboard.addBinding({
-      key: 'Escape'
-    }, () => {
-      // Remove focus from editor
-      quillRef.current.blur();
-    });
-    if (defaultValueRef.current) {
-      const delta = quillRef.current.clipboard.convert({
-        html: defaultValueRef.current
-      });
-      const formattedDelta = delta.ops.map(op => {
-        if (op.attributes && op.attributes.indent) {
-          op.attributes.indent = parseInt(op.attributes.indent, 10);
+        else {
+            setCurrentLength(formattedHtml.length);
         }
-        return op;
-      });
-      quillRef.current.setContents(formattedDelta);
-    }
-    if (onFocus || onBlur) {
-      quillRef.current.on(_quill.default.events.SELECTION_CHANGE, (range, oldRange, source) => {
-        const hasFocus = range && !oldRange;
-        const hasBlur = !range && oldRange;
-        if (onFocus && hasFocus) onFocus(quillRef.current.root.innerHTML);
-        if (onBlur && hasBlur) onBlur(quillRef.current.root.innerHTML);
-      });
-    }
-    isMounted.current = true;
-    setQuill(quillRef.current);
-    return () => {
-      quillRef.current = null;
+        onChange?.(formattedHtml, length);
+    }, [onChange, quill]);
+    const WordCount = () => {
+        return (_jsxs("div", { css: { display: 'flex', gap: '4px', alignItems: 'baseline' }, children: [_jsxs(Text, { children: [currentLength, " / ", maxlenght] }), _jsxs(Text, { small: true, color: "textSecondary", children: ["(NB: Formatering er inkludert i maksgrensen)", ' '] })] }));
     };
-  }, [quillRef]);
-  (0, _react.useEffect)(() => {
-    if (!quill) return;
-    quill.on(_quill.default.events.TEXT_CHANGE, () => handleChange(quill));
-  }, [quill, handleChange]);
-  (0, _react.useEffect)(() => {
-    if (!quill) return;
-    quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
-      if (!pasteAsText) return delta;
-      let ops = [];
-      delta.ops.forEach(op => {
-        if (op.insert && typeof op.insert === 'string') {
-          ops.push({
-            insert: op.insert
-          });
+    useEffect(() => {
+        if (isMounted.current)
+            return;
+        quillRef.current = new Quill(`#editor${editorId.current}`, {
+            debug: false,
+            theme: 'snow',
+            bounds: bounds || `#editor${editorId.current}`,
+            modules: {
+                ...modules,
+                keyboard: {
+                    scrollingContainer: null,
+                },
+            },
+            formats,
+            placeholder,
+            readOnly,
+        });
+        quillRef.current.keyboard.addBinding({ key: 'Backspace' }, {
+            format: {
+                list: true,
+                indent: true,
+            },
+        }, (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.bindings['Tab'].unshift(quillRef.current.keyboard.bindings['Tab'].pop());
+        quillRef.current.keyboard.addBinding({ key: 'Escape' }, () => {
+            // Remove focus from editor
+            quillRef.current.blur();
+        });
+        if (defaultValueRef.current) {
+            const delta = quillRef.current.clipboard.convert({
+                html: defaultValueRef.current,
+            });
+            const formattedDelta = delta.ops.map((op) => {
+                if (op.attributes && op.attributes.indent) {
+                    op.attributes.indent = parseInt(op.attributes.indent, 10);
+                }
+                return op;
+            });
+            quillRef.current.setContents(formattedDelta);
+        }
+        if (onFocus || onBlur) {
+            quillRef.current.on(Quill.events.SELECTION_CHANGE, (range, oldRange, source) => {
+                const hasFocus = range && !oldRange;
+                const hasBlur = !range && oldRange;
+                if (onFocus && hasFocus)
+                    onFocus(quillRef.current.root.innerHTML);
+                if (onBlur && hasBlur)
+                    onBlur(quillRef.current.root.innerHTML);
+            });
         }
-      });
-      delta.ops = ops;
-      return delta;
-    });
-  }, [quill, pasteAsText]);
-  (0, _react.useEffect)(() => {
-    if (quill && overrideValue !== undefined) {
-      const currentContent = quill.root.innerHTML;
-      if (currentContent !== overrideValue) {
-        const delta = quill.clipboard.convert({
-          html: overrideValue
+        isMounted.current = true;
+        setQuill(quillRef.current);
+        return () => {
+            quillRef.current = null;
+        };
+    }, [quillRef]);
+    useEffect(() => {
+        if (!quill)
+            return;
+        quill.on(Quill.events.TEXT_CHANGE, () => handleChange(quill));
+    }, [quill, handleChange]);
+    useEffect(() => {
+        if (!quill)
+            return;
+        quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+            if (!pasteAsText)
+                return delta;
+            let ops = [];
+            delta.ops.forEach((op) => {
+                if (op.insert && typeof op.insert === 'string') {
+                    ops.push({
+                        insert: op.insert,
+                    });
+                }
+            });
+            delta.ops = ops;
+            return delta;
         });
-        quill.setContents(delta);
-      }
-    }
-  }, [quill, overrideValue]);
-  (0, _react.useEffect)(() => {
-    if (quill && (disabled || readOnly)) {
-      quill.enable(false);
-    } else if (quill) {
-      quill.enable(true);
-    }
-  }, [readOnly, quill]);
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: className,
-    css: theme => [_styles.styles.default(theme, maxHeight, minHeight, width, minWidth, maxWidth, height, resizable)],
-    children: [label && (0, _jsxRuntime.jsx)(_styles.Label, {
-      children: label
-    }), (0, _jsxRuntime.jsx)("div", {
-      id: `editor${editorId.current}`
-    }), isWordCount && (0, _jsxRuntime.jsx)("div", {
-      css: _ref2,
-      children: (0, _jsxRuntime.jsx)(WordCount, {})
-    }), invalidMessage && (0, _jsxRuntime.jsx)(_styles.ErrorWrapper, {
-      children: (0, _jsxRuntime.jsxs)(_Text.default, {
-        color: alert,
-        children: [(0, _jsxRuntime.jsx)(_IconErrorOutline.default, {
-          size: "16px",
-          color: alert
-        }), " ", invalidMessage]
-      })
-    })]
-  });
+    }, [quill, pasteAsText]);
+    useEffect(() => {
+        if (quill && overrideValue !== undefined) {
+            const currentContent = quill.root.innerHTML;
+            if (currentContent !== overrideValue) {
+                const delta = quill.clipboard.convert({ html: overrideValue });
+                quill.setContents(delta);
+            }
+        }
+    }, [quill, overrideValue]);
+    useEffect(() => {
+        if (quill && (disabled || readOnly)) {
+            quill.enable(false);
+        }
+        else if (quill) {
+            quill.enable(true);
+        }
+    }, [readOnly, quill]);
+    return (_jsxs("div", { className: className, css: (theme) => [
+            styles.default(theme, maxHeight, minHeight, width, minWidth, maxWidth, height, resizable),
+        ], children: [label && _jsx(Label, { children: label }), _jsx("div", { id: `editor${editorId.current}` }), isWordCount && (_jsx("div", { css: { marginTop: '4px' }, children: _jsx(WordCount, {}) })), invalidMessage && (_jsx(ErrorWrapper, { children: _jsxs(Text, { color: alert, children: [_jsx(IconErrorOutline, { size: "16px", color: alert }), " ", invalidMessage] }) }))] }));
 };
-var _default = exports.default = QuillEditor;
+export default QuillEditor;

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

@@ -77,4 +77,3 @@ interface QuillRef {
     current: Quill | null;
 }
 export { QuillToolbarConfig, QuillEditorProps, QuillEditorRef, QuillRef };
-//# sourceMappingURL=models.d.ts.map

package/lib/core/QuillEditor/models.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

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

@@ -10,4 +10,3 @@ export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map