fix: rich text formatting

Author: gjulivan

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

@@ -42,6 +42,14 @@ import TextBlot, { escapeText } from "quill/blots/text";
 import { Delta, Op } from "quill/core";
 import Editor from "quill/core/editor";
 
+interface ListItem {
+    child: Blot;
+    offset: number;
+    length: number;
+    indent: number;
+    type: string;
+}
+
 /**
  * Rich Text's extended Quill Editor
  * allowing us to override certain editor's function, such as: getHTML
@@ -110,25 +118,23 @@ function getExpectedType(type: string | undefined, indent: number): string {
 /**
  * Copy with modification from https://github.com/slab/quill/blob/main/packages/quill/src/core/editor.ts
  */
-function convertListHTML(items: any[], lastIndent: number, types: string[]): string {
+function convertListHTML(items: ListItem[], lastIndent: number, types: string[]): string {
     if (items.length === 0) {
         const [endTag] = getListType(types.pop());
         if (lastIndent <= 0) {
-            // modified by web-content: adding new line \n
-            return `</li></${endTag}>\n`;
+            return `</li></${endTag}>`;
         }
-        // modified by web-content: adding new line \n
-        return `</li></${endTag}>\n${convertListHTML([], lastIndent - 1, types)}`;
+        return `</li></${endTag}>${convertListHTML([], lastIndent - 1, types)}`;
     }
     const [{ child, offset, length, indent, type }, ...rest] = items;
     const [tag, attribute] = getListType(type);
-    // modified by web-content: get proper list-style-type
-    const expectedType = getExpectedType(type, indent);
+
     if (indent > lastIndent) {
+        // modified by web-content: get proper list-style-type
+        const expectedType = getExpectedType(type, indent);
         types.push(type);
         if (indent === lastIndent + 1) {
-            // modified by web-content: adding list-style-type to allow retaining list style when converted to html and new line \n
-            return `<${tag} style="list-style-type: ${expectedType}">\n<li${attribute}>${convertHTML(
+            return `<${tag} style="list-style-type: ${expectedType}"><li${attribute}>${convertHTML(
                 child,
                 offset,
                 length
@@ -138,12 +144,10 @@ function convertListHTML(items: any[], lastIndent: number, types: string[]): str
     }
     const previousType = types[types.length - 1];
     if (indent === lastIndent && type === previousType) {
-        // modified by web-content: adding new line \n
-        return `</li>\n<li${attribute}>${convertHTML(child, offset, length)}${convertListHTML(rest, indent, types)}`;
+        return `</li><li${attribute}>${convertHTML(child, offset, length)}${convertListHTML(rest, indent, types)}`;
     }
     const [endTag] = getListType(types.pop());
-    // modified by web-content: adding new line \n
-    return `</li></${endTag}>\n${convertListHTML(items, lastIndent - 1, types)}`;
+    return `</li></${endTag}>${convertListHTML(items, lastIndent - 1, types)}`;
 }
 
 /**
@@ -156,7 +160,8 @@ function convertHTML(blot: Blot, index: number, length: number, isRoot = false):
         return blot.html(index, length);
     }
     if (blot instanceof TextBlot) {
-        return escapeText(blot.value().slice(index, index + length));
+        const escapedText = escapeText(blot.value().slice(index, index + length));
+        return escapedText.replaceAll(" ", "&nbsp;");
     }
     if (blot instanceof ParentBlot) {
         // TODO fix API

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

@@ -4,11 +4,14 @@ class MxBlock extends Block {
     html(): string {
         // quill return empty paragraph when there is no content (just empty line)
         // to preserve the line breaks, we add empty space
-        const htmlContent = this.domNode.outerHTML;
         if (this.domNode.childElementCount === 1 && this.domNode.children[0] instanceof HTMLBRElement) {
-            return htmlContent.replace(/<br>/g, "&nbsp;");
+            return this.domNode.outerHTML.replace(/<br>/g, "&nbsp;");
+        } else if (this.domNode.childElementCount === 0 && this.domNode.textContent?.trim() === "") {
+            this.domNode.innerHTML = "&nbsp;";
+            return this.domNode.outerHTML;
+        } else {
+            return this.domNode.outerHTML;
         }
-        return this.domNode.outerHTML;
     }
 }
 export default MxBlock;

packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/css/quill-table-better.scss

@@ -31,14 +31,17 @@ $focused-border: 1px solid $focused-border-color;
     left: 50%;
     bottom: -10px;
     transform: translate(-50%, 100%);
+
     &::before {
         @extend .ql-table-triangle-common;
         border-bottom-color: $color !important;
         top: -20px;
     }
+
     &:hover {
         display: block;
     }
+
     &-hidden {
         display: none !important;
     }
@@ -50,6 +53,7 @@ $focused-border: 1px solid $focused-border-color;
         #{$direction1}: -20px;
         border-#{$direction2}-color: $color1 !important;
     }
+
     &:not(.ql-table-triangle-none)::after {
         @extend .ql-table-triangle-common;
         #{$direction1}: -19px;
@@ -299,6 +303,7 @@ $focused-border: 1px solid $focused-border-color;
                 line-height: 30px;
                 list-style: none;
                 padding-left: 10px;
+
                 &:hover {
                     background-color: $hover-background;
                 }
@@ -521,8 +526,11 @@ $focused-border: 1px solid $focused-border-color;
 
         &-error {
             @include qlTableTooltip($tooltip-color-error);
-            white-space: pre-wrap;
-            z-index: 9;
+
+            & {
+                white-space: pre-wrap;
+                z-index: 9;
+            }
         }
     }
 
@@ -559,6 +567,7 @@ $focused-border: 1px solid $focused-border-color;
         z-index: 10;
         border: 1px solid #979797;
         cursor: nwse-resize;
+
         &-move {
             cursor: crosshair;
             border: none;
@@ -574,6 +583,7 @@ $focused-border: 1px solid $focused-border-color;
         position: absolute;
         z-index: 10;
         @extend .ql-table-center;
+
         .ql-operate-line {
             background-color: $line-color;
         }
@@ -653,12 +663,15 @@ ol.table-list-container {
     20% {
         transform: translateX(-2px);
     }
+
     40% {
         transform: translateX(2px);
     }
+
     60% {
         transform: translateX(-1px);
     }
+
     80% {
         transform: translateX(1px);
     }