fix: removes duplicate blank lines in the end

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts

@@ -1,5 +1,9 @@
 import Quill, { Range } from "quill";
+import { Delta } from "quill/core";
+import Emitter from "quill/core/emitter";
 import { Dispatch, MutableRefObject, SetStateAction, useState } from "react";
+import { RichTextContainerProps } from "typings/RichTextProps";
+import { IMG_MIME_TYPES } from "./constants";
 import {
     imageConfigType,
     type linkConfigType,
@@ -9,10 +13,6 @@ import {
 } from "../../utils/formats";
 import { type ChildDialogProps } from "../ModalDialog/Dialog";
 import { type VideoFormType } from "../ModalDialog/VideoDialog";
-import { Delta } from "quill/core";
-import { IMG_MIME_TYPES } from "./constants";
-import Emitter from "quill/core/emitter";
-import { RichTextContainerProps } from "typings/RichTextProps";
 
 type ModalReturnType = {
     showDialog: boolean;
@@ -48,8 +48,8 @@ export function useEmbedModal(
                         const index = selection?.index ?? 0;
                         const length = selection?.length ?? 0;
                         const textToDisplay = value.text ?? value.href;
-                        const linkDelta = new Delta().retain(index).insert(textToDisplay).delete(length);
-                        ref.current?.updateContents(linkDelta);
+                        const linkDelta = new Delta().retain(index).delete(length).insert(textToDisplay);
+                        ref.current?.updateContents(linkDelta, Emitter.sources.SILENT);
                         ref.current?.setSelection(index, textToDisplay.length);
                         ref.current?.format("link", value);
                         closeDialog();

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

@@ -36,16 +36,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  * this file overrides Quill instance.
  * allowing us to override certain function that is not easy to extend.
  */
-import { type Blot, ParentBlot, ScrollBlot } from "parchment";
+import { type Blot, ParentBlot } from "parchment";
 import Quill, { EmitterSource, QuillOptions } from "quill";
 import TextBlot, { escapeText } from "quill/blots/text";
 import { Delta, Op } from "quill/core";
 import Editor from "quill/core/editor";
-import { CustomFontsType } from "../../typings/RichTextProps";
-import MxBlock from "./formats/block";
 import { STANDARD_LIST_TYPES } from "./formats/customList";
 import { FontStyleAttributor, formatCustomFonts } from "./formats/fonts";
 import CustomLink, { CustomLinkNoValidation } from "./formats/link";
+import { CustomFontsType } from "../../typings/RichTextProps";
 
 interface ListItem {
     child: Blot;
@@ -65,9 +64,6 @@ class MxEditor extends Editor {
      * https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
      */
     getHTML(index: number, length: number): string {
-        if (this.isBlank()) {
-            return "";
-        }
         const [line, lineOffset] = this.scroll.line(index);
         if (line) {
             const lineLength = line.length();
@@ -154,28 +150,6 @@ function getExpectedType(type: string | undefined, indent: number): string {
     return expectedType === "ordered" ? "decimal" : expectedType === "bullet" ? "disc" : expectedType;
 }
 
-// removes empty tail block that quill adds at the end of document
-// which causes extra newline when copying content with trailing newline
-function findEmptyTailBlock(blot: Blot): Blot | null {
-    let skippedBlots = null;
-
-    if (blot instanceof ScrollBlot && blot.statics.blotName === "scroll" && !blot.parent) {
-        if (MxBlock.IsMxBlock(blot.children.tail) && (blot.children.tail as MxBlock).isEmptyTailBlock()) {
-            if (blot.children.tail.prev) {
-                if (
-                    MxBlock.IsMxBlock(blot.children.tail.prev) &&
-                    (blot.children.tail.prev as MxBlock).isEmptyTailBlock()
-                ) {
-                    skippedBlots = blot.children.tail;
-                }
-            } else {
-                skippedBlots = blot.children.tail;
-            }
-        }
-    }
-    return skippedBlots;
-}
-
 /**
  * Copy with modification from https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
  */
@@ -241,11 +215,7 @@ function convertHTML(blot: Blot, index: number, length: number, isRoot = false):
             return convertListHTML(items, -1, []);
         }
         const parts: string[] = [];
-        const skippedBlots = findEmptyTailBlock(blot);
         blot.children.forEachAt(index, length, (child, offset, childLength) => {
-            if (child === skippedBlots) {
-                return;
-            }
             parts.push(convertHTML(child, offset, childLength));
         });
         if (isRoot || blot.statics.blotName === "list") {

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

@@ -1,22 +1,23 @@
+import { Attributor } from "parchment";
 import Quill from "quill";
-import MendixTheme from "./themes/mxTheme";
+import QuillResize from "quill-resize-module";
+import MxBlock from "./formats/block";
+import Button from "./formats/button";
+import CustomListItem from "./formats/customList";
 import "./formats/fonts";
 import "./formats/fontsize";
-import CustomListItem from "./formats/customList";
-import CustomVideo from "./formats/video";
+import Formula from "./formats/formula";
 import CustomImage from "./formats/image";
-import SoftBreak from "./formats/softBreak";
-import Button from "./formats/button";
-import { Attributor } from "parchment";
-const direction = Quill.import("attributors/style/direction") as Attributor;
-const alignment = Quill.import("attributors/style/align") as Attributor;
 import { IndentLeftStyle, IndentRightStyle } from "./formats/indent";
-import Formula from "./formats/formula";
-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 SoftBreak from "./formats/softBreak";
+import CustomVideo from "./formats/video";
 import { WhiteSpaceStyle } from "./formats/whiteSpace";
+import MxUploader from "./modules/uploader";
+import MendixTheme from "./themes/mxTheme";
+import MxScroll from "./modules/scroll";
+const direction = Quill.import("attributors/style/direction") as Attributor;
+const alignment = Quill.import("attributors/style/align") as Attributor;
 
 class Empty {
     doSomething(): string {
@@ -41,6 +42,7 @@ Quill.register(Formula, true);
 Quill.register(Button, true);
 Quill.register(MxBlock, true);
 Quill.register({ "modules/uploader": MxUploader }, true);
+Quill.register({ "blots/scroll": MxScroll }, true);
 Quill.register("modules/resize", QuillResize, true);
 // add empty handler for view code, this format is handled by toolbar's custom config via ViewCodeDialog
 Quill.register({ "ui/view-code": Empty });

packages/pluggableWidgets/rich-text-web/src/utils/formats/block.ts

@@ -25,6 +25,10 @@ class MxBlock extends Block {
     static IsMxBlock(blot: Blot | null): blot is MxBlock {
         return blot?.statics.blotName === "mx-block";
     }
+
+    static IsEmptyBlock(blot: Blot | null): boolean {
+        return blot != null && MxBlock.IsMxBlock(blot) && blot.isEmptyTailBlock();
+    }
 }
 
 MxBlock.blotName = "mx-block";

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

@@ -0,0 +1,20 @@
+import Scroll from "quill/blots/scroll";
+import MxBlock from "../formats/block";
+
+export default class MxScroll extends Scroll {
+    optimize(context?: { [key: string]: any }): void;
+    optimize(mutations?: MutationRecord[], context?: { [key: string]: any }): void;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    optimize(mutations = [], context = {}) {
+        // remove multiple empty line placed in the end
+        // this is usually occurs with multi level ListContainer
+        if (
+            this.children.tail &&
+            MxBlock.IsEmptyBlock(this.children.tail) &&
+            MxBlock.IsEmptyBlock(this.children.tail.prev)
+        ) {
+            this.children.tail.parent.removeChild(this.children.tail);
+        }
+        super.optimize(mutations, context);
+    }
+}