@mgdis/mg-components 6.5.0 → 6.6.0

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js

@@ -0,0 +1,110 @@
+import { isValidString } from "@mgdis/stencil-helpers";
+import Quill from "quill";
+/**
+ * HTML element type guard
+ * @param element - element to test
+ * @returns truthy if element is an HTMLElement
+ */
+const isHtmlElement = (element) => Boolean(element.tagName);
+/**
+ * Implements the range API properly in Native Shadow
+ * @param rootNode - root node
+ * @returns selection
+ */
+const getNativeRange = (rootNode) => {
+    try {
+        if (typeof document.createElement('div').attachShadow({ mode: 'open' }).getSelection === 'function') {
+            // In Chromium, the shadow root has a getSelection function which returns the range
+            return rootNode.getSelection().getRangeAt(0);
+        }
+        const selection = window.getSelection();
+        // Webkit range retrieval is done with getComposedRanges (see: https://bugs.webkit.org/show_bug.cgi?id=163921)
+        if (typeof selection.getComposedRanges === 'function') {
+            return selection.getComposedRanges(rootNode)[0];
+        }
+        // Gecko implements the range API properly in Native Shadow: https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
+        return selection.getRangeAt(0);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+/**
+ * Quill overrides to support shadow dom
+ * https://github.com/slab/quill/issues/2961#issuecomment-1775999845
+ * @param editor - Quill instance
+ */
+const setQuillOverrides = (editor) => {
+    const getRootNode = () => editor.root.getRootNode();
+    // Original implementation uses document.active element but with an imlplementation in web-component with shadow root we need compare with it.
+    editor.selection.hasFocus = () => getRootNode().activeElement === editor.root;
+    // Original implementation uses document.getSelection which does not work in Native Shadow.
+    // Replace document.getSelection with shadow dom equivalent (different for each browser)
+    editor.selection.getNativeRange = () => {
+        const nativeRange = getNativeRange(getRootNode());
+        return Boolean(nativeRange) ? editor.selection.normalizeNative(nativeRange) : null;
+    };
+    // Original implementation relies on Selection.addRange to programatically set the range, which does not work in Webkit with Native Shadow. Selection.addRange works fine in Chromium and Gecko.
+    editor.selection.setNativeRange = (startContainer, startOffset, endContainer = startContainer, endOffset = startOffset, force = false) => {
+        if ([startContainer === null || startContainer === void 0 ? void 0 : startContainer.parentNode, editor.root.parentNode, endContainer === null || endContainer === void 0 ? void 0 : endContainer.parentNode].some(node => node == null)) {
+            return;
+        }
+        const selection = window.getSelection();
+        if (!editor.selection.hasFocus())
+            editor.root.focus();
+        const native = (editor.selection.getNativeRange() || {}).native;
+        if (!Boolean(native) ||
+            force ||
+            startContainer !== native.startContainer ||
+            startOffset !== native.startOffset ||
+            endContainer !== native.endContainer ||
+            endOffset !== native.endOffset) {
+            if (isHtmlElement(startContainer) && startContainer.tagName === 'BR') {
+                startOffset = [].indexOf.call(startContainer.parentNode.childNodes, startContainer);
+                startContainer = startContainer.parentNode;
+            }
+            if (isHtmlElement(endContainer) && endContainer.tagName === 'BR') {
+                endOffset = [].indexOf.call(endContainer.parentNode.childNodes, endContainer);
+                endContainer = endContainer.parentNode;
+            }
+            selection.setBaseAndExtent(startContainer, startOffset, endContainer, endOffset);
+        }
+    };
+    // Subscribe to selection change separately, because emitter in Quill doesn't catch this event in Shadow DOM
+    document.addEventListener('selectionchange', () => {
+        editor.selection.update();
+    });
+};
+/**
+ * Fixes for handling text selection in Quill when used within the Shadow DOM.
+ * - Fixes focus detection
+ * - Adapts native range handling to work with the Shadow DOM
+ * - Correctly manages text selection across Shadow DOM boundaries
+ * - Sets up selection change events
+ * @returns Quill instance
+ */
+export const defineEditor = (wrapperElement, { value, modules, readOnly, placeholder, handleTextChange, handleFocus, handleBlur }) => {
+    const toolbarOptions = {
+        toolbar: [['bold', 'italic', 'underline'], [{ list: 'ordered' }, { list: 'bullet' }], ['link'], ['clean']],
+    };
+    const editor = new Quill(wrapperElement.querySelector('div'), {
+        theme: 'snow',
+        modules: modules || toolbarOptions,
+        readOnly,
+        placeholder,
+    });
+    if (isValidString(value) && /<[a-z][\s\S]*>/i.test(value)) {
+        editor.clipboard.dangerouslyPasteHTML(value);
+    }
+    else if (isValidString(value)) {
+        editor.setText(value);
+    }
+    const editorContent = wrapperElement.querySelector('.ql-editor');
+    editorContent.addEventListener('focus', handleFocus);
+    editorContent.addEventListener('blur', handleBlur);
+    // Add an event listener for the text-change event
+    editor.on('text-change', handleTextChange);
+    setQuillOverrides(editor);
+    return editor;
+};
+//# sourceMappingURL=index.js.map

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-rich-text-editor/editor/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { isValidString } from '@mgdis/stencil-helpers';\nimport Quill, { type QuillOptions } from 'quill';\n\nexport type EditorOptionsType = QuillOptions & {\n  value: string;\n  handleTextChange: () => void;\n  handleFocus: () => void;\n  handleBlur: () => void;\n};\n\nexport type EditorType = Quill;\n\ntype ExtendSelection = Selection & { getComposedRanges?: (root: Node) => Range[] };\n\ntype ExtendedShadowRoot = ShadowRoot & { getSelection(): ExtendSelection };\n\ninterface IdefineEditor {\n  (wrapperElement: HTMLElement, config: EditorOptionsType): EditorType;\n}\n\n/**\n * HTML element type guard\n * @param element - element to test\n * @returns truthy if element is an HTMLElement\n */\nconst isHtmlElement = (element: unknown): element is HTMLElement => Boolean((element as HTMLElement).tagName);\n\n/**\n * Implements the range API properly in Native Shadow\n * @param rootNode - root node\n * @returns selection\n */\nconst getNativeRange = (rootNode: ExtendedShadowRoot | Document) => {\n  try {\n    if (typeof (document.createElement('div').attachShadow({ mode: 'open' }) as ExtendedShadowRoot).getSelection === 'function') {\n      // In Chromium, the shadow root has a getSelection function which returns the range\n      return rootNode.getSelection().getRangeAt(0);\n    }\n    const selection: ExtendSelection = window.getSelection();\n    // Webkit range retrieval is done with getComposedRanges (see: https://bugs.webkit.org/show_bug.cgi?id=163921)\n    if (typeof selection.getComposedRanges === 'function') {\n      return selection.getComposedRanges(rootNode)[0];\n    }\n    // Gecko implements the range API properly in Native Shadow: https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt\n    return selection.getRangeAt(0);\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Quill overrides to support shadow dom\n * https://github.com/slab/quill/issues/2961#issuecomment-1775999845\n * @param editor - Quill instance\n */\nconst setQuillOverrides = (editor: EditorType): void => {\n  const getRootNode = () => editor.root.getRootNode() as ExtendedShadowRoot;\n\n  // Original implementation uses document.active element but with an imlplementation in web-component with shadow root we need compare with it.\n  editor.selection.hasFocus = () => getRootNode().activeElement === editor.root;\n\n  // Original implementation uses document.getSelection which does not work in Native Shadow.\n  // Replace document.getSelection with shadow dom equivalent (different for each browser)\n  editor.selection.getNativeRange = () => {\n    const nativeRange = getNativeRange(getRootNode());\n    return Boolean(nativeRange) ? editor.selection.normalizeNative(nativeRange) : null;\n  };\n\n  // Original implementation relies on Selection.addRange to programatically set the range, which does not work in Webkit with Native Shadow. Selection.addRange works fine in Chromium and Gecko.\n  editor.selection.setNativeRange = (startContainer, startOffset, endContainer = startContainer, endOffset = startOffset, force = false) => {\n    if ([startContainer?.parentNode, editor.root.parentNode, endContainer?.parentNode].some(node => node == null)) {\n      return;\n    }\n\n    const selection = window.getSelection();\n\n    if (!editor.selection.hasFocus()) editor.root.focus();\n\n    const native = (editor.selection.getNativeRange() || {}).native;\n    if (\n      !Boolean(native) ||\n      force ||\n      startContainer !== native.startContainer ||\n      startOffset !== native.startOffset ||\n      endContainer !== native.endContainer ||\n      endOffset !== native.endOffset\n    ) {\n      if (isHtmlElement(startContainer) && startContainer.tagName === 'BR') {\n        startOffset = [].indexOf.call(startContainer.parentNode.childNodes, startContainer);\n        startContainer = startContainer.parentNode;\n      }\n      if (isHtmlElement(endContainer) && endContainer.tagName === 'BR') {\n        endOffset = [].indexOf.call(endContainer.parentNode.childNodes, endContainer);\n        endContainer = endContainer.parentNode;\n      }\n\n      selection.setBaseAndExtent(startContainer, startOffset, endContainer, endOffset);\n    }\n  };\n\n  // Subscribe to selection change separately, because emitter in Quill doesn't catch this event in Shadow DOM\n  document.addEventListener('selectionchange', () => {\n    editor.selection.update();\n  });\n};\n\n/**\n * Fixes for handling text selection in Quill when used within the Shadow DOM.\n * - Fixes focus detection\n * - Adapts native range handling to work with the Shadow DOM\n * - Correctly manages text selection across Shadow DOM boundaries\n * - Sets up selection change events\n * @returns Quill instance\n */\nexport const defineEditor: IdefineEditor = (wrapperElement, { value, modules, readOnly, placeholder, handleTextChange, handleFocus, handleBlur }) => {\n  const toolbarOptions = {\n    toolbar: [['bold', 'italic', 'underline'], [{ list: 'ordered' }, { list: 'bullet' }], ['link'], ['clean']],\n  };\n  const editor = new Quill(wrapperElement.querySelector('div'), {\n    theme: 'snow',\n    modules: modules || toolbarOptions,\n    readOnly,\n    placeholder,\n  });\n\n  if (isValidString(value) && /<[a-z][\\s\\S]*>/i.test(value)) {\n    editor.clipboard.dangerouslyPasteHTML(value);\n  } else if (isValidString(value)) {\n    editor.setText(value);\n  }\n\n  const editorContent = wrapperElement.querySelector('.ql-editor');\n  editorContent.addEventListener('focus', handleFocus);\n  editorContent.addEventListener('blur', handleBlur);\n\n  // Add an event listener for the text-change event\n  editor.on('text-change', handleTextChange);\n\n  setQuillOverrides(editor);\n\n  return editor;\n};\n"]}