[WC-3094] character count on status bar, file upload bug fix, and default fonts

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

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We added character count options to the status bar to help users understand content length requirements and avoid validation failures when rich text HTML markup exceeds database attribute limits.
+
+- We added a configuration to set default font-family and font-size when there are no other value currently selected in the toolbar.
+
+### Fixed
+
+- We fixed the issue that image uploader not able to show.
+
 ## [4.9.0] - 2025-09-03
 
 ### Added

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

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/rich-text-web",
     "widgetName": "RichText",
-    "version": "4.9.0",
+    "version": "4.10.0",
     "description": "Rich inline or toolbar text editing",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
@@ -44,6 +44,7 @@
     },
     "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
+        "@codemirror/state": "^6.5.2",
         "@floating-ui/react": "^0.26.27",
         "@melloware/coloris": "^0.25.0",
         "@uiw/codemirror-theme-github": "^4.23.13",

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

@@ -171,6 +171,14 @@
                     <caption>Enable spell checking</caption>
                     <description />
                 </property>
+                <property key="defaultFontFamily" type="textTemplate" required="false">
+                    <caption>Default font family</caption>
+                    <description />
+                </property>
+                <property key="defaultFontSize" type="textTemplate" required="false">
+                    <caption>Default font size</caption>
+                    <description />
+                </property>
                 <property key="customFonts" type="object" isList="true" required="false">
                     <caption>Custom fonts</caption>
                     <description />
@@ -199,6 +207,15 @@
                     <caption>Enable default upload</caption>
                     <description />
                 </property>
+                <property key="statusBarContent" type="enumeration" defaultValue="wordCount">
+                    <caption>Status bar content</caption>
+                    <description>Choose what to display in the status bar</description>
+                    <enumerationValues>
+                        <enumerationValue key="wordCount">Word count</enumerationValue>
+                        <enumerationValue key="characterCount">Character count (text only)</enumerationValue>
+                        <enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">

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

@@ -2,7 +2,7 @@ import { EditableValueBuilder } from "@mendix/widget-plugin-test-utils";
 import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
 import { createElement } from "react";
-import { RichTextContainerProps } from "../../typings/RichTextProps";
+import { RichTextContainerProps, StatusBarContentEnum } from "../../typings/RichTextProps";
 
 import RichText from "../RichText";
 
@@ -38,6 +38,7 @@ describe("Rich Text", () => {
             tabIndex: 0,
             onChangeType: "onLeave",
             enableStatusBar: true,
+            statusBarContent: "wordCount" as StatusBarContentEnum,
             spellCheck: true,
             minHeightUnit: "none",
             maxHeightUnit: "none",
@@ -59,4 +60,23 @@ describe("Rich Text", () => {
         const component = render(<RichText {...defaultProps} toolbarLocation={"top"} preset={"full"} />);
         expect(component.container).toMatchSnapshot();
     });
+
+    it("renders with character count status bar", () => {
+        const component = render(
+            <RichText {...defaultProps} statusBarContent={"characterCount" as StatusBarContentEnum} />
+        );
+        expect(component.container).toMatchSnapshot();
+    });
+
+    it("renders with HTML character count status bar", () => {
+        const component = render(
+            <RichText {...defaultProps} statusBarContent={"characterCountHtml" as StatusBarContentEnum} />
+        );
+        expect(component.container).toMatchSnapshot();
+    });
+
+    it("renders with both word and character count", () => {
+        const component = render(<RichText {...defaultProps} statusBarContent={"both" as StatusBarContentEnum} />);
+        expect(component.container).toMatchSnapshot();
+    });
 });