fix: rich text empty line breaks support

Author: gjulivan

packages/pluggableWidgets/rich-text-web/CHANGELOG.md

@@ -9,6 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - We added support to choose image from entity using external widget.
+- We added support to keep image ratio when resizing images.
+
+### Fixed
+
+- We fixed issue when empty paragraph do not shown as line break in html viewer by adding empty space content ` `.
 
 ## [4.7.0] - 2025-06-02
 

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss

@@ -27,6 +27,10 @@
 
             .code-input {
                 min-height: 50vh;
+
+                .cm-editor {
+                    width: 100%;
+                }
             }
         }
 

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

@@ -15,6 +15,7 @@ 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";
 
 class Empty {
     doSomething(): string {
@@ -36,6 +37,7 @@ Quill.register(IndentLeftStyle, true);
 Quill.register(IndentRightStyle, true);
 Quill.register(Formula, true);
 Quill.register(Button, true);
+Quill.register(MxBlock, true);
 Quill.register({ "modules/uploader": MxUploader }, true);
 Quill.register("modules/resize", QuillResize, true);
 // add empty handler for view code, this format is handled by toolbar's custom config via ViewCodeDialog

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

@@ -0,0 +1,14 @@
+import Block from "quill/blots/block";
+
+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;
+    }
+}
+export default MxBlock;