[WC-3464] Rich text Tiptapeditor

[gjulivan]

Pull request type

---

Description

[yordan-st]

Would have a look at the high and medium flagged CC review comments

[github-actions]

AI Code Review

🔶 Changes requested — one or more medium-severity items must be addressed

---

What was reviewed

File	Change
packages/pluggableWidgets/rich-text-web/src/RichText.tsx	Removed dojo-incubator workaround, constructWrapperStyle, enableStatusBar forwarding, and readOnlyStyle class logic; simplified to a clean loading guard
packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts	Fixed import path (typings/ → ../typings/); added helpButton to toolbarGroupKeys
packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js	Migrated selectors from Quill to Tiptap; added class-mode, code-view, and empty-content tests; added serial mode
packages/pluggableWidgets/rich-text-web/package.json	Replaced Quill/CodeMirror deps with Tiptap + highlight.js + radix-ui stack; version bump 4.12.0 → 4.13.0; pinned MENDIX_VERSION=11.9.1 in e2e scripts
packages/pluggableWidgets/rich-text-web/rollup.config.mjs	Added @rollup/plugin-json
packages/pluggableWidgets/rich-text-web/CHANGELOG.md	Added Unreleased section with security fix, new features, and bug fixes

Skipped (out of scope): openspec/**, dist/, pnpm-lock.yaml, snapshot PNG

---

Findings

🔶 Medium — CI code quality check is failing

File: packages/pluggableWidgets/rich-text-web/src/extensions/TableBackgroundColor.ts lines 21, 557, 570, 686, 697, 709
Problem: The Run code quality check CI job is failing with exit code 1. ESLint reports "Missing return type on function" at 6 locations in TableBackgroundColor.ts, and also in the PR's unit test run (@mendix/rich-text-web#test exited 1). These must be green before merge.
Fix: Add explicit return types to the six flagged functions in TableBackgroundColor.ts. For example:

// before
function parseBorderStyle(value) { … }

// after
function parseBorderStyle(value: string): string { … }

---

🔶 Medium — ESLint import-order errors in two source files

File: packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx line 27
File: packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx line 6
Problem: The linter reports `classnames` import should occur before import of `react` (Toolbar.tsx) and `classnames` import should occur before import of `highlight.js/lib/core` (HighlightedCodeEditor.tsx). These are caught by the same failing CI check above.
Fix: Move the classnames import above framework/library imports in both files:

// Toolbar.tsx — move classnames to the top of the import block
import classNames from "classnames";
import { ... } from "react";
// …

---

🔶 Medium — ESLint import-order errors in two test files

File: packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx line 3
File: packages/pluggableWidgets/rich-text-web/src/__tests__/HelpButton.spec.tsx line 3
Problem: `@testing-library/react` import should occur before import of `@mendix/widget-plugin-test-utils` in both test files. These also contribute to the failing check.
Fix: Reorder imports so @testing-library/react precedes @mendix/widget-plugin-test-utils:

import { render, screen } from "@testing-library/react";
import { EditableValueBuilder } from "@mendix/widget-plugin-test-utils";

---

⚠️ Low — page.waitForTimeout(500) hardcoded delay in new E2E test

File: packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js line 212
Note: The "clearing all content" test uses await page.waitForTimeout(500) to wait for the blur/save path. Per repo E2E guidelines this should be replaced with a web-first assertion. If the save triggers a visible DOM change (e.g. a React re-render that can be observed), assert on that instead:

// prefer a web-first assertion over a fixed sleep
await expect(editor).toHaveText(""); // or waitForFunction / toBeEmpty
await page.keyboard.press("Tab");
// remove the waitForTimeout(500)

If no DOM signal is available, add a comment explaining why the timeout is necessary.

---

⚠️ Low — readOnlyStyle class removed without CHANGELOG note

File: packages/pluggableWidgets/rich-text-web/src/RichText.tsx
Note: The PR removes widget-rich-text-readonly-${readOnlyStyle} CSS classes that were previously applied to the root element. If end-user themes or Atlas customizations target these classes, removing them is a behavioural/visual breaking change. The CHANGELOG's "Changed" section does not mention this removal. Consider adding a note so integrators are aware.

---

Positives

• stringAttribute.status === "loading" guard is preserved correctly, protecting against uninitialized Mendix EditableValue reads.
• The dojo-incubator MutationObserver workaround is cleanly removed (with the observer's disconnect() cleanup), not just commented out.
• All new E2E tests use @mendix/run-e2e/fixtures and waitForMendixApp, correctly following repo conventions — no raw @playwright/test import or waitForLoadState("networkidle").
• Import path fix in editorConfig.ts (typings/ → ../typings/) is a clean correctness fix.
• CHANGELOG entries are thorough and user-facing (behaviour-focused, not implementation-focused).