fix: e2e and styling and icons

Author: gjulivan

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/bottomToolbarAdvancedMode-chromium-linux.png

@@ -576,7 +576,7 @@ exports[`Rich Text renders richtext widget with different config 1`] = `
           >
             <button
               class="icon-button"
-              title="Blockquote"
+              title="Block quote"
               type="button"
             >
               <span
@@ -661,7 +661,9 @@ exports[`Rich Text renders richtext widget with different config 1`] = `
               title="Keyboard shortcuts"
               type="button"
             >
-              ?
+              <span
+                class="icons icon-Help"
+              />
             </button>
           </div>
         </div>

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/inlineBasicMode-chromium-linux.png

@@ -89,11 +89,14 @@ $rte-shadow-color: #00000014 !default;
     .toolbar-dropdown-button {
         display: flex;
         gap: 4px;
-        padding: 6px 6px 3px;
+        padding: 6px 2px 2px 2px;
         min-width: 120px;
         justify-content: space-between;
         background: none;
         border: none;
+        margin: 0 var(--spacing-smallest, 2px);
+        border-radius: var(--border-radius-s, 4px);
+        background-color: var(--gray-50, var(--gray-lighter, #f8f8f8));
 
         .dropdown-label {
             flex: 1;

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/toolbarBasicMode-chromium-linux.png

@@ -106,11 +106,7 @@
     }
 
     .image-dialog-entity {
-        margin-bottom: 12px;
-        padding: 12px;
-        border: 1px solid var(--border-color-default, #ced0d3);
-        border-radius: 4px;
-        background: #fafafa;
+        margin: 0 var(--spacing-medium, 16px);
         min-height: 100px;
     }
 

packages/pluggableWidgets/rich-text-web/src/__tests__/__snapshots__/RichText.spec.tsx.snap

@@ -4,8 +4,8 @@ import { ToolbarDefaultButton } from "./ToolbarDefaultButton";
 import { useT } from "../../../utils/i18n";
 
 /**
- * Toolbar help button. Renders a text "?" (the icon font has no help glyph) and
- * toggles the keyboard-shortcuts modal.
+ * Toolbar help button. Renders the help icon and toggles the keyboard-shortcuts
+ * modal.
  */
 export function HelpButton(): ReactElement {
     const [isOpen, setIsOpen] = useState(false);
@@ -19,10 +19,9 @@ export function HelpButton(): ReactElement {
                 aria-label={t("help.title")}
                 aria-haspopup="dialog"
                 aria-expanded={isOpen}
+                icon="Help"
                 onClick={() => setIsOpen(true)}
-            >
-                ?
-            </ToolbarDefaultButton>
+            />
             {isOpen && <HelpDialog onClose={() => setIsOpen(false)} />}
         </>
     );

packages/pluggableWidgets/rich-text-web/src/assets/RichTextIconFont.woff2

@@ -108,4 +108,33 @@ describe("colorPickerHelpers.handleColorClear", () => {
 
         expect(editor.getHTML()).not.toContain("<mark");
     });
+
+    it("renders the text highlight as a span with a background color", () => {
+        editor = makeEditor();
+        editor.commands.setContent("<p>hello</p>");
+        editor.commands.selectAll();
+
+        colorPickerHelpers.handleColorChange(editor, "textHighlight", "#ffff00");
+
+        const html = editor.getHTML();
+        expect(html).not.toContain("<mark");
+        expect(html).toContain("<span");
+        expect(html).toContain("background-color");
+    });
+
+    it("preserves highlighted text pasted from Microsoft Word", () => {
+        editor = makeEditor();
+        // Word emits highlights as spans using the `background` shorthand (never a
+        // <mark>). The CSSOM expands `background` into `backgroundColor`, so our span
+        // parser picks it up. A keyword like `yellow` is validated by isSafeCssColor
+        // via CSS.supports in real browsers; here we use an explicit rgb value so the
+        // assertion is deterministic under jsdom (which lacks CSS.supports).
+        editor.commands.setContent(
+            '<p><span style="background:rgb(255, 255, 0);mso-highlight:yellow">highlighted</span></p>'
+        );
+
+        const html = editor.getHTML();
+        expect(html).not.toContain("<mark");
+        expect(html).toContain("background-color");
+    });
 });

packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss

@@ -1,4 +1,4 @@
-import { Extension } from "@tiptap/core";
+import { Extension, mergeAttributes } from "@tiptap/core";
 import { Highlight } from "@tiptap/extension-highlight";
 import { isSafeCssColor } from "../utils/helpers";
 
@@ -60,6 +60,7 @@ export const TextHighlightClass = Extension.create<TextHighlightClassOptions>({
                                     };
                                 } else {
                                     return {
+                                        class: "has-text-highlight",
                                         style: `background-color: ${attributes.color}`
                                     };
                                 }
@@ -70,22 +71,29 @@ export const TextHighlightClass = Extension.create<TextHighlightClassOptions>({
                 parseHTML() {
                     return [
                         {
-                            tag: "mark",
+                            tag: "span",
                             getAttrs: element => {
                                 const htmlElement = element as HTMLElement;
-                                const hasStyles =
-                                    htmlElement.hasAttribute("style") ||
-                                    htmlElement.hasAttribute("data-text-highlight") ||
-                                    htmlElement.style.backgroundColor;
+                                // Only treat a span as a highlight when it actually carries a
+                                // background (inline mode, incl. Word's `background` shorthand which
+                                // the CSSOM expands into `backgroundColor`) or our data attribute
+                                // (class mode). This avoids capturing color-only text-style spans.
+                                const hasHighlight =
+                                    styleDataFormat === "class"
+                                        ? !!htmlElement.dataset.textHighlight
+                                        : !!htmlElement.style.backgroundColor;
 
-                                if (!hasStyles) {
+                                if (!hasHighlight) {
                                     return false;
                                 }
 
                                 return {};
                             }
                         }
                     ];
+                },
+                renderHTML({ HTMLAttributes }) {
+                    return ["span", mergeAttributes(HTMLAttributes), 0];
                 }
             }).configure({
                 multicolor: this.options.multicolor