fix: tab keypress and non breaking space

Author: gjulivan

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

@@ -153,7 +153,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                 }
             }}
             spellCheck={props.spellCheck}
-            tabIndex={tabIndex}
+            tabIndex={tabIndex ?? -1}
             {...actionEvents}
         >
             <If condition={toolbarLocation === "auto"}>
@@ -202,6 +202,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     formOrientation={formOrientation}
                 />
             </div>
+
             <div
                 className={classNames("widget-rich-text-footer", { "hide-status-bar": !enableStatusBar })}
                 tabIndex={-1}

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

@@ -88,9 +88,8 @@ $rte-brand-primary: #264ae5;
         display: none;
     }
 
-    .widget-rich-text-footer {
+    &-footer {
         align-items: center;
-        border-top: 1px solid var(--border-color-default, $rte-border-color-default);
         color: var(--font-color-detail);
         display: flex;
         flex: 0 0 auto;
@@ -102,9 +101,12 @@ $rte-brand-primary: #264ae5;
         text-transform: none;
         justify-content: end;
 
-        &.hide-status-bar {
-            border-top: none;
-            height: 0;
+        &:not(.hide-status-bar) {
+            border-top: 1px solid var(--border-color-default, $rte-border-color-default);
+        }
+
+        &:focus-within {
+            border-top: 1px solid var(--form-input-border-focus-color, var(--brand-primary, $rte-brand-primary));
         }
     }
 

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

@@ -174,7 +174,7 @@ function convertHTML(blot: Blot, index: number, length: number, isRoot = false):
     }
     if (blot instanceof TextBlot) {
         const escapedText = escapeText(blot.value().slice(index, index + length));
-        return escapedText.replaceAll(" ", " ");
+        return escapedText;
     }
     if (blot instanceof ParentBlot) {
         // TODO fix API

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

@@ -4,6 +4,8 @@ import {
     exitFullscreenKeyboardHandler,
     gotoStatusBarKeyboardHandler,
     gotoToolbarKeyboardHandler,
+    moveIndent,
+    moveOutdent,
     movePrevFocus,
     shiftEnterKeyKeyboardHandler
 } from "./toolbarHandlers";
@@ -30,9 +32,21 @@ export function getKeyboardBindings(): Record<string, unknown> {
         shiftTab: {
             key: "Tab",
             shiftKey: true,
-            collapsed: true,
             handler: movePrevFocus
         },
+        outdent: {
+            key: "Tab",
+            shiftKey: true,
+            format: ["blockquote", "indent", "list"],
+            // highlight tab or tab at beginning of list, indent or blockquote
+            handler: moveOutdent
+        },
+        indent: {
+            // highlight tab or tab at beginning of list, indent or blockquote
+            key: "Tab",
+            format: ["blockquote", "indent", "list"],
+            handler: moveIndent
+        },
         nextFocusTab: {
             key: "F11",
             altKey: true,

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

@@ -7,6 +7,12 @@ import { Scope } from "parchment";
 import { ACTION_DISPATCHER } from "../helpers";
 import { SET_FULLSCREEN_ACTION } from "../../store/store";
 
+function returnWithStopPropagation(context: Context): boolean {
+    context.event.stopPropagation();
+    context.event.preventDefault();
+    return true;
+}
+
 /**
  * give custom indent handler to use our custom "indent-left" and "indent-right" formats (formats/indent.ts)
  */
@@ -80,13 +86,36 @@ export function shiftEnterKeyKeyboardHandler(this: Keyboard, range: Range, conte
 }
 
 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;
+    if (context.format.table) {
+        return returnWithStopPropagation(context);
+    } else if (context.collapsed) {
+        if (context.format.indent || context.format.list || context.format.blockquote) {
+            return returnWithStopPropagation(context);
+        }
     }
 
     gotoToolbarKeyboardHandler.call(this, range, context);
+    return returnWithStopPropagation(context);
+}
+
+// Copied from https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/keyboard.ts#L372
+// with added stopPropagation and preventDefault
+export function moveOutdent(this: Keyboard, _range: Range, context: Context): any {
+    if (context.collapsed && context.offset !== 0) {
+        return returnWithStopPropagation(context);
+    }
+    this.quill.format("indent", "-1", Quill.sources.USER);
+    return !returnWithStopPropagation(context);
+}
+
+// Copied from https://github.com/slab/quill/blob/539cbffd0a13b18e9c65eb84dd35e6596e403158/packages/quill/src/modules/keyboard.ts#L372
+// with added stopPropagation and preventDefault
+export function moveIndent(this: Keyboard, _range: Range, context: Context): any {
+    if (context.collapsed && context.offset !== 0) {
+        return returnWithStopPropagation(context);
+    }
+    this.quill.format("indent", "+1", Quill.sources.USER);
+    return !returnWithStopPropagation(context);
 }
 
 // focus to first toolbar button
@@ -99,7 +128,8 @@ export function gotoToolbarKeyboardHandler(this: Keyboard, _range: Range, contex
     if (toolbar) {
         (toolbar?.querySelector(".ql-formats button") as HTMLElement)?.focus();
     } else {
-        this.quill.blur();
+        // "widget-rich-text form-control"
+        this.quill.container.parentElement?.parentElement?.parentElement?.focus();
     }
 }
 
@@ -113,7 +143,8 @@ export function gotoStatusBarKeyboardHandler(this: Keyboard, _range: Range, cont
     if (statusBar) {
         (statusBar as HTMLElement)?.focus();
     } else {
-        this.quill.blur();
+        // "widget-rich-text form-control"
+        this.quill.container.parentElement?.parentElement?.parentElement?.focus();
     }
 }
 
@@ -124,14 +155,16 @@ export function addIndentText(this: Keyboard, range: Range, context: Context): b
     if (context.format.table) {
         return true;
     }
-    this.quill.history.cutoff();
-    const delta = new Delta().retain(range.index).delete(range.length).insert("\t");
-    this.quill.updateContents(delta, Quill.sources.USER);
-    this.quill.history.cutoff();
-    this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
-    context.event.stopPropagation();
-    context.event.preventDefault();
-    return false;
+    if (context.collapsed && context.offset === 0) {
+        return moveIndent.call(this, range, context);
+    } else {
+        this.quill.history.cutoff();
+        const delta = new Delta().retain(range.index).delete(range.length).insert("\t");
+        this.quill.updateContents(delta, Quill.sources.USER);
+        this.quill.history.cutoff();
+        this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
+        return returnWithStopPropagation(context);
+    }
 }
 
 /**