chore: initial version of rich text with tiptap

Author: gjulivan

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

@@ -6,6 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added new configuration to allow users to use class names instead of inline styling in generated HTML to support strict CSP.
+
+### Fixed
+
+- We fixed an issue where the editor pasting back the whole sentence instead of the single copied word
+
+### Changed
+
+- 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
 
 ### Added

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
     }) => {
@@ -115,6 +116,37 @@ 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 page.waitForLoadState("networkidle");
+        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 page.waitForLoadState("networkidle");
+        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:/);
+    });
+
+    test("compares with a screenshot baseline of the View/Edit Code dialog in class mode", async ({ page }) => {
+        await page.goto("/p/classmode");
+        await page.waitForLoadState("networkidle");
+        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(
+            `classModeViewCodeDialog.png`
+        );
+    });
+
     test("compares with a screenshot for rich text inside modal popup layout", async ({ page }) => {
         await page.goto("/");
         await waitForMendixApp(page);

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/viewCodeDialog-chromium-linux.png

@@ -24,15 +24,15 @@
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
-        "branchName": "rich-text-v4-web"
+        "branchName": "rich-text-v4-web-v2"
     },
     "scripts": {
         "build": "cross-env MPKOUTPUT=RichText.mpk pluggable-widgets-tools build:web",
         "create-gh-release": "rui-create-gh-release",
         "create-translation": "rui-create-translation",
         "dev": "cross-env MPKOUTPUT=RichText.mpk pluggable-widgets-tools start:web",
-        "e2e": "run-e2e ci",
-        "e2edev": "run-e2e dev --with-preps",
+        "e2e": "MENDIX_VERSION=11.9.1 run-e2e ci",
+        "e2edev": "MENDIX_VERSION=11.9.1 run-e2e dev --with-preps",
         "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
         "lint": "eslint src/ package.json",
         "publish-marketplace": "rui-publish-marketplace",
@@ -43,21 +43,42 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
-        "@codemirror/lang-html": "^6.4.9",
-        "@codemirror/state": "^6.5.2",
         "@floating-ui/dom": "^1.7.4",
         "@floating-ui/react": "^0.26.27",
         "@melloware/coloris": "^0.25.0",
-        "@uiw/codemirror-theme-github": "^4.23.13",
-        "@uiw/react-codemirror": "^4.23.13",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@tiptap/core": "^3.23.4",
+        "@tiptap/extension-color": "^3.23.4",
+        "@tiptap/extension-font-family": "^3.23.4",
+        "@tiptap/extension-highlight": "^3.23.5",
+        "@tiptap/extension-image": "^3.23.4",
+        "@tiptap/extension-link": "^3.23.4",
+        "@tiptap/extension-list": "^3.23.5",
+        "@tiptap/extension-list-item": "^3.23.5",
+        "@tiptap/extension-subscript": "^3.23.4",
+        "@tiptap/extension-superscript": "^3.23.4",
+        "@tiptap/extension-table": "^3.23.4",
+        "@tiptap/extension-table-cell": "^3.23.4",
+        "@tiptap/extension-table-header": "^3.23.4",
+        "@tiptap/extension-table-row": "^3.23.4",
+        "@tiptap/extension-task-item": "^3.23.5",
+        "@tiptap/extension-task-list": "^3.23.5",
+        "@tiptap/extension-text-align": "^3.23.4",
+        "@tiptap/extension-text-style": "^3.23.4",
+        "@tiptap/extension-underline": "^3.23.4",
+        "@tiptap/extension-youtube": "^3.23.4",
+        "@tiptap/pm": "^3.23.4",
+        "@tiptap/react": "^3.23.4",
+        "@tiptap/starter-kit": "^3.23.4",
+        "@uiw/react-color-compact": "^2.10.1",
         "classnames": "^2.5.1",
+        "highlight.js": "^11.11.1",
         "js-beautify": "^1.15.4",
         "katex": "^0.16.22",
         "linkifyjs": "^4.3.2",
         "lodash.merge": "^4.6.2",
-        "parchment": "^3.0.0",
-        "quill": "^2.0.3",
-        "quill-resize-module": "^2.0.4"
+        "react-dropzone": "^14.3.8",
+        "react-scroll-sync": "^1.0.2"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

packages/pluggableWidgets/rich-text-web/package.json

@@ -6,8 +6,6 @@ import {
     StructurePreviewProps
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { RichTextPreviewProps } from "typings/RichTextProps";
-import RichTextPreviewSVGDark from "./assets/rich-text-preview-dark.svg";
-import RichTextPreviewSVGLight from "./assets/rich-text-preview-light.svg";
 
 const toolbarGroupKeys: Array<keyof RichTextPreviewProps> = [
     "history",
@@ -74,17 +72,16 @@ export function getProperties(values: RichTextPreviewProps, defaultProperties: P
     return defaultProperties;
 }
 
-export function getPreview(props: RichTextPreviewProps, isDarkMode: boolean): StructurePreviewProps {
-    const variant = isDarkMode ? RichTextPreviewSVGDark : RichTextPreviewSVGLight;
-    const doc = decodeURIComponent(variant.replace("data:image/svg+xml,", ""));
-
+export function getPreview(props: RichTextPreviewProps, _isDarkMode: boolean): StructurePreviewProps {
     const richTextPreview = container()(
         rowLayout({ columnSize: "grow", borders: false })({
-            type: "Image",
-            document: props.stringAttribute
-                ? doc.replace("[No attribute selected]", `[${props.stringAttribute}]`)
-                : doc,
-            height: 150
+            type: "Container",
+            children: [
+                {
+                    type: "Text",
+                    content: props.stringAttribute ? `Rich Text: ${props.stringAttribute}` : "Rich Text Editor"
+                }
+            ]
         })
     );
 

packages/pluggableWidgets/rich-text-web/src/RichText.editorConfig.ts

@@ -1,19 +1,10 @@
-import { ReactElement } from "react";
-import RichTextPreviewSVG from "./assets/rich-text-preview-light.svg";
+import { ReactElement, createElement } from "react";
 import { RichTextPreviewProps } from "../typings/RichTextProps";
 
-export function preview(props: RichTextPreviewProps): ReactElement {
-    let doc = decodeURI(RichTextPreviewSVG);
-    doc = props.stringAttribute ? doc.replace("[No attribute selected]", `[${props.stringAttribute}]`) : doc;
+export function preview(_props: RichTextPreviewProps): ReactElement {
+    return createElement("div", { className: "widget-rich-text-preview" }, "Rich Text Editor");
+}
 
-    return (
-        <div className="widget-rich-text">
-            <img src={doc} alt="" />
-            {props.imageSource && (
-                <props.imageSourceContent.renderer caption="Place image selection widget here">
-                    <div />
-                </props.imageSourceContent.renderer>
-            )}
-        </div>
-    );
+export function getPreviewCss(): string {
+    return require("./ui/RichText.scss");
 }

packages/pluggableWidgets/rich-text-web/src/RichText.editorPreview.tsx

@@ -1,59 +1,24 @@
 import { ValidationAlert } from "@mendix/widget-plugin-component-kit/Alert";
 import classNames from "classnames";
-import { Fragment, ReactElement, useEffect, useState } from "react";
+import { Fragment, ReactElement } from "react";
 import { RichTextContainerProps } from "../typings/RichTextProps";
 import EditorWrapper from "./components/EditorWrapper";
 import "./ui/RichText.scss";
-import { constructWrapperStyle } from "./utils/helpers";
 
 export default function RichText(props: RichTextContainerProps): ReactElement {
-    const { stringAttribute, readOnlyStyle } = props;
-
-    const wrapperStyle = constructWrapperStyle(props);
-    const [isIncubator, setIsIncubator] = useState(true);
-
-    useEffect(() => {
-        // this is a fix for dojo runtime rendering
-        // in dojo runtime, DOM is rendered inside <div class="mx-incubator mx-offscreen"> at the inital stage
-        // and moved to content once it fully loads, which cause rich text editor looses reference to it's iframe
-        // this fix waits for it to be fully out of incubator div, then only fully renders rich text afterwards.
-        const observedIncubator = document.querySelector(`.mx-incubator.mx-offscreen`);
-        const observer = new MutationObserver((_mutationList, _observer) => {
-            if (!observedIncubator?.childElementCount || observedIncubator?.childElementCount <= 0) {
-                setIsIncubator(false);
-            }
-        });
-
-        if (observedIncubator && observedIncubator.childElementCount) {
-            observer.observe(observedIncubator, {
-                childList: true
-            });
-        } else {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setIsIncubator(false);
-        }
-
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
+    const { stringAttribute } = props;
 
     return (
         <Fragment>
-            {stringAttribute.status === "loading" || isIncubator ? (
+            {stringAttribute.status === "loading" ? (
                 <div className="mx-progress"></div>
             ) : (
                 <EditorWrapper
                     {...props}
-                    style={wrapperStyle}
                     className={classNames(
                         "widget-rich-text",
-                        stringAttribute.readOnly && readOnlyStyle === "readPanel"
-                            ? "form-control-static"
-                            : "form-control",
-                        stringAttribute.readOnly ? `widget-rich-text-readonly-${readOnlyStyle}` : ""
+                        stringAttribute.readOnly ? "form-control-static" : "form-control"
                     )}
-                    enableStatusBar={props.enableStatusBar && !stringAttribute.readOnly}
                 />
             )}
             <ValidationAlert>{stringAttribute.validation}</ValidationAlert>

packages/pluggableWidgets/rich-text-web/src/RichText.tsx

@@ -220,6 +220,14 @@
                         <enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="styleDataFormat" type="enumeration" defaultValue="inline">
+                    <caption>Style data format</caption>
+                    <description>Choose how to render styling attribute in HTML</description>
+                    <enumerationValues>
+                        <enumerationValue key="inline">inline</enumerationValue>
+                        <enumerationValue key="class">class</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">

packages/pluggableWidgets/rich-text-web/src/RichText.xml

@@ -47,7 +47,8 @@ describe("Rich Text", () => {
             customFonts: [],
             enableDefaultUpload: true,
             formOrientation: "vertical",
-            linkValidation: true
+            linkValidation: true,
+            styleDataFormat: "inline"
         };
     });
 

packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx

@@ -0,0 +1,59 @@
+import { CustomListItem, CustomListItemClass, STANDARD_LIST_TYPES } from "../utils/formats/customList";
+
+// CustomListItem and CustomListItemClass extend Quill's ListItem blot.
+// We test only the static helpers and the constructor-level DOM mutation,
+// which do not require a live Quill / Scroll instance.
+
+function makeListNode(listType = "ordered"): HTMLElement {
+    const li = document.createElement("li");
+    li.dataset.list = listType;
+    return li;
+}
+
+describe("STANDARD_LIST_TYPES", () => {
+    it("contains exactly the four standard types", () => {
+        expect(STANDARD_LIST_TYPES).toEqual(["ordered", "checked", "unchecked", "bullet"]);
+    });
+});
+
+describe("CustomListItem.formats", () => {
+    it("returns data-list value for standard list types", () => {
+        const node = makeListNode("ordered");
+        expect(CustomListItem.formats(node)).toBe("ordered");
+    });
+
+    it("prefers data-custom-list over data-list when both are present", () => {
+        const node = makeListNode("ordered");
+        node.dataset.customList = "lower-alpha";
+        expect(CustomListItem.formats(node)).toBe("lower-alpha");
+    });
+
+    it("returns undefined when neither attribute is present", () => {
+        const node = document.createElement("li");
+        expect(CustomListItem.formats(node)).toBeUndefined();
+    });
+});
+
+describe("CustomListItemClass — styleFormat marker contract", () => {
+    // CustomListItemClass constructor assigns domNode.dataset.styleFormat = "class".
+    // Instantiating it requires a live Quill Scroll instance (a Quill integration concern),
+    // so here we verify the contract at the class-definition level and the DOM-mutation logic
+    // in isolation.
+
+    it("is a subclass of CustomListItem", () => {
+        expect(Object.getPrototypeOf(CustomListItemClass)).toBe(CustomListItem);
+    });
+
+    it("the styleFormat marker 'class' round-trips correctly on a DOM node (logic under test)", () => {
+        // This mirrors exactly what the constructor body does:
+        //   domNode.dataset.styleFormat = "class";
+        const node = makeListNode("ordered");
+        node.dataset.styleFormat = "class";
+        expect(node.dataset.styleFormat).toBe("class");
+    });
+
+    it("inline-mode list nodes do NOT have a styleFormat marker by default", () => {
+        const node = makeListNode("ordered");
+        expect(node.dataset.styleFormat).toBeUndefined();
+    });
+});