- 
- {props.imageSource && (
-
-
-
- )}
-
- );
+export function getPreviewCss(): string {
+ return require("./ui/RichText.scss");
}
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.tsx b/packages/pluggableWidgets/rich-text-web/src/RichText.tsx
index 283829650c..9eb127cb07 100644
--- a/packages/pluggableWidgets/rich-text-web/src/RichText.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/RichText.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 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 (
- {stringAttribute.status === "loading" || isIncubator ? (
+ {stringAttribute.status === "loading" ? (
) : (
{stringAttribute.validation}
diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.xml b/packages/pluggableWidgets/rich-text-web/src/RichText.xml
index 8fb841b775..ce242e9f53 100644
--- a/packages/pluggableWidgets/rich-text-web/src/RichText.xml
+++ b/packages/pluggableWidgets/rich-text-web/src/RichText.xml
@@ -17,9 +17,9 @@
+
Enable status bar
- Show a status bar at the bottom of the editor displaying document metrics
@@ -220,6 +220,14 @@
Character count (including HTML)
+
+ Style data format
+ Choose how to render styling attribute in HTML
+
+ inline
+ class
+
+
@@ -317,9 +325,10 @@
Code
Code Block
View Code
- Left Align
+ Left Align
Center Align
Right Align
+ Justify Align
Font Type
Font Size
Color
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx b/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx
index 1ab4c89bad..870d49894d 100644
--- a/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx
@@ -47,7 +47,8 @@ describe("Rich Text", () => {
customFonts: [],
enableDefaultUpload: true,
formOrientation: "vertical",
- linkValidation: true
+ linkValidation: true,
+ styleDataFormat: "inline"
};
});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/customList.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/customList.spec.ts
new file mode 100644
index 0000000000..0fec09d663
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/customList.spec.ts
@@ -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();
+ });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/fonts.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/fonts.spec.ts
new file mode 100644
index 0000000000..780fc6dd16
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/fonts.spec.ts
@@ -0,0 +1,148 @@
+import { FONT_LIST, FontClassAttributor, FontStyleAttributor, formatCustomFonts } from "../utils/formats/fonts";
+
+// parchment ClassAttributor and StyleAttributor operate directly on HTMLElement nodes —
+// no Quill instance is needed for unit-level attribute tests.
+
+function makeSpan(): HTMLElement {
+ return document.createElement("span");
+}
+
+// FontStyleAttributor --------------------------------------------------------
+
+describe("FontStyleAttributor", () => {
+ let attr: FontStyleAttributor;
+
+ beforeEach(() => {
+ attr = new FontStyleAttributor([]);
+ });
+
+ it("adds font-family style for a known font value", () => {
+ const node = makeSpan();
+ const result = attr.add(node, "arial");
+ expect(result).toBe(true);
+ expect(node.style.fontFamily).toMatch(/arial/i);
+ expect(node.dataset.value).toBe("arial");
+ });
+
+ it("returns false for an unknown font value", () => {
+ const node = makeSpan();
+ const result = attr.add(node, "not-a-real-font");
+ expect(result).toBe(false);
+ expect(node.style.fontFamily).toBe("");
+ });
+
+ it("reads back the value via dataset.value", () => {
+ const node = makeSpan();
+ attr.add(node, "courier-new");
+ expect(attr.value(node)).toBe("courier-new");
+ });
+
+ it("returns empty string for a node with no dataset.value", () => {
+ const node = makeSpan();
+ expect(attr.value(node)).toBe("");
+ });
+
+ it("applies custom fonts passed to the constructor", () => {
+ const custom = new FontStyleAttributor([
+ { value: "my-font", description: "My Font", style: "MyFont, sans-serif" }
+ ]);
+ const node = makeSpan();
+ expect(custom.add(node, "my-font")).toBe(true);
+ expect(node.style.fontFamily).toMatch(/MyFont/i);
+ });
+
+ it("FONT_LIST contains all 13 fonts including serif", () => {
+ const values = FONT_LIST.map(f => f.value);
+ expect(values).toContain("serif");
+ expect(values).toHaveLength(13);
+ });
+});
+
+// FontClassAttributor --------------------------------------------------------
+
+describe("FontClassAttributor", () => {
+ let attr: FontClassAttributor;
+
+ beforeEach(() => {
+ attr = new FontClassAttributor([]);
+ });
+
+ it("adds font-family- class for a known font value", () => {
+ const node = makeSpan();
+ const result = attr.add(node, "arial");
+ expect(result).toBe(true);
+ expect(node.classList.contains("font-family-arial")).toBe(true);
+ expect(node.dataset.value).toBe("arial");
+ });
+
+ it("returns false for an unknown font value and adds no class", () => {
+ const node = makeSpan();
+ const result = attr.add(node, "not-a-real-font");
+ expect(result).toBe(false);
+ const hasClass = Array.from(node.classList).some(c => c.startsWith("font-family-"));
+ expect(hasClass).toBe(false);
+ });
+
+ it("reads back the value via dataset.value", () => {
+ const node = makeSpan();
+ attr.add(node, "impact");
+ expect(attr.value(node)).toBe("impact");
+ });
+
+ it("returns empty string for a node with no dataset.value", () => {
+ const node = makeSpan();
+ expect(attr.value(node)).toBe("");
+ });
+
+ it("adds font-family-serif class for the serif font (Critical #3 regression guard)", () => {
+ const node = makeSpan();
+ const result = attr.add(node, "serif");
+ expect(result).toBe(true);
+ expect(node.classList.contains("font-family-serif")).toBe(true);
+ });
+
+ it("applies custom fonts passed to the constructor", () => {
+ const custom = new FontClassAttributor([
+ { value: "my-font", description: "My Font", style: "MyFont, sans-serif" }
+ ]);
+ const node = makeSpan();
+ expect(custom.add(node, "my-font")).toBe(true);
+ expect(node.classList.contains("font-family-my-font")).toBe(true);
+ });
+
+ it("emits class-based name, not inline style", () => {
+ const node = makeSpan();
+ attr.add(node, "helvetica");
+ expect(node.style.fontFamily).toBe("");
+ expect(node.classList.contains("font-family-helvetica")).toBe(true);
+ });
+});
+
+// formatCustomFonts ----------------------------------------------------------
+
+describe("formatCustomFonts", () => {
+ it("maps custom font objects to FONT_LIST shape", () => {
+ const result = formatCustomFonts([{ fontName: "My Brand Font", fontStyle: "MyBrandFont, sans-serif" }]);
+ expect(result).toEqual([
+ { value: "my-brand-font", description: "My Brand Font", style: "MyBrandFont, sans-serif" }
+ ]);
+ });
+
+ it("lowercases and hyphenates multi-word font names", () => {
+ const result = formatCustomFonts([{ fontName: "Open Sans", fontStyle: "Open Sans, sans-serif" }]);
+ expect(result[0].value).toBe("open-sans");
+ });
+
+ it("returns an empty array when called with no arguments", () => {
+ expect(formatCustomFonts()).toEqual([]);
+ });
+
+ it("returns an empty array for an empty input", () => {
+ expect(formatCustomFonts([])).toEqual([]);
+ });
+
+ it("handles undefined fontName gracefully", () => {
+ const result = formatCustomFonts([{ fontName: undefined as any, fontStyle: "serif" }]);
+ expect(result[0].value).toBe("");
+ });
+});
diff --git a/packages/pluggableWidgets/rich-text-web/src/__tests__/helpers.spec.ts b/packages/pluggableWidgets/rich-text-web/src/__tests__/helpers.spec.ts
new file mode 100644
index 0000000000..85f9649a37
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/helpers.spec.ts
@@ -0,0 +1,143 @@
+import { INDENT_MAGIC_NUMBER, normalizeStyleAndClassAttribute } from "../utils/helpers";
+
+function makeDoc(html: string): Document {
+ const doc = document.implementation.createHTMLDocument();
+ doc.body.innerHTML = html;
+ return doc;
+}
+
+describe("INDENT_MAGIC_NUMBER", () => {
+ it("equals 3", () => {
+ expect(INDENT_MAGIC_NUMBER).toBe(3);
+ });
+});
+
+describe("normalizeStyleAndClassAttribute — class mode (inline → class)", () => {
+ it("converts padding-left:3em to ql-indent-1 and removes the style", () => {
+ const doc = makeDoc(`({
- presetValue: 0
-});
-
-export function FormatsContainer({ presetValue, children }: ToolbarConsumerContext & PropsWithChildren): ReactElement {
- const toolbarContextValue = useContext(ToolbarContext);
- return (
- = presetValue}>
-
- {children}
-
-
- );
-}
-
-export function ToolbarButton({
- presetValue,
- children,
- className,
- value,
- onClick,
- title
-}: ToolbarButtonProps): ReactElement {
- const toolbarContextValue = useContext(ToolbarContext);
- return (
- = presetValue}>
-
-
- );
-}
-
-export function ToolbarDropdown({ presetValue, className, value, title }: ToolbarButtonProps): ReactElement {
- const toolbarContextValue = useContext(ToolbarContext);
- return (
- = presetValue}>
-
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/UndoRedo.tsx b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/UndoRedo.tsx
deleted file mode 100644
index 6f84717003..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/UndoRedo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ReactElement, useCallback } from "react";
-import { ToolbarButton } from "./ToolbarWrapper";
-import type { CustomToolbarProps } from "./customToolbars";
-
-export function UndoToolbar({ quill }: CustomToolbarProps): ReactElement {
- const onUndo = useCallback(() => {
- quill?.history.undo();
- }, [quill]);
-
- return ;
- custom?: boolean;
- } & DefaultComponentProps;
-};
-
-export const TOOLBAR_MAPPING: toolbarMappingType = {
- undo: { component: UndoToolbar, custom: true, title: "Undo" },
- redo: { component: RedoToolbar, custom: true, title: "Redo" },
- bold: { component: ToolbarButton, className: "ql-bold icons icon-Text-bold", title: "Bold" },
- italic: { component: ToolbarButton, className: "ql-italic icons icon-Text-italic", title: "Italic" },
- underline: {
- component: ToolbarButton,
- className: "ql-underline icons icon-Text-underline",
- presetValue: 2,
- title: "Underline"
- },
- strike: {
- component: ToolbarButton,
- className: "ql-strike icons icon-Text-strikethrough",
- presetValue: 3,
- title: "Strike"
- },
- superScript: {
- component: ToolbarButton,
- className: "ql-script icons icon-Text-superscript",
- value: "super",
- title: "Superscript"
- },
- subScript: {
- component: ToolbarButton,
- className: "ql-script icons icon-Text-subscript",
- value: "sub",
- title: "Subscript"
- },
- size: { component: ToolbarDropdown, className: "size ql-size", value: FONT_SIZE_LIST, title: "Font size" },
- orderedList: {
- component: ToolbarButton,
- className: "ql-list icons icon-List-numbers",
- value: "ordered",
- title: "Default list"
- },
- bulletList: {
- component: ToolbarButton,
- className: "ql-list icons icon-List-bullets",
- value: "bullet",
- title: "Bullet list"
- },
- lowerAlphaList: {
- component: ToolbarButton,
- className: "ql-list icons icon-List-lower-alpha",
- value: "lower-alpha",
- presetValue: 2,
- title: "Lower alpha list",
- children: IconLowerAlpha
- },
- checkList: {
- component: ToolbarButton,
- className: "ql-list icons icon-List-checklist",
- value: "check",
- presetValue: 3,
- title: "Check list"
- },
- minIndent: {
- component: ToolbarButton,
- className: "ql-indent icons icon-Text-indent-right",
- value: "-1",
- title: "Decrease indent"
- },
- plusIndent: {
- component: ToolbarButton,
- className: "ql-indent icons icon-Text-indent-left",
- value: "+1",
- title: "Increase indent"
- },
- direction: {
- component: ToolbarButton,
- className: "ql-direction direction icons",
- value: "rtl",
- presetValue: 2,
- title: "Text direction"
- },
- link: { component: ToolbarButton, className: "ql-link icons icon-Hyperlink", title: "Insert/edit link" },
- image: {
- component: ToolbarButton,
- className: "ql-image icons icon-Image",
- presetValue: 2,
- title: "Insert/edit image"
- },
- video: {
- component: ToolbarButton,
- className: "ql-video icons icon-Film",
- presetValue: 3,
- title: "Insert/edit video"
- },
- formula: {
- component: ToolbarButton,
- className: "ql-formula icons icon-Insert-edit-math",
- presetValue: 3,
- title: "Insert/edit formula"
- },
- blockquote: { component: ToolbarButton, className: "ql-blockquote icons icon-Blockquote", title: "Blockquote" },
- codeBlock: { component: ToolbarButton, className: "ql-code-block icons icon-Code-block", title: "Code block" },
- code: { component: ToolbarButton, className: "ql-code icons icon-Inline-code", title: "Code" },
- viewCode: {
- component: ToolbarButton,
- className: "ql-view-code icons icon-View-edit-code",
- title: "View/edit Code"
- },
- align: { component: ToolbarButton, className: "ql-align icons icon-Text-align-left", title: "Left align" },
- centerAlign: {
- component: ToolbarDropdown,
- className: "ql-align icons",
- value: ["center", "justify"],
- title: "Center align"
- },
- rightAlign: {
- component: ToolbarButton,
- className: "ql-align icons icon-Text-align-right",
- value: "right",
- title: "Right align"
- },
- font: { component: ToolbarDropdown, className: "ql-font font", value: FONT_LIST, title: "Font type" },
- color: { component: ToolbarDropdown, className: "ql-color icons", value: [], title: "Font color" },
- background: { component: ToolbarDropdown, className: "ql-background icons", value: [], title: "Font background" },
- header: {
- component: ToolbarDropdown,
- className: "ql-header",
- value: ["1", "2", "3", "4", "5", "6", false],
- title: "Font header"
- },
- clean: { component: ToolbarButton, className: "ql-clean icons icon-Clear-formating", title: "Clear formatting" },
- fullscreen: {
- component: FullscreenButton,
- title: "Fullscreen",
- custom: true
- },
- tableBetter: {
- component: ToolbarButton,
- className: "ql-table-better icons icon-Table",
- title: "Create Table",
- presetValue: 2
- }
-};
-
-type ToolbarGroupType = {
- [k: string]: string[];
-};
-
-export const TOOLBAR_GROUP: ToolbarGroupType = {
- history: ["undo", "redo"],
- fontStyle: ["bold", "italic", "underline", "strike"],
- fontScript: ["superScript", "subScript"],
- list: ["orderedList", "bulletList", "lowerAlphaList", "checkList"],
- indent: ["minIndent", "plusIndent", "direction"],
- align: ["align", "centerAlign", "rightAlign"],
- fontColor: ["font", "size", "color", "background"],
- embed: ["link", "image", "video", "formula"],
- header: ["header"],
- code: ["blockquote", "code", "codeBlock", "viewCode"],
- remove: ["clean"],
- view: ["fullscreen"],
- tableBetter: ["tableBetter"]
-};
-
-export type toolbarContentType = {
- presetValue?: number;
- children: Array;
-};
-
-export const DEFAULT_TOOLBAR: toolbarContentType[] = [
- {
- presetValue: 2,
- children: TOOLBAR_GROUP.history
- },
- {
- presetValue: 1,
- children: TOOLBAR_GROUP.fontStyle
- },
- {
- presetValue: 3,
- children: TOOLBAR_GROUP.fontScript
- },
- {
- presetValue: 1,
- children: TOOLBAR_GROUP.list
- },
- {
- presetValue: 1,
- children: TOOLBAR_GROUP.indent
- },
- {
- presetValue: 2,
- children: TOOLBAR_GROUP.align
- },
- {
- presetValue: 2,
- children: TOOLBAR_GROUP.fontColor
- },
- {
- presetValue: 1,
- children: TOOLBAR_GROUP.embed
- },
- {
- presetValue: 3,
- children: TOOLBAR_GROUP.header
- },
- {
- presetValue: 2,
- children: TOOLBAR_GROUP.code
- },
- {
- presetValue: 1,
- children: TOOLBAR_GROUP.remove
- },
- {
- presetValue: 2,
- children: TOOLBAR_GROUP.view
- },
- {
- presetValue: 2,
- children: TOOLBAR_GROUP.tableBetter
- }
-];
-
-export const IMG_MIME_TYPES = ["image/png", "image/jpeg"];
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/customToolbars.d.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/customToolbars.d.ts
deleted file mode 100644
index ab02d0d63a..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/customToolbars.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import Quill from "quill";
-
-export type ToolbarContextType = {
- presetValue: number;
-};
-
-export type ToolbarConsumerContext = {
- presetValue?: number;
-};
-
-export type ToolbarButtonProps = {
- className?: string;
- onClick?: () => void;
- value?: any;
- title: string;
-} & ToolbarConsumerContext &
- PropsWithChildren;
-
-export type CustomToolbarProps = {
- quill: Quill;
-};
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/presets.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/presets.ts
deleted file mode 100644
index f4534048b8..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/presets.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { RichTextContainerProps } from "typings/RichTextProps";
-import { DEFAULT_TOOLBAR, TOOLBAR_GROUP, type toolbarContentType } from "./constants";
-
-export function createPreset(config?: Partial): toolbarContentType[] {
- return config?.preset !== "custom"
- ? DEFAULT_TOOLBAR
- : config?.toolbarConfig === "basic"
- ? defineBasicGroups(config)
- : defineAdvancedGroups(config!);
-}
-
-function defineBasicGroups(widgetProps: Partial): toolbarContentType[] {
- const enabledGroups: Array = Object.entries(widgetProps).map(([prop, enabled]) => {
- if (Object.hasOwn(TOOLBAR_GROUP, prop) && enabled) {
- return {
- children: TOOLBAR_GROUP[prop]
- };
- } else {
- return undefined;
- }
- });
- return enabledGroups.filter(x => x !== undefined) as toolbarContentType[];
-}
-
-function defineAdvancedGroups(widgetProps: Partial): toolbarContentType[] {
- const { advancedConfig: items } = widgetProps;
-
- const result: toolbarContentType[] = [
- {
- children: []
- }
- ];
- items?.forEach(item => {
- if (item.ctItemType === "separator") {
- result.push({
- children: []
- });
- } else {
- result[result.length - 1].children.push(item.ctItemType);
- }
- });
-
- return result;
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts
deleted file mode 100644
index 34aee064a9..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import Quill, { Range } from "quill";
-import { Delta } from "quill/core";
-import Emitter from "quill/core/emitter";
-import { Dispatch, MutableRefObject, SetStateAction, useState } from "react";
-import { RichTextContainerProps } from "typings/RichTextProps";
-import { IMG_MIME_TYPES } from "./constants";
-import {
- imageConfigType,
- type linkConfigType,
- type videoConfigType,
- type videoEmbedConfigType,
- viewCodeConfigType
-} from "../../utils/formats";
-import { type ChildDialogProps } from "../ModalDialog/Dialog";
-import { type VideoFormType } from "../ModalDialog/VideoDialog";
-
-type ModalReturnType = {
- showDialog: boolean;
- setShowDialog: Dispatch>;
- dialogConfig: ChildDialogProps;
- customLinkHandler(value: any): void;
- customVideoHandler(value: any): void;
- customViewCodeHandler(value: any): void;
- customImageUploadHandler(value: any): void;
-};
-
-export function useEmbedModal(
- ref: MutableRefObject,
- props: Pick
-): ModalReturnType {
- const [showDialog, setShowDialog] = useState(false);
- const [dialogConfig, setDialogConfig] = useState({});
- const openDialog = (): void => {
- setShowDialog(true);
- };
- const closeDialog = (): void => {
- setShowDialog(false);
- setTimeout(() => ref.current?.focus(), 50);
- };
- const customLinkHandler = (value: any): void => {
- const selection = ref.current?.getSelection();
- const text = selection ? ref.current?.getText(selection.index, selection.length) : "";
- if (value) {
- setDialogConfig({
- dialogType: "link",
- config: {
- onSubmit: (value: linkConfigType) => {
- const index = selection?.index ?? 0;
- const length = selection?.length ?? 0;
- const textToDisplay = value.text ?? value.href;
- const linkDelta = new Delta().retain(index).delete(length).insert(textToDisplay);
- ref.current?.updateContents(linkDelta, Emitter.sources.SILENT);
- ref.current?.setSelection(index, textToDisplay.length);
- ref.current?.format("link", value);
- closeDialog();
- },
- onClose: closeDialog,
- defaultValue: { ...value, text },
- formOrientation: props.formOrientation
- }
- });
- openDialog();
- } else {
- ref.current?.format("link", false);
- closeDialog();
- }
- };
-
- const customVideoHandler = (value: any): void => {
- const selection = ref.current?.getSelection();
- if (value === true || value.type === "video") {
- setDialogConfig({
- dialogType: "video",
- config: {
- onSubmit: (submittedValue: VideoFormType) => {
- if (
- Object.hasOwn(submittedValue, "src") &&
- (submittedValue as videoConfigType).src !== undefined
- ) {
- const currentValue = submittedValue as videoConfigType;
- if (value.type === "video") {
- const index = selection?.index ?? 0;
- const length = selection?.length ?? 1;
- const videoConfig = {
- width: currentValue.width,
- height: currentValue.height
- };
- // update existing video value
- const delta = new Delta().retain(index).retain(length, videoConfig);
- ref.current?.updateContents(delta, Emitter.sources.USER);
- } else {
- // insert new video
- const delta = new Delta()
- .retain(selection?.index ?? 0)
- .delete(selection?.length ?? 0)
- .insert(
- { video: currentValue },
- { width: currentValue.width, height: currentValue.height }
- );
- ref.current?.updateContents(delta, Emitter.sources.USER);
- }
- } else {
- const currentValue = submittedValue as videoEmbedConfigType;
- const res = ref.current?.clipboard.convert({
- html: currentValue.embedcode
- });
- if (res) {
- // insert video via embed code;
- const delta = new Delta()
- .retain(selection?.index ?? 0)
- .delete(selection?.length ?? 0)
- .concat(res);
- ref.current?.updateContents(delta, Emitter.sources.USER);
- }
- }
-
- closeDialog();
- },
- onClose: closeDialog,
- selection: ref.current?.getSelection(),
- defaultValue: { ...value },
- formOrientation: props.formOrientation
- }
- });
- openDialog();
- } else {
- ref.current?.format("link", false);
- closeDialog();
- }
- };
-
- const customViewCodeHandler = (value: any): void => {
- if (value === true) {
- setDialogConfig({
- dialogType: "view-code",
- config: {
- currentCode: ref.current?.getSemanticHTML(),
- onSubmit: (value: viewCodeConfigType) => {
- const newDelta = ref.current?.clipboard.convert({ html: value.src });
- if (newDelta) {
- ref.current?.setContents(newDelta, Emitter.sources.USER);
- }
- closeDialog();
- },
- onClose: closeDialog,
- formOrientation: props.formOrientation
- }
- });
- openDialog();
- } else {
- ref.current?.format("link", false);
- closeDialog();
- }
- };
-
- const customImageUploadHandler = (value: any): void => {
- const selection = ref.current?.getSelection(true);
- setDialogConfig({
- dialogType: "image",
- config: {
- onSubmit: (value: imageConfigType) => {
- const defaultImageConfig = {
- alt: value.alt,
- width: value.width,
- height: value.keepAspectRatio ? undefined : value.height
- };
-
- if (value.src) {
- const index = selection?.index ?? 0;
- const length = 1;
- const imageConfig = defaultImageConfig;
- // update existing image attribute
- const imageUpdateDelta = new Delta().retain(index).retain(length, imageConfig);
- ref.current?.updateContents(imageUpdateDelta, Emitter.sources.USER);
- } else {
- // upload new image
- if (selection) {
- if (value.files) {
- uploadImage(ref, selection, value);
- } else if (value.entityGuid) {
- const imageConfig = {
- ...defaultImageConfig,
- "data-src": value.entityGuid
- };
- const delta = new Delta()
- .retain(selection.index)
- .delete(selection.length)
- .insert({ image: value.entityGuid }, imageConfig);
- ref.current?.updateContents(delta, Emitter.sources.USER);
- }
- }
- }
- closeDialog();
- },
- onClose: closeDialog,
- defaultValue: { ...value },
- formOrientation: props.formOrientation
- }
- });
- openDialog();
- };
-
- return {
- showDialog,
- setShowDialog,
- dialogConfig,
- customLinkHandler,
- customVideoHandler,
- customViewCodeHandler,
- customImageUploadHandler
- };
-}
-
-function uploadImage(ref: MutableRefObject, range: Range, options: imageConfigType): void {
- const uploads: File[] = [];
- const { files } = options;
- if (files) {
- Array.from(files).forEach(file => {
- if (file && IMG_MIME_TYPES.includes(file.type)) {
- uploads.push(file);
- }
- });
- if (uploads.length > 0) {
- if (!ref.current?.scroll.query("image")) {
- return;
- }
- const promises = uploads.map>(file => {
- return new Promise(resolve => {
- const reader = new FileReader();
- reader.onload = () => {
- resolve(reader.result as string);
- };
- reader.readAsDataURL(file);
- });
- });
- Promise.all(promises).then(images => {
- const update = images.reduce((delta: Delta, image) => {
- return delta.insert(
- { image },
- {
- alt: options.alt,
- width: options.width,
- height: options.height
- }
- );
- }, new Delta().retain(range.index).delete(range.length)) as Delta;
- ref.current?.updateContents(update, Emitter.sources.USER);
- ref.current?.setSelection(range.index + images.length, Emitter.sources.SILENT);
- });
- }
- }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/DynamicTableStyles.tsx b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTableStyles.tsx
new file mode 100644
index 0000000000..98a4830d2e
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTableStyles.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef } from "react";
+import { Editor } from "@tiptap/react";
+
+export interface DynamicTableStylesProps {
+ editor: Editor | null;
+}
+
+export function DynamicTableStyles({ editor }: DynamicTableStylesProps): null {
+ const styleElementRef = useRef(null);
+
+ useEffect(() => {
+ if (!editor) return;
+
+ // Create style element if it doesn't exist
+ if (!styleElementRef.current) {
+ styleElementRef.current = document.createElement("style");
+ styleElementRef.current.setAttribute("data-tiptap-table-styles", "");
+ document.head.appendChild(styleElementRef.current);
+ }
+
+ const updateStyles = (): void => {
+ if (!styleElementRef.current) return;
+
+ // Find all elements with data-background-color attribute
+ const elements = document.querySelectorAll("[data-background-color]");
+ const colorsInUse = new Set();
+
+ elements.forEach(element => {
+ const color = element.getAttribute("data-background-color");
+ if (color) {
+ colorsInUse.add(color);
+ // Add color-specific class to element
+ const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+ const colorClass = `bg-color-${sanitizedColor}`;
+
+ if (!element.classList.contains(colorClass)) {
+ element.classList.add(colorClass);
+ }
+ }
+ });
+
+ // Generate CSS rules only for colors that are actually in use
+ const cssRules: string[] = [];
+ colorsInUse.forEach(color => {
+ const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+ cssRules.push(`.bg-color-${sanitizedColor} { background-color: ${color} !important; }`);
+ });
+
+ // Update style element
+ styleElementRef.current.textContent = cssRules.join("\n");
+ };
+
+ // Update styles on editor update
+ editor.on("update", updateStyles);
+ editor.on("selectionUpdate", updateStyles);
+
+ // Initial update
+ updateStyles();
+
+ // Cleanup
+ return () => {
+ editor.off("update", updateStyles);
+ editor.off("selectionUpdate", updateStyles);
+ };
+ }, [editor]);
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ if (styleElementRef.current && styleElementRef.current.parentNode) {
+ styleElementRef.current.parentNode.removeChild(styleElementRef.current);
+ }
+ };
+ }, []);
+
+ return null;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/DynamicTextColorStyles.tsx b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTextColorStyles.tsx
new file mode 100644
index 0000000000..e286ff5816
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/DynamicTextColorStyles.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+import { Editor } from "@tiptap/react";
+
+export interface DynamicTextColorStylesProps {
+ editor: Editor | null;
+}
+
+export function DynamicTextColorStyles({ editor }: DynamicTextColorStylesProps): null {
+ const styleElementRef = useRef(null);
+ const processedColorsRef = useRef>(new Set());
+
+ useEffect(() => {
+ if (!editor) return;
+
+ // Create style element if it doesn't exist
+ if (!styleElementRef.current) {
+ styleElementRef.current = document.createElement("style");
+ styleElementRef.current.setAttribute("data-tiptap-text-color-styles", "");
+ document.head.appendChild(styleElementRef.current);
+ }
+
+ const updateStyles = (): void => {
+ if (!styleElementRef.current) return;
+
+ // Find all elements with data-text-color attribute
+ const elements = document.querySelectorAll("[data-text-color]");
+ const colorsInUse = new Set();
+
+ elements.forEach(element => {
+ const color = element.getAttribute("data-text-color");
+ if (color) {
+ colorsInUse.add(color);
+ // Add color-specific class to element
+ const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+ const colorClass = `text-color-${sanitizedColor}`;
+
+ if (!element.classList.contains(colorClass)) {
+ element.classList.add(colorClass);
+ }
+ }
+ });
+
+ // Generate CSS rules only for colors that are actually in use
+ const cssRules: string[] = [];
+ colorsInUse.forEach(color => {
+ const sanitizedColor = color.replace(/[^a-zA-Z0-9]/g, "");
+ cssRules.push(`.text-color-${sanitizedColor} { color: ${color} !important; }`);
+ });
+
+ // Update style element
+ styleElementRef.current.textContent = cssRules.join("\n");
+
+ // Update processed colors reference
+ processedColorsRef.current = colorsInUse;
+ };
+
+ // Update styles on editor update
+ editor.on("update", updateStyles);
+ editor.on("selectionUpdate", updateStyles);
+
+ // Initial update
+ updateStyles();
+
+ // Cleanup
+ return () => {
+ editor.off("update", updateStyles);
+ editor.off("selectionUpdate", updateStyles);
+ };
+ }, [editor]);
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ if (styleElementRef.current && styleElementRef.current.parentNode) {
+ styleElementRef.current.parentNode.removeChild(styleElementRef.current);
+ }
+ };
+ }, []);
+
+ return null;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
index a13fdd1730..004e804021 100644
--- a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx
@@ -1,206 +1,275 @@
-import Quill, { EmitterSource, QuillOptions, Range } from "quill";
-import Delta from "quill-delta";
-import {
- CSSProperties,
- forwardRef,
- Fragment,
- MutableRefObject,
- useContext,
- useEffect,
- useLayoutEffect,
- useRef
-} from "react";
+import type { Editor as TipTapEditor } from "@tiptap/core";
+import { Link } from "@tiptap/extension-link";
+import { Subscript } from "@tiptap/extension-subscript";
+import { Superscript } from "@tiptap/extension-superscript";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import { TaskItem } from "@tiptap/extension-task-item";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Underline } from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { forwardRef, ReactElement, useImperativeHandle } from "react";
+import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { EditorContextProvider, useCurrentEditor } from "./EditorContext";
+import { HighlightedCodeEditor } from "./HighlightedCodeEditor";
+import { Toolbar } from "./toolbars";
import { RichTextContainerProps } from "../../typings/RichTextProps";
-import { EditorDispatchContext } from "../store/EditorProvider";
-import { SET_FULLSCREEN_ACTION } from "../store/store";
-import "../utils/customPluginRegisters";
-import "../utils/formats/quill-table-better/assets/css/quill-table-better.scss";
-import { getResizeModuleConfig } from "../utils/formats/resizeModuleConfig";
-import { ACTION_DISPATCHER } from "../utils/helpers";
-import { getKeyboardBindings } from "../utils/modules/keyboard";
-import { getIndentHandler } from "../utils/modules/toolbarHandlers";
-import MxUploader from "../utils/modules/uploader";
-import MxQuill, { MxQuillModulesOptions } from "../utils/MxQuill";
-import { useEmbedModal } from "./CustomToolbars/useEmbedModal";
-import Dialog from "./ModalDialog/Dialog";
+import { FontFamilyClass } from "../extensions/FontFamilyClass";
+import { FontSize } from "../extensions/FontSize";
+import { Fullscreen } from "../extensions/Fullscreen";
+import { GenericEmbed } from "../extensions/GenericEmbed";
+import { ImageResize } from "../extensions/ImageResize";
+import { Indent } from "../extensions/Indent";
+import { KeyboardNavigation } from "../extensions/KeyboardNavigation";
+import { TableBackgroundColor } from "../extensions/TableBackgroundColor";
+import { TableCellBackgroundColor } from "../extensions/TableCellBackgroundColor";
+import { TextAlign } from "../extensions/TextAlignClass";
+import { TextColorClass } from "../extensions/TextColorClass";
+import { TextDirection } from "../extensions/TextDirection";
+import { TextHighlightClass } from "../extensions/TextHighlightClass";
+import { YouTubeResize } from "../extensions/YouTubeResize";
+import { ConfirmDialog } from "./toolbars/components/ConfirmDialog";
+import { ToolbarGroupsConfig } from "./toolbars/ToolbarConfig";
export interface EditorProps extends Pick<
RichTextContainerProps,
- "imageSource" | "imageSourceContent" | "enableDefaultUpload"
+ | "styleDataFormat"
+ | "imageSourceContent"
+ | "preset"
+ | "toolbarConfig"
+ | "toolbarLocation"
+ | "advancedConfig"
+ | "customFonts"
+ | "onFocus"
+ | "onBlur"
+ | "onLoad"
+ | "onChangeType"
+ | "onChange"
> {
- options: MxQuillModulesOptions;
defaultValue?: string;
- onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void;
- onSelectionChange?: (...args: [range: Range, oldRange: Range, source: EmitterSource]) => void;
- formOrientation: "horizontal" | "vertical";
- theme: string;
- style?: CSSProperties;
- className?: string;
- toolbarId?: string | Array;
+ onUpdate?: (html: string) => void;
readOnly?: boolean;
+ className?: string;
+ toolbarGroups?: ToolbarGroupsConfig;
+}
+
+export interface EditorHandle {
+ getHTML: () => string;
+ getText: () => string;
+ focus: () => void;
+ blur: () => void;
+ getEditor: () => TipTapEditor | null;
+}
+
+interface EditorInnerProps extends Pick<
+ RichTextContainerProps,
+ "imageSourceContent" | "preset" | "toolbarConfig" | "advancedConfig" | "customFonts"
+> {
+ showToolbar: boolean;
+ readOnly: boolean;
+ className?: string;
+ toolbarGroups?: ToolbarGroupsConfig;
+}
+
+function EditorInner({
+ showToolbar,
+ readOnly,
+ className,
+ imageSourceContent,
+ preset,
+ toolbarConfig,
+ toolbarGroups,
+ advancedConfig,
+ customFonts
+}: EditorInnerProps): ReactElement {
+ const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
+
+ const handleSaveCode = (): void => {
+ if (!editor) return;
+
+ // Update editor content with modified HTML
+ editor.commands.setContent(codeViewState.htmlCode);
+ codeViewDispatch({ type: "SAVE_CODE_CHANGES" });
+ };
+
+ const handleCancelCode = (): void => {
+ codeViewDispatch({ type: "CANCEL_CODE_CHANGES" });
+ };
+
+ const handleHtmlChange = (value: string): void => {
+ codeViewDispatch({ type: "UPDATE_HTML_CODE", html: value });
+ };
+
+ return (
+ <>
+ ) => {
+const Editor = forwardRef((props, ref) => {
const {
- theme,
defaultValue,
- style,
- className,
- toolbarId,
- onTextChange,
- onSelectionChange,
+ onUpdate,
readOnly,
- options: mxOptions
+ className,
+ styleDataFormat = "inline",
+ toolbarLocation,
+ ...others
} = props;
- const containerRef = useRef(null);
- const modalRef = useRef(null);
- const onTextChangeRef = useRef(onTextChange);
- const onSelectionChangeRef = useRef(onSelectionChange);
- const contextDispatch = useContext(EditorDispatchContext);
- const {
- showDialog,
- setShowDialog,
- dialogConfig,
- customLinkHandler,
- customVideoHandler,
- customViewCodeHandler,
- customImageUploadHandler
- } = useEmbedModal(ref, props);
- const customIndentHandler = getIndentHandler(ref);
-
- // quill instance is not changing, thus, the function reference has to stays.
- useLayoutEffect(() => {
- onTextChangeRef.current = onTextChange;
- onSelectionChangeRef.current = onSelectionChange;
- }, [onTextChange, onSelectionChange]);
-
- // update quills content on value change.
- useEffect(() => {
- // if there is an update comes from external element
- if (!ref.current?.hasFocus() && defaultValue !== ref.current?.getSemanticHTML()) {
- const newContent = ref.current?.clipboard.convert({
- html: defaultValue
- });
- if (newContent && newContent !== ref.current?.getContents()) {
- ref.current?.setContents(newContent);
+ const extensions = [
+ StarterKit,
+ TextStyle,
+ Underline,
+ Superscript,
+ Subscript,
+ TaskList,
+ TaskItem.configure({
+ nested: true
+ }),
+ Link.configure({
+ openOnClick: false,
+ HTMLAttributes: {
+ class: "tiptap-link"
}
- }
- }, [ref, defaultValue]);
-
- // use effect for constructing Quill instance
- useEffect(
- () => {
- const container = containerRef.current;
- if (container) {
- const editorDiv = container.ownerDocument.createElement<"div">("div");
- const editorContainer = container.appendChild(editorDiv);
-
- const toolbar = toolbarId
- ? {
- container: Array.isArray(toolbarId) ? toolbarId : `#${toolbarId}`,
- handlers: {
- link: customLinkHandler,
- video: customVideoHandler,
- indent: customIndentHandler,
- "view-code": customViewCodeHandler,
- image: customImageUploadHandler
- }
- }
- : // we cannot set toolbar to false, because "table-better" needs toolbar module
- // hidden toolbar will be set with display: none
- [];
-
- // Quill instance configurations.
- const options: QuillOptions = {
- theme,
- modules: {
- keyboard: {
- bindings: getKeyboardBindings()
- },
- table: false,
- "table-better": {
- language: "en_US",
- menus: ["column", "row", "merge", "table", "cell", "wrap", "copy", "delete", "grid"],
- toolbarTable: !readOnly
- },
- toolbar,
- ...getResizeModuleConfig(readOnly)
- },
- readOnly
- };
-
- const quill = new MxQuill(editorContainer, options);
- ref.current = quill;
- quill.registerCustomModules(mxOptions);
-
- const delta = quill.clipboard.convert({ html: defaultValue ?? "" });
- quill.updateContents(delta, Quill.sources.SILENT);
-
- quill.on(Quill.events.TEXT_CHANGE, (...arg) => {
- onTextChangeRef.current?.(...arg);
- });
- quill.on(Quill.events.SELECTION_CHANGE, (...arg) => {
- onSelectionChangeRef.current?.(...arg);
- });
- quill.on(ACTION_DISPATCHER, (...arg: any[]) => {
- if (arg[0]) {
- if (arg[0].href) {
- customLinkHandler(arg[0]);
- } else if (arg[0].src) {
- // open dialog editor for updating image or video
- if (arg[0].type === "video") {
- customVideoHandler(arg[0]);
- } else {
- customImageUploadHandler(arg[0]);
- }
- } else if (arg[0].type) {
- if (arg[0].type === SET_FULLSCREEN_ACTION) {
- if (contextDispatch) {
- contextDispatch(arg[0]);
- }
- } else if (arg[0].type === "image") {
- // open dialog editor for updating image (triggered by module uploader)
- customImageUploadHandler(arg[0]);
- }
- }
- }
- });
+ }),
+ FontFamilyClass.configure({
+ types: ["textStyle"],
+ styleDataFormat
+ }),
+ FontSize.configure({
+ types: ["textStyle"],
+ styleDataFormat
+ }),
+ TextAlign.configure({
+ types: ["heading", "paragraph"],
+ alignments: ["left", "center", "right", "justify"],
+ styleDataFormat
+ }),
+ Indent.configure({
+ types: ["paragraph", "heading", "blockquote"],
+ minIndent: 0,
+ maxIndent: 10,
+ indentStep: 1,
+ styleDataFormat
+ }),
+ KeyboardNavigation.configure({
+ wrapperSelector: ".tiptap-wrapper",
+ toolbarSelector: ".tiptap-toolbar",
+ statusBarSelector: ".rich-text-status-bar",
+ widgetSelector: ".widget-rich-text"
+ }),
+ TextDirection.configure({
+ types: ["paragraph", "heading"],
+ directions: ["ltr", "rtl"],
+ defaultDirection: "ltr"
+ }),
+ Fullscreen.configure({
+ widgetSelector: ".widget-rich-text",
+ fullscreenClass: "fullscreen"
+ }),
+ TextColorClass.configure({ types: ["textStyle"], styleDataFormat }),
+ TextHighlightClass.configure({ multicolor: true, styleDataFormat }),
+ TableBackgroundColor.configure({ resizable: true, styleDataFormat }),
+ TableRow,
+ TableHeader,
+ TableCellBackgroundColor.configure({ styleDataFormat }),
+ ImageResize.configure({
+ inline: true,
+ allowBase64: true,
+ HTMLAttributes: {
+ class: "tiptap-image"
+ }
+ }),
+ YouTubeResize.configure({
+ inline: false,
+ width: 640,
+ height: 480,
+ HTMLAttributes: {
+ class: "tiptap-video"
+ }
+ }),
+ GenericEmbed.configure({
+ inline: false,
+ HTMLAttributes: {
+ class: "tiptap-embed"
}
+ })
+ ];
- return () => {
- ref.current = null;
- if (container) {
- container.innerHTML = "";
- }
- };
+ const editor = useEditor({
+ extensions,
+ content: defaultValue || "",
+ editable: !readOnly,
+ onUpdate: ({ editor }) => {
+ const html = editor.getHTML();
+ onUpdate?.(html);
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [ref, toolbarId]
- );
-
- useEffect(() => {
- // if image source is set from entity, handle upload differently
- if (props.imageSource && props.imageSource.status === "available") {
- (ref.current?.getModule("uploader") as MxUploader)?.setEntityUpload?.(true);
+ onFocus: () => {
+ executeAction(props.onFocus);
+ },
+ onBlur: () => {
+ executeAction(props.onBlur);
+ if (props.onChangeType === "onLeave") {
+ executeAction(props.onChange);
+ }
+ },
+ onCreate: () => {
+ executeAction(props.onLoad);
}
- }, [props.imageSource, props.imageSource?.status, ref]);
+ });
+
+ useImperativeHandle(ref, () => ({
+ getHTML: () => editor?.getHTML() || "",
+ getText: () => editor?.getText() || "",
+ focus: () => editor?.commands.focus(),
+ blur: () => editor?.commands.blur(),
+ getEditor: () => editor
+ }));
+
+ if (!editor) {
+ return null;
+ }
+
+ const shouldHideToolbar = toolbarLocation === "hide";
return (
-
-
-
-
-
+
+
);
});
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx
new file mode 100644
index 0000000000..88b96b57b0
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/EditorContext.tsx
@@ -0,0 +1,100 @@
+import { Editor } from "@tiptap/react";
+import { html as beautifyHtml } from "js-beautify";
+import { createContext, useContext, useReducer, ReactNode, ReactElement, Dispatch } from "react";
+
+// Code view state
+export interface CodeViewState {
+ isCodeView: boolean;
+ htmlCode: string;
+ showConfirm: boolean;
+}
+
+// Code view actions
+export type CodeViewAction =
+ | { type: "ENTER_CODE_VIEW"; html: string }
+ | { type: "EXIT_CODE_VIEW_REQUEST" }
+ | { type: "SAVE_CODE_CHANGES" }
+ | { type: "CANCEL_CODE_CHANGES" }
+ | { type: "UPDATE_HTML_CODE"; html: string };
+
+// Code view reducer
+function codeViewReducer(state: CodeViewState, action: CodeViewAction): CodeViewState {
+ switch (action.type) {
+ case "ENTER_CODE_VIEW":
+ // Beautify HTML for better readability
+ const beautifiedHtml = beautifyHtml(action.html, {
+ indent_size: 2,
+ indent_char: " ",
+ max_preserve_newlines: 1,
+ preserve_newlines: true,
+ wrap_line_length: 0,
+ end_with_newline: false
+ });
+ return {
+ isCodeView: true,
+ htmlCode: beautifiedHtml,
+ showConfirm: false
+ };
+ case "EXIT_CODE_VIEW_REQUEST":
+ return {
+ ...state,
+ showConfirm: true
+ };
+ case "SAVE_CODE_CHANGES":
+ return {
+ isCodeView: false,
+ htmlCode: "",
+ showConfirm: false
+ };
+ case "CANCEL_CODE_CHANGES":
+ return {
+ isCodeView: false,
+ htmlCode: "",
+ showConfirm: false
+ };
+ case "UPDATE_HTML_CODE":
+ return {
+ ...state,
+ htmlCode: action.html
+ };
+ default:
+ return state;
+ }
+}
+
+// Initial state
+const initialCodeViewState: CodeViewState = {
+ isCodeView: false,
+ htmlCode: "",
+ showConfirm: false
+};
+
+interface EditorContextValue {
+ editor: Editor | null;
+ codeViewState: CodeViewState;
+ codeViewDispatch: Dispatch;
+}
+
+const EditorContext = createContext(undefined);
+
+export function EditorContextProvider({
+ editor,
+ children
+}: {
+ editor: Editor | null;
+ children: ReactNode;
+}): ReactElement {
+ const [codeViewState, codeViewDispatch] = useReducer(codeViewReducer, initialCodeViewState);
+
+ return (
+ {children}
+ );
+}
+
+export function useCurrentEditor(): EditorContextValue {
+ const context = useContext(EditorContext);
+ if (context === undefined) {
+ throw new Error("useCurrentEditor must be used within EditorContextProvider");
+ }
+ return context;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
index 99e7174af3..9381c6a710 100644
--- a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
+++ b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx
@@ -1,231 +1,143 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
+import { ReactElement, useRef, useState, useEffect } from "react";
+import { RichTextContainerProps } from "typings/RichTextProps";
import { useDebounceWithStatus } from "@mendix/widget-plugin-hooks/useDebounceWithStatus";
import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
-import classNames from "classnames";
-import Quill from "quill";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import { CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { RichTextContainerProps } from "typings/RichTextProps";
-import { EditorContext, EditorProvider } from "../store/EditorProvider";
-import { useActionEvents } from "../store/useActionEvents";
-import MendixTheme from "../utils/themes/mxTheme";
-import { MxQuillModulesOptions } from "../utils/MxQuill";
-import { createPreset } from "./CustomToolbars/presets";
-import Editor from "./Editor";
-import { StickySentinel } from "./StickySentinel";
-import Toolbar from "./Toolbar";
+import Editor, { EditorHandle } from "./Editor";
+import { StatusBar, StatusBarMetricType } from "./StatusBar";
export interface EditorWrapperProps extends RichTextContainerProps {
- editorHeight?: string | number;
- editorWidth?: string | number;
- style?: CSSProperties;
className?: string;
- toolbarOptions?: Array;
}
-function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
+function EditorWrapper(props: EditorWrapperProps): ReactElement {
const {
- id,
stringAttribute,
- style,
className,
+ styleDataFormat,
+ imageSourceContent,
preset,
+ toolbarConfig,
+ history,
+ fontStyle,
+ fontScript,
+ list,
+ indent,
+ embed,
+ align,
+ code,
+ fontColor,
+ header,
+ view,
+ remove,
+ tableBetter,
+ advancedConfig,
+ enableStatusBar,
+ statusBarContent,
+ customFonts,
toolbarLocation,
- onChange,
- onChangeType,
- onBlur,
+ readOnlyStyle,
onFocus,
+ onBlur,
onLoad,
- readOnlyStyle,
- toolbarOptions,
- enableStatusBar,
- statusBarContent,
- tabIndex,
- imageSource,
- imageSourceContent,
- enableDefaultUpload,
- formOrientation,
- defaultFontFamily,
- defaultFontSize
+ onChangeType,
+ onChange
} = props;
-
- const globalState = useContext(EditorContext);
- const isFirstLoad = useRef(false);
- const quillRef = useRef(null);
- const actionEvents = useActionEvents({ onBlur, onFocus, onChange, onChangeType, quill: quillRef?.current });
- const toolbarRef = useRef(null);
- const [wordCount, setWordCount] = useState(0);
-
- const { isFullscreen } = globalState;
+ const editorRef = useRef(null);
+ const [editorText, setEditorText] = useState("");
const [setAttributeValueDebounce] = useDebounceWithStatus(
- (string?: string) => {
- if (stringAttribute.value !== string) {
- stringAttribute.setValue(string);
+ (html?: string) => {
+ if (stringAttribute.value !== html) {
+ stringAttribute.setValue(html);
+
if (onChangeType === "onDataChange") {
executeAction(onChange);
}
}
},
200,
- onChange?.isExecuting ?? false
+ false
);
- const calculateCounts = useCallback(
- (quill: Quill | null): void => {
- if (enableStatusBar && quill) {
- if (statusBarContent === "wordCount") {
- const text = quill?.getText().trim();
- setWordCount(text && text.length > 0 ? text.split(/\s+/).length : 0);
- } else if (statusBarContent === "characterCount") {
- const text = quill?.getText().trimEnd() || "";
- setWordCount(text.length);
- } else if (statusBarContent === "characterCountHtml") {
- const html = quill?.getSemanticHTML() || "";
- setWordCount(html.length);
- }
- }
- },
- [enableStatusBar, statusBarContent]
- );
-
- useEffect(() => {
- if (quillRef.current) {
- calculateCounts(quillRef.current);
+ const handleUpdate = (html: string): void => {
+ if (stringAttribute.value !== html) {
+ setAttributeValueDebounce(html);
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [stringAttribute.value]);
+ };
+ // Update editor text for status bar when editor content changes
useEffect(() => {
- if (quillRef.current) {
- (quillRef.current?.theme as MendixTheme).updateDefaultFontFamily(defaultFontFamily?.value);
- (quillRef.current?.theme as MendixTheme).updateDefaultFontSize(defaultFontSize?.value);
+ if (editorRef.current && enableStatusBar) {
+ const text = editorRef.current.getText();
+ setEditorText(text);
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [defaultFontFamily?.value, quillRef.current, defaultFontSize?.value]);
+ }, [stringAttribute.value, enableStatusBar]);
- useEffect(() => {
- if (quillRef.current) {
- if (!isFirstLoad.current) {
- executeAction(onLoad);
- isFirstLoad.current = true;
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [quillRef.current]);
+ // Determine status bar content based on metric type
+ const statusBarContentValue = (() => {
+ if (!enableStatusBar) return "";
- const onTextChange = useCallback(() => {
- const semanticHTML = quillRef.current?.getSemanticHTML() || "";
- if (stringAttribute.value !== semanticHTML) {
- setAttributeValueDebounce(semanticHTML);
+ switch (statusBarContent) {
+ case "wordCount":
+ case "characterCount":
+ return editorText;
+ case "characterCountHtml":
+ return stringAttribute.value || "";
+ default:
+ return editorText;
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [quillRef.current, stringAttribute, calculateCounts]);
-
- const toolbarId = `widget_${id.replaceAll(".", "_")}_toolbar`;
- const shouldHideToolbar = (stringAttribute.readOnly && readOnlyStyle !== "text") || toolbarLocation === "hide";
- const toolbarPreset = shouldHideToolbar ? [] : createPreset(props);
+ })();
return (
-
-
- );
-}
+export default EditorWrapper;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EmbedResize.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EmbedResize.tsx
new file mode 100644
index 0000000000..e9289280ea
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/EmbedResize.tsx
@@ -0,0 +1,106 @@
+import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
+import { useState, useRef, ReactElement, MouseEvent as ReactMouseEvent } from "react";
+
+export function EmbedResize(props: NodeViewProps): ReactElement {
+ const { node, updateAttributes } = props;
+ const [isResizing, setIsResizing] = useState(false);
+ const [size, setSize] = useState({
+ width: node.attrs.width || 640,
+ height: node.attrs.height || 480
+ });
+ const containerRef = useRef(null);
+ const startPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
+ const currentSize = useRef({ width: size.width, height: size.height });
+
+ const handleMouseDown = (e: ReactMouseEvent, corner: string): void => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const container = containerRef.current;
+ if (!container) return;
+
+ const rect = container.getBoundingClientRect();
+ startPos.current = {
+ x: e.clientX,
+ y: e.clientY,
+ width: rect.width,
+ height: rect.height
+ };
+
+ setIsResizing(true);
+
+ const handleMouseMove = (moveEvent: MouseEvent): void => {
+ const deltaX = moveEvent.clientX - startPos.current.x;
+
+ let newWidth = startPos.current.width;
+ let newHeight = startPos.current.height;
+
+ if (corner === "se" || corner === "sw" || corner === "ne" || corner === "nw") {
+ newWidth = startPos.current.width + (corner.includes("e") ? deltaX : -deltaX);
+ const aspectRatio = startPos.current.height / startPos.current.width;
+ newHeight = newWidth * aspectRatio;
+ }
+
+ if (newWidth > 50) {
+ const roundedWidth = Math.round(newWidth);
+ const roundedHeight = Math.round(newHeight);
+
+ currentSize.current = {
+ width: roundedWidth,
+ height: roundedHeight
+ };
+
+ setSize({
+ width: roundedWidth,
+ height: roundedHeight
+ });
+ }
+ };
+
+ const handleMouseUp = (): void => {
+ setIsResizing(false);
+ updateAttributes({
+ width: currentSize.current.width,
+ height: currentSize.current.height
+ });
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ };
+
+ return (
+
+
text
`); + normalizeStyleAndClassAttribute(doc, "class"); + const p = doc.querySelector("p")!; + expect(p.classList.contains("ql-indent-1")).toBe(true); + expect(p.style.paddingLeft).toBe(""); + }); + + it("converts padding-left:6em to ql-indent-2", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "class"); + expect(doc.querySelector("p")!.classList.contains("ql-indent-2")).toBe(true); + }); + + it("converts padding-left:9em to ql-indent-3", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "class"); + expect(doc.querySelector("p")!.classList.contains("ql-indent-3")).toBe(true); + }); + + it("rounds non-multiples of 3 using Math.round (5em → ql-indent-2)", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "class"); + expect(doc.querySelector("p")!.classList.contains("ql-indent-2")).toBe(true); + }); + + it("ignores elements with padding-left:0em (zero is falsy — no class added)", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "class"); + const p = doc.querySelector("p")!; + const hasIndentClass = Array.from(p.classList).some(c => c.startsWith("ql-indent-")); + expect(hasIndentClass).toBe(false); + }); + + it("converts RTL padding-right:3em to ql-indent-1 and removes the style", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "class"); + const p = doc.querySelector("p")!; + expect(p.classList.contains("ql-indent-1")).toBe(true); + expect(p.style.paddingRight).toBe(""); + }); + + it("converts multiple elements independently", () => { + const doc = makeDoc(` +a
+b
+ `); + normalizeStyleAndClassAttribute(doc, "class"); + const [a, b] = Array.from(doc.querySelectorAll("p")); + expect(a.classList.contains("ql-indent-1")).toBe(true); + expect(b.classList.contains("ql-indent-2")).toBe(true); + }); + + it("leaves elements without padding-left unchanged", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "class"); + const p = doc.querySelector("p")!; + const hasIndentClass = Array.from(p.classList).some(c => c.startsWith("ql-indent-")); + expect(hasIndentClass).toBe(false); + }); +}); + +describe("normalizeStyleAndClassAttribute — inline mode (class → inline)", () => { + it("converts ql-indent-1 to padding-left:3em and removes the class", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + const p = doc.querySelector("p")!; + expect(p.style.paddingLeft).toBe("3em"); + expect(p.classList.contains("ql-indent-1")).toBe(false); + }); + + it("converts ql-indent-2 to padding-left:6em", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + expect(doc.querySelector("p")!.style.paddingLeft).toBe("6em"); + }); + + it("converts ql-indent-3 to padding-left:9em", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + expect(doc.querySelector("p")!.style.paddingLeft).toBe("9em"); + }); + + it("uses padding-right for RTL elements (ql-direction-rtl)", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + const p = doc.querySelector("p")!; + expect(p.style.paddingRight).toBe("3em"); + expect(p.style.paddingLeft).toBe(""); + }); + + it("removes ql-indent-* class after conversion", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + expect(doc.querySelector("p")!.classList.contains("ql-indent-2")).toBe(false); + }); + + it("skips ql-indent-0 (zero — no padding added, class still removed)", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + const p = doc.querySelector("p")!; + expect(p.style.paddingLeft).toBe(""); + expect(p.classList.contains("ql-indent-0")).toBe(false); + }); + + it("preserves other classes on the element", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + expect(doc.querySelector("p")!.classList.contains("some-other-class")).toBe(true); + }); + + it("converts multiple elements independently", () => { + const doc = makeDoc(` +a
+b
+ `); + normalizeStyleAndClassAttribute(doc, "inline"); + const [a, b] = Array.from(doc.querySelectorAll("p")); + expect(a.style.paddingLeft).toBe("3em"); + expect(b.style.paddingLeft).toBe("9em"); + }); + + it("leaves elements without ql-indent-* unchanged", () => { + const doc = makeDoc(`text
`); + normalizeStyleAndClassAttribute(doc, "inline"); + expect(doc.querySelector("p")!.style.paddingLeft).toBe(""); + }); +}); diff --git a/packages/pluggableWidgets/rich-text-web/src/assets/.gitkeep b/packages/pluggableWidgets/rich-text-web/src/assets/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/pluggableWidgets/rich-text-web/src/assets/Icons.tsx b/packages/pluggableWidgets/rich-text-web/src/assets/Icons.tsx deleted file mode 100644 index e6f84d8528..0000000000 --- a/packages/pluggableWidgets/rich-text-web/src/assets/Icons.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { ReactElement } from "react"; - -export function IconLowerAlpha(): ReactElement { - return ( - - - - ); -} diff --git a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx b/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx deleted file mode 100644 index bc464f3264..0000000000 --- a/packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/Fullscreen.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ReactElement, useCallback, useContext } from "react"; -import { ToolbarButton } from "./ToolbarWrapper"; -import { CustomToolbarProps } from "./customToolbars"; -import { ACTION_DISPATCHER } from "../../utils/helpers"; -import { SET_FULLSCREEN_ACTION } from "../../store/store"; -import { EditorContext } from "../../store/EditorProvider"; -import classNames from "classnames"; - -export function FullscreenButton({ quill }: CustomToolbarProps): ReactElement { - const handleClick = useCallback(() => { - quill?.emitter.emit(ACTION_DISPATCHER, { type: SET_FULLSCREEN_ACTION }); - }, [quill]); - - const { isFullscreen } = useContext(EditorContext); - - return ( -
+ {showToolbar && !readOnly && (
+
+ {codeViewState.showConfirm && (
+ {
- // click on other parts of editor, such as the toolbar, should also set focus
- if (!quillRef?.current?.hasFocus()) {
- if (
- toolbarRef.current === (e.target as HTMLDivElement) ||
- toolbarRef.current?.contains(e.target as Node) ||
- e.target === quillRef?.current?.container.parentElement
- ) {
- quillRef?.current?.focus();
- }
- }
- }}
- spellCheck={props.spellCheck}
- tabIndex={tabIndex ?? -1}
- {...actionEvents}
- >
-
-
-
);
}
-export default function EditorWrapper(props: EditorWrapperProps): ReactElement {
- return (
-
-
-
+ {stringAttribute.status === "available" && (
+ <>
+
-
-
-
-
-
- {wordCount}
- {` ${statusBarContent === "wordCount" ? "word" : "character"}`}
- {wordCount === 1 ? "" : "s"}
-
-
-
+ {enableStatusBar && (
+
+
+
+
handleMouseDown(e, "nw")} />
+
handleMouseDown(e, "ne")} />
+ (null);
+ const startPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
+
+ useEffect(() => {
+ if (node.attrs.width) {
+ setSize({
+ width: node.attrs.width,
+ height: node.attrs.height || "auto"
+ });
+ }
+ }, [node.attrs.width, node.attrs.height]);
+
+ const handleMouseDown = (e: React.MouseEvent, corner: string): void => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const img = imgRef.current;
+ if (!img) return;
+
+ const rect = img.getBoundingClientRect();
+ startPos.current = {
+ x: e.clientX,
+ y: e.clientY,
+ width: rect.width,
+ height: rect.height
+ };
+
+ setIsResizing(true);
+
+ const handleMouseMove = (moveEvent: MouseEvent): void => {
+ const deltaX = moveEvent.clientX - startPos.current.x;
+
+ let newWidth = startPos.current.width;
+ let newHeight = startPos.current.height;
+
+ if (corner === "se" || corner === "sw" || corner === "ne" || corner === "nw") {
+ newWidth = startPos.current.width + (corner.includes("e") ? deltaX : -deltaX);
+ const aspectRatio = startPos.current.height / startPos.current.width;
+ newHeight = newWidth * aspectRatio;
+ }
+
+ if (newWidth > 50) {
+ setSize({
+ width: `${Math.round(newWidth)}px`,
+ height: `${Math.round(newHeight)}px`
+ });
+ }
+ };
+
+ const handleMouseUp = (): void => {
+ setIsResizing(false);
+ updateAttributes({
+ width: size.width,
+ height: size.height
+ });
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ };
+
+ return (
+
+
handleMouseDown(e, "sw")} />
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx
new file mode 100644
index 0000000000..cbd7cf7a75
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/HighlightedCodeEditor.tsx
@@ -0,0 +1,60 @@
+import hljs from "highlight.js/lib/core";
+import xml from "highlight.js/lib/languages/xml";
+import { ReactElement } from "react";
+import Editor from "react-simple-code-editor";
+import "highlight.js/styles/atom-one-light.css";
+
+// Register HTML language (uses XML parser)
+hljs.registerLanguage("html", xml);
+
+export interface HighlightedCodeEditorProps {
+ value: string;
+ onChange: (value: string) => void;
+ readOnly?: boolean;
+ className?: string;
+}
+
+export function HighlightedCodeEditor({
+ value,
+ onChange,
+ readOnly = false,
+ className
+}: HighlightedCodeEditorProps): ReactElement {
+ const highlight = (code: string): string => {
+ try {
+ return hljs.highlight(code, {
+ language: "html",
+ ignoreIllegals: true
+ }).value;
+ } catch (error) {
+ console.warn("Syntax highlighting error:", error);
+ return code;
+ }
+ };
+
+ return (
+ handleMouseDown(e, "se")} />
+
+
+ 
+
+
handleMouseDown(e, "nw")} />
+
handleMouseDown(e, "ne")} />
+ ;
-
-/**
- * Dialog components that will be shown on toolbar's button
- */
-export default function Dialog(props: DialogProps): ReactElement {
- const { isOpen, onOpenChange, dialogType, config, imageSource, imageSourceContent, enableDefaultUpload } = props;
- const { refs, context } = useFloating({
- open: isOpen,
- onOpenChange
- });
-
- const click = useClick(context);
- const dismiss = useDismiss(context, {
- outsidePressEvent: "mousedown"
- });
- const role = useRole(context);
-
- const { getFloatingProps } = useInteractions([click, dismiss, role]);
-
- return (
-
- {isOpen && (
-
-
-
-
- )}
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx
deleted file mode 100644
index 12d9ecfa5a..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { Fragment, PropsWithChildren, ReactElement } from "react";
-
-interface PropsWithChildrenWithClass extends PropsWithChildren {
- className?: string;
-}
-
-export interface DialogContentProps extends PropsWithChildrenWithClass {
- formOrientation: "horizontal" | "vertical";
-}
-
-export function DialogContent(props: DialogContentProps): ReactElement {
- const { children, className, formOrientation } = props;
-
- return (
-
-
- );
-}
-
-export interface DialogBodyProps extends PropsWithChildrenWithClass {
- formOrientation: "horizontal" | "vertical";
-}
-
-export function DialogBody(props: DialogBodyProps): ReactElement {
- const { children, className, formOrientation } = props;
-
- return (
-
-
- );
-}
-
-export interface DialogFooterProps extends PropsWithChildrenWithClass {
- onClose(): void;
- onSubmit(...args: any[]): void;
-}
-
-export function DialogFooter(props: DialogFooterProps): ReactElement {
- const { onSubmit, onClose, className } = props;
-
- return (
- extends Event {
- /**
- * Returns any custom data event was created with. Typically used for synthetic events.
- */
- readonly detail: T;
- initCustomEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, detailArg: T): void;
-}
-
-export interface ImageDialogProps extends Pick<
- RichTextContainerProps,
- "imageSource" | "imageSourceContent" | "formOrientation"
-> {
- onSubmit(value: imageConfigType): void;
- onClose(): void;
- defaultValue?: imageConfigType;
- enableDefaultUpload?: boolean;
-}
-
-export default function ImageDialog(props: ImageDialogProps): ReactElement {
- const { onClose, defaultValue, onSubmit, imageSource, imageSourceContent, enableDefaultUpload, formOrientation } =
- props;
- const [activeTab, setActiveTab] = useState("general");
- const [selectedImageEntity, setSelectedImageEntity] = useState();
- const imageUploadElementRef = useRef(null);
- // disable embed tab if it is about modifying current video
- const disableEmbed =
- (defaultValue?.src && defaultValue.src.length > 0) ||
- imageSource === undefined ||
- imageSource?.status !== "available";
-
- const inputReference = useRef(null);
- const isInputProcessed = useRef(false);
- useEffect(() => {
- setTimeout(() => inputReference?.current?.focus(), 50);
- if (
- !disableEmbed &&
- imageSource &&
- imageSource.status === "available" &&
- defaultValue?.files &&
- !isInputProcessed.current
- ) {
- // if there is a file given, and imageSource is available
- // assume that we want to do image upload to entity
- // and switch to embed tab
- setActiveTab("embed");
- }
- }, [defaultValue?.files, disableEmbed, imageSource]);
-
- useEffect(() => {
- if (activeTab === "embed" && defaultValue?.files && !isInputProcessed.current) {
- // upload image directly to entity using external file uploader widget (if available)
- const inputFiles = imageUploadElementRef.current?.querySelector("input[type='file']") as HTMLInputElement;
- if (inputFiles) {
- inputFiles.files = defaultValue.files as FileList;
- inputFiles.dispatchEvent(new Event("change", { bubbles: true }));
- }
- isInputProcessed.current = true;
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [activeTab]);
-
- const [formState, setFormState] = useState({
- files: null,
- alt: defaultValue?.alt ?? "",
- width: defaultValue?.width ?? 100,
- height: defaultValue?.height ?? 100,
- src: defaultValue?.src ?? undefined,
- keepAspectRatio: true
- });
-
- const onFileChange = (e: ChangeEvent): void => {
- setFormState({ ...formState, [e.target.name]: e.target.files });
- };
-
- const onInputChange = (e: ChangeEvent): void => {
- e.preventDefault();
- e.stopPropagation();
- setFormState({ ...formState, [e.target.name]: e.target.value });
- };
-
- const onInputCheckboxChange = (e: ChangeEvent): void => {
- e.stopPropagation();
- setFormState({ ...formState, keepAspectRatio: !formState.keepAspectRatio });
- };
-
- const onEmbedSelected = (image: Image): void => {
- setFormState({ ...formState, entityGuid: image.id, src: undefined, files: null });
- setSelectedImageEntity(image);
- setActiveTab("general");
- };
-
- const handleImageSelected = (event: CustomEvent): void => {
- const image = event.detail;
- onEmbedSelected(image);
- };
-
- const onEmbedDeleted = (): void => {
- setFormState({ ...formState, entityGuid: undefined, src: undefined });
- setSelectedImageEntity(undefined);
- };
-
- const onImageLoaded = (e: SyntheticEvent): void => {
- setFormState({ ...formState, width: e.currentTarget.naturalWidth, height: e.currentTarget.naturalHeight });
- };
-
- useEffect(() => {
- // event listener for image selection triggered from custom widgets JS Action
- const imgRef = imageUploadElementRef.current;
-
- if (imgRef !== null) {
- imgRef.addEventListener("imageSelected", handleImageSelected);
- }
- return () => {
- imgRef?.removeEventListener("imageSelected", handleImageSelected);
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [imageUploadElementRef.current]);
-
- return (
-
- {activeTab === "general" ? "Insert/Edit" : "Embed"} Images
-
-
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx
deleted file mode 100644
index 93c7c47da8..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ChangeEvent, ReactElement, useState } from "react";
-import { type linkConfigType } from "../../utils/formats";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-
-export interface LinkDialogProps {
- onSubmit(value: linkConfigType): void;
- onClose(): void;
- defaultValue?: linkConfigType;
- formOrientation: "horizontal" | "vertical";
-}
-
-export default function LinkDialog(props: LinkDialogProps): ReactElement {
- const { onSubmit, onClose, formOrientation } = props;
- const [formState, setFormState] = useState({
- text: props.defaultValue?.text ?? "",
- href: props.defaultValue?.href ?? "",
- title: props.defaultValue?.title ?? "",
- target: props.defaultValue?.target ?? "_blank"
- });
-
- const onInputChange = (e: ChangeEvent): void => {
- setFormState({ ...formState, [e.target.name]: e.target.value });
- };
-
- return (
-
- Insert/Edit Link
-
-
-
-
-
-
-
-
-
-
-
-
-
- onSubmit(formState)} onClose={onClose}>
-
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx
deleted file mode 100644
index 0dbc1ecb5c..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { ChangeEvent, Fragment, MouseEvent, ReactElement, useState } from "react";
-import { type videoConfigType, type videoEmbedConfigType } from "../../utils/formats";
-import { getPatternMatch } from "../../utils/videoUrlPattern";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-import { Range } from "quill";
-
-export type VideoFormType = videoConfigType | videoEmbedConfigType;
-
-export interface VideoDialogProps {
- onSubmit(value: VideoFormType): void;
- onClose(): void;
- selection?: Range | null;
- defaultValue?: videoConfigType;
- formOrientation: "horizontal" | "vertical";
-}
-
-export function getValueType(value: VideoFormType): VideoFormType {
- return Object.hasOwn(value, "src") && (value as videoConfigType).src !== undefined
- ? (value as videoConfigType)
- : (value as videoEmbedConfigType);
-}
-
-function GeneralVideoDialog(props: VideoDialogProps): ReactElement {
- const { onSubmit, onClose, defaultValue, formOrientation } = props;
- const [formState, setFormState] = useState({
- src: defaultValue?.src ?? "",
- width: defaultValue?.width ?? 560,
- height: defaultValue?.height ?? 314
- });
-
- const onInputChange = (e: ChangeEvent): void => {
- if (e.target.name === "src") {
- const pattern = getPatternMatch(e.target.value);
- setFormState({
- ...formState,
- ...{
- src: e.target.value,
- width: pattern?.w || 560,
- height: pattern?.h || 314
- }
- });
- } else {
- setFormState({ ...formState, [e.target.name]: e.target.value });
- }
- };
-
- return (
-
-
- {defaultValue?.src ? (
- {defaultValue?.src}
- ) : (
-
- )}
-
-
-
-
-
-
-
- onSubmit(formState)} onClose={onClose}>
-
- );
-}
-
-function EmbedVideoDialog(props: VideoDialogProps): ReactElement {
- const { onSubmit, onClose, formOrientation } = props;
- const [formState, setFormState] = useState({
- embedcode: ""
- });
-
- const onInputChange = (e: ChangeEvent): void => {
- setFormState({ ...formState, [e.target.name]: e.target.value });
- };
-
- return (
-
-
- {" "}
-
-
-
- onSubmit(formState)} onClose={onClose}>
-
- );
-}
-
-export default function VideoDialog(props: VideoDialogProps): ReactElement {
- const { onClose, defaultValue, formOrientation } = props;
- const [activeTab, setActiveTab] = useState("general");
- // disable embed tab if it is about modifying current video
- const disableEmbed = defaultValue?.src && defaultValue.src.length > 0;
- return (
-
- {activeTab === "general" ? "Insert/Edit" : "Embed"} Media
-
-
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx
deleted file mode 100644
index 4c64e616f0..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ReactElement, useCallback, useState } from "react";
-import { type viewCodeConfigType } from "../../utils/formats";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
-import { html } from "@codemirror/lang-html";
-import { githubLight } from "@uiw/codemirror-theme-github";
-import { EditorView } from "codemirror";
-import beautify from "js-beautify";
-
-export interface ViewCodeDialogProps {
- currentCode?: string;
- onSubmit(value: viewCodeConfigType): void;
- onClose(): void;
- formOrientation: "horizontal" | "vertical";
-}
-
-const BEAUTIFY_OPTIONS: beautify.HTMLBeautifyOptions = {
- indent_size: 4,
- indent_char: " ",
- max_preserve_newlines: 5,
- preserve_newlines: true,
- indent_scripts: "normal",
- end_with_newline: false,
- wrap_line_length: 0,
- indent_inner_html: false,
- indent_empty_lines: false
-};
-
-export default function ViewCodeDialog(props: ViewCodeDialogProps): ReactElement {
- const { onSubmit, onClose, currentCode, formOrientation } = props;
- const [formState, setFormState] = useState({
- // temporarily change tab characters to em space to avoid beautify removing them
- src:
- beautify.html(currentCode?.replace(/\t/g, " ") ?? "", BEAUTIFY_OPTIONS)?.replace(/ /g, "\t") || ""
- });
- const onCodeChange = useCallback((value: string, _viewUpdate: ViewUpdate) => {
- setFormState({ ...formState, src: value });
- }, []);
-
- return (
-
- View/Edit Code
-
-
-
- onSubmit(formState)} onClose={onClose}>
-
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx
new file mode 100644
index 0000000000..e5d06e4e3a
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx
@@ -0,0 +1,75 @@
+import { ReactElement, useMemo } from "react";
+
+export type StatusBarMetricType = "wordCount" | "characterCount" | "characterCountHtml";
+
+export interface StatusBarProps {
+ content: string;
+ metricType: StatusBarMetricType;
+}
+
+function getWordCount(text: string): number {
+ if (!text || text.trim().length === 0) {
+ return 0;
+ }
+ // Split on whitespace and filter out empty strings
+ return text
+ .trim()
+ .split(/\s+/)
+ .filter(word => word.length > 0).length;
+}
+
+function getCharCount(text: string): number {
+ if (!text) {
+ return 0;
+ }
+ return text.length;
+}
+
+function getHtmlCharCount(html: string): number {
+ if (!html) {
+ return 0;
+ }
+ return html.length;
+}
+
+export function StatusBar({ content, metricType }: StatusBarProps): ReactElement {
+ // Debounced metric calculation using useMemo
+ // The metric updates only when content changes, providing built-in debouncing
+ const metricValue = useMemo(() => {
+ switch (metricType) {
+ case "wordCount":
+ return getWordCount(content);
+ case "characterCount":
+ return getCharCount(content);
+ case "characterCountHtml":
+ return getHtmlCharCount(content);
+ default:
+ return 0;
+ }
+ }, [content, metricType]);
+
+ const displayText = useMemo(() => {
+ switch (metricType) {
+ case "wordCount":
+ return `Words: ${metricValue}`;
+ case "characterCount":
+ return `Characters: ${metricValue}`;
+ case "characterCountHtml":
+ return `Characters (HTML): ${metricValue}`;
+ default:
+ return "";
+ }
+ }, [metricType, metricValue]);
+
+ return (
+ (null);
- const [ratio, setRatio] = useState(1);
-
- useEffect(() => {
- const target = sentinelRef.current;
-
- if (target === null) {
- return;
- }
-
- return createObserver(target, setRatio);
- }, []);
-
- return (
-
- );
-}
-
-function createObserver(target: Element, onIntersectionChange: (ratio: number) => void): () => void {
- const options = { threshold: [0, 1] };
-
- const observer = new IntersectionObserver(([entry]) => {
- if (entry.intersectionRatio === 0 || entry.intersectionRatio === 1) {
- onIntersectionChange(entry.intersectionRatio);
- }
- }, options);
-
- observer.observe(target);
-
- return () => observer.unobserve(target);
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx
deleted file mode 100644
index 5abe80fd7d..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import classNames from "classnames";
-import Quill from "quill";
-import { createElement, CSSProperties, forwardRef, KeyboardEvent, ReactElement, RefObject } from "react";
-import { CustomFontsType, PresetEnum } from "../../typings/RichTextProps";
-import { formatCustomFonts } from "../utils/formats/fonts";
-import { FormatsContainer, presetToNumberConverter, ToolbarContext } from "./CustomToolbars/ToolbarWrapper";
-import { TOOLBAR_MAPPING, toolbarContentType } from "./CustomToolbars/constants";
-
-export interface ToolbarProps {
- customFonts?: CustomFontsType[];
- id: string;
- preset: PresetEnum;
- quill?: Quill | null;
- style?: CSSProperties;
- toolbarContent: toolbarContentType[];
-}
-
-const ToolbarKeyDownHandler = (e: KeyboardEvent): void => {
- const activeElement = document.activeElement as HTMLElement;
- const parentElement = activeElement?.parentElement;
- if (!parentElement?.classList.contains("ql-formats")) {
- return;
- }
- e.preventDefault();
- if (e.key === "Tab") {
- const nextFocusElementParent = e.shiftKey
- ? (parentElement.previousElementSibling as HTMLElement)
- : (parentElement.nextElementSibling as HTMLElement);
- if (nextFocusElementParent) {
- const nextElement = nextFocusElementParent.firstChild as HTMLElement;
- if (nextElement) {
- nextElement.focus();
- e.stopPropagation();
- }
- }
- } else if (e.key === "ArrowRight") {
- const nextElementSibling = activeElement.nextElementSibling as HTMLElement;
- if (nextElementSibling) {
- nextElementSibling.focus();
- e.stopPropagation();
- }
- } else if (e.key === "ArrowLeft") {
- const previousElementSibling = activeElement.previousElementSibling as HTMLElement;
- if (previousElementSibling) {
- previousElementSibling.focus();
- e.stopPropagation();
- }
- } else if (e.key === "Enter") {
- activeElement.click();
- }
-};
-
-const Toolbar = forwardRef((props: ToolbarProps, ref: RefObject): ReactElement => {
- const { id, preset, style, quill, toolbarContent } = props;
- const presetValue = presetToNumberConverter(preset);
-
- return (
-
-
- );
-});
-
-export default Toolbar;
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/YouTubeResize.tsx b/packages/pluggableWidgets/rich-text-web/src/components/YouTubeResize.tsx
new file mode 100644
index 0000000000..d5aa28c3d9
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/YouTubeResize.tsx
@@ -0,0 +1,100 @@
+import { NodeViewWrapper, NodeViewProps } from "@tiptap/react";
+import { useState, useRef, ReactElement, MouseEvent as ReactMouseEvent } from "react";
+
+export function YouTubeResize(props: NodeViewProps): ReactElement {
+ const { node, updateAttributes } = props;
+ const [isResizing, setIsResizing] = useState(false);
+ const [size, setSize] = useState({
+ width: node.attrs.width || 640,
+ height: node.attrs.height || 480
+ });
+ const containerRef = useRef(null);
+ const startPos = useRef({ x: 0, y: 0, width: 0, height: 0 });
+ const currentSize = useRef({ width: size.width, height: size.height });
+
+ const handleMouseDown = (e: ReactMouseEvent, corner: string): void => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const container = containerRef.current;
+ if (!container) return;
+
+ const rect = container.getBoundingClientRect();
+ startPos.current = {
+ x: e.clientX,
+ y: e.clientY,
+ width: rect.width,
+ height: rect.height
+ };
+
+ setIsResizing(true);
+
+ const handleMouseMove = (moveEvent: MouseEvent): void => {
+ const deltaX = moveEvent.clientX - startPos.current.x;
+
+ let newWidth = startPos.current.width;
+ let newHeight = startPos.current.height;
+
+ if (corner === "se" || corner === "sw" || corner === "ne" || corner === "nw") {
+ newWidth = startPos.current.width + (corner.includes("e") ? deltaX : -deltaX);
+ const aspectRatio = startPos.current.height / startPos.current.width;
+ newHeight = newWidth * aspectRatio;
+ }
+
+ if (newWidth > 50) {
+ const roundedWidth = Math.round(newWidth);
+ const roundedHeight = Math.round(newHeight);
+
+ currentSize.current = {
+ width: roundedWidth,
+ height: roundedHeight
+ };
+
+ setSize({
+ width: roundedWidth,
+ height: roundedHeight
+ });
+ }
+ };
+
+ const handleMouseUp = (): void => {
+ setIsResizing(false);
+ updateAttributes({
+ width: currentSize.current.width,
+ height: currentSize.current.height
+ });
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ };
+
+ return (
+
+
handleMouseDown(e, "sw")} />
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss
deleted file mode 100644
index 0638acf03e..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-.widget-rich-text-modal {
- &-overlay {
- position: fixed;
- inset: 0px;
- background-color: var(--shadow-color, rgba(#ced0d3, 0.5));
- justify-content: center;
- align-items: center;
- display: flex;
- z-index: 105;
-
- &.mx-underlay {
- z-index: 105;
- }
- }
-
- &-body {
- &.modal-dialog {
- z-index: 106;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-
- &.view-code-dialog {
- width: fit-content;
- min-width: 50vw;
-
- .code-input {
- min-height: 50vh;
-
- .cm-editor {
- width: 100%;
- }
- }
- }
-
- &.image-dialog {
- .image-dialog-size {
- input {
- min-width: 20px;
- &[disabled] {
- text-decoration: line-through;
- }
- }
-
- &-input {
- flex: 2;
- align-items: center;
- justify-content: center;
- }
-
- &-label {
- flex: 1;
- align-items: center;
- justify-content: flex-end;
- padding-right: var(--spacing-medium, 16px);
- }
-
- &-container {
- align-items: center;
- justify-content: center;
- }
- }
-
- .image-dialog-upload {
- max-height: var(--max-dialog-height, 70vh);
- overflow-y: auto;
- }
- }
-
- .nav-tabs {
- li {
- cursor: pointer;
-
- a {
- pointer-events: none;
- }
- }
- }
-
- .mx-image-dialog-list {
- display: flex;
- flex-wrap: wrap;
- }
-
- .mx-image-dialog-item {
- padding-right: var(--spacing-small, 8px);
- padding-bottom: var(--spacing-small, 8px);
- cursor: pointer;
-
- &:hover {
- transform: scale3d(1.05, 1.05, 1);
- transition: transform 0.2s ease-in-out;
- }
- }
-
- .mx-image-dialog-thumbnail {
- max-height: 100px;
-
- &-small {
- max-height: 50px;
- }
-
- &-container {
- position: relative;
-
- .icon-container {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- align-items: center;
- justify-content: center;
- display: none;
-
- .icons {
- border-radius: var(--border-radius-default, 4px);
- background-color: var(--color-background, #fff);
- cursor: pointer;
- transition: transform 0.2s ease-in-out;
-
- &:hover {
- transform: scale3d(1.05, 1.05, 1);
- }
- }
- }
-
- &:hover {
- .icon-container {
- display: flex;
- }
- }
- }
- }
- }
-
- &-header {
- padding-top: 15px;
- padding-bottom: 14px;
- font-size: var(--font-size-large, 18px);
- }
-
- &-content {
- padding: 20px;
- flex: 1;
- }
-
- &-footer {
- padding-top: 12px;
- padding-bottom: 14px;
- display: flex;
- justify-content: end;
-
- button.btn:not(:last-child) {
- margin-right: 20px;
- }
- }
-
- &-form {
- &:not(:first-child) {
- margin-top: 20px;
- }
- }
-
- &-input {
- display: flex;
- }
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx
deleted file mode 100644
index ff1fa0706c..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {
- FloatingFocusManager,
- FloatingOverlay,
- FloatingPortal,
- useClick,
- useDismiss,
- useFloating,
- useInteractions,
- useRole
-} from "@floating-ui/react";
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { Fragment, ReactElement } from "react";
-import LinkDialog, { LinkDialogProps } from "./LinkDialog";
-import VideoDialog, { VideoDialogProps } from "./VideoDialog";
-import ViewCodeDialog, { ViewCodeDialogProps } from "./ViewCodeDialog";
-import ImageDialog, { ImageDialogProps } from "./ImageDialog";
-import "./Dialog.scss";
-import { RichTextContainerProps } from "../../../typings/RichTextProps";
-
-interface BaseDialogProps {
- isOpen: boolean;
- parentNode?: HTMLElement | null;
- onOpenChange?(open: boolean): void;
-}
-
-export type ImageDialogBaseProps = {
- dialogType?: "image";
- config?: ImageDialogProps;
-};
-
-export type ViewCodeDialogBaseProps = {
- dialogType?: "view-code";
- config?: ViewCodeDialogProps;
-};
-
-export type LinkDialogBaseProps = {
- dialogType?: "link";
- config?: LinkDialogProps;
-};
-
-export type VideoDialogBaseProps = {
- dialogType?: "video";
- config?: VideoDialogProps;
-};
-
-export type ChildDialogProps =
- | LinkDialogBaseProps
- | VideoDialogBaseProps
- | ViewCodeDialogBaseProps
- | ImageDialogBaseProps;
-
-export type DialogProps = BaseDialogProps &
- ChildDialogProps &
- Pick handleMouseDown(e, "se")} />
+
+
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export interface DialogHeaderProps extends PropsWithChildrenWithClass {
- onClose(): void;
-}
-
-export function DialogHeader(props: DialogHeaderProps): ReactElement {
- const { children, onClose, className } = props;
-
- return (
- {children}
-
-
-
- {children}
-{children}
-
- {children}
-
- );
-}
-
-export interface FormControlProps extends PropsWithChildrenWithClass {
- label?: string;
- formOrientation: "horizontal" | "vertical";
- inputId?: string;
-}
-
-export function FormControl(props: FormControlProps): ReactElement {
- const { children, className, label, formOrientation, inputId } = props;
-
- return (
-
- {label && (
-
- )}
- {formOrientation === "vertical" ? (
- children
- ) : (
-
- {children}
- )}
-
-
-
-
- );
-}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx
deleted file mode 100644
index 199ce5bb14..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import { If } from "@mendix/widget-plugin-component-kit/If";
-import classNames from "classnames";
-import { ChangeEvent, MouseEvent, ReactElement, SyntheticEvent, useEffect, useRef, useState } from "react";
-import { RichTextContainerProps } from "../../../typings/RichTextProps";
-import { type imageConfigType } from "../../utils/formats";
-import { IMG_MIME_TYPES } from "../CustomToolbars/constants";
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
-
-type Image = {
- id: string;
- url: string;
- thumbnailUrl?: string;
-};
-
-interface CustomEvent
- {!disableEmbed && (
-
-
-
- )}
- -
-
- setActiveTab("general")} - > - General - -
- { - setActiveTab("embed"); - e.stopPropagation(); - e.preventDefault(); - }} - > - Attachments - -
-
-
- {defaultValue?.src ? (
- 
- ) : formState.entityGuid && selectedImageEntity ? (
-
-
-
-
-
-
-
-
-
- onSubmit(formState)} onClose={onClose}>
-
-
-
-
-
- 
-
-
-
-
- ) : enableDefaultUpload ? (
-
- ) : undefined}
-
-
-
-
- px
-
-
-
-
-
-
- px
-
- {imageSourceContent}
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {displayText}
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/StickySentinel.tsx b/packages/pluggableWidgets/rich-text-web/src/components/StickySentinel.tsx
deleted file mode 100644
index 11cfb79a90..0000000000
--- a/packages/pluggableWidgets/rich-text-web/src/components/StickySentinel.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import classNames from "classnames";
-import { ReactElement, useEffect, useRef, useState } from "react";
-
-/**
- * * duplicate with datagrid-web sticky sentinel,
- * TODO: possibly update to shared component in later stage
- *
- * StickySentinel - A small hidden element that uses "IntersectionObserver"
- * to detect the "scrolled" state of the grid. By toggling the "container-stuck" class
- * on this element, we can force "position: sticky" for column headers.
- */
-export function StickySentinel(): ReactElement {
- const sentinelRef = useRef
- {toolbarContent.map((toolbarGroup, index) => {
- return (
-
- {toolbarGroup.children.map((toolbar, idx) => {
- const currentToolbar = TOOLBAR_MAPPING[toolbar];
- const key = `toolbar_${id}_${index}_${idx}`;
- let value = currentToolbar.value;
-
- if (currentToolbar.title === "Font type") {
- type FontListType = Array<{ value: string; description: string; style: string }>;
- value = [
- ...(currentToolbar.value as FontListType),
- ...formatCustomFonts(props.customFonts ?? [])
- ].sort((a, b) => (a.value ?? "").localeCompare(b.value ?? ""));
- }
-
- return currentToolbar.custom
- ? createElement(currentToolbar.component, {
- key,
- quill,
- title: currentToolbar.title
- })
- : createElement(
- currentToolbar.component,
- {
- key,
- className: classNames(currentToolbar.className),
- presetValue: currentToolbar.presetValue,
- value,
- title: currentToolbar.title
- },
- currentToolbar.children && createElement(currentToolbar.children)
- );
- })}
-
- );
- })}
-
-
+
+
+
handleMouseDown(e, "nw")} />
+
handleMouseDown(e, "ne")} />
+ (null);
+
+ // Filter toolbar groups based on preset and custom configuration
+ const filteredGroups = useMemo(
+ () => getFilteredToolbarGroups(preset, toolbarConfig, toolbarGroups, advancedConfig, customFonts),
+ [preset, toolbarConfig, toolbarGroups, advancedConfig, customFonts]
+ );
+
+ const filteredSecondaryGroups = useMemo(
+ () =>
+ SECONDARY_TOOLBAR_GROUP.filter(group =>
+ filteredGroups.some(filteredGroup => filteredGroup.name === group.parentName)
+ ),
+ [filteredGroups]
+ );
+
+ if (!editor) {
+ return null;
+ }
+
+ const handleDropdownToggle = (dropdownType: DropdownCommand | null): void => {
+ setActiveDropdown(prev => (prev === dropdownType ? null : dropdownType));
+ };
+
+ const handleDropdownClose = (): void => {
+ setActiveDropdown(null);
+ };
+
+ return (
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts
new file mode 100644
index 0000000000..68e2a2d100
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/ToolbarConfig.ts
@@ -0,0 +1,776 @@
+import { Editor } from "@tiptap/react";
+import { createContext } from "react";
+import { createTableConfigurationSections, createCellConfigurationSections } from "./helpers/configurationHelpers";
+import { AddCustomFontsToFontFamilyDropdown, FONT_LIST, FONT_SIZE_LIST } from "./helpers/fontHelpers";
+import {
+ PresetEnum,
+ ToolbarConfigEnum,
+ CtItemTypeEnum,
+ AdvancedConfigType,
+ CustomFontsType
+} from "../../../typings/RichTextProps";
+
+export type ToolbarActionType =
+ | "toggle"
+ | "command"
+ | "custom"
+ | "heading"
+ | "dropdown"
+ | "tableGrid"
+ | "colorPicker"
+ | "dialog"
+ | "codeView"
+ | "configurationDropdown";
+
+export type ColorPickerCommand =
+ | "textColor"
+ | "textHighlight"
+ | "cellBackground"
+ | "tableBackground"
+ | "tableBorderColor";
+
+export type DialogCommand = "insertImage" | "insertVideo" | "insertLink";
+
+export type TableGridCommand = "insertTable";
+
+export type DropdownCommand = ColorPickerCommand | DialogCommand | TableGridCommand;
+
+export interface ToolbarDropdownOption {
+ label: string;
+ value: string;
+ command: string;
+ attrs?: Record;
+}
+
+export interface ConfigurationSection {
+ id: string;
+ label: string;
+ type: "colorPicker" | "dropdown" | "numberInput";
+ getCurrentValue?: () => string | number | null;
+ onChange: (value: string) => void;
+ options?: Array<{ value: string; label: string }>;
+ defaultColor?: string;
+ min?: number;
+ max?: number;
+ step?: number;
+ placeholder?: string;
+ unit?: string;
+}
+
+export interface ToolbarButtonConfig {
+ name: string;
+ title: string;
+ icon: string;
+ activeIcon?: string; // Icon to show when button is active
+ action: ToolbarActionType;
+ command?: string;
+ isActive?: (editor: Editor) => boolean;
+ canExecute?: (editor: Editor) => boolean;
+ customAction?: (editor: Editor) => void | ConfigurationSection[];
+ attrs?: Record;
+ dropdownOptions?: ToolbarDropdownOption[];
+ getCurrentValue?: (editor: Editor) => string;
+ configurationSections?: ConfigurationSection[];
+}
+
+export interface ToolbarGroupConfig {
+ name: string;
+ presetValue?: 1 | 2 | 3;
+ buttons: ToolbarButtonConfig[];
+ parentName?: string;
+ showWhen?: (editor: Editor | null) => boolean;
+}
+
+export interface ToolbarContextType {
+ activeDropdown: DropdownCommand | null;
+ handleDropdownToggle: (dropdownType: DropdownCommand | null) => void;
+ handleDropdownClose: () => void;
+}
+
+export const ToolbarContext = createContext({
+ activeDropdown: null,
+ handleDropdownToggle: () => {},
+ handleDropdownClose: () => {}
+});
+
+// Toolbar configuration
+export const TOOLBAR_GROUPS: ToolbarGroupConfig[] = [
+ {
+ name: "history",
+ presetValue: 2,
+ buttons: [
+ {
+ name: "undo",
+ title: "Undo",
+ icon: "Undo",
+ action: "command",
+ command: "undo",
+ canExecute: editor => editor.can().chain().focus().undo().run()
+ },
+ {
+ name: "redo",
+ title: "Redo",
+ icon: "Redo",
+ action: "command",
+ command: "redo",
+ canExecute: editor => editor.can().chain().focus().redo().run()
+ }
+ ]
+ },
+ {
+ name: "fontStyle",
+ presetValue: 1,
+ buttons: [
+ {
+ name: "bold",
+ title: "Bold",
+ icon: "Text-bold",
+ action: "toggle",
+ command: "toggleBold",
+ isActive: editor => editor.isActive("bold"),
+ canExecute: editor => editor.can().chain().focus().toggleBold().run()
+ },
+ {
+ name: "italic",
+ title: "Italic",
+ icon: "Text-italic",
+ action: "toggle",
+ command: "toggleItalic",
+ isActive: editor => editor.isActive("italic"),
+ canExecute: editor => editor.can().chain().focus().toggleItalic().run()
+ },
+ {
+ name: "underline",
+ title: "Underline",
+ icon: "Text-underline",
+ action: "toggle",
+ command: "toggleUnderline",
+ isActive: editor => editor.isActive("underline"),
+ canExecute: editor => editor.can().chain().focus().toggleUnderline().run()
+ },
+ {
+ name: "strike",
+ title: "Strikethrough",
+ icon: "Text-strikethrough",
+ action: "toggle",
+ command: "toggleStrike",
+ isActive: editor => editor.isActive("strike"),
+ canExecute: editor => editor.can().chain().focus().toggleStrike().run()
+ }
+ ]
+ },
+ {
+ name: "fontScript",
+ presetValue: 3,
+ buttons: [
+ {
+ name: "superscript",
+ title: "Superscript",
+ icon: "Text-superscript",
+ action: "toggle",
+ command: "toggleSuperscript",
+ isActive: editor => editor.isActive("superscript"),
+ canExecute: editor => editor.can().chain().focus().toggleSuperscript().run()
+ },
+ {
+ name: "subscript",
+ title: "Subscript",
+ icon: "Text-subscript",
+ action: "toggle",
+ command: "toggleSubscript",
+ isActive: editor => editor.isActive("subscript"),
+ canExecute: editor => editor.can().chain().focus().toggleSubscript().run()
+ }
+ ]
+ },
+ {
+ name: "list",
+ presetValue: 1,
+ buttons: [
+ {
+ name: "bulletList",
+ title: "Bullet List",
+ icon: "List-bullets",
+ action: "toggle",
+ command: "toggleBulletList",
+ isActive: editor => editor.isActive("bulletList")
+ },
+ {
+ name: "orderedList",
+ title: "Numbered List",
+ icon: "List-numbers",
+ action: "toggle",
+ command: "toggleOrderedList",
+ isActive: editor => editor.isActive("orderedList")
+ },
+ {
+ name: "taskList",
+ title: "Task List",
+ icon: "List-checklist",
+ action: "toggle",
+ command: "toggleTaskList",
+ isActive: editor => editor.isActive("taskList")
+ }
+ ]
+ },
+ {
+ name: "indent",
+ presetValue: 1,
+ buttons: [
+ {
+ name: "decreaseIndent",
+ title: "Decrease Indent",
+ icon: "Text-indent-right",
+ action: "command",
+ command: "decreaseIndent"
+ },
+ {
+ name: "increaseIndent",
+ title: "Increase Indent",
+ icon: "Text-indent-left",
+ action: "command",
+ command: "increaseIndent"
+ },
+ {
+ name: "textDirection",
+ title: "Text Direction",
+ icon: "Left-to-right",
+ activeIcon: "Right-to-left",
+ action: "custom",
+ isActive: editor => {
+ const attrs = editor.getAttributes("paragraph");
+ return attrs.dir === "rtl";
+ },
+ customAction: editor => {
+ const attrs = editor.getAttributes("paragraph");
+ const isRTL = attrs.dir === "rtl";
+ (editor.chain().focus() as any).setTextDirection(isRTL ? "ltr" : "rtl").run();
+ }
+ }
+ ]
+ },
+ {
+ name: "align",
+ presetValue: 2,
+ buttons: [
+ {
+ name: "leftAlign",
+ title: "Align Left",
+ icon: "Text-align-left",
+ action: "command",
+ command: "setTextAlign",
+ attrs: { textAlign: "left" },
+ isActive: editor => editor.isActive({ textAlign: "left" })
+ },
+ {
+ name: "centerAlign",
+ title: "Align Center",
+ icon: "Text-align-center",
+ action: "command",
+ command: "setTextAlign",
+ attrs: { textAlign: "center" },
+ isActive: editor => editor.isActive({ textAlign: "center" })
+ },
+ {
+ name: "rightAlign",
+ title: "Align Right",
+ icon: "Text-align-right",
+ action: "command",
+ command: "setTextAlign",
+ attrs: { textAlign: "right" },
+ isActive: editor => editor.isActive({ textAlign: "right" })
+ },
+ {
+ name: "justifyAlign",
+ title: "Align Justify",
+ icon: "Text-align-justify",
+ action: "command",
+ command: "setTextAlign",
+ attrs: { textAlign: "justify" },
+ isActive: editor => editor.isActive({ textAlign: "justify" })
+ }
+ ]
+ },
+ {
+ name: "fontColor",
+ presetValue: 2,
+ buttons: [
+ {
+ name: "fontFamily",
+ title: "Font Family",
+ icon: "Text-font",
+ action: "dropdown",
+ dropdownOptions: FONT_LIST.map(font => ({
+ label: font.description,
+ value: font.value,
+ command: "setFontFamily",
+ attrs: {
+ fontFamily: font.style,
+ fontValue: font.value
+ }
+ })),
+ getCurrentValue: editor => {
+ const { fontValue, fontFamily } = editor.getAttributes("textStyle");
+
+ // Use fontValue if available (new format)
+ if (fontValue) {
+ return fontValue;
+ }
+
+ // Fallback for legacy content without data-font-value
+ if (fontFamily) {
+ // Derive from fontFamily: "arial, helvetica, ..." → "arial"
+ const firstFont = fontFamily.split(",")[0].trim();
+ return firstFont.replace(/['"]/g, "").toLowerCase().replace(/\s+/g, "-");
+ }
+
+ return "";
+ }
+ },
+ {
+ name: "fontSize",
+ title: "Font Size",
+ icon: "Text-size",
+ action: "dropdown",
+ dropdownOptions: FONT_SIZE_LIST.map(size => ({
+ label: size,
+ value: size,
+ command: "setFontSize",
+ attrs: { fontSize: size }
+ })),
+ getCurrentValue: editor => {
+ const { fontSize } = editor.getAttributes("textStyle");
+ return fontSize || "14px";
+ }
+ },
+ {
+ name: "textColor",
+ title: "Text Color",
+ icon: "Text-color",
+ action: "colorPicker",
+ command: "textColor"
+ },
+ {
+ name: "backgroundColor",
+ title: "Background Color",
+ icon: "Text-background",
+ action: "colorPicker",
+ command: "textHighlight"
+ }
+ ]
+ },
+ {
+ name: "embed",
+ presetValue: 1,
+ buttons: [
+ {
+ name: "insertLink",
+ title: "Insert Link",
+ icon: "Hyperlink",
+ action: "dialog",
+ command: "insertLink"
+ },
+ {
+ name: "insertImage",
+ title: "Insert Image",
+ icon: "Image",
+ action: "dialog",
+ command: "insertImage"
+ },
+ {
+ name: "insertVideo",
+ title: "Insert YouTube Video",
+ icon: "Film",
+ action: "dialog",
+ command: "insertVideo"
+ }
+ ]
+ },
+ {
+ name: "header",
+ presetValue: 3,
+ buttons: [
+ {
+ name: "textFormat",
+ title: "Text Format",
+ icon: "Arrow-down",
+ action: "dropdown",
+ dropdownOptions: [
+ { label: "Paragraph", value: "paragraph", command: "setParagraph" },
+ { label: "Heading 1", value: "h1", command: "toggleHeading", attrs: { level: 1 } },
+ { label: "Heading 2", value: "h2", command: "toggleHeading", attrs: { level: 2 } },
+ { label: "Heading 3", value: "h3", command: "toggleHeading", attrs: { level: 3 } },
+ { label: "Heading 4", value: "h4", command: "toggleHeading", attrs: { level: 4 } },
+ { label: "Heading 5", value: "h5", command: "toggleHeading", attrs: { level: 5 } },
+ { label: "Heading 6", value: "h6", command: "toggleHeading", attrs: { level: 6 } }
+ ],
+ getCurrentValue: editor => {
+ if (editor.isActive("heading", { level: 1 })) return "h1";
+ if (editor.isActive("heading", { level: 2 })) return "h2";
+ if (editor.isActive("heading", { level: 3 })) return "h3";
+ if (editor.isActive("heading", { level: 4 })) return "h4";
+ if (editor.isActive("heading", { level: 5 })) return "h5";
+ if (editor.isActive("heading", { level: 6 })) return "h6";
+ return "paragraph";
+ }
+ }
+ ]
+ },
+ {
+ name: "code",
+ presetValue: 2,
+ buttons: [
+ {
+ name: "blockquote",
+ title: "Blockquote",
+ icon: "Blockquote",
+ action: "toggle",
+ command: "toggleBlockquote",
+ isActive: editor => editor.isActive("blockquote")
+ },
+ {
+ name: "code",
+ title: "Code",
+ icon: "Inline-code",
+ action: "toggle",
+ command: "toggleCode",
+ isActive: editor => editor.isActive("code"),
+ canExecute: editor => editor.can().chain().focus().toggleCode().run()
+ },
+ {
+ name: "codeBlock",
+ title: "Code Block",
+ icon: "Code-block",
+ action: "toggle",
+ command: "toggleCodeBlock",
+ isActive: editor => editor.isActive("codeBlock")
+ },
+ {
+ name: "codeView",
+ title: "View/Edit Code",
+ icon: "View-edit-code",
+ action: "codeView"
+ }
+ ]
+ },
+ {
+ name: "remove",
+ presetValue: 1,
+ buttons: [
+ {
+ name: "clearFormatting",
+ title: "Clear Formatting",
+ icon: "Erase",
+ action: "command",
+ command: "unsetAllMarks"
+ }
+ ]
+ },
+ {
+ name: "tableBetter",
+ presetValue: 2,
+ buttons: [
+ {
+ name: "insertTable",
+ title: "Insert Table",
+ icon: "Table",
+ action: "tableGrid"
+ }
+ ]
+ },
+ {
+ name: "view",
+ presetValue: 2,
+ buttons: [
+ {
+ name: "fullscreen",
+ title: "Fullscreen",
+ icon: "Expand",
+ action: "command",
+ command: "toggleFullscreen",
+ isActive: () => document.querySelector(".widget-rich-text")?.classList.contains("fullscreen") || false
+ }
+ ]
+ }
+];
+
+export const SECONDARY_TOOLBAR_GROUP: ToolbarGroupConfig[] = [
+ {
+ name: "table-operations",
+ parentName: "tableBetter",
+ showWhen: editor => editor?.isActive("table") ?? false,
+ buttons: [
+ {
+ name: "addColumnBefore",
+ title: "Add Column Before",
+ icon: "Column",
+ action: "command",
+ command: "addColumnBefore",
+ canExecute: editor => editor.can().addColumnBefore()
+ },
+ {
+ name: "addColumnAfter",
+ title: "Add Column After",
+ icon: "Column",
+ action: "command",
+ command: "addColumnAfter",
+ canExecute: editor => editor.can().addColumnAfter()
+ },
+ {
+ name: "deleteColumn",
+ title: "Delete Column",
+ icon: "Delete",
+ action: "command",
+ command: "deleteColumn",
+ canExecute: editor => editor.can().deleteColumn()
+ },
+ {
+ name: "addRowBefore",
+ title: "Add Row Before",
+ icon: "Row",
+ action: "command",
+ command: "addRowBefore",
+ canExecute: editor => editor.can().addRowBefore()
+ },
+ {
+ name: "addRowAfter",
+ title: "Add Row After",
+ icon: "Row",
+ action: "command",
+ command: "addRowAfter",
+ canExecute: editor => editor.can().addRowAfter()
+ },
+ {
+ name: "deleteRow",
+ title: "Delete Row",
+ icon: "Delete",
+ action: "command",
+ command: "deleteRow",
+ canExecute: editor => editor.can().deleteRow()
+ },
+ {
+ name: "deleteTable",
+ title: "Delete Table",
+ icon: "Close",
+ action: "command",
+ command: "deleteTable",
+ canExecute: editor => editor.can().deleteTable()
+ },
+ {
+ name: "mergeCells",
+ title: "Merge Cells",
+ icon: "Merge",
+ action: "command",
+ command: "mergeCells",
+ canExecute: editor => editor.can().mergeCells()
+ },
+ {
+ name: "splitCell",
+ title: "Split Cell",
+ icon: "Cell",
+ action: "command",
+ command: "splitCell",
+ canExecute: editor => editor.can().splitCell()
+ },
+ {
+ name: "tableConfiguration",
+ title: "Table Configuration",
+ icon: "Table",
+ action: "configurationDropdown",
+ customAction: (editor: Editor) => {
+ // Configuration sections are created dynamically
+ return createTableConfigurationSections(editor);
+ }
+ },
+ {
+ name: "cellConfiguration",
+ title: "Cell Configuration",
+ icon: "Cell",
+ action: "configurationDropdown",
+ customAction: (editor: Editor) => {
+ // Configuration sections are created dynamically
+ return createCellConfigurationSections(editor);
+ }
+ }
+ ]
+ }
+];
+
+// Toolbar group custom configuration interface
+export interface ToolbarGroupsConfig {
+ history?: boolean;
+ fontStyle?: boolean;
+ fontScript?: boolean;
+ list?: boolean;
+ indent?: boolean;
+ embed?: boolean;
+ align?: boolean;
+ code?: boolean;
+ fontColor?: boolean;
+ header?: boolean;
+ view?: boolean;
+ remove?: boolean;
+ tableBetter?: boolean;
+}
+
+// Mapping from CtItemType to button names
+const CT_ITEM_TO_BUTTON_MAP: Record = {
+ separator: null, // Special case
+ undo: "undo",
+ redo: "redo",
+ bold: "bold",
+ italic: "italic",
+ underline: "underline",
+ strike: "strike",
+ superScript: "superscript",
+ subScript: "subscript",
+ orderedList: "orderedList",
+ bulletList: "bulletList",
+ lowerAlphaList: null, // Not directly supported in TipTap
+ checkList: "taskList",
+ minIndent: "decreaseIndent",
+ plusIndent: "increaseIndent",
+ direction: "textDirection",
+ link: "insertLink",
+ image: "insertImage",
+ video: "insertVideo",
+ formula: null, // Not implemented in TipTap
+ blockquote: "blockquote",
+ code: "code",
+ codeBlock: "codeBlock",
+ viewCode: "codeView",
+ leftAlign: "leftAlign",
+ centerAlign: "centerAlign",
+ rightAlign: "rightAlign",
+ justifyAlign: "justifyAlign",
+ font: "fontFamily",
+ size: "fontSize",
+ color: "textColor",
+ background: "backgroundColor",
+ header: "header",
+ fullscreen: "fullscreen",
+ clean: "clearFormatting",
+ tableBetter: "insertTable"
+};
+
+// Find button config by name across all toolbar groups
+function findButtonByName(buttonName: string): ToolbarButtonConfig | null {
+ for (const group of TOOLBAR_GROUPS) {
+ const button = group.buttons.find(b => b.name === buttonName);
+ if (button) {
+ return button;
+ }
+ }
+ return null;
+}
+
+/**
+ * Build advanced custom toolbar from CtItemType list, optionally enhanced with custom fonts
+ * @param advancedConfig - Advanced toolbar configuration
+ * @param customFonts - Optional user-provided custom fonts to add to font family dropdown
+ * @returns Built and enhanced toolbar groups
+ */
+export function buildAdvancedToolbar(advancedConfig: AdvancedConfigType[]): ToolbarGroupConfig[] {
+ const groups: ToolbarGroupConfig[] = [];
+ let currentGroup: ToolbarButtonConfig[] = [];
+
+ for (const item of advancedConfig) {
+ if (item.ctItemType === "separator") {
+ // Create a new group when separator is encountered
+ if (currentGroup.length > 0) {
+ groups.push({
+ name: `custom-group-${groups.length}`,
+ presetValue: 1,
+ buttons: currentGroup
+ });
+ currentGroup = [];
+ }
+ } else {
+ // Map CtItemType to button name and find the button config
+ const buttonName = CT_ITEM_TO_BUTTON_MAP[item.ctItemType];
+ if (buttonName) {
+ const button = findButtonByName(buttonName);
+ if (button) {
+ // Avoid duplicate buttons in the same group
+ if (!currentGroup.find(b => b.name === button.name)) {
+ currentGroup.push(button);
+ }
+ }
+ }
+ }
+ }
+
+ // Add remaining buttons as final group
+ if (currentGroup.length > 0) {
+ groups.push({
+ name: `custom-group-${groups.length}`,
+ presetValue: 1,
+ buttons: currentGroup
+ });
+ }
+
+ return groups;
+}
+
+/**
+ * Enhances toolbar groups by merging custom fonts into the fontFamilySelect dropdown
+ * @param groups - Toolbar groups to enhance
+ * @param customFonts - User-provided custom fonts to add
+ * @returns Enhanced toolbar groups with merged and sorted fonts
+ */
+function enhancedToolbarGroups(groups: ToolbarGroupConfig[], customFonts?: CustomFontsType[]): ToolbarGroupConfig[] {
+ // Enhance with custom fonts if provided
+ if (!customFonts || customFonts.length === 0) {
+ return groups;
+ }
+ // Map over groups and enhance fontFamilySelect button
+ return groups.map(group => ({
+ ...group,
+ buttons: group.buttons.map(button => {
+ switch (button.name) {
+ case "fontFamily":
+ return AddCustomFontsToFontFamilyDropdown(button, customFonts);
+ default:
+ return button;
+ }
+ })
+ }));
+}
+
+/**
+ * Filter toolbar groups based on preset or custom configuration, and optionally enhance with custom fonts
+ * @param preset - Toolbar preset (basic, standard, full, custom)
+ * @param toolbarConfig - Toolbar configuration mode
+ * @param customConfig - Custom toolbar group configuration
+ * @param advancedConfig - Advanced toolbar configuration
+ * @param customFonts - Optional user-provided custom fonts to add to font family dropdown
+ * @returns Filtered and enhanced toolbar groups
+ */
+export function getFilteredToolbarGroups(
+ preset: PresetEnum,
+ toolbarConfig?: ToolbarConfigEnum,
+ customConfig?: ToolbarGroupsConfig,
+ advancedConfig?: AdvancedConfigType[],
+ customFonts?: CustomFontsType[]
+): ToolbarGroupConfig[] {
+ let filteredGroups: ToolbarGroupConfig[];
+
+ if (preset === "custom") {
+ // Advanced mode: build custom toolbar from advancedConfig list
+ if (toolbarConfig === "advanced" && advancedConfig && advancedConfig.length > 0) {
+ filteredGroups = buildAdvancedToolbar(advancedConfig);
+ } else {
+ // Basic mode: filter by individual boolean props
+ filteredGroups = TOOLBAR_GROUPS.filter(group => {
+ const key = group.name as keyof ToolbarGroupsConfig;
+ return customConfig?.[key] !== false;
+ });
+ }
+ } else {
+ // Filter by presetValue (groups without presetValue are always included)
+ const maxPresetValue = preset === "basic" ? 1 : preset === "standard" ? 2 : 3;
+ filteredGroups = TOOLBAR_GROUPS.filter(group => !group.presetValue || group.presetValue <= maxPresetValue);
+ }
+
+ return enhancedToolbarGroups(filteredGroups, customFonts);
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/CodeView.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/CodeView.tsx
new file mode 100644
index 0000000000..e6f8dd2988
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/CodeView.tsx
@@ -0,0 +1,30 @@
+import { ReactElement } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+
+export function CodeViewToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
+ const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
+
+ const handleToggle = (): void => {
+ if (!editor) return;
+
+ if (!codeViewState.isCodeView) {
+ // Switching to code view - show HTML
+ const html = editor.getHTML();
+ codeViewDispatch({ type: "ENTER_CODE_VIEW", html });
+ } else {
+ // Switching back to editor - show confirmation
+ codeViewDispatch({ type: "EXIT_CODE_VIEW_REQUEST" });
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.scss
new file mode 100644
index 0000000000..862db704bd
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.scss
@@ -0,0 +1,9 @@
+.color-picker-dropdown {
+ background: white;
+ border: 1px solid #d0d0d0;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ padding: 8px;
+ z-index: 10000;
+ width: max-content;
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.tsx
new file mode 100644
index 0000000000..2e60944503
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ColorPicker.tsx
@@ -0,0 +1,71 @@
+import Compact from "@uiw/react-color-compact";
+import { ReactElement, useState, useRef, useContext } from "react";
+import "./ColorPicker.scss";
+import { useCurrentEditor } from "../../EditorContext";
+import { colorPickerHelpers } from "../helpers/colorPickerHelpers";
+import { ColorPickerCommand, ToolbarButtonConfig, ToolbarContext, ToolbarContextType } from "../ToolbarConfig";
+import { useDropdown } from "../hooks/useDropdown";
+
+export interface ColorPickerProps {
+ defaultColor?: string;
+ onColorChange: (color: string) => void;
+ onClose: () => void;
+ referenceElement: HTMLElement | null;
+}
+
+export function ColorPicker({
+ defaultColor = "#000000",
+ onColorChange,
+ onClose,
+ referenceElement
+}: ColorPickerProps): ReactElement {
+ const [color, setColor] = useState(defaultColor);
+
+ const { refs, floatingStyles } = useDropdown({
+ isOpen: true,
+ onClose,
+ referenceElement
+ });
+
+ const handleColorChange = (newColor: { hex: string }): void => {
+ setColor(newColor.hex);
+ onColorChange(newColor.hex);
+ };
+
+ return (
+ (null);
+ const { editor } = useCurrentEditor();
+ const { activeDropdown, handleDropdownToggle, handleDropdownClose } = useContext(
+ ToolbarContext
+ ) as ToolbarContextType;
+ const pickerType = config.command as ColorPickerCommand;
+ const isPickerOpen = activeDropdown === pickerType;
+
+ return (
+ >({});
+ const buttonRef = useRef(null);
+
+ const { refs, floatingStyles } = useDropdown({
+ isOpen,
+ onClose: () => setIsOpen(false),
+ referenceElement: buttonRef.current
+ });
+
+ if (!editor || !config.configurationSections) {
+ return <>;
+ }
+
+ const sections = config.configurationSections;
+
+ return (
+ (null);
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent): void => {
+ if (dialogRef.current && !dialogRef.current.contains(event.target as Node)) {
+ onCancel();
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [onCancel]);
+
+ return (
+ (null);
+ const { activeDropdown, handleDropdownToggle, handleDropdownClose } = useContext(
+ ToolbarContext
+ ) as ToolbarContextType;
+ const dropdownType = config.command as DialogCommand;
+ const isDropdownOpen = activeDropdown === dropdownType;
+
+ return (
+ ("url");
+ const [src, setSrc] = useState("");
+ const [alt, setAlt] = useState("");
+ const [title, setTitle] = useState("");
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [selectedEntityImage, setSelectedEntityImage] = useState(null);
+ const [dragError, setDragError] = useState("");
+ const dialogRef = useRef(null);
+
+ const { refs, floatingStyles } = useDropdown({
+ isOpen: true,
+ onClose,
+ referenceElement
+ });
+
+ const handleModeChange = (newMode: ImageSourceMode): void => {
+ setMode(newMode);
+ setDragError("");
+
+ if (newMode === "url") {
+ // Switching to URL mode - clear upload and entity data
+ setUploadedFile(null);
+ setSelectedEntityImage(null);
+ if (src && (src.startsWith("data:") || selectedEntityImage)) {
+ setSrc("");
+ }
+ } else if (newMode === "upload") {
+ // Switching to Upload mode - clear URL and entity data
+ setSelectedEntityImage(null);
+ if (src && !src.startsWith("data:")) {
+ setSrc("");
+ }
+ } else if (newMode === "entity") {
+ // Switching to Entity mode - clear upload and URL data
+ setUploadedFile(null);
+ if (src && (src.startsWith("data:") || !selectedEntityImage)) {
+ setSrc("");
+ }
+ }
+ };
+
+ const handleFileDrop = (acceptedFiles: File[]): void => {
+ setDragError("");
+
+ if (acceptedFiles.length === 0) {
+ return;
+ }
+
+ const file = acceptedFiles[0];
+ const error = validateFile(file);
+
+ if (error) {
+ setDragError(error);
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ const base64 = reader.result as string;
+ setSrc(base64);
+ setUploadedFile(file);
+ };
+ reader.onerror = () => {
+ setDragError("Failed to read file");
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const handleClearFile = (): void => {
+ setSrc("");
+ setUploadedFile(null);
+ setDragError("");
+ };
+
+ const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+ onDrop: handleFileDrop,
+ accept: {
+ "image/*": [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp"]
+ },
+ maxFiles: 1,
+ maxSize: MAX_FILE_SIZE,
+ disabled: mode !== "upload",
+ multiple: false
+ });
+
+ const handleSubmit = (e: FormEvent): void => {
+ e.preventDefault();
+ if (!editor || !src.trim()) return;
+
+ const imageAttrs: any = {
+ src: src.trim(),
+ alt: alt.trim() || undefined,
+ title: title.trim() || undefined
+ };
+
+ // Add entity attributes if this is a database image
+ if (selectedEntityImage?.id) {
+ imageAttrs.dataEntity = true;
+ imageAttrs.dataEntityId = selectedEntityImage.id;
+ }
+
+ editor.chain().focus().setImage(imageAttrs).run();
+ onClose();
+ };
+
+ const handleImageSelected = (event: CustomEvent): void => {
+ const imageData = event.detail;
+
+ // Set the selected entity image
+ setSelectedEntityImage(imageData);
+
+ // Use the URL for display, but we'll pass the ID for storage
+ setSrc(imageData.url);
+
+ // Switch to entity mode if not already
+ if (mode !== "entity") {
+ setMode("entity");
+ }
+ };
+
+ useEffect(() => {
+ // event listener for image selection triggered from custom widgets JS Action
+ const imgRef = dialogRef.current;
+
+ if (imgRef !== null) {
+ imgRef.addEventListener("imageSelected", handleImageSelected);
+ }
+ return () => {
+ imgRef?.removeEventListener("imageSelected", handleImageSelected);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [dialogRef.current]);
+
+ return (
+ (null);
+ const dialogRef = useRef(null);
+
+ const { refs, floatingStyles } = useDropdown({
+ isOpen: true,
+ onClose,
+ referenceElement
+ });
+
+ useEffect(() => {
+ // Focus URL input when dialog opens
+ urlInputRef.current?.focus();
+ }, []);
+
+ const handleSubmit = (e: FormEvent): void => {
+ e.preventDefault();
+ if (!editor || !url.trim()) return;
+
+ const urlValue = url.trim();
+ const textValue = text.trim();
+ const titleValue = title.trim() || undefined;
+
+ if (selectedText) {
+ // Has existing selection - apply link to it (or replace with new text if provided)
+ if (textValue && textValue !== selectedText) {
+ // Replace selection with new text and apply link
+ editor
+ .chain()
+ .focus()
+ .deleteSelection()
+ .insertContent({
+ type: "text",
+ text: textValue,
+ marks: [{ type: "link", attrs: { href: urlValue, title: titleValue, target } }]
+ })
+ .run();
+ } else {
+ // Apply link to existing selection
+ editor.chain().focus().setLink({ href: urlValue, title: titleValue, target }).run();
+ }
+ } else {
+ // No selection - insert new text with link
+ const linkText = textValue || urlValue;
+ editor
+ .chain()
+ .focus()
+ .insertContent({
+ type: "text",
+ text: linkText,
+ marks: [{ type: "link", attrs: { href: urlValue, title: titleValue, target } }]
+ })
+ .run();
+ }
+
+ onClose();
+ };
+
+ return (
+ (null);
+ const { editor } = useCurrentEditor();
+ const { activeDropdown, handleDropdownToggle, handleDropdownClose } = useContext(
+ ToolbarContext
+ ) as ToolbarContextType;
+ const dropdownType = "insertTable";
+ const isDropdownOpen = activeDropdown === dropdownType;
+
+ return (
+ <>
+
+ {editor && isDropdownOpen && (
+
handleMouseDown(e, "sw")} />
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss
new file mode 100644
index 0000000000..080794f0dc
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss
@@ -0,0 +1,237 @@
+$rte-border-color-default: #ced0d3 !default;
+$rte-gray-ligher: #f8f8f8 !default;
+$rte-brand-primary: #264ae5 !default;
+$rte-shadow-color: #00000014 !default;
+
+.widget-rich-text.toolbar-bottom {
+ .tiptap-wrapper {
+ flex-direction: column-reverse;
+ }
+}
+
+.tiptap-toolbar {
+ display: flex;
+ flex-direction: column;
+ border: unset;
+ box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, $rte-shadow-color);
+
+ .tiptap-wrapper & {
+ .toolbar-bottom & {
+ box-shadow: 2px 0 4px 0 var(--shadow-color-border, $rte-shadow-color);
+ }
+ }
+
+ .toolbar-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ padding: 8px;
+ box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, $rte-shadow-color);
+
+ &:empty {
+ height: 0;
+ padding: 0;
+ box-shadow: none;
+ }
+
+ &.table-operations-row {
+ max-height: 0;
+ overflow: hidden;
+ opacity: 0;
+ padding: 0 8px;
+ transition: all 0.3s ease-in-out;
+ border-top: 1px solid transparent;
+
+ &.visible {
+ max-height: 60px;
+ opacity: 1;
+ padding: 8px;
+ border-top: 1px solid #e0e0e0;
+ }
+ }
+ }
+
+ .toolbar-group {
+ display: flex;
+ gap: 2px;
+ padding: 0 4px;
+ border-right: 1px solid #e0e0e0;
+
+ &:last-child {
+ border-right: none;
+ }
+ }
+
+ .toolbar-dropdown-button {
+ display: flex;
+ gap: 4px;
+ padding: 6px 6px 3px;
+ min-width: 120px;
+ justify-content: space-between;
+
+ .dropdown-label {
+ flex: 1;
+ text-align: left;
+ font-size: 13px;
+ }
+
+ .dropdown-arrow {
+ font-size: 12px;
+ transition: transform 0.2s;
+ }
+
+ &.fontSize {
+ + .toolbar-dropdown-menu {
+ min-width: 120px;
+ }
+ }
+ }
+
+ .toolbar-dropdown-menu {
+ // Position is managed by Floating UI (via floatingStyles)
+ background: white;
+ border: 1px solid var(--border-color-default, $rte-border-color-default);
+ border-radius: 4px;
+ box-shadow: 0 4px 12px var(--shadow-color-border, $rte-shadow-color);
+ min-width: 160px;
+ z-index: 1000;
+ max-height: 300px;
+ overflow-y: auto;
+
+ .toolbar-dropdown-item {
+ display: block;
+ width: 100%;
+ padding: 4px 6px;
+ text-align: left;
+ border: none;
+ background: white;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: var(--gray-lighter, $rte-gray-ligher);
+ }
+
+ &.is-active {
+ background-color: var(--brand-primary, $rte-brand-primary);
+ color: white;
+ }
+
+ &:first-child {
+ border-radius: 4px 4px 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 4px 4px;
+ }
+ }
+ }
+
+ button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ height: 24px;
+ padding: 3px 5px;
+ width: 28px;
+ transition: all 0.2s;
+
+ &:hover:not(:disabled) {
+ background-color: var(--gray-lighter, $rte-gray-ligher);
+ border-color: var(--border-color-default, $rte-border-color-default);
+ }
+
+ &:active:not(:disabled) {
+ background-color: var(--gray-lighter, $rte-gray-ligher);
+ }
+
+ &:focus {
+ outline: 2px solid var(--brand-primary, $rte-brand-primary);
+ outline-offset: 2px;
+ }
+
+ &.is-active {
+ color: var(--brand-primary, $rte-brand-primary);
+ }
+
+ &:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+
+ .button-content {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ .button-label {
+ font-size: 13px;
+ }
+
+ .icons {
+ font-size: 12px;
+ }
+ }
+
+ strong,
+ em,
+ s {
+ font-style: normal;
+ font-weight: inherit;
+ }
+
+ em {
+ font-style: italic;
+ }
+
+ s {
+ text-decoration: line-through;
+ }
+ }
+
+ .list-dropdown {
+ .dropdown-list {
+ .dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 10px 12px;
+ text-align: left;
+ border: none;
+ background: white;
+ font-size: 14px;
+ cursor: pointer;
+ transition: background-color 0.2s;
+
+ .icons {
+ font-size: 16px;
+ width: 20px;
+ text-align: center;
+ }
+
+ .item-label {
+ flex: 1;
+ }
+
+ &:hover {
+ background-color: var(--gray-lighter, $rte-gray-ligher);
+ }
+
+ &.is-active {
+ background-color: var(--brand-primary, $rte-brand-primary);
+ color: white;
+ }
+
+ &:first-child {
+ border-radius: 4px 4px 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 0 4px 4px;
+ }
+ }
+ }
+ }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx
new file mode 100644
index 0000000000..78fa0a14a1
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.tsx
@@ -0,0 +1,153 @@
+import { ReactElement, ReactNode, useState, useEffect, useMemo } from "react";
+import { useCurrentEditor } from "../EditorContext";
+import { CodeViewToolbarButton } from "./components/CodeView";
+import { ColorPickerToolbarButton } from "./components/ColorPicker";
+import { ConfigurationDropdown } from "./components/ConfigurationDropdown";
+import { DialogToolbarButton } from "./components/Dialog";
+import { TableGridToolbarButton } from "./components/TableGrid";
+import { ToolbarButton } from "./components/ToolbarButton";
+import {
+ SECONDARY_TOOLBAR_GROUP,
+ ToolbarContext,
+ DropdownCommand,
+ ToolbarGroupConfig,
+ ToolbarButtonConfig,
+ getFilteredToolbarGroups,
+ ToolbarGroupsConfig
+} from "./ToolbarConfig";
+import { PresetEnum, ToolbarConfigEnum, AdvancedConfigType, CustomFontsType } from "../../../typings/RichTextProps";
+import "./Toolbar.scss";
+// eslint-disable-next-line import/order
+import { ToolbarDropdown } from "./components/ToolbarDropdown";
+
+interface ToolbarProps {
+ imageSourceContent?: ReactNode;
+ preset?: PresetEnum;
+ toolbarConfig?: ToolbarConfigEnum;
+ toolbarGroups?: ToolbarGroupsConfig;
+ advancedConfig?: AdvancedConfigType[];
+ customFonts?: CustomFontsType[];
+}
+
+interface ToolbarGroupProps extends ToolbarProps {
+ toolbar: ToolbarGroupConfig;
+}
+
+interface ToolbarRowProps extends ToolbarProps {
+ toolbars: ToolbarGroupConfig[];
+}
+
+interface ToolbarButtonFactoryProps extends ToolbarProps {
+ button: ToolbarButtonConfig;
+}
+
+function ToolbarButtonFactory(props: ToolbarButtonFactoryProps): ReactElement {
+ const { button, imageSourceContent } = props;
+ const { editor } = useCurrentEditor();
+ if (!editor) {
+ return <>;
+ }
+ switch (button.action) {
+ case "colorPicker":
+ return handleMouseDown(e, "se")} />
+
+
+ {toolbar.buttons.map(button => (
+
+ );
+}
+
+function ToolbarRow(props: ToolbarRowProps): ReactElement {
+ return (
+
+ {props.toolbars.map(group => (
+
+ );
+}
+
+export default function Toolbar(props: ToolbarProps): ReactElement | null {
+ const { preset = "basic", toolbarConfig, toolbarGroups, advancedConfig, imageSourceContent, customFonts } = props;
+ const { editor } = useCurrentEditor();
+ const [activeDropdown, setActiveDropdown] = useState
+
+
+
+ );
+}
+
+export function ColorPickerToolbarButton({ config }: { config: ToolbarButtonConfig }): ReactElement {
+ const buttonRef = useRef
+
+ {isPickerOpen && editor && (
+ colorPickerHelpers.handleColorChange(editor, pickerType, color)}
+ onClose={handleDropdownClose}
+ referenceElement={buttonRef.current}
+ />
+ )}
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.scss
new file mode 100644
index 0000000000..42eae8dbc3
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.scss
@@ -0,0 +1,119 @@
+.configuration-dropdown {
+ background: white;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ padding: 12px;
+ min-width: 240px;
+ max-width: 280px;
+ z-index: 1000;
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+.configuration-section {
+ margin-bottom: 16px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.configuration-label {
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 8px;
+}
+
+.configuration-select {
+ width: 100%;
+ padding: 6px 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 13px;
+ background: white;
+ cursor: pointer;
+ transition: border-color 0.2s;
+
+ &:hover {
+ border-color: #999;
+ }
+
+ &:focus {
+ outline: none;
+ border-color: #0078d4;
+ box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
+ }
+}
+
+.configuration-number-input {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.configuration-input {
+ flex: 1;
+ padding: 6px 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 13px;
+ background: white;
+ transition: border-color 0.2s;
+ min-width: 0;
+
+ &::placeholder {
+ color: #999;
+ font-style: italic;
+ }
+
+ &:hover {
+ border-color: #999;
+ }
+
+ &:focus {
+ outline: none;
+ border-color: #0078d4;
+ box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
+ }
+
+ &::-webkit-inner-spin-button,
+ &::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ &[type="number"] {
+ -moz-appearance: textfield;
+ }
+}
+
+.configuration-unit {
+ font-size: 12px;
+ color: #666;
+ white-space: nowrap;
+}
+
+.configuration-clear-button {
+ padding: 4px 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ background: white;
+ font-size: 16px;
+ line-height: 1;
+ color: #666;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &:hover {
+ background: #f5f5f5;
+ border-color: #999;
+ color: #333;
+ }
+
+ &:active {
+ background: #e5e5e5;
+ }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.tsx
new file mode 100644
index 0000000000..99d82a7774
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfigurationDropdown.tsx
@@ -0,0 +1,133 @@
+import Compact from "@uiw/react-color-compact";
+import { ReactElement, useState, useRef } from "react";
+import "./ConfigurationDropdown.scss";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+
+export interface ConfigurationSection {
+ id: string;
+ label: string;
+ type: "colorPicker" | "dropdown" | "numberInput";
+ getCurrentValue?: () => string | number | null;
+ onChange: (value: string) => void;
+ options?: Array<{ value: string; label: string }>;
+ defaultColor?: string;
+ min?: number;
+ max?: number;
+ step?: number;
+ placeholder?: string;
+ unit?: string;
+}
+
+export interface ConfigurationDropdownConfig {
+ sections: ConfigurationSection[];
+}
+
+export function ConfigurationDropdown({ config }: BaseToolbarButtonProps): ReactElement {
+ const { editor } = useCurrentEditor();
+ const [isOpen, setIsOpen] = useState(false);
+ const [numberInputValues, setNumberInputValues] = useState
+
+ {isOpen && (
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfirmDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfirmDialog.tsx
new file mode 100644
index 0000000000..b7acf6f2ce
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ConfirmDialog.tsx
@@ -0,0 +1,42 @@
+import { ReactElement, useRef, useEffect } from "react";
+import { ConfirmDialogProps } from "../helpers/toolbarTypes";
+import "./Dialog.scss";
+
+export function ConfirmDialog({
+ title,
+ message,
+ confirmLabel = "Save",
+ cancelLabel = "Cancel",
+ onConfirm,
+ onCancel
+}: ConfirmDialogProps): ReactElement {
+ const dialogRef = useRef
+ {sections.map(section => {
+ const currentValue = section.getCurrentValue ? section.getCurrentValue() : null;
+
+ return (
+
+ )}
+
+
+ {section.type === "colorPicker" && (
+ {
+ section.onChange(color.hex);
+ }}
+ />
+ )}
+ {section.type === "dropdown" && section.options && (
+
+ )}
+ {section.type === "numberInput" && (
+
+ );
+ })}
+
+ {
+ const value = e.target.value;
+ setNumberInputValues(prev => ({ ...prev, [section.id]: value }));
+ section.onChange(value);
+ }}
+ onBlur={() => {
+ setNumberInputValues(prev => {
+ const next = { ...prev };
+ delete next[section.id];
+ return next;
+ });
+ }}
+ />
+ {section.unit && {section.unit}}
+ {currentValue !== null && currentValue !== "" && (
+
+ )}
+
+ )}
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.scss b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.scss
new file mode 100644
index 0000000000..1c6ae3d416
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.scss
@@ -0,0 +1,441 @@
+.toolbar-dialog,
+.link-dialog {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ padding: 16px;
+ min-width: 320px;
+ max-width: 400px;
+
+ h3 {
+ margin: 0 0 16px 0;
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ .dialog-mode-selector {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 16px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid #eee;
+
+ .mode-option {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ input[type="radio"] {
+ margin-right: 6px;
+ cursor: pointer;
+ }
+
+ label {
+ cursor: pointer;
+ font-size: 13px;
+ font-weight: 500;
+ margin-bottom: 0;
+ user-select: none;
+ color: #333;
+ }
+ }
+ }
+
+ .dialog-dropzone {
+ border: 1.5px dashed #ddd;
+ border-radius: 4px;
+ padding: 24px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ background: #fafafa;
+ margin-bottom: 12px;
+
+ &:hover {
+ border-color: #0078d4;
+ background: #f5f9ff;
+ }
+
+ &.drag-active {
+ border-color: #0078d4;
+ background-color: #e6f2ff;
+ border-style: solid;
+ }
+
+ &.drag-reject {
+ border-color: #d13438;
+ background-color: #fff5f5;
+ }
+
+ .dropzone-icon {
+ font-size: 32px;
+ color: #666;
+ margin-bottom: 8px;
+ }
+
+ .dropzone-text {
+ font-size: 13px;
+ color: #666;
+ }
+
+ .dropzone-error {
+ margin-top: 8px;
+ font-size: 12px;
+ color: #d13438;
+ }
+ }
+
+ .dialog-preview {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background: white;
+ margin-bottom: 12px;
+
+ .preview-thumbnail {
+ width: 56px;
+ height: 56px;
+ object-fit: cover;
+ border-radius: 3px;
+ flex-shrink: 0;
+ }
+
+ .preview-info {
+ flex: 1;
+ min-width: 0;
+
+ .preview-name {
+ font-size: 13px;
+ font-weight: 500;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 2px;
+ }
+
+ .preview-size {
+ font-size: 11px;
+ color: #999;
+ }
+ }
+
+ .preview-clear {
+ width: 24px;
+ height: 24px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ font-size: 20px;
+ color: #999;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 3px;
+
+ &:hover {
+ color: #d13438;
+ background: #f5f5f5;
+ }
+ }
+ }
+
+ .image-dialog-entity {
+ margin-bottom: 12px;
+ padding: 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background: #fafafa;
+ min-height: 100px;
+ }
+
+ .dialog-field {
+ margin-bottom: 12px;
+
+ label {
+ display: block;
+ margin-bottom: 4px;
+ font-size: 13px;
+ font-weight: 500;
+ color: #333;
+ }
+
+ input[type="text"],
+ input[type="number"],
+ input[type="url"] {
+ width: 100%;
+ padding: 6px 8px;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ font-size: 13px;
+ box-sizing: border-box;
+
+ &:focus {
+ outline: none;
+ border-color: #0078d4;
+ }
+ }
+
+ input[type="file"] {
+ font-size: 13px;
+ }
+ }
+
+ .dialog-field-row {
+ display: flex;
+ gap: 12px;
+
+ .dialog-field {
+ flex: 1;
+ }
+ }
+
+ .dialog-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 16px;
+
+ button {
+ padding: 6px 16px;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ font-size: 13px;
+ cursor: pointer;
+ background: white;
+
+ &[type="submit"] {
+ background: #0078d4;
+ color: white;
+ border-color: #0078d4;
+
+ &:hover:not(:disabled) {
+ background: #106ebe;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ }
+
+ &[type="button"] {
+ &:hover {
+ background: #f3f3f3;
+ }
+ }
+ }
+ }
+
+ .confirm-message {
+ margin: 0 0 16px 0;
+ font-size: 14px;
+ color: #666;
+ line-height: 1.5;
+ }
+
+ .btn-primary {
+ background: #0078d4 !important;
+ color: white !important;
+ border-color: #0078d4 !important;
+
+ &:hover {
+ background: #106ebe !important;
+ }
+ }
+
+ // Form styles for link dialog
+ .form-group {
+ margin-bottom: 16px;
+
+ .form-label {
+ display: block;
+ font-size: 13px;
+ font-weight: 500;
+ margin-bottom: 6px;
+ color: #333;
+
+ .required {
+ color: #d13438;
+ margin-left: 2px;
+ }
+ }
+
+ .form-input {
+ width: 100%;
+ padding: 8px 10px;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ font-size: 13px;
+ box-sizing: border-box;
+
+ &:focus {
+ outline: none;
+ border-color: #0078d4;
+ box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
+ }
+ }
+
+ .form-hint {
+ display: block;
+ font-size: 11px;
+ color: #666;
+ margin-top: 4px;
+ }
+
+ .radio-group {
+ display: flex;
+ gap: 16px;
+
+ .radio-label {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ font-size: 13px;
+ color: #333;
+
+ input[type="radio"] {
+ margin-right: 6px;
+ cursor: pointer;
+ }
+
+ span {
+ user-select: none;
+ }
+ }
+ }
+ }
+}
+
+.confirm-dialog-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+
+ .confirm-dialog {
+ max-width: 400px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+ }
+}
+
+// Video dialog enhancements
+.video-dialog {
+ min-width: 500px;
+
+ .dialog-tabs {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 16px;
+ border-bottom: 1px solid #ddd;
+
+ button {
+ padding: 8px 16px;
+ background: none;
+ border: none;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ font-size: 13px;
+ font-weight: 500;
+ color: #666;
+ transition: all 0.2s;
+
+ &:hover {
+ background: #f5f5f5;
+ color: #333;
+ }
+
+ &.active {
+ border-bottom-color: #0078d4;
+ color: #0078d4;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .tab-content {
+ textarea {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ font-family: "Courier New", monospace;
+ font-size: 12px;
+ resize: vertical;
+ box-sizing: border-box;
+
+ &:focus {
+ outline: none;
+ border-color: #0078d4;
+ }
+ }
+ }
+
+ .detection-status {
+ padding: 8px 12px;
+ margin: 12px 0;
+ border-radius: 4px;
+ font-size: 13px;
+
+ &.success {
+ background: #d4edda;
+ color: #155724;
+ border: 1px solid #c3e6cb;
+ }
+
+ &.error {
+ background: #f8d7da;
+ color: #721c24;
+ border: 1px solid #f5c6cb;
+ }
+
+ small {
+ opacity: 0.8;
+ font-size: 11px;
+ }
+ }
+
+ .dialog-info {
+ padding: 8px 12px;
+ margin: 12px 0;
+ background: #d1ecf1;
+ color: #0c5460;
+ border: 1px solid #bee5eb;
+ border-radius: 4px;
+ font-size: 12px;
+
+ &.warning {
+ background: #fff3cd;
+ color: #856404;
+ border-color: #ffeeba;
+ }
+ }
+}
+
+// Generic embed wrapper styling
+.generic-embed-wrapper {
+ position: relative;
+ width: fit-content;
+
+ iframe {
+ display: block;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+
+ &.ProseMirror-selectednode {
+ outline: 2px solid var(--brand-primary, #0078d4);
+ outline-offset: 2px;
+ }
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.tsx
new file mode 100644
index 0000000000..b4d8da806f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/Dialog.tsx
@@ -0,0 +1,47 @@
+import { ReactElement, useContext, useRef } from "react";
+import { DialogToolbarButtonProps } from "../helpers/toolbarTypes";
+import { DialogCommand, ToolbarContext, ToolbarContextType } from "../ToolbarConfig";
+import { ImageDialog } from "./ImageDialog";
+import { LinkDialog } from "./LinkDialog";
+import { VideoDialog } from "./VideoDialog";
+
+export function DialogToolbarButton({ config, imageSourceContent }: DialogToolbarButtonProps): ReactElement {
+ const buttonRef = useRef
+
+ {title}
+{message}
+
+
+
+
+
+
+ {isDropdownOpen &&
+ (() => {
+ switch (dropdownType) {
+ case "insertImage":
+ return (
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ImageDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ImageDialog.tsx
new file mode 100644
index 0000000000..42222e4813
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ImageDialog.tsx
@@ -0,0 +1,322 @@
+import { ReactElement, useState, useRef, useEffect, FormEvent } from "react";
+import { useDropzone } from "react-dropzone";
+import { useCurrentEditor } from "../../EditorContext";
+import { ImageDialogProps, EntityImage, ImageSourceMode, MAX_FILE_SIZE } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./Dialog.scss";
+
+const formatFileSize = (bytes: number): string => {
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const validateFile = (file: File): string | null => {
+ if (file.size > MAX_FILE_SIZE) {
+ return `File must be smaller than 5MB (current: ${formatFileSize(file.size)})`;
+ }
+ if (!file.type.startsWith("image/")) {
+ return "Only image files are allowed";
+ }
+ return null;
+};
+
+export function ImageDialog({ onClose, referenceElement, imageSourceContent }: ImageDialogProps): ReactElement {
+ const { editor } = useCurrentEditor();
+ const [mode, setMode] = useState
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/LinkDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/LinkDialog.tsx
new file mode 100644
index 0000000000..d542991b2f
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/LinkDialog.tsx
@@ -0,0 +1,158 @@
+import { ReactElement, useState, FormEvent, useRef, useEffect } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { LinkDialogProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./Dialog.scss";
+
+export function LinkDialog({ onClose, referenceElement }: LinkDialogProps): ReactElement {
+ const { editor } = useCurrentEditor();
+
+ // Get initial values from editor state
+ const existingLink = editor?.getAttributes("link") || {};
+ const { from, to } = editor?.state.selection || { from: 0, to: 0 };
+ const selectedText = editor?.state.doc.textBetween(from, to, " ") || "";
+
+ const [url, setUrl] = useState(existingLink.href || "");
+ const [text, setText] = useState(selectedText);
+ const [title, setTitle] = useState(existingLink.title || "");
+ const [target, setTarget] = useState<"_self" | "_blank">(
+ (existingLink.target === "_blank" ? "_blank" : "_self") as "_self" | "_blank"
+ );
+
+ const urlInputRef = useRef
+
+
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGrid.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGrid.tsx
new file mode 100644
index 0000000000..feb486f23b
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/TableGrid.tsx
@@ -0,0 +1,31 @@
+import { useContext, useRef, ReactElement } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { ToolbarContext, ToolbarContextType } from "../ToolbarConfig";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { TableGridSelector } from "./TableGridSelector";
+
+export function TableGridToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
+ const buttonRef = useRef
+
+
+ handleCellHover(row, col)}
+ onMouseDown={handleMouseDown}
+ onMouseUp={handleMouseUp}
+ />
+ );
+ }
+ }
+
+ return cells;
+ };
+
+ const displayText = hoveredCell.row > 0 && hoveredCell.col > 0 ? `${hoveredCell.row} × ${hoveredCell.col}` : "";
+
+ return (
+ ): void => {
+ if (!editor) return;
+
+ // Handle Tab on last toolbar button - return focus to editor
+ if (event.key === "Tab" && !event.shiftKey) {
+ const toolbar = event.currentTarget.closest(".tiptap-toolbar");
+ if (toolbar) {
+ const buttons = Array.from(toolbar.querySelectorAll("button:not([disabled])"));
+ const currentIndex = buttons.indexOf(event.currentTarget);
+ const isLastButton = currentIndex === buttons.length - 1;
+
+ if (isLastButton) {
+ event.preventDefault();
+ editor.view.focus();
+ }
+ }
+ }
+ };
+
+ const handleClick = (): void => {
+ if (!editor) return;
+
+ switch (config.action) {
+ case "toggle":
+ if (config.command) {
+ (editor.chain().focus() as any)[config.command]().run();
+ }
+ break;
+ case "command":
+ if (config.command) {
+ if (config.attrs) {
+ // Special handling for setFontFamily with fontValue
+ if (config.command === "setFontFamily" && config.attrs.fontValue) {
+ // New format: pass object with both fontFamily and fontValue
+ (editor.chain().focus() as any)[config.command](config.attrs).run();
+ } else {
+ // Check if attrs has a single value to spread (e.g., setTextAlign("left"))
+ const attrValues = Object.values(config.attrs);
+ if (attrValues.length === 1 && typeof attrValues[0] === "string") {
+ // Single string parameter commands (e.g., setTextAlign)
+ (editor.chain().focus() as any)[config.command](attrValues[0]).run();
+ } else {
+ // Object parameter commands (e.g., toggleHeading({ level: 1 }))
+ (editor.chain().focus() as any)[config.command](config.attrs).run();
+ }
+ }
+ } else {
+ (editor.chain().focus() as any)[config.command]().run();
+ }
+ }
+ break;
+ case "heading":
+ if (config.command && config.attrs) {
+ (editor.chain().focus() as any)[config.command](config.attrs).run();
+ }
+ break;
+ case "custom":
+ if (config.customAction) {
+ config.customAction(editor);
+ }
+ break;
+ }
+ };
+
+ if (!editor) {
+ return <>;
+ }
+
+ const isActive = config.isActive ? config.isActive(editor) : false;
+ const isDisabled = config.canExecute ? !config.canExecute(editor) : false;
+
+ // Use activeIcon when button is active and activeIcon is provided
+ const currentIcon = isActive && config.activeIcon ? config.activeIcon : config.icon;
+
+ // Check if icon is an icon class name (contains hyphen) or plain text/emoji
+ const isIconClass = !!currentIcon;
+
+ return (
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDropdown.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDropdown.tsx
new file mode 100644
index 0000000000..10c9dd3ab0
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarDropdown.tsx
@@ -0,0 +1,96 @@
+import { ReactElement, useState, useRef, useEffect } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+import { ToolbarDropdownOption } from "../ToolbarConfig";
+import { useDropdown } from "../hooks/useDropdown";
+
+export function ToolbarDropdown({ config }: BaseToolbarButtonProps): ReactElement {
+ const { editor } = useCurrentEditor();
+ const { dropdownOptions: options, title: label } = config;
+ const [isOpen, setIsOpen] = useState(false);
+ const buttonRef = useRef(null);
+ const [, setUpdateTrigger] = useState(0);
+
+ const { refs, floatingStyles } = useDropdown({
+ isOpen,
+ onClose: () => setIsOpen(false),
+ referenceElement: buttonRef.current
+ });
+
+ // Force re-render when editor selection or content changes
+ useEffect(() => {
+ if (!editor) return;
+
+ const handleUpdate = (): void => {
+ setUpdateTrigger(prev => prev + 1);
+ };
+
+ editor.on("selectionUpdate", handleUpdate);
+ editor.on("transaction", handleUpdate);
+
+ return () => {
+ editor.off("selectionUpdate", handleUpdate);
+ editor.off("transaction", handleUpdate);
+ };
+ }, [editor]);
+
+ const currentValue = config.getCurrentValue && editor ? config.getCurrentValue(editor) : undefined;
+
+ const handleSelect = (option: ToolbarDropdownOption): void => {
+ if (!editor) return;
+
+ if (option.attrs) {
+ // Special handling for setFontFamily with fontValue
+ if (option.command === "setFontFamily" && option.attrs.fontValue) {
+ // New format: pass object with both fontFamily and fontValue
+ (editor.chain().focus() as any)[option.command](option.attrs).run();
+ } else {
+ // Check if attrs has a single value to spread (e.g., setTextDirection("ltr"))
+ const attrValues = Object.values(option.attrs);
+ if (attrValues.length === 1 && typeof attrValues[0] === "string") {
+ // Single string parameter commands (e.g., setTextDirection)
+ (editor.chain().focus() as any)[option.command](attrValues[0]).run();
+ } else {
+ // Object parameter commands (e.g., toggleHeading({ level: 1 }))
+ (editor.chain().focus() as any)[option.command](option.attrs).run();
+ }
+ }
+ } else {
+ (editor.chain().focus() as any)[option.command]().run();
+ }
+ setIsOpen(false);
+ };
+
+ const getCurrentLabel = (): string => {
+ const current = options?.find(opt => opt.value === currentValue);
+ return current ? current.label : label || "Select...";
+ };
+
+ return (
+ <>
+
+ {isOpen && (
+ ("url");
+ const [urlInput, setUrlInput] = useState("");
+ const [embedCodeInput, setEmbedCodeInput] = useState("");
+ const [width, setWidth] = useState("640");
+ const [height, setHeight] = useState("480");
+ const [detectedPlatform, setDetectedPlatform] = useState(null);
+ const [validationError, setValidationError] = useState(null);
+ const dialogRef = useRef(null);
+
+ const { refs, floatingStyles } = useDropdown({
+ isOpen: true,
+ onClose,
+ referenceElement
+ });
+
+ // Handle URL input change
+ const handleUrlChange = (value: string): void => {
+ setUrlInput(value);
+
+ if (!value.trim()) {
+ setDetectedPlatform(null);
+ setValidationError(null);
+ return;
+ }
+
+ // Try to match against known patterns
+ const pattern = matchPattern(value);
+
+ if (pattern) {
+ // Determine platform name
+ let platformName = "Video";
+ if (pattern.url.includes("youtube.com")) {
+ platformName = "YouTube";
+ } else if (pattern.url.includes("vimeo.com")) {
+ platformName = "Vimeo";
+ } else if (pattern.url.includes("dailymotion.com")) {
+ platformName = "Dailymotion";
+ } else if (pattern.url.includes("maps.google.com")) {
+ platformName = "Google Maps";
+ }
+
+ setDetectedPlatform(platformName);
+ setWidth(pattern.w.toString());
+ setHeight(pattern.h.toString());
+ setValidationError(null);
+ } else {
+ setDetectedPlatform(null);
+ setValidationError("Unsupported video platform");
+ }
+ };
+
+ // Handle embed code input change
+ const handleEmbedCodeChange = (value: string): void => {
+ setEmbedCodeInput(value);
+
+ if (!value.trim()) {
+ setDetectedPlatform(null);
+ setValidationError(null);
+ return;
+ }
+
+ // Parse and validate embed code
+ const result = parseEmbedCode(value);
+
+ if (result.valid && result.src) {
+ setWidth(result.width || "640");
+ setHeight(result.height || "480");
+ setDetectedPlatform(result.domain || null);
+ setValidationError(null);
+ } else {
+ setValidationError(result.error || "Invalid embed code");
+ }
+ };
+
+ // Handle URL submission
+ const handleUrlSubmit = (w: number, h: number): void => {
+ if (!editor) return;
+
+ const pattern = matchPattern(urlInput);
+
+ if (!pattern) {
+ setValidationError("Invalid URL");
+ return;
+ }
+
+ // Check if it's a YouTube URL
+ if (pattern.url.includes("youtube.com")) {
+ editor
+ .chain()
+ .focus()
+ .setYoutubeVideo({
+ src: urlInput.trim(),
+ width: isNaN(w) ? undefined : w,
+ height: isNaN(h) ? undefined : h
+ })
+ .run();
+ } else {
+ // Use GenericEmbed for other platforms
+ editor
+ .chain()
+ .focus()
+ .setGenericEmbed({
+ src: pattern.url,
+ width: w,
+ height: h
+ })
+ .run();
+ }
+ };
+
+ // Handle embed code submission
+ const handleEmbedSubmit = (w: number, h: number): void => {
+ if (!editor) return;
+
+ const parsed = parseEmbedCode(embedCodeInput);
+
+ if (!parsed.valid || !parsed.src) {
+ setValidationError(parsed.error || "Invalid embed code");
+ return;
+ }
+
+ editor
+ .chain()
+ .focus()
+ .setGenericEmbed({
+ src: parsed.src,
+ width: w,
+ height: h,
+ title: parsed.title || null,
+ frameborder: parsed.frameborder,
+ allow: parsed.allow || null,
+ allowfullscreen: parsed.allowfullscreen
+ })
+ .run();
+ };
+
+ // Unified submit handler
+ const handleSubmit = (e: FormEvent): void => {
+ e.preventDefault();
+ if (!editor) return;
+
+ const w = parseInt(width, 10);
+ const h = parseInt(height, 10);
+
+ if (activeTab === "url") {
+ handleUrlSubmit(w, h);
+ } else {
+ handleEmbedSubmit(w, h);
+ }
+
+ onClose();
+ };
+
+ // Reset state when switching tabs
+ useEffect(() => {
+ setValidationError(null);
+ setDetectedPlatform(null);
+ }, [activeTab]);
+
+ const isSubmitDisabled =
+ (activeTab === "url" && (!urlInput.trim() || !!validationError)) ||
+ (activeTab === "embed" && (!embedCodeInput.trim() || !!validationError));
+
+ return (
+
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarButton.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarButton.tsx
new file mode 100644
index 0000000000..4debedaadc
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/ToolbarButton.tsx
@@ -0,0 +1,114 @@
+import { ReactElement, useState, useEffect, KeyboardEvent } from "react";
+import { useCurrentEditor } from "../../EditorContext";
+import { BaseToolbarButtonProps } from "../helpers/toolbarTypes";
+
+export function ToolbarButton({ config }: BaseToolbarButtonProps): ReactElement {
+ const { editor } = useCurrentEditor();
+ const [, setUpdateTrigger] = useState(0);
+
+ // Force re-render when editor selection or content changes
+ useEffect(() => {
+ if (!editor) return;
+
+ const handleUpdate = (): void => {
+ setUpdateTrigger(prev => prev + 1);
+ };
+
+ editor.on("selectionUpdate", handleUpdate);
+ editor.on("transaction", handleUpdate);
+
+ return () => {
+ editor.off("selectionUpdate", handleUpdate);
+ editor.off("transaction", handleUpdate);
+ };
+ }, [editor]);
+
+ const handleKeyDown = (event: KeyboardEvent{renderGrid()}
+ {displayText && {displayText}
}
+
+ {options?.map(option => (
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/VideoDialog.tsx b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/VideoDialog.tsx
new file mode 100644
index 0000000000..04da8de0fd
--- /dev/null
+++ b/packages/pluggableWidgets/rich-text-web/src/components/toolbars/components/VideoDialog.tsx
@@ -0,0 +1,296 @@
+import { ReactElement, useState, useRef, FormEvent, useEffect } from "react";
+import { parseEmbedCode } from "../../../utils/embedCodeParser";
+import { matchPattern } from "../../../utils/videoUrlPattern";
+import { useCurrentEditor } from "../../EditorContext";
+import { VideoDialogProps } from "../helpers/toolbarTypes";
+import { useDropdown } from "../hooks/useDropdown";
+import "./Dialog.scss";
+
+type TabMode = "url" | "embed";
+
+export function VideoDialog({ onClose, referenceElement }: VideoDialogProps): ReactElement {
+ const { editor } = useCurrentEditor();
+ const [activeTab, setActiveTab] = useState
+
+