From 9c2220284ad57803dad7a39de55f70dd1fbabdac Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Fri, 2 May 2025 11:08:42 +0200 Subject: [PATCH 1/8] feat(rich-text): add support for custom fonts in RichText widget --- .../pluggableWidgets/rich-text-web/src/RichText.xml | 11 +++++++++++ .../rich-text-web/typings/RichTextProps.d.ts | 12 +++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.xml b/packages/pluggableWidgets/rich-text-web/src/RichText.xml index 13ccde87c1..afdb75061e 100644 --- a/packages/pluggableWidgets/rich-text-web/src/RichText.xml +++ b/packages/pluggableWidgets/rich-text-web/src/RichText.xml @@ -163,6 +163,17 @@ Enable spell checking + + Custom fonts + + + + Font name + Item + + + + diff --git a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts b/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts index 0380ae4691..c2a58264a2 100644 --- a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts +++ b/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, EditableValue } from "mendix"; +import { ActionValue, DynamicValue, EditableValue } from "mendix"; export type PresetEnum = "basic" | "standard" | "full" | "custom"; @@ -23,6 +23,10 @@ export type OverflowYEnum = "auto" | "scroll" | "hidden"; export type OnChangeTypeEnum = "onLeave" | "onDataChange"; +export interface CustomFontsType { + fontName?: DynamicValue; +} + export type ToolbarConfigEnum = "basic" | "advanced"; export type CtItemTypeEnum = "separator" | "undo" | "redo" | "bold" | "italic" | "underline" | "strike" | "superScript" | "subScript" | "orderedList" | "bulletList" | "lowerAlphaList" | "checkList" | "minIndent" | "plusIndent" | "direction" | "link" | "image" | "video" | "formula" | "blockquote" | "code" | "codeBlock" | "viewCode" | "align" | "centerAlign" | "rightAlign" | "font" | "size" | "color" | "background" | "header" | "fullscreen" | "clean" | "tableBetter"; @@ -31,6 +35,10 @@ export interface AdvancedConfigType { ctItemType: CtItemTypeEnum; } +export interface CustomFontsPreviewType { + fontName: string; +} + export interface AdvancedConfigPreviewType { ctItemType: CtItemTypeEnum; } @@ -59,6 +67,7 @@ export interface RichTextContainerProps { onLoad?: ActionValue; onChangeType: OnChangeTypeEnum; spellCheck: boolean; + customFonts: CustomFontsType[]; toolbarConfig: ToolbarConfigEnum; history: boolean; fontStyle: boolean; @@ -100,6 +109,7 @@ export interface RichTextPreviewProps { onLoad: {} | null; onChangeType: OnChangeTypeEnum; spellCheck: boolean; + customFonts: CustomFontsPreviewType[]; toolbarConfig: ToolbarConfigEnum; history: boolean; fontStyle: boolean; From f4218cc2d864ec9026f0b6d15ead8e38ef3702dd Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 8 May 2025 16:12:08 +0200 Subject: [PATCH 2/8] feat(rich-text-web): add support for custom fonts in Toolbar component --- .../src/components/EditorWrapper.tsx | 1 + .../rich-text-web/src/components/Toolbar.tsx | 21 ++++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx index 2152a9610a..b8a88ecc90 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx @@ -185,6 +185,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement { preset={preset} quill={quillRef.current} toolbarContent={toolbarPreset} + customFonts={props.customFonts} /> ) {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), + ...(props.customFonts ?? []).map((font: CustomFontsType) => ({ + value: font.fontName?.value?.toLowerCase().split(" ").join("-"), + description: font.fontName?.value, + style: `'${font.fontName?.value}'` + })) + ].sort((a, b) => (a.value ?? "").localeCompare(b.value ?? "")); + } + return currentToolbar.custom ? createElement(currentToolbar.component, { key, @@ -77,7 +92,7 @@ const Toolbar = forwardRef((props: ToolbarProps, ref: RefObject) key, className: classNames(currentToolbar.className), presetValue: currentToolbar.presetValue, - value: currentToolbar.value, + value, title: currentToolbar.title }, currentToolbar.children && createElement(currentToolbar.children) From 13ba84965a2c5325c7856b6fb2ca4433fdb72126 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Tue, 13 May 2025 14:26:16 +0200 Subject: [PATCH 3/8] feat(rich-tex-web): integrate custom fonts support in Editor and Toolbar components --- .../rich-text-web/src/components/Editor.tsx | 6 +++++ .../src/components/EditorWrapper.tsx | 1 + .../rich-text-web/src/components/Toolbar.tsx | 7 ++---- .../rich-text-web/src/utils/formats/fonts.ts | 25 ++++++++++++++----- 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx index 959bc33ec5..0a4e8f7574 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx @@ -13,6 +13,7 @@ import { } from "react"; import QuillTableBetter from "../utils/formats/quill-table-better/quill-table-better"; import "../utils/formats/quill-table-better/assets/css/quill-table-better.scss"; +import { FontStyleAttributor, formatFonts } from "../utils/formats/fonts"; import "../utils/customPluginRegisters"; import MxQuill from "../utils/MxQuill"; import { @@ -28,8 +29,10 @@ import { RESIZE_MODULE_CONFIG } from "../utils/formats/resizeModuleConfig"; import { ACTION_DISPATCHER } from "../utils/helpers"; import { EditorDispatchContext } from "../store/EditorProvider"; import { SET_FULLSCREEN_ACTION } from "../store/store"; +import { CustomFontsType } from "typings/RichTextProps"; export interface EditorProps { + customFonts: CustomFontsType[]; defaultValue?: string; onTextChange?: (...args: [delta: Delta, oldContent: Delta, source: EmitterSource]) => void; onSelectionChange?: (...args: [range: Range, oldRange: Range, source: EmitterSource]) => void; @@ -42,6 +45,9 @@ export interface EditorProps { // Editor is an uncontrolled React component const Editor = forwardRef((props: EditorProps, ref: MutableRefObject) => { + const fonts = formatFonts(props.customFonts); + const FontStyle = new FontStyleAttributor(fonts); + Quill.register(FontStyle, true); const { theme, defaultValue, style, className, toolbarId, onTextChange, onSelectionChange, readOnly } = props; const containerRef = useRef(null); const modalRef = useRef(null); diff --git a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx index b8a88ecc90..c8977ea3b9 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx @@ -208,6 +208,7 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement { className={"widget-rich-text-container"} readOnly={stringAttribute.readOnly} key={`${toolbarId}_${stringAttribute.readOnly}`} + customFonts={props.customFonts} /> {enableStatusBar && ( diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx index 9d83d563af..3781d70b2b 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx @@ -4,6 +4,7 @@ import { CSSProperties, ReactElement, RefObject, createElement, forwardRef } fro import { CustomFontsType, PresetEnum } from "typings/RichTextProps"; import { FormatsContainer, ToolbarContext, presetToNumberConverter } from "./CustomToolbars/ToolbarWrapper"; import { TOOLBAR_MAPPING, toolbarContentType } from "./CustomToolbars/constants"; +import { formatFonts } from "src/utils/formats/fonts"; export interface ToolbarProps { customFonts?: CustomFontsType[]; @@ -72,11 +73,7 @@ const Toolbar = forwardRef((props: ToolbarProps, ref: RefObject) type FontListType = Array<{ value: string; description: string; style: string }>; value = [ ...(currentToolbar.value as FontListType), - ...(props.customFonts ?? []).map((font: CustomFontsType) => ({ - value: font.fontName?.value?.toLowerCase().split(" ").join("-"), - description: font.fontName?.value, - style: `'${font.fontName?.value}'` - })) + ...formatFonts(props.customFonts ?? []) ].sort((a, b) => (a.value ?? "").localeCompare(b.value ?? "")); } diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts index 3a520cd6ba..ef72df7d57 100644 --- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts +++ b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts @@ -1,6 +1,6 @@ import { Scope, StyleAttributor } from "parchment"; -import Quill from "quill"; import "./fonts.scss"; +import { CustomFontsType } from "typings/RichTextProps"; export const FONT_LIST = [ { value: "andale-mono", description: "Andale Mono", style: "'andale mono', monospace" }, @@ -22,13 +22,21 @@ const config = { scope: Scope.INLINE }; -class FontStyleAttributor extends StyleAttributor { +export class FontStyleAttributor extends StyleAttributor { + private fontList: typeof FONT_LIST = []; + + constructor(fontList: typeof FONT_LIST) { + super("font", "font-family", config); + this.fontList = fontList; + } + add(node: HTMLElement, value: any): boolean { if (!this.canAdd(node, value)) { return false; } node.dataset.value = value; - const style = FONT_LIST.find(x => x.value === value)?.style; + const allFonts = [...FONT_LIST, ...this.fontList]; + const style = allFonts.find(x => x.value === value)?.style; if (style) { super.add(node, style); } else { @@ -46,6 +54,11 @@ class FontStyleAttributor extends StyleAttributor { } } -const FontStyle = new FontStyleAttributor("font", "font-family", config); - -Quill.register(FontStyle, true); +export function formatFonts(fonts: CustomFontsType[] = []): typeof FONT_LIST { + console.info("formatFonts", { fonts }); + return fonts.map(font => ({ + value: font.fontName?.value?.toLowerCase().split(" ").join("-") ?? "", + description: font.fontName?.value ?? "", + style: `'${font.fontName?.value}'` + })); +} From 8c6e57de2b1757ffdb6485f51428bae5d6599487 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Tue, 13 May 2025 14:35:37 +0200 Subject: [PATCH 4/8] test(rich-text-web): update unit tests with new custom font property --- .../src/__tests__/RichText.spec.tsx | 3 ++- .../rich-text-web/src/components/Editor.tsx | 16 ++++++++-------- .../rich-text-web/src/components/Toolbar.tsx | 4 ++-- .../rich-text-web/src/utils/formats/fonts.ts | 2 +- 4 files changed, 13 insertions(+), 12 deletions(-) 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 5c61e1523c..985627b886 100644 --- a/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx @@ -43,7 +43,8 @@ describe("Rich Text", () => { maxHeightUnit: "none", maxHeight: 0, minHeight: 75, - OverflowY: "auto" + OverflowY: "auto", + customFonts: [] }; }); diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx index 0a4e8f7574..721f26780b 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx @@ -11,10 +11,15 @@ import { useLayoutEffect, useRef } from "react"; -import QuillTableBetter from "../utils/formats/quill-table-better/quill-table-better"; -import "../utils/formats/quill-table-better/assets/css/quill-table-better.scss"; -import { FontStyleAttributor, formatFonts } from "../utils/formats/fonts"; +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 "../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"; +import { ACTION_DISPATCHER } from "../utils/helpers"; import MxQuill from "../utils/MxQuill"; import { enterKeyKeyboardHandler, @@ -25,11 +30,6 @@ import { } from "./CustomToolbars/toolbarHandlers"; import { useEmbedModal } from "./CustomToolbars/useEmbedModal"; import Dialog from "./ModalDialog/Dialog"; -import { RESIZE_MODULE_CONFIG } from "../utils/formats/resizeModuleConfig"; -import { ACTION_DISPATCHER } from "../utils/helpers"; -import { EditorDispatchContext } from "../store/EditorProvider"; -import { SET_FULLSCREEN_ACTION } from "../store/store"; -import { CustomFontsType } from "typings/RichTextProps"; export interface EditorProps { customFonts: CustomFontsType[]; diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx index 3781d70b2b..663d1ce824 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx +++ b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx @@ -1,10 +1,10 @@ import classNames from "classnames"; import Quill from "quill"; import { CSSProperties, ReactElement, RefObject, createElement, forwardRef } from "react"; -import { CustomFontsType, PresetEnum } from "typings/RichTextProps"; +import { CustomFontsType, PresetEnum } from "../../typings/RichTextProps"; +import { formatFonts } from "../utils/formats/fonts"; import { FormatsContainer, ToolbarContext, presetToNumberConverter } from "./CustomToolbars/ToolbarWrapper"; import { TOOLBAR_MAPPING, toolbarContentType } from "./CustomToolbars/constants"; -import { formatFonts } from "src/utils/formats/fonts"; export interface ToolbarProps { customFonts?: CustomFontsType[]; diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts index ef72df7d57..396305ac79 100644 --- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts +++ b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts @@ -1,6 +1,6 @@ import { Scope, StyleAttributor } from "parchment"; +import { CustomFontsType } from "../../../typings/RichTextProps"; import "./fonts.scss"; -import { CustomFontsType } from "typings/RichTextProps"; export const FONT_LIST = [ { value: "andale-mono", description: "Andale Mono", style: "'andale mono', monospace" }, From 75ec55fd20f4e91273bac149277401b610c68176 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Tue, 13 May 2025 15:27:17 +0200 Subject: [PATCH 5/8] chore(rich-text-web): update changelog --- packages/pluggableWidgets/rich-text-web/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/pluggableWidgets/rich-text-web/CHANGELOG.md b/packages/pluggableWidgets/rich-text-web/CHANGELOG.md index 21a204b37b..5f2c0c59c6 100644 --- a/packages/pluggableWidgets/rich-text-web/CHANGELOG.md +++ b/packages/pluggableWidgets/rich-text-web/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added +- We added support to add custom font families to Rich Text. - We added table support to Rich Text, now it is possible to add tables and configure their layout. ### Fixed From 04c047c51e4c2064a15a2d311ceac73f036db8b4 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Tue, 20 May 2025 15:58:37 +0200 Subject: [PATCH 6/8] chore(rich-text-web): remove debug log from formatFonts function --- .../pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts index 396305ac79..0e3bae97fc 100644 --- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts +++ b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts @@ -55,7 +55,6 @@ export class FontStyleAttributor extends StyleAttributor { } export function formatFonts(fonts: CustomFontsType[] = []): typeof FONT_LIST { - console.info("formatFonts", { fonts }); return fonts.map(font => ({ value: font.fontName?.value?.toLowerCase().split(" ").join("-") ?? "", description: font.fontName?.value ?? "", From 9fb4fc3147bc3fcfd6494a5cb767be5769a2e3bf Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 22 May 2025 10:03:12 +0200 Subject: [PATCH 7/8] feat(rich-text-web): enhance custom fonts support with additional properties --- packages/pluggableWidgets/rich-text-web/src/RichText.xml | 9 +++++++-- .../rich-text-web/src/components/Editor.tsx | 4 ++-- .../rich-text-web/src/components/Toolbar.tsx | 4 ++-- .../rich-text-web/src/utils/formats/fonts.ts | 8 ++++---- .../rich-text-web/typings/RichTextProps.d.ts | 6 ++++-- 5 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.xml b/packages/pluggableWidgets/rich-text-web/src/RichText.xml index afdb75061e..be46b34595 100644 --- a/packages/pluggableWidgets/rich-text-web/src/RichText.xml +++ b/packages/pluggableWidgets/rich-text-web/src/RichText.xml @@ -167,10 +167,15 @@ Custom fonts - + Font name Item - + Choose the main font you want to use (e.g., Arial) + + + Font style + Item + List of fonts to use in case the first isn't available (e.g., arial, helvetica, sans-serif) diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx index 721f26780b..7a893cd380 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx +++ b/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) => { - 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; diff --git a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx index 663d1ce824..cc21aec182 100644 --- a/packages/pluggableWidgets/rich-text-web/src/components/Toolbar.tsx +++ b/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) 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 ?? "")); } diff --git a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts b/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts index 0e3bae97fc..6b3e445bc0 100644 --- a/packages/pluggableWidgets/rich-text-web/src/utils/formats/fonts.ts +++ b/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 ?? "" })); } diff --git a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts b/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts index c2a58264a2..7aa3da5485 100644 --- a/packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts +++ b/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; + 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 { From 6b039aca1b9f5846f582fd4490d6ed9bd8e2b5f1 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 22 May 2025 13:24:39 +0200 Subject: [PATCH 8/8] fix(rich-text-web): improve descriptions for font properties in RichText widget --- packages/pluggableWidgets/rich-text-web/src/RichText.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pluggableWidgets/rich-text-web/src/RichText.xml b/packages/pluggableWidgets/rich-text-web/src/RichText.xml index be46b34595..b7b4ad71ba 100644 --- a/packages/pluggableWidgets/rich-text-web/src/RichText.xml +++ b/packages/pluggableWidgets/rich-text-web/src/RichText.xml @@ -170,12 +170,12 @@ Font name Item - Choose the main font you want to use (e.g., Arial) + A title for this font combination (e.g., Arial). Font style Item - List of fonts to use in case the first isn't available (e.g., arial, helvetica, sans-serif) + The full CSS font-family declaration that will be applied (e.g., arial, helvetica, sans-serif).