feat: add break tag and fix focus and keyboard behavior

Author: gjulivan

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

@@ -13,10 +13,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - We changed Tab keyboard behavior to add indentation instead of exiting focus from editor.
+- We changed `&nbsp;` mark for empty line in favor for `<br />` break tag instead.
 
 ### Added
 
-- We added alt+F11 keyboard shortcut to do focus next.
+- We added alt+F11 keyboard shortcut to do focus next, and alt+F10 to focus on toolbar.
+- We added shift+enter keyboard shortcut to add `<br />` break tag.
 
 ## [4.10.0] - 2025-10-02
 

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

@@ -211,15 +211,18 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     formOrientation={formOrientation}
                 />
             </div>
-            <If condition={enableStatusBar}>
-                <div className="widget-rich-text-footer" tabIndex={-1}>
+            <div
+                className={classNames("widget-rich-text-footer", { "hide-status-bar": !enableStatusBar })}
+                tabIndex={-1}
+            >
+                <If condition={enableStatusBar}>
                     <span>
                         <span>{wordCount}</span>
                         <span>{` ${statusBarContent === "wordCount" ? "word" : "character"}`}</span>
                         <span>{wordCount === 1 ? "" : "s"}</span>
                     </span>
-                </div>
-            </If>
+                </If>
+            </div>
         </div>
     );
 }

packages/pluggableWidgets/rich-text-web/src/ui/RichText.scss

@@ -101,6 +101,11 @@ $rte-brand-primary: #264ae5;
         position: relative;
         text-transform: none;
         justify-content: end;
+
+        &.hide-status-bar {
+            border-top: none;
+            height: 0;
+        }
     }
 
     &.editor-readPanel {

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

@@ -6,6 +6,7 @@ import CustomListItem from "./formats/customList";
 import CustomLink from "./formats/link";
 import CustomVideo from "./formats/video";
 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;
@@ -18,6 +19,7 @@ import MxUploader from "./modules/uploader";
 import MxBlock from "./formats/block";
 import CustomClipboard from "./modules/clipboard";
 import { WhiteSpaceStyle } from "./formats/whiteSpace";
+
 class Empty {
     doSomething(): string {
         return "";
@@ -33,6 +35,7 @@ Quill.register(WhiteSpaceStyle, true);
 Quill.register(CustomLink, true);
 Quill.register(CustomVideo, true);
 Quill.register(CustomImage, true);
+Quill.register({ "formats/softbreak": SoftBreak }, true);
 Quill.register(direction, true);
 Quill.register(alignment, true);
 Quill.register(IndentLeftStyle, true);

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

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

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

@@ -0,0 +1,17 @@
+// import { BlockEmbed } from "quill/blots/block";
+import { EmbedBlot } from "parchment";
+/**
+ * custom video link handler, allowing width and height config
+ */
+class SoftBreak extends EmbedBlot {
+    static create(_value: unknown): Element {
+        const node = super.create() as HTMLElement;
+        return node;
+    }
+}
+
+// SoftBreak.scope = Scope.INLINE_BLOT;
+SoftBreak.blotName = "softbreak";
+SoftBreak.tagName = "BR";
+
+export default SoftBreak;

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

@@ -3,7 +3,9 @@ import {
     enterKeyKeyboardHandler,
     exitFullscreenKeyboardHandler,
     gotoStatusBarKeyboardHandler,
-    gotoToolbarKeyboardHandler
+    gotoToolbarKeyboardHandler,
+    movePrevFocus,
+    shiftEnterKeyKeyboardHandler
 } from "./toolbarHandlers";
 import QuillTableBetter from "../formats/quill-table-better/quill-table-better";
 
@@ -13,19 +15,28 @@ export function getKeyboardBindings(): Record<string, unknown> {
             key: "Enter",
             handler: enterKeyKeyboardHandler
         },
+        shiftEnter: {
+            key: "Enter",
+            shiftKey: true,
+            collapsed: true,
+            handler: shiftEnterKeyKeyboardHandler
+        },
         focusTab: {
             key: "F10",
             altKey: true,
+            collapsed: true,
             handler: gotoToolbarKeyboardHandler
         },
         shiftTab: {
             key: "Tab",
             shiftKey: true,
-            handler: gotoToolbarKeyboardHandler
+            collapsed: true,
+            handler: movePrevFocus
         },
         nextFocusTab: {
             key: "F11",
             altKey: true,
+            collapsed: true,
             handler: gotoStatusBarKeyboardHandler
         },
         escape: {

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

@@ -70,17 +70,45 @@ export function enterKeyKeyboardHandler(this: Keyboard, range: Range, context: C
     });
 }
 
+export function shiftEnterKeyKeyboardHandler(this: Keyboard, range: Range, context: Context): any {
+    if (context.format.table) {
+        return true;
+    }
+    this.quill.insertEmbed(range.index, "softbreak", true, Quill.sources.USER);
+    this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
+    return false;
+}
+
+export function movePrevFocus(this: Keyboard, range: Range, context: Context): any {
+    if (context.format.table || context.format.indent || context.format.list || context.format.blockquote) {
+        context.event.stopPropagation();
+        context.event.preventDefault();
+        return true;
+    }
+
+    gotoToolbarKeyboardHandler.call(this, range, context);
+}
+
 // focus to first toolbar button
-export function gotoToolbarKeyboardHandler(this: Keyboard, _range: Range, _context: Context): void {
+export function gotoToolbarKeyboardHandler(this: Keyboard, _range: Range, context: Context): any {
+    if (context.format.table) {
+        return true;
+    }
+
     const toolbar = this.quill.container.parentElement?.parentElement?.querySelector(".widget-rich-text-toolbar");
-    (toolbar?.querySelector(".ql-formats button") as HTMLElement)?.focus();
+    if (toolbar) {
+        (toolbar?.querySelector(".ql-formats button") as HTMLElement)?.focus();
+    } else {
+        this.quill.blur();
+    }
 }
 
 // move to next element focus : status bar button (exit editor)
 export function gotoStatusBarKeyboardHandler(this: Keyboard, _range: Range, context: Context): boolean | void {
     if (context.format.table) {
         return true;
     }
+
     const statusBar = this.quill.container.parentElement?.parentElement?.nextElementSibling;
     if (statusBar) {
         (statusBar as HTMLElement)?.focus();