fix: e2e and styling

Author: gjulivan

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/src/components/toolbars/Toolbar.scss

@@ -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/components/toolbars/components/Dialog.scss

@@ -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/helpers/__tests__/colorPickerHelpers.spec.ts

@@ -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

packages/pluggableWidgets/rich-text-web/src/extensions/TextHighlightClass.ts

@@ -136,7 +136,7 @@ $rte-brand-primary: #264ae5;
                 }
             }
 
-            mark {
+            .has-text-highlight {
                 padding: 0.1em 0.2em;
                 border-radius: 2px;
             }
@@ -315,27 +315,14 @@ $rte-brand-primary: #264ae5;
             }
 
             code {
-                background-color: var(--gray-900, #616161);
-                color: var(--font-color-contrast, #fff);
-                padding: 0.2em 0.4em;
+                background: var(--gray-50, var(--gray-lighter, #f8f8f8));
+                padding: 0.15rem 0.55rem;
                 border-radius: 3px;
-                font-size: 1.2rem;
                 font-family: "Courier New", Courier, monospace;
             }
 
             pre {
-                background: var(--color-contrast, #000);
-                color: var(--font-color-contrast, #fff);
-                font-family: "JetBrainsMono", monospace;
-                padding: 0.75rem;
-                border-radius: 0.5rem;
-
-                code {
-                    color: inherit;
-                    padding: 0;
-                    background: none;
-                    font-size: 1.1rem;
-                }
+                padding: 0.15rem 0.55rem;
             }
 
             blockquote {

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

@@ -33,11 +33,6 @@
         margin: 0;
     }
 
-    mark {
-        color: inherit;
-        background-color: inherit;
-    }
-
     .has-text-color {
         color: attr(data-text-color type(<color>));
     }