feat(rte): add default font family and size feature

Author: gjulivan

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

@@ -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 />

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

@@ -54,7 +54,9 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         imageSource,
         imageSourceContent,
         enableDefaultUpload,
-        formOrientation
+        formOrientation,
+        defaultFontFamily,
+        defaultFontSize
     } = props;
 
     const globalState = useContext(EditorContext);
@@ -106,6 +108,14 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stringAttribute.value, calculateCounts, quillRef.current]);
 
+    useEffect(() => {
+        if (quillRef.current) {
+            (quillRef.current?.theme as MendixTheme).updateDefaultFontFamily(defaultFontFamily?.value);
+            (quillRef.current?.theme as MendixTheme).updateDefaultFontSize(defaultFontSize?.value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultFontFamily?.value, quillRef.current, defaultFontSize?.value]);
+
     useEffect(() => {
         if (quillRef.current) {
             const isTransformed = updateLegacyQuillFormats(quillRef.current);

packages/pluggableWidgets/rich-text-web/src/utils/themes/mxTheme.ts

@@ -6,31 +6,30 @@ import { Context } from "quill/modules/keyboard";
 import Picker from "quill/ui/picker";
 import { Range } from "quill";
 
-const DEFAULT_FONT_SIZE = "14px";
-const DEFAULT_FONT_FAMILY = "helvetica";
-
 /**
  * Override quill's current theme.
  */
 export default class MendixTheme extends SnowTheme {
     fontPicker?: Picker = undefined;
     fontSizePicker?: Picker = undefined;
     headerPicker?: Picker = undefined;
+    defaultFontFamily = "helvetica";
+    defaultFontSize = "14px";
     buildPickers(selects: NodeListOf<HTMLSelectElement>, icons: Record<string, string | Record<string, string>>): void {
         super.buildPickers(selects, icons);
 
         this.pickers.forEach(picker => {
             const pickerLabel = picker.container.querySelector(".ql-picker-label");
             if (picker.container.classList.contains("ql-size")) {
                 picker.selectItem(
-                    picker.container.querySelector(`[data-value="${DEFAULT_FONT_SIZE}"]`) as HTMLElement,
+                    picker.container.querySelector(`[data-value="${this.defaultFontFamily}"]`) as HTMLElement,
                     false
                 );
                 this.fontSizePicker = picker;
             }
             if (picker.container.classList.contains("ql-font")) {
                 picker.selectItem(
-                    picker.container.querySelector(`[data-value=${DEFAULT_FONT_FAMILY}]`) as HTMLElement,
+                    picker.container.querySelector(`[data-value=${this.defaultFontFamily}]`) as HTMLElement,
                     false
                 );
                 this.fontPicker = picker;
@@ -76,9 +75,9 @@ export default class MendixTheme extends SnowTheme {
 
             const format = this.quill.getFormat(currentRange.index, currentRange.length);
             const font = format ? (format.font as string) : undefined;
-            this.updateFontPicker(font || DEFAULT_FONT_FAMILY);
+            this.updateFontPicker(font || this.defaultFontFamily);
             const fontSize = format ? (format.size as string) : undefined;
-            this.updateFontSizePicker(fontSize || DEFAULT_FONT_SIZE);
+            this.updateFontSizePicker(fontSize || this.defaultFontSize);
             const header = format ? (format.header as string) : undefined;
             this.updateHeaderPicker(header);
         }
@@ -121,4 +120,24 @@ export default class MendixTheme extends SnowTheme {
             }
         }
     }
+
+    updateDefaultFontFamily(fontFamily?: string): void {
+        if (fontFamily && fontFamily.trim().length > 0) {
+            this.defaultFontFamily = fontFamily;
+        } else {
+            this.defaultFontFamily = "helvetica";
+        }
+
+        this.updateFontPicker(this.defaultFontFamily);
+    }
+
+    updateDefaultFontSize(fontSize?: string): void {
+        if (fontSize) {
+            this.defaultFontSize = fontSize;
+        } else {
+            this.defaultFontSize = "14px";
+        }
+
+        this.updateFontSizePicker(this.defaultFontSize);
+    }
 }

packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { ComponentType, ReactNode } from "react";
-import { ActionValue, EditableValue, ListValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, ListValue } from "mendix";
 
 export type PresetEnum = "basic" | "standard" | "full" | "custom";
 
@@ -75,6 +75,8 @@ export interface RichTextContainerProps {
     onLoad?: ActionValue;
     onChangeType: OnChangeTypeEnum;
     spellCheck: boolean;
+    defaultFontFamily?: DynamicValue<string>;
+    defaultFontSize?: DynamicValue<string>;
     customFonts: CustomFontsType[];
     imageSource?: ListValue;
     imageSourceContent?: ReactNode;
@@ -122,6 +124,8 @@ export interface RichTextPreviewProps {
     onLoad: {} | null;
     onChangeType: OnChangeTypeEnum;
     spellCheck: boolean;
+    defaultFontFamily: string;
+    defaultFontSize: string;
     customFonts: CustomFontsPreviewType[];
     imageSource: {} | { caption: string } | { type: string } | null;
     imageSourceContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };