feat(rich-text-web): enhance custom fonts support with additional properties

Author: samuelreichert

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

@@ -167,10 +167,15 @@
                     <caption>Custom fonts</caption>
                     <description />
                     <properties>
-                        <property key="fontName" type="textTemplate" required="false">
+                        <property key="fontName" type="string" required="false">
                             <caption>Font name</caption>
                             <category>Item</category>
-                            <description />
+                            <description>Choose the main font you want to use (e.g., Arial)</description>
+                        </property>
+                        <property key="fontStyle" type="string" required="false">
+                            <caption>Font style</caption>
+                            <category>Item</category>
+                            <description>List of fonts to use in case the first isn't available (e.g., arial, helvetica, sans-serif)</description>
                         </property>
                     </properties>
                 </property>

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

@@ -15,7 +15,7 @@ import { CustomFontsType } from "../../typings/RichTextProps";
 import { EditorDispatchContext } from "../store/EditorProvider";
 import { SET_FULLSCREEN_ACTION } from "../store/store";
 import "../utils/customPluginRegisters";
-import { FontStyleAttributor, formatFonts } from "../utils/formats/fonts";
+import { FontStyleAttributor, formatCustomFonts } from "../utils/formats/fonts";
 import "../utils/formats/quill-table-better/assets/css/quill-table-better.scss";
 import QuillTableBetter from "../utils/formats/quill-table-better/quill-table-better";
 import { RESIZE_MODULE_CONFIG } from "../utils/formats/resizeModuleConfig";
@@ -45,7 +45,7 @@ export interface EditorProps {
 
 // Editor is an uncontrolled React component
 const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | null>) => {
-    const fonts = formatFonts(props.customFonts);
+    const fonts = formatCustomFonts(props.customFonts);
     const FontStyle = new FontStyleAttributor(fonts);
     Quill.register(FontStyle, true);
     const { theme, defaultValue, style, className, toolbarId, onTextChange, onSelectionChange, readOnly } = props;

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

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import Quill from "quill";
 import { CSSProperties, ReactElement, RefObject, createElement, forwardRef } from "react";
 import { CustomFontsType, PresetEnum } from "../../typings/RichTextProps";
-import { formatFonts } from "../utils/formats/fonts";
+import { formatCustomFonts } from "../utils/formats/fonts";
 import { FormatsContainer, ToolbarContext, presetToNumberConverter } from "./CustomToolbars/ToolbarWrapper";
 import { TOOLBAR_MAPPING, toolbarContentType } from "./CustomToolbars/constants";
 
@@ -73,7 +73,7 @@ const Toolbar = forwardRef((props: ToolbarProps, ref: RefObject<HTMLDivElement>)
                                     type FontListType = Array<{ value: string; description: string; style: string }>;
                                     value = [
                                         ...(currentToolbar.value as FontListType),
-                                        ...formatFonts(props.customFonts ?? [])
+                                        ...formatCustomFonts(props.customFonts ?? [])
                                     ].sort((a, b) => (a.value ?? "").localeCompare(b.value ?? ""));
                                 }
 

packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts

@@ -54,10 +54,10 @@ export class FontStyleAttributor extends StyleAttributor {
     }
 }
 
-export function formatFonts(fonts: CustomFontsType[] = []): typeof FONT_LIST {
+export function formatCustomFonts(fonts: CustomFontsType[] = []): typeof FONT_LIST {
     return fonts.map(font => ({
-        value: font.fontName?.value?.toLowerCase().split(" ").join("-") ?? "",
-        description: font.fontName?.value ?? "",
-        style: `'${font.fontName?.value}'`
+        value: font.fontName?.toLowerCase().split(" ").join("-") ?? "",
+        description: font.fontName ?? "",
+        style: font.fontStyle ?? ""
     }));
 }

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

@@ -3,7 +3,7 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix Widgets Framework Team
  */
-import { ActionValue, DynamicValue, EditableValue } from "mendix";
+import { ActionValue, EditableValue } from "mendix";
 
 export type PresetEnum = "basic" | "standard" | "full" | "custom";
 
@@ -24,7 +24,8 @@ export type OverflowYEnum = "auto" | "scroll" | "hidden";
 export type OnChangeTypeEnum = "onLeave" | "onDataChange";
 
 export interface CustomFontsType {
-    fontName?: DynamicValue<string>;
+    fontName: string;
+    fontStyle: string;
 }
 
 export type ToolbarConfigEnum = "basic" | "advanced";
@@ -37,6 +38,7 @@ export interface AdvancedConfigType {
 
 export interface CustomFontsPreviewType {
     fontName: string;
+    fontStyle: string;
 }
 
 export interface AdvancedConfigPreviewType {