[WC-3464] Rich text Tiptapeditor

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

@@ -6,9 +6,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
-### Security
+### Added
+
+- We added new configuration to allow users to use class names instead of inline styling in generated HTML to support strict CSP.
+
+- We added a help button to the toolbar that opens a dialog listing the editor's keyboard shortcuts. The button is shown when the full toolbar is enabled and can be turned off with the new "Keyboard shortcuts" setting.
+
+- We added translations for the toolbar, dialogs, and help texts. The editor UI now follows the page language automatically, with bundled translations for English, Dutch, German, French, and Spanish (falling back to English).
+
+### Changed
+
+- We changed rich text's internal WYSIWYG engine from Quill to Tiptap. This is allow rich text to have better support for nested tables. Internally, rich text still operates on HTML data stored in the attribute.ß
 
-- We fixed a security vulnerability (CVE-2026-13149).
+- We removed codemirror from code dialog viewer due to unsupported strict CSP policy. A simple internally built code editor using highlightjs is now replacing it.
 
 ## [4.12.0] - 2026-04-22
 

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js

@@ -1,7 +1,8 @@
 import { expect, test } from "@mendix/run-e2e/fixtures";
 import { waitForMendixApp } from "@mendix/run-e2e/mendix-helpers";
 
 test.describe("RichText", () => {
+    test.describe.configure({ mode: "serial" });
     test("compares with a screenshot baseline and checks if inline basic mode are rendered as expected", async ({
         page
     }) => {
@@ -32,8 +33,8 @@
         await expect(page.locator(".mx-name-richText1")).toBeVisible();
         await expect(page.locator(".mx-name-richText1")).toHaveScreenshot(`bottomToolbarAdvancedMode.png`);
 
-        await page.click(".mx-name-richText1 .ql-toolbar button.ql-image");
-        await expect(page.locator(".widget-rich-text .widget-rich-text-modal-body").first()).toHaveScreenshot(
+        await page.click('.mx-name-richText1 .tiptap-toolbar button[title="Insert Image"]');
+        await expect(page.locator(".mx-name-richText1 .toolbar-dialog.image-dialog").first()).toHaveScreenshot(
             `insertImageDialog.png`
         );
     });
@@ -47,8 +48,8 @@
         await expect(page.locator(".mx-name-richText4")).toBeVisible();
         await expect(page.locator(".mx-name-richText4")).toHaveScreenshot(`toolbarAdvancedMode.png`);
 
-        await page.click(".mx-name-richText1 .ql-toolbar button.ql-view-code");
-        await expect(page.locator(".widget-rich-text .widget-rich-text-modal-body").first()).toHaveScreenshot(
+        await page.click('.mx-name-richText4 .tiptap-toolbar button[title="View/Edit Code"]');
+        await expect(page.locator(".mx-name-richText4 .highlighted-code-editor").first()).toHaveScreenshot(
             `viewCodeDialog.png`
         );
     });
@@ -115,23 +116,174 @@
         await expect(page.locator(".mx-name-richText6")).toHaveScreenshot(`readOnlyModeReadPanel.png`);
     });
 
+    test("compares with a screenshot baseline and checks if class mode editor is rendered as expected", async ({
+        page
+    }) => {
+        await page.goto("/p/classmode");
+        await waitForMendixApp(page);
+        await expect(page.locator(".mx-name-richText1")).toBeVisible();
+        await expect(page.locator(".mx-name-richText1")).toHaveScreenshot(`classModeEditor.png`, { threshold: 0.4 });
+    });
+
+    test("checks that class mode editor output uses CSS classes instead of inline styles", async ({ page }) => {
+        await page.goto("/p/classmode");
+        await waitForMendixApp(page);
+
+        const editor = page.locator(".mx-name-richText1 .tiptap");
+        await expect(editor).toBeVisible();
+
+        // Apply text color, highlight and indent to the first block so the
+        // class-based output can be asserted. Re-select before each command
+        // because clicking a toolbar control collapses the DOM selection.
+        const firstBlock = editor.locator("h1, h2, h3, p").first();
+
+        await firstBlock.click({ clickCount: 3 });
+        await page.click('.mx-name-richText1 button[title="Text Color"]');
+        await page.locator(".color-picker-dropdown div[title]").nth(10).click();
+
+        await firstBlock.click({ clickCount: 3 });
+        await page.click('.mx-name-richText1 button[title="Background Color"]');
+        await page.locator(".color-picker-dropdown div[title]").nth(10).click();
+
+        await firstBlock.click({ clickCount: 3 });
+        await page.click('.mx-name-richText1 button[title="Increase Indent"]');
+
+        const html = await editor.innerHTML();
+
+        // Class mode emits class + data-* attributes, not inline styles.
+        expect(html).toMatch(/class="[^"]*has-text-color/);
+        expect(html).toMatch(/data-text-color="/);
+        expect(html).toMatch(/class="[^"]*has-text-highlight/);
+        expect(html).toMatch(/data-text-highlight="/);
+        expect(html).toMatch(/class="[^"]*indent-\d/);
+        expect(html).toMatch(/data-indent="/);
+        expect(html).not.toMatch(/style="[^"]*color:/);
+        expect(html).not.toMatch(/style="[^"]*background-color:/);
+        expect(html).not.toMatch(/style="[^"]*padding-left:/);
+    });
+
+    test("compares with a screenshot baseline of the View/Edit Code dialog in class mode", async ({ page }) => {
+        await page.goto("/p/classmode");
+        await waitForMendixApp(page);
+        await page.click('.mx-name-richText1 .tiptap-toolbar button[title="View/Edit Code"]');
+        await expect(page.locator(".mx-name-richText1 .highlighted-code-editor").first()).toHaveScreenshot(
+            `classModeViewCodeDialog.png`
+        );
+    });
+
     test("compares with a screenshot for rich text inside modal popup layout", async ({ page }) => {
         await page.goto("/");
         await waitForMendixApp(page);
 
         await page.click(".mx-navbar-item [title='Demo']");
 
-        await page.click(".mx-name-customWidget1 .ql-toolbar button.ql-video");
-        await expect(page.locator(".widget-rich-text .widget-rich-text-modal-body").first()).toHaveScreenshot(
+        await page.click('.mx-name-customWidget1 .tiptap-toolbar button[title="Insert YouTube Video"]');
+        await expect(page.locator(".toolbar-dialog.video-dialog").first()).toHaveScreenshot(
             `richTextDialogInsidePopup.png`
         );
 
-        await page.click(".widget-rich-text .widget-rich-text-modal-body #rich-text-video-src-input");
-        await page
-            .locator(".widget-rich-text .widget-rich-text-modal-body #rich-text-video-src-input")
-            .fill("https://www.mendix.com");
-        await expect(page.locator(".widget-rich-text .widget-rich-text-modal-body").first()).toHaveScreenshot(
+        await page.locator(".toolbar-dialog.video-dialog #video-url").fill("https://www.mendix.com");
+        await expect(page.locator(".toolbar-dialog.video-dialog").first()).toHaveScreenshot(
             `richTextDialogInsidePopupEdit.png`
         );
     });
+
+    test("clearing all content leaves the editor empty, not a stray <p></p>", async ({ page }) => {
+        await page.goto("/");
+        await waitForMendixApp(page);
+        await page.click("text=Generate Data");
+        await page.goto("/p/basic");
+        await waitForMendixApp(page);
+
+        // Find the first editable rich text editor
+        const editor = page.locator(".mx-name-richText1 .tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        // Click into the editor and clear all content. selectText() reliably
+        // selects the editor contents across platforms, unlike Control+A which
+        // depends on OS focus behaviour.
+        await editor.click();
+        await editor.selectText();
+        await page.keyboard.press("Backspace");
+
+        // Blur the editor to trigger the save/normalize path.
+        await page.keyboard.press("Tab");
+        await page.waitForTimeout(500);
+
+        // The editor should now be empty. Tiptap keeps a placeholder paragraph
+        // in the DOM, but the widget normalizes that empty paragraph to an
+        // empty string on save (see normalizeEmpty in EditorWrapper).
+        expect((await editor.textContent())?.trim() || "").toBe("");
+        // No text nodes remain — only an empty placeholder paragraph/break.
+        const strippedText = (await editor.innerHTML()).replace(/<[^>]*>/g, "").trim();
+        expect(strippedText).toBe("");
+    });
+
+    test("Tab nests a list inside a table cell instead of jumping cells", async ({ page }) => {
+        await page.goto("/p/advanced");
+        await waitForMendixApp(page);
+
+        const widget = page.locator(".mx-name-richText1");
+        const editor = widget.locator(".tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        // Clear any generated content so the assertions target only what we type.
+        await editor.click();
+        await editor.selectText();
+        await page.keyboard.press("Backspace");
+
+        // Insert a 2×2 table via the toolbar grid selector. Cells are laid out
+        // row-major (10×10), so row 2 / col 2 is index (2-1)*10 + (2-1) = 11.
+        await widget.locator('.tiptap-toolbar button[title="Insert Table"]').click();
+        await expect(page.locator(".table-grid-selector")).toBeVisible();
+        const tableCell = page.locator(".table-grid-selector .table-grid-cell").nth(11);
+        await tableCell.hover();
+        await tableCell.click();
+        await expect(editor.locator("table")).toBeVisible();
+
+        // Put the cursor in the first body cell and build a two-item bullet list.
+        await editor.locator("table td").first().click();
+        await widget.locator('.tiptap-toolbar button[title="Bullet List"]').click();
+        await page.keyboard.type("first");
+        await page.keyboard.press("Enter");
+        await page.keyboard.type("second");
+
+        // Tab on the second item must nest it (create a sublist) rather than move
+        // the caret to the next table cell.
+        await page.keyboard.press("Tab");
+
+        // A nested list exists inside the table cell: a <ul> descendant of an <li>.
+        await expect(editor.locator("table li ul")).toHaveCount(1);
+    });
+
+    test("inserting a YouTube URL renders a framable embed URL", async ({ page }) => {
+        await page.goto("/p/advanced");
+        await waitForMendixApp(page);
+
+        const widget = page.locator(".mx-name-richText1");
+        const editor = widget.locator(".tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        await editor.click();
+        await editor.selectText();
+        await page.keyboard.press("Backspace");
+
+        await widget.locator('.tiptap-toolbar button[title="Insert YouTube Video"]').click();
+        const dialog = widget.locator(".toolbar-dialog.video-dialog").first();
+        await expect(dialog).toBeVisible();
+
+        await dialog.locator("#video-url").fill("https://www.youtube.com/watch?v=3k66DQuU31A");
+        await dialog.locator('button[type="submit"]').click();
+
+        // Assert on the iframe attributes only, never on the frame's contents: loading the
+        // real player would make this test depend on YouTube being reachable from CI.
+        // A /watch URL sets X-Frame-Options: sameorigin, so only /embed/ is playable.
+        const iframe = editor.locator(".youtube-container iframe");
+        await expect(iframe).toHaveAttribute("src", /^https:\/\/www\.youtube\.com\/embed\/3k66DQuU31A/);
+        await expect(iframe).toHaveAttribute("title", /.+/);
+        await expect(iframe).toHaveAttribute("allow", /encrypted-media/);
+    });
 });

packages/pluggableWidgets/rich-text-web/e2e/RichTextWordPaste.spec.js

@@ -0,0 +1,146 @@
+import { expect, test } from "@mendix/run-e2e/fixtures";
+import { waitForMendixApp } from "@mendix/run-e2e/mendix-helpers";
+
+/**
+ * Word clipboard HTML. The heading is the shape Word actually puts on the
+ * clipboard for a numbered heading: the number lives in an `mso-list:Ignore`
+ * span padded by a 7pt run of non-breaking spaces, wrapped in a downlevel-revealed
+ * conditional comment, and the indent is a `26.1pt` margin that carries an
+ * `mso-list` level alongside it. The bullet paragraph uses Word's symbol-font
+ * hack, where a middle dot in Symbol stands in for a real bullet character.
+ */
+const WORD_CLIPBOARD_HTML = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
+<head><meta name=Generator content="Microsoft Word 15"></head>
+<body>
+<div class=WordSection1>
+<h1 style='margin-top:6.0pt;margin-right:0in;margin-bottom:6.0pt;margin-left:
+26.1pt;mso-list:l0 level1 lfo1;tab-stops:list 26.1pt left .5in'><![if !supportLists]><span
+style='mso-fareast-font-family:Arial;mso-bidi-font-family:Arial'><span
+style='mso-list:Ignore'>2.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</span></span></span><![endif]><span style='mso-bidi-font-family:Arial'>SCOPE
+OF ESTIMATE<o:p></o:p></span></h1>
+<p class=MsoListParagraph style='margin-left:72.0pt;text-indent:-18.0pt;mso-list:l1 level2 lfo2'><![if !supportLists]><span
+style='font-family:Symbol'><span style='mso-list:Ignore'>·<span
+style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp; </span></span></span><![endif]><span
+style='mso-bidi-font-family:Arial'>Bulleted detail<o:p></o:p></span></p>
+</div>
+</body>
+</html>`;
+
+/** Pastes `text/html` into a contenteditable the way a real clipboard paste arrives. */
+async function pasteHtml(editor, html) {
+    await editor.click();
+    await editor.evaluate((element, clipboardHtml) => {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.setData("text/html", clipboardHtml);
+        dataTransfer.setData("text/plain", element.textContent ?? "");
+        element.dispatchEvent(
+            new ClipboardEvent("paste", { clipboardData: dataTransfer, bubbles: true, cancelable: true })
+        );
+    }, html);
+}
+
+/** Empties the editor so assertions only see the pasted content. */
+async function clearEditor(page, editor) {
+    await editor.click();
+    await editor.selectText();
+    await page.keyboard.press("Backspace");
+}
+
+test.describe("RichText — pasting from Microsoft Word", () => {
+    test.describe.configure({ mode: "serial" });
+
+    test("indents pasted Word content by its real level and keeps the list marker readable", async ({ page }) => {
+        await page.goto("/p/advanced");
+        await waitForMendixApp(page);
+
+        const widget = page.locator(".mx-name-richText1");
+        const editor = widget.locator(".tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        await clearEditor(page, editor);
+        await pasteHtml(editor, WORD_CLIPBOARD_HTML);
+
+        // The heading survives as a heading and its number survives as text.
+        const heading = editor.locator("h1");
+        await expect(heading).toHaveCount(1);
+        await expect(heading).toContainText("2. SCOPE OF ESTIMATE");
+
+        // Level 1 emits `2em`. The bug under test emitted `20em` — the clamped
+        // maximum — for this same 26.1pt source margin. Asserted on the emitted
+        // value rather than the computed pixels, because `em` resolves against
+        // the heading's own font-size and so is not a fixed pixel count.
+        await expect(heading).toHaveAttribute("style", /margin-left:\s*2em/);
+        await expect(heading).not.toHaveAttribute("style", /margin-left:\s*20em/);
+
+        // The bullet paragraph is at Word level 2, and its symbol-font middle dot
+        // is now a real bullet character rather than a literal `·` in Symbol.
+        const bullet = editor.locator("p", { hasText: "Bulleted detail" }).first();
+        await expect(bullet).toHaveAttribute("style", /margin-left:\s*4em/);
+        await expect(bullet).toContainText("• Bulleted detail");
+    });
+
+    test("leaves no Word markup residue in the editor output", async ({ page }) => {
+        await page.goto("/p/advanced");
+        await waitForMendixApp(page);
+
+        const editor = page.locator(".mx-name-richText1 .tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        await clearEditor(page, editor);
+        await pasteHtml(editor, WORD_CLIPBOARD_HTML);
+        await expect(editor.locator("h1")).toContainText("SCOPE OF ESTIMATE");
+
+        const html = await editor.innerHTML();
+
+        expect(html).not.toMatch(/mso-/i);
+        expect(html).not.toMatch(/Mso[A-Z]/);
+        expect(html).not.toContain("tab-stops");
+        expect(html).not.toContain("supportLists");
+        expect(html).not.toContain("o:p");
+        // The 7pt tab filler and its run of non-breaking spaces are gone.
+        expect(html).not.toContain("7pt");
+        // The number is text in the block, not a reconstructed list.
+        expect(html).not.toContain("<ol");
+    });
+
+    test("keeps Word indentation in class mode, where margins are not emitted", async ({ page }) => {
+        await page.goto("/p/classmode");
+        await waitForMendixApp(page);
+
+        const editor = page.locator(".mx-name-richText1 .tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        await clearEditor(page, editor);
+        await pasteHtml(editor, WORD_CLIPBOARD_HTML);
+
+        const heading = editor.locator("h1");
+        await expect(heading).toContainText("2. SCOPE OF ESTIMATE");
+        await expect(heading).toHaveAttribute("data-indent", "1");
+        await expect(heading).toHaveClass(/indent-1/);
+
+        // Class mode expresses indentation through the class, never inline.
+        expect(await editor.innerHTML()).not.toMatch(/style="[^"]*margin-left/);
+    });
+
+    test("indents a paste from a non-Word source from its margin alone", async ({ page }) => {
+        await page.goto("/p/advanced");
+        await waitForMendixApp(page);
+
+        const editor = page.locator(".mx-name-richText1 .tiptap");
+        await editor.scrollIntoViewIfNeeded();
+        await expect(editor).toBeVisible();
+
+        await clearEditor(page, editor);
+        await pasteHtml(editor, '<h1 style="margin-left: 64px">Plain heading</h1>');
+
+        // The sanitizer does not run here — there are no Word markers — so the
+        // level comes from unit-aware margin parsing alone: 64px is two levels.
+        const heading = editor.locator("h1");
+        await expect(heading).toContainText("Plain heading");
+        await expect(heading).toHaveAttribute("style", /margin-left:\s*4em/);
+    });
+});

packages/pluggableWidgets/rich-text-web/openspec/changes/add-cell-column-width/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-06-05