chore: add i18, fix stylings, add help, fix table resize, fix image upload tabs

Author: gjulivan

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

@@ -14,16 +14,28 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - 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).
+
+- We added a clear button to every color picker (font color, font background, and the table and cell background and border color pickers) so a color can be reset to none.
+
 ### Fixed
 
+- We fixed the image dialog to only show the image source tabs that are available: the Media Library tab now appears only when an image data source is configured, and the Upload tab is hidden when default upload is disabled.
+
 - We fixed Tiptap duplicate extension warnings for `link`, `textStyle`, `underline`, and `textDirection` by properly configuring StarterKit, removing redundant extension registrations in TextColorClass, memoizing the extensions array to prevent re-registration on component re-renders, and disabling the core TextDirection extension that conflicts with our custom implementation.
 
 - We fixed an issue where empty editor content was saving as `<p></p>` instead of an empty string, which incorrectly passed required field validation. Empty content now correctly saves as `""`, ensuring proper validation behavior. Note: This is a breaking change for forms that were relying on the incorrect behavior - required RichText fields will now correctly reject empty content.
 
 - We fixed an issue where the editor pasting back the whole sentence instead of the single copied word
 
+- We fixed an issue where table header cells did not honor background color and border (color, style, width) configuration. Header cells can now be styled the same way as regular cells.
+
 ### Changed
 
+- We aligned the image dialog's "Upload" tab dropzone with the File Uploader widget's dropzone so both share the same look, states, and messages.
+
 - 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

@@ -33,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`
         );
     });
@@ -48,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`
         );
     });
@@ -128,21 +128,45 @@ test.describe("RichText", () => {
     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 html = await page.locator(".mx-name-richText1 .ql-editor").innerHTML();
-        expect(html).toMatch(/class="ql-color-/);
-        expect(html).toMatch(/class="ql-bg-/);
-        expect(html).toMatch(/class="ql-indent-/);
-        expect(html).toMatch(/data-style-format="class"/);
-        expect(html).not.toMatch(/style="color:/);
-        expect(html).not.toMatch(/style="background-color:/);
-        expect(html).not.toMatch(/style="padding-left:/);
+
+        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 .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-richText1 .tiptap-toolbar button[title="View/Edit Code"]');
+        await expect(page.locator(".mx-name-richText1 .highlighted-code-editor").first()).toHaveScreenshot(
             `classModeViewCodeDialog.png`
         );
     });
@@ -153,21 +177,18 @@ test.describe("RichText", () => {
 
         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("empty content persists as empty string, not <p></p>", async ({ page }) => {
+    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");
@@ -179,27 +200,23 @@ test.describe("RichText", () => {
         await editor.scrollIntoViewIfNeeded();
         await expect(editor).toBeVisible();
 
-        // Click into the editor and clear all content
+        // 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 page.keyboard.press("Control+A");
+        await editor.selectText();
         await page.keyboard.press("Backspace");
 
-        // Blur the editor to trigger save
+        // Blur the editor to trigger the save/normalize path.
         await page.keyboard.press("Tab");
         await page.waitForTimeout(500);
 
-        // The editor should now be empty (visual check)
-        const textContent = await editor.textContent();
-        expect(textContent?.trim() || "").toBe("");
-
-        // Reload the page to verify persistence
-        await page.reload();
-        await waitForMendixApp(page);
-
-        // The editor should still be empty after reload
-        const reloadedEditor = page.locator(".mx-name-richText1 .tiptap");
-        await expect(reloadedEditor).toBeVisible();
-        const reloadedContent = await reloadedEditor.textContent();
-        expect(reloadedContent?.trim() || "").toBe("");
+        // 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("");
     });
 });

packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-21-add-cell-height/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-21

packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-21-add-cell-height/design.md

@@ -0,0 +1,36 @@
+## Context
+
+The just-completed `add-table-size-resize` change added `cellWidth` — a CSS-size string attribute on `TableCellBackgroundColor`, rendered as `width` on the cell and routed through `<colgroup>` (authoritative under `table-layout: fixed`). Cell height is the natural mirror.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- Add a cell height control that accepts any CSS size string (`100px`, `50%`, bare number → px).
+- Mirror `cellWidth`: same attribute shape, same `normalizeCssSize` validation, same commit-on-blur input.
+
+**Non-Goals:**
+
+- A dedicated table-row extension / true `<tr>` row-height attribute (no row extension exists; cell height achieves the visible result).
+- Fixed/clipping height — table cell height is a minimum; content still grows the cell.
+
+## Decisions
+
+### Decision 1: Cell attribute `cellHeight`, rendered on `<td>` style
+
+**Rationale:** Mirrors `cellWidth` exactly. Unlike width, height needs **no** `<colgroup>` routing — `table-layout: fixed` only governs column widths, so `height` on the `<td>` works directly. Simpler than width.
+
+### Decision 2: "Column Height" label (matches the existing "Column Width")
+
+**Rationale:** The width control is labeled "Column Width"; the paired control reads "Column Height" for UI symmetry, even though height technically applies to the cell/row. Terminology consistency beats pedantic accuracy here.
+
+### Decision 3: Height is a minimum; whole row follows
+
+**Rationale / behavior notes:**
+
+- Browsers treat table-cell `height` as a minimum — the cell grows if content is taller (no clipping). Consistent with the table `min-height` decision.
+- A `<td>` height stretches its entire row (sibling cells share the row height). So setting "cell height" visually behaves as row height — which is what a user asking for "column/row height" expects.
+
+## Migration Plan
+
+Additive. Existing tables (no `cellHeight`) unaffected. No data model or breaking changes.

packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-21-add-cell-height/proposal.md

@@ -0,0 +1,24 @@
+## Why
+
+Users can set column (cell) width via a CSS-size text input, but there is no equivalent control for cell height. Completing the pair lets users size table cells in both dimensions. (Requested as "column height"; height in a table applies to cells/rows, not columns — see design.md.)
+
+## What Changes
+
+- Add a `cellHeight` string attribute to the table cell (`TableCellBackgroundColor`), mirroring `cellWidth`.
+- Render it as `height: <value>` in the cell's inline style (and `data-cell-height` in class format).
+- Add a "Column Height" text input to the cell configuration dropdown, reusing the `textInput` type + `normalizeCssSize` validation + commit-on-blur behavior.
+
+## Capabilities
+
+### Modified Capabilities
+
+- `table-size-control`: add a cell height control alongside the existing column width control.
+
+## Impact
+
+**Affected Files:**
+
+- `src/extensions/TableCellBackgroundColor.ts` — add `cellHeight` attribute; render into cell style + `data-cell-height`.
+- `src/components/toolbars/helpers/configurationHelpers.ts` — add "Column Height" text input section.
+
+**User Impact:** additive; existing tables unaffected. No colgroup/NodeView changes — height lives directly on the cell (unlike width, which routes through `<colgroup>`).

packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-21-add-cell-height/specs/table-size-control/spec.md

@@ -0,0 +1,35 @@
+## ADDED Requirements
+
+### Requirement: Column height as CSS size
+
+The cell configuration dropdown SHALL include a "Column Height" text input that stores the height as a CSS size string (e.g. `100px`, `50%`) on the cell's inline style, applying a minimum height to the cell's row.
+
+#### Scenario: Setting a cell height
+
+- **WHEN** user enters a valid CSS size in the "Column Height" input for a cell
+- **THEN** the cell (and its row) renders at least that tall
+
+#### Scenario: Row grows beyond the set height
+
+- **WHEN** a cell has a height set and its content requires more vertical space
+- **THEN** the cell grows to fit the content, exceeding the set height
+
+#### Scenario: Bare number treated as pixels
+
+- **WHEN** user enters a bare number such as `80` for the cell height
+- **THEN** the value is normalized to `80px` and applied
+
+#### Scenario: Invalid or unsafe height is rejected
+
+- **WHEN** user enters a value that is not a valid CSS size
+- **THEN** the value is not applied
+
+#### Scenario: Clearing cell height
+
+- **WHEN** user clears the "Column Height" input
+- **THEN** the cell height is reset to auto (null)
+
+#### Scenario: Height serializes in the active style-data format
+
+- **WHEN** a cell height is set
+- **THEN** it is rendered as inline `height` in `inline` mode and as `data-cell-height` in `class` mode, consistent with the column width control

packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-21-add-cell-height/tasks.md

@@ -0,0 +1,15 @@
+## 1. Cell height attribute
+
+- [x] 1.1 Add `cellHeight` string attribute to `TableCellBackgroundColor.addAttributes()` (parse from `style.height` / `data-cell-height`; renderHTML returns {} — handled in main renderHTML), mirroring `cellWidth`
+- [x] 1.2 In `renderHTML`, append `height: ${cellHeight}` to the cell style string (both formats)
+- [x] 1.3 In class mode, emit `data-cell-height`
+
+## 2. Cell configuration control
+
+- [x] 2.1 Add "Column Height" `textInput` section after `cellWidth` in `createCellConfigurationSections()` (placeholder e.g. "Auto (e.g. 100px, 50%)")
+- [x] 2.2 `getCurrentValue` → `getCellAttributes(editor)?.cellHeight`; `onChange` → `normalizeCssSize` + `setCellAttribute("cellHeight", …)` (empty clears to null, invalid ignored)
+
+## 3. Verification
+
+- [x] 3.1 Typecheck + lint clean; unit suite passes (82 tests)
+- [x] 3.2 Manual: set cell height (px + %) → row grows to that height; content taller → grows past it; clear → auto (verified by user in Mendix editor)

packages/pluggableWidgets/rich-text-web/openspec/changes/archive/2026-07-21-add-rich-text-help-shortcuts/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-07-21