feat(rich-tex-web): integrate custom fonts support in Editor and Toolbar components

Author: samuelreichert

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<Quill | null>) => {
+    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<HTMLDivElement>(null);
     const modalRef = useRef<HTMLDivElement>(null);

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}
                 />
             </div>
             {enableStatusBar && (

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<HTMLDivElement>)
                                     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 ?? ""));
                                 }
 

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}'`
+    }));
+}