fix: multiple clipboard instance exist

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx

@@ -120,7 +120,6 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
     }, [quillRef.current, onChange?.isExecuting]);
 
     const onTextChange = useCallback(() => {
-        console.log("onTextChange called", quillRef?.current?.getContents());
         if (stringAttribute.value !== quillRef?.current?.getSemanticHTML()) {
             setAttributeValueDebounce(quillRef?.current?.getSemanticHTML());
         }

packages/pluggableWidgets/rich-text-web/src/utils/customPluginRegisters.ts

@@ -17,7 +17,6 @@ import QuillResize from "quill-resize-module";
 import QuillTableBetter from "./formats/quill-table-better/quill-table-better";
 import MxUploader from "./modules/uploader";
 import MxBlock from "./formats/block";
-import CustomClipboard from "./modules/clipboard";
 import { WhiteSpaceStyle } from "./formats/whiteSpace";
 
 class Empty {
@@ -29,7 +28,6 @@ class Empty {
  * Custom format registration for quill.
  */
 Quill.debug("error");
-Quill.register({ "modules/clipboard": CustomClipboard }, true);
 Quill.register({ "themes/snow": MendixTheme }, true);
 Quill.register(CustomListItem, true);
 Quill.register(WhiteSpaceStyle, true);

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/modules/clipboard.ts

@@ -1,12 +1,13 @@
 import Quill from "quill";
 import Module from "quill/core/module";
-import QuillClipboard from "quill/modules/clipboard";
+// import QuillClipboard from "quill/modules/clipboard";
 import Delta from "quill-delta";
 import logger from "quill/core/logger.js";
 import type { Range, Props } from "../types";
 import { TableCellBlock, TableTemporary } from "../formats/table";
+import CustomClipboard from "../../../modules/clipboard";
 
-const Clipboard = QuillClipboard as typeof Module;
+const Clipboard = CustomClipboard as typeof Module;
 const debug = logger("quill:clipboard");
 
 class TableClipboard extends Clipboard {

packages/pluggableWidgets/rich-text-web/src/utils/modules/clipboard.ts

@@ -8,10 +8,25 @@ import { EmbedBlot, type ScrollBlot } from "parchment";
 import Quill, { Delta } from "quill";
 import Clipboard, { matchNewline } from "quill/modules/clipboard";
 
-function isLine(node: Node, scroll: ScrollBlot): boolean {
+export default class CustomClipboard extends Clipboard {
+    constructor(quill: Quill, options: any) {
+        super(quill, options);
+        // remove default CLIPBOARD_CONFIG list matchers for ol and ul
+        // https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/clipboard.ts#L32
+        this.matchers = this.matchers.filter(matcher => matcher[0] !== "ol, ul" && matcher[0] !== Node.TEXT_NODE);
+        // adding back, we do not actually want to remove newline matching
+        this.matchers.unshift([Node.TEXT_NODE, matchNewline]);
+        // add custom text matcher to better handle spaces and newlines
+        this.matchers.unshift([Node.TEXT_NODE, customMatchText]);
+        // add custom list matchers for ol and ul to allow custom list types (lower-alpha, lower-roman, etc.)
+        this.addMatcher("ol, ul", matchList);
+    }
+}
+
+function isLine(node: Node, scroll: ScrollBlot): any {
     if (!(node instanceof Element)) return false;
     const match = scroll.query(node);
-    // @ts-expect-error prototype does not exist on Blot
+    // @ts-expect-error prototype not exist on match
     if (match && match.prototype instanceof EmbedBlot) return false;
 
     return [
@@ -62,10 +77,10 @@ function isBetweenInlineElements(node: HTMLElement, scroll: ScrollBlot): boolean
 }
 
 const preNodes = new WeakMap();
-function isPre(node: Node | null): any {
+function isPre(node: Node | null): boolean {
     if (node == null) return false;
     if (!preNodes.has(node)) {
-        // @ts-expect-error tagName does not exist on Node
+        // @ts-expect-error tagName not exist on Node
         if (node.tagName === "PRE") {
             preNodes.set(node, true);
         } else {
@@ -75,10 +90,8 @@ function isPre(node: Node | null): any {
     return preNodes.get(node);
 }
 
-// overrides matchText from Quill's Clipboard module
-// removing text replacements that interfere with adding \t (tab)
-function matchText(node: HTMLElement, delta: Delta, scroll: ScrollBlot): Delta {
-    // @ts-expect-error data does not exist on HTMLElement
+function customMatchText(node: HTMLElement, delta: Delta, scroll: ScrollBlot): Delta {
+    // @ts-expect-error data not exist on node
     let text = node.data as string;
     // Word represents empty line with <o:p>&nbsp;</o:p>
     if (node.parentElement?.tagName === "O:P") {
@@ -88,6 +101,7 @@ function matchText(node: HTMLElement, delta: Delta, scroll: ScrollBlot): Delta {
         if (text.trim().length === 0 && text.includes("\n") && !isBetweenInlineElements(node, scroll)) {
             return delta;
         }
+        // collapse consecutive spaces into one
         text = text.replace(/ {2,}/g, " ");
         if (
             (node.nextSibling == null && node.parentElement != null && isLine(node.parentElement, scroll)) ||
@@ -100,7 +114,7 @@ function matchText(node: HTMLElement, delta: Delta, scroll: ScrollBlot): Delta {
     return delta.insert(text);
 }
 
-function matchList(node: HTMLElement, delta: Delta, _scroll: ScrollBlot): Delta {
+function matchList(node: HTMLElement, delta: Delta): Delta {
     const format = "list";
     let list = "ordered";
     const element = node as HTMLUListElement;
@@ -131,20 +145,6 @@ function matchList(node: HTMLElement, delta: Delta, _scroll: ScrollBlot): Delta
             return newDelta.push(op);
         }
         const formats = list ? { [format]: list } : {};
-
         return newDelta.insert(op.insert, { ...formats, ...op.attributes });
     }, new Delta());
 }
-
-export default class CustomClipboard extends Clipboard {
-    constructor(quill: Quill, options: any) {
-        super(quill, options);
-
-        // remove default list matchers for ol and ul
-        this.matchers = this.matchers.filter(matcher => matcher[0] !== "ol, ul" && matcher[0] !== Node.TEXT_NODE);
-        this.addMatcher(Node.TEXT_NODE, matchNewline);
-        this.addMatcher(Node.TEXT_NODE, matchText);
-        // add custom list matchers for ol and ul to allow custom list types (lower-alpha, lower-roman, etc.)
-        this.addMatcher("ol, ul", matchList);
-    }
-}