diff --git a/packages/pluggableWidgets/rich-text-web/CHANGELOG.md b/packages/pluggableWidgets/rich-text-web/CHANGELOG.md index 2ab0b1c870..f7f9f122ce 100644 --- a/packages/pluggableWidgets/rich-text-web/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js b/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js index c05860d869..5ba69f30bc 100644 --- a/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js +++ b/packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js @@ -2,6 +2,7 @@ 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 @@ test.describe("RichText", () => { 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 @@ test.describe("RichText", () => { 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 @@ test.describe("RichText", () => { 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

", 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