fix(lexical-editor): improve editor theme handling

webiny · Nov 18, 2024 · a114435 · a114435
1 parent f905515
commit a114435
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 48 deletions.
diff --git a/packages/lexical-editor/src/components/Editor/RichTextEditor.tsx b/packages/lexical-editor/src/components/Editor/RichTextEditor.tsx
@@ -15,7 +15,7 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import {
     createTheme,
-    WebinyTheme,
+    EditorTheme,
     ThemeEmotionMap,
     toTypographyEmotionMap
 } from "@webiny/lexical-theme";
@@ -48,7 +48,7 @@ export interface RichTextEditorProps {
     staticToolbar?: React.ReactNode;
     styles?: React.CSSProperties;
     tag?: string;
-    theme: WebinyTheme;
+    theme: EditorTheme;
     themeEmotionMap?: ThemeEmotionMap;
     toolbarActionPlugins?: ToolbarActionPlugin[];
     themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
@@ -79,7 +79,7 @@ const BaseRichTextEditor = ({
         props.themeEmotionMap ??
         toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);
 
-    const editorTheme = useRef(createTheme());
+    const editorTheme = useRef(createTheme(props.theme));
     const config = useLexicalEditorConfig();
     const { historyState } = useSharedHistoryContext();
     const placeholderElem = (

diff --git a/packages/lexical-editor/src/components/LexicalHtmlRenderer.tsx b/packages/lexical-editor/src/components/LexicalHtmlRenderer.tsx
@@ -9,7 +9,7 @@ import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { allNodes } from "@webiny/lexical-nodes";
 import {
     createTheme,
-    WebinyTheme,
+    EditorTheme,
     ThemeEmotionMap,
     toTypographyEmotionMap
 } from "@webiny/lexical-theme";
@@ -22,7 +22,7 @@ import { RichTextEditorProvider } from "~/context/RichTextEditorContext";
 interface LexicalHtmlRendererProps {
     nodes?: Klass<LexicalNode>[];
     value: LexicalValue | null;
-    theme: WebinyTheme;
+    theme: EditorTheme;
     themeEmotionMap?: ThemeEmotionMap;
     themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
 }
@@ -35,7 +35,7 @@ export const LexicalHtmlRenderer = ({
 }: LexicalHtmlRendererProps) => {
     const themeEmotionMap =
         props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);
-    const editorTheme = useRef(createTheme());
+    const editorTheme = useRef(createTheme(theme));
     const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();
 
     const initialConfig = {

diff --git a/packages/lexical-editor/src/context/RichTextEditorContext.tsx b/packages/lexical-editor/src/context/RichTextEditorContext.tsx
@@ -1,20 +1,20 @@
 import React, { createContext } from "react";
 import { LexicalEditor } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import type { ThemeEmotionMap, WebinyTheme } from "@webiny/lexical-theme";
+import type { ThemeEmotionMap, EditorTheme } from "@webiny/lexical-theme";
 import { ToolbarActionPlugin } from "~/types";
 
 export interface RichTextEditorContext {
     editor: LexicalEditor;
-    theme?: WebinyTheme;
+    theme?: EditorTheme;
     themeEmotionMap?: ThemeEmotionMap;
     toolbarActionPlugins: ToolbarActionPlugin[];
 }
 
 export const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);
 
 interface RichTextEditorProviderProps {
-    theme: WebinyTheme;
+    theme: EditorTheme;
     themeEmotionMap?: ThemeEmotionMap;
     toolbarActionPlugins?: ToolbarActionPlugin[];
     children?: React.ReactNode | React.ReactNode[];

diff --git a/packages/lexical-nodes/src/FontColorNode.ts b/packages/lexical-nodes/src/FontColorNode.ts
@@ -144,7 +144,7 @@ export class FontColorNode extends TextNode {
 
     override updateDOM(prevNode: FontColorNode, dom: HTMLElement, config: EditorConfig): boolean {
         const isUpdated = super.updateDOM(prevNode, dom, config);
-        this.__color.updateFromTheme(config.theme);
+        this.__color.updateFromTheme(config.theme as EditorTheme);
 
         dom.setAttribute(FontColorNodeAttrName, this.__color.getName());
         dom.style.color = this.__color.getValue();
@@ -160,7 +160,7 @@ export class FontColorNode extends TextNode {
 
     override createDOM(config: EditorConfig): HTMLElement {
         const element = super.createDOM(config);
-        return this.addColorValueToHTMLElement(element, config.theme);
+        return this.addColorValueToHTMLElement(element, config.theme as EditorTheme);
     }
 }
 

diff --git a/packages/lexical-nodes/src/HeadingNode.ts b/packages/lexical-nodes/src/HeadingNode.ts
@@ -12,7 +12,7 @@ import {
     HeadingTagType,
     SerializedHeadingNode as BaseSerializedHeadingNode
 } from "@lexical/rich-text";
-import { WebinyTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { EditorTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
 import { ParagraphNode } from "~/ParagraphNode";
 import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "~/types";
 
@@ -73,7 +73,7 @@ export class HeadingNode
         return new HeadingNode(node.getTag(), node.getTypographyStyleId(), node.__key);
     }
 
-    protected updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement {
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {
         if (!theme?.emotionMap) {
             return element;
         }
@@ -103,7 +103,7 @@ export class HeadingNode
 
     override createDOM(config: EditorConfig): HTMLElement {
         const element = super.createDOM(config);
-        return this.updateElementWithThemeClasses(element, config.theme as WebinyTheme);
+        return this.updateElementWithThemeClasses(element, config.theme as EditorTheme);
     }
 
     static override importJSON(serializedNode: SerializeHeadingNode): BaseHeadingNode {

diff --git a/packages/lexical-nodes/src/ListNode.ts b/packages/lexical-nodes/src/ListNode.ts
@@ -9,7 +9,7 @@ import {
     SerializedElementNode,
     Spread
 } from "lexical";
-import { EditorTheme, WebinyTheme, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { EditorTheme, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
 import { addClassNamesToElement, removeClassNamesFromElement } from "@lexical/utils";
 import { ListNodeTagType } from "@lexical/list/LexicalListNode";
 import { $getListDepth, wrapInListItem } from "~/utils/listNode";
@@ -56,7 +56,7 @@ export class ListNode extends ElementNode {
     override createDOM(config: EditorConfig): HTMLElement {
         const tag = this.__tag;
         const dom = document.createElement(tag);
-        const wTheme = config.theme as WebinyTheme;
+        const wTheme = config.theme as EditorTheme;
 
         if (this.__start !== 1) {
             dom.setAttribute("start", String(this.__start));
@@ -126,7 +126,7 @@ export class ListNode extends ElementNode {
     }
 
     override updateDOM(prevNode: ListNode, dom: HTMLElement, config: EditorConfig): boolean {
-        const wTheme = config.theme as WebinyTheme;
+        const wTheme = config.theme as EditorTheme;
 
         if (prevNode.__tag !== this.__tag) {
             return true;
@@ -137,7 +137,7 @@ export class ListNode extends ElementNode {
             this.setDefaultThemeListStyleByTag(this.__tag, wTheme);
         }
 
-        setListThemeClassNames(dom, config.theme, this, this.__themeStyleId);
+        setListThemeClassNames(dom, config.theme as EditorTheme, this, this.__themeStyleId);
         dom.setAttribute(TypographyStyleAttrName, this.__themeStyleId);
         return false;
     }
@@ -157,7 +157,7 @@ export class ListNode extends ElementNode {
     /*
      * Set default styleId from first style that is found in the theme that contains current ul or ol tag
      */
-    private setDefaultThemeListStyleByTag(tag: string, theme: WebinyTheme) {
+    private setDefaultThemeListStyleByTag(tag: string, theme: EditorTheme) {
         if (!tag) {
             return;
         }
@@ -182,7 +182,7 @@ export class ListNode extends ElementNode {
         return this.__tag;
     }
 
-    private isStyleExistInTheme(theme: WebinyTheme): boolean {
+    private isStyleExistInTheme(theme: EditorTheme): boolean {
         return theme?.emotionMap ? !!theme?.emotionMap[this.__themeStyleId] : false;
     }
 }

diff --git a/packages/lexical-nodes/src/ParagraphNode.ts b/packages/lexical-nodes/src/ParagraphNode.ts
@@ -10,7 +10,7 @@ import {
     Spread
 } from "lexical";
 import { EditorConfig } from "lexical";
-import { WebinyTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { EditorTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
 import { addClassNamesToElement } from "@lexical/utils";
 import { TypographyStylesNode, ThemeStyleValue, TextNodeThemeStyles } from "~/types";
 
@@ -76,7 +76,7 @@ export class ParagraphNode
         return new ParagraphNode(node.getTypographyStyleId(), node.__key);
     }
 
-    private updateElementWithThemeClasses(element: HTMLElement, theme: WebinyTheme): HTMLElement {
+    private updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {
         if (!theme?.emotionMap) {
             return element;
         }
@@ -106,20 +106,20 @@ export class ParagraphNode
 
     override createDOM(config: EditorConfig): HTMLElement {
         const element = super.createDOM(config);
-        return this.updateElementWithThemeClasses(element, config.theme as WebinyTheme);
+        return this.updateElementWithThemeClasses(element, config.theme as EditorTheme);
     }
 
     override updateDOM(prevNode: ParagraphNode, dom: HTMLElement, config: EditorConfig): boolean {
         const prevTypoStyleId = prevNode.getTypographyStyleId();
         const nextTypoStyleId = this.getTypographyStyleId();
 
         if (!nextTypoStyleId) {
-            this.updateElementWithThemeClasses(dom, config.theme as WebinyTheme);
+            this.updateElementWithThemeClasses(dom, config.theme as EditorTheme);
             return false;
         }
 
         if (prevTypoStyleId !== nextTypoStyleId && nextTypoStyleId) {
-            this.updateElementWithThemeClasses(dom, config.theme as WebinyTheme);
+            this.updateElementWithThemeClasses(dom, config.theme as EditorTheme);
         }
         // Returning false tells Lexical that this node does not need its
         // DOM element replacing with a new copy from createDOM.

diff --git a/packages/lexical-nodes/src/QuoteNode.ts b/packages/lexical-nodes/src/QuoteNode.ts
@@ -6,12 +6,7 @@ import {
     NodeKey,
     Spread
 } from "lexical";
-import {
-    EditorTheme,
-    ThemeEmotionMap,
-    WebinyTheme,
-    findTypographyStyleByHtmlTag
-} from "@webiny/lexical-theme";
+import { EditorTheme, ThemeEmotionMap, findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
 import { addClassNamesToElement } from "@lexical/utils";
 import {
     QuoteNode as BaseQuoteNode,
@@ -114,7 +109,7 @@ export class QuoteNode extends BaseQuoteNode implements TextNodeThemeStyles, Typ
 
     override createDOM(config: EditorConfig): HTMLElement {
         const element = super.createDOM(config);
-        const wTheme = config.theme as WebinyTheme;
+        const wTheme = config.theme as EditorTheme;
         const emotionThemeMap = wTheme?.emotionMap;
 
         if (!emotionThemeMap) {
@@ -126,7 +121,7 @@ export class QuoteNode extends BaseQuoteNode implements TextNodeThemeStyles, Typ
             this.setDefaultTypography(emotionThemeMap);
         }
 
-        this.addThemeStylesToHTMLElement(element, config.theme);
+        this.addThemeStylesToHTMLElement(element, config.theme as EditorTheme);
         return element;
     }
 

diff --git a/packages/lexical-nodes/src/TypographyNode.ts b/packages/lexical-nodes/src/TypographyNode.ts
@@ -81,8 +81,8 @@ export class TypographyNode extends ElementNode {
     }
 
     addStylesHTMLElement(element: HTMLElement, theme: EditorTheme): HTMLElement {
-        const typographyStyleValue = theme?.emotionMap
-            ? theme?.emotionMap[this.__styleId]
+        const typographyStyleValue = theme.emotionMap
+            ? theme.emotionMap[this.__styleId]
             : undefined;
         if (typographyStyleValue) {
             this.__css = typographyStyleValue.styles;
@@ -121,7 +121,7 @@ export class TypographyNode extends ElementNode {
     override createDOM(config: EditorConfig): HTMLElement {
         const tag = this.__tag;
         const element = document.createElement(tag);
-        return this.addStylesHTMLElement(element, config.theme);
+        return this.addStylesHTMLElement(element, config.theme as EditorTheme);
     }
 
     override updateDOM(): boolean {

diff --git a/packages/lexical-theme/src/createTheme.ts b/packages/lexical-theme/src/createTheme.ts
@@ -3,16 +3,14 @@ import type { EditorThemeClasses } from "lexical";
 import "./theme.css";
 import { ThemeEmotionMap } from "~/types";
 
-export type WebinyTheme = {
-    styles?: Record<string, any>;
-    emotionMap?: ThemeEmotionMap;
-};
-
-export type EditorTheme = WebinyTheme & EditorThemeClasses;
+export type EditorTheme = {
+    styles: Record<string, any>;
+    emotionMap: ThemeEmotionMap;
+} & EditorThemeClasses;
 
 const defaultTheme: EditorTheme = {
-    styles: undefined,
-    emotionMap: undefined,
+    styles: {},
+    emotionMap: {},
     characterLimit: "WebinyLexical__characterLimit",
     code: "WebinyLexical__code",
     codeHighlight: {
@@ -99,6 +97,12 @@ const defaultTheme: EditorTheme = {
     inlineImage: "inline-editor-image"
 };
 
-export const createTheme = (): EditorTheme => {
-    return defaultTheme;
+export const createTheme = ({
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    styles,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    emotionMap,
+    ...theme
+}: Partial<EditorTheme>): EditorTheme => {
+    return { ...defaultTheme, ...theme };
 };
diff --git a/packages/lexical-theme/src/utils/toTypographyEmotionMap.ts b/packages/lexical-theme/src/utils/toTypographyEmotionMap.ts
@@ -1,5 +1,5 @@
 import { ThemeEmotionMap, TypographyHTMLTag } from "~/types";
-import { WebinyTheme } from "~/createTheme";
+import { EditorTheme } from "~/createTheme";
 import { css as EmotionCSS } from "emotion";
 
 /*
@@ -8,7 +8,7 @@ import { css as EmotionCSS } from "emotion";
  */
 export const toTypographyEmotionMap = (
     css: typeof EmotionCSS,
-    theme: WebinyTheme,
+    theme: EditorTheme,
     themeStylesTransformer?: any
 ): ThemeEmotionMap => {
     const map: ThemeEmotionMap = {};