chore: updated version of rich text with tiptap

Author: gjulivan

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.12.0",
+    "version": "4.13.0",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

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

@@ -17,9 +17,9 @@
             </propertyGroup>
             <propertyGroup caption="General">
                 <systemProperty key="Label" />
-                <property key="enableStatusBar" type="boolean" defaultValue="true">
+                <property key="enableStatusBar" type="boolean" defaultValue="false">
                     <caption>Enable status bar</caption>
-                    <description />
+                    <description>Show a status bar at the bottom of the editor displaying document metrics</description>
                 </property>
             </propertyGroup>
             <propertyGroup caption="Toolbar">

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -31,6 +31,8 @@ import { TextColorClass } from "../extensions/TextColorClass";
 import { TextDirection } from "../extensions/TextDirection";
 import { TextHighlightClass } from "../extensions/TextHighlightClass";
 import { ConfirmDialog } from "./toolbars/components/ConfirmDialog";
+import { ToolbarGroupsConfig } from "./toolbars/ToolbarConfig";
+import { PresetEnum, ToolbarConfigEnum, AdvancedConfigType } from "../../typings/RichTextProps";
 
 export interface EditorProps {
     defaultValue?: string;
@@ -40,6 +42,10 @@ export interface EditorProps {
     showToolbar?: boolean;
     styleDataFormat?: "inline" | "class";
     imageSourceContent?: ReactNode;
+    preset?: PresetEnum;
+    toolbarConfig?: ToolbarConfigEnum;
+    toolbarGroups?: ToolbarGroupsConfig;
+    advancedConfig?: AdvancedConfigType[];
 }
 
 export interface EditorHandle {
@@ -55,9 +61,22 @@ interface EditorInnerProps {
     readOnly: boolean;
     className?: string;
     imageSourceContent?: ReactNode;
+    preset?: PresetEnum;
+    toolbarConfig?: ToolbarConfigEnum;
+    toolbarGroups?: ToolbarGroupsConfig;
+    advancedConfig?: AdvancedConfigType[];
 }
 
-function EditorInner({ showToolbar, readOnly, className, imageSourceContent }: EditorInnerProps): ReactElement {
+function EditorInner({
+    showToolbar,
+    readOnly,
+    className,
+    imageSourceContent,
+    preset,
+    toolbarConfig,
+    toolbarGroups,
+    advancedConfig
+}: EditorInnerProps): ReactElement {
     const { editor, codeViewState, codeViewDispatch } = useCurrentEditor();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -80,7 +99,15 @@ function EditorInner({ showToolbar, readOnly, className, imageSourceContent }: E
     return (
         <>
             <div className="tiptap-wrapper">
-                {showToolbar && !readOnly && <Toolbar imageSourceContent={imageSourceContent} />}
+                {showToolbar && !readOnly && (
+                    <Toolbar
+                        imageSourceContent={imageSourceContent}
+                        preset={preset}
+                        toolbarConfig={toolbarConfig}
+                        toolbarGroups={toolbarGroups}
+                        advancedConfig={advancedConfig}
+                    />
+                )}
                 {codeViewState.isCodeView ? (
                     <textarea
                         ref={textareaRef}
@@ -117,7 +144,11 @@ const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
         className,
         showToolbar = true,
         styleDataFormat = "inline",
-        imageSourceContent
+        imageSourceContent,
+        preset,
+        toolbarConfig,
+        toolbarGroups,
+        advancedConfig
     } = props;
 
     const extensions = [
@@ -212,6 +243,10 @@ const Editor = forwardRef<EditorHandle, EditorProps>((props, ref) => {
                 readOnly={!!readOnly}
                 className={className}
                 imageSourceContent={imageSourceContent}
+                preset={preset}
+                toolbarConfig={toolbarConfig}
+                toolbarGroups={toolbarGroups}
+                advancedConfig={advancedConfig}
             />
         </EditorContextProvider>
     );

packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx

@@ -1,15 +1,40 @@
-import { ReactElement, useRef } from "react";
+import { ReactElement, useRef, useState, useEffect } from "react";
 import { RichTextContainerProps } from "typings/RichTextProps";
 import { useDebounceWithStatus } from "@mendix/widget-plugin-hooks/useDebounceWithStatus";
 import Editor, { EditorHandle } from "./Editor";
+import { StatusBar, StatusBarMetricType } from "./StatusBar";
 
 export interface EditorWrapperProps extends RichTextContainerProps {
     className?: string;
 }
 
 function EditorWrapper(props: EditorWrapperProps): ReactElement {
-    const { stringAttribute, className, styleDataFormat, imageSourceContent } = props;
+    const {
+        stringAttribute,
+        className,
+        styleDataFormat,
+        imageSourceContent,
+        preset,
+        toolbarConfig,
+        history,
+        fontStyle,
+        fontScript,
+        list,
+        indent,
+        embed,
+        align,
+        code,
+        fontColor,
+        header,
+        view,
+        remove,
+        tableBetter,
+        advancedConfig,
+        enableStatusBar,
+        statusBarContent
+    } = props;
     const editorRef = useRef<EditorHandle>(null);
+    const [editorText, setEditorText] = useState<string>("");
 
     const [setAttributeValueDebounce] = useDebounceWithStatus(
         (html?: string) => {
@@ -27,18 +52,67 @@ function EditorWrapper(props: EditorWrapperProps): ReactElement {
         }
     };
 
+    // Update editor text for status bar when editor content changes
+    useEffect(() => {
+        if (editorRef.current && enableStatusBar) {
+            const text = editorRef.current.getText();
+            setEditorText(text);
+        }
+    }, [stringAttribute.value, enableStatusBar]);
+
+    // Determine status bar content based on metric type
+    const statusBarContentValue = (() => {
+        if (!enableStatusBar) return "";
+
+        switch (statusBarContent) {
+            case "wordCount":
+            case "characterCount":
+                return editorText;
+            case "characterCountHtml":
+                return stringAttribute.value || "";
+            default:
+                return editorText;
+        }
+    })();
+
     return (
         <div className={className}>
             {stringAttribute.status === "available" && (
-                <Editor
-                    ref={editorRef}
-                    defaultValue={stringAttribute.value}
-                    onUpdate={handleUpdate}
-                    readOnly={stringAttribute.readOnly}
-                    className="tiptap-editor"
-                    styleDataFormat={styleDataFormat}
-                    imageSourceContent={imageSourceContent}
-                />
+                <>
+                    <Editor
+                        ref={editorRef}
+                        defaultValue={stringAttribute.value}
+                        onUpdate={handleUpdate}
+                        readOnly={stringAttribute.readOnly}
+                        className="tiptap-editor"
+                        styleDataFormat={styleDataFormat}
+                        imageSourceContent={imageSourceContent}
+                        preset={preset}
+                        toolbarConfig={toolbarConfig}
+                        toolbarGroups={{
+                            history,
+                            fontStyle,
+                            fontScript,
+                            list,
+                            indent,
+                            embed,
+                            align,
+                            code,
+                            fontColor,
+                            header,
+                            view,
+                            remove,
+                            tableBetter
+                        }}
+                        advancedConfig={advancedConfig}
+                    />
+                    {enableStatusBar && (
+                        <StatusBar
+                            content={statusBarContentValue}
+                            metricType={statusBarContent as StatusBarMetricType}
+                        />
+                    )}
+                </>
             )}
         </div>
     );

packages/pluggableWidgets/rich-text-web/src/components/StatusBar.tsx

@@ -0,0 +1,69 @@
+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 (
+        <div className="rich-text-status-bar">
+            <span className="status-bar-text">{displayText}</span>
+        </div>
+    );
+}

packages/pluggableWidgets/rich-text-web/src/components/toolbars/Toolbar.scss

@@ -1,10 +1,6 @@
 .tiptap-toolbar {
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid #ced0d3;
-    background-color: #f8f8f8;
-    border-radius: 4px 4px 0 0;
-
     border: unset;
     box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, #00000014);
 
@@ -13,6 +9,13 @@
         flex-wrap: wrap;
         gap: 4px;
         padding: 8px;
+        box-shadow: var(--shadow-small, 0 2px 4px 0) var(--shadow-color-border, #00000014);
+
+        &:empty {
+            height: 0;
+            padding: 0;
+            box-shadow: none;
+        }
 
         &.table-operations-row {
             max-height: 0;
@@ -110,15 +113,12 @@
     }
 
     button {
-        background: white;
-        border: 1px solid #d0d0d0;
-        border-radius: 3px;
-        padding: 6px 10px;
+        background: none;
+        border: none;
         cursor: pointer;
-        font-size: 14px;
-        font-weight: 500;
-        color: #333;
-        min-width: 32px;
+        height: 24px;
+        padding: 3px 5px;
+        width: 28px;
         transition: all 0.2s;
 
         &:hover:not(:disabled) {