feat: expose lexical theme prop

mdx-editor · Nov 6, 2024 · d3ca9e7 · d3ca9e7
1 parent c6d1067
commit d3ca9e7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
@@ -28,7 +28,7 @@ import { lexicalTheme } from './styles/lexicalTheme'
 import styles from './styles/ui.module.css'
 import { noop } from './utils/fp'
 import { createLexicalComposerContext, LexicalComposerContext, LexicalComposerContextType } from '@lexical/react/LexicalComposerContext'
-import { LexicalEditor } from 'lexical'
+import { EditorThemeClasses, LexicalEditor } from 'lexical'
 import { IconKey, defaultSvgIcons } from './defaultSvgIcons'
 
 const LexicalProvider: React.FC<{
@@ -283,6 +283,11 @@ export interface MDXEditorProps {
    * Whether to apply trim() to the initial markdown input (default: true)
    */
   trim?: boolean
+
+  /**
+   * A custom lexical theme to use for the editor.
+   */
+  lexicalTheme?: EditorThemeClasses
 }
 
 /**
@@ -306,7 +311,8 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>((pro
           suppressHtmlProcessing: props.suppressHtmlProcessing ?? false,
           onError: props.onError ?? noop,
           translation: props.translation ?? defaultTranslation,
-          trim: props.trim ?? true
+          trim: props.trim ?? true,
+          lexicalTheme: props.lexicalTheme
         }),
         ...(props.plugins ?? [])
       ]}

diff --git a/src/examples/assets/jsx.md b/src/examples/assets/jsx.md
@@ -5,5 +5,9 @@ A paragraph with inline jsx component <MyLeaf foo="fooValue">Meh more _Leaf_</My
 <BlockNode foo="fooValue">
   Content *foo*
 
-  more Content
+more Content
 </BlockNode>
+
+something more.
+
+<UnknownJsxNode>What</UnknownJsxNode>
diff --git a/src/examples/jsx.tsx b/src/examples/jsx.tsx
@@ -49,6 +49,16 @@ const jsxComponentDescriptors: JsxComponentDescriptor[] = [
     props: [],
     hasChildren: true,
     Editor: GenericJsxEditor
+  },
+  {
+    name: '*',
+    kind: 'flow',
+    hasChildren: false,
+    props: [],
+    Editor: () => {
+      console.log('Unknown tag')
+      return <div>Unknown tag</div>
+    }
   }
 ]
 

diff --git a/src/index.ts b/src/index.ts
@@ -118,3 +118,5 @@ export * from './utils/voidEmitter'
 export * from './RealmWithPlugins'
 
 export * from './FormatConstants'
+
+export * from './styles/lexicalTheme'
diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts
@@ -16,6 +16,7 @@ import {
   BLUR_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
   DecoratorNode,
+  EditorThemeClasses,
   ElementNode,
   FOCUS_COMMAND,
   FORMAT_TEXT_COMMAND,
@@ -836,6 +837,8 @@ export const translation$ = Cell<Translation>(() => {
   throw new Error('No translation function provided')
 })
 
+export const lexicalTheme$ = Cell<EditorThemeClasses>(lexicalTheme)
+
 /** @internal */
 export const corePlugin = realmPlugin<{
   initialMarkdown: string
@@ -851,6 +854,7 @@ export const corePlugin = realmPlugin<{
   suppressHtmlProcessing?: boolean
   translation: Translation
   trim?: boolean
+  lexicalTheme?: EditorThemeClasses
 }>({
   init(r, params) {
     const initialMarkdown = params?.initialMarkdown ?? ''
@@ -880,7 +884,8 @@ export const corePlugin = realmPlugin<{
       [translation$]: params?.translation,
       [addMdastExtension$]: gfmStrikethroughFromMarkdown(),
       [addSyntaxExtension$]: gfmStrikethrough(),
-      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown()]
+      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown()],
+      [lexicalTheme$]: params?.lexicalTheme ?? lexicalTheme
     })
 
     r.singletonSub(markdownErrorSignal$, params?.onError)
@@ -905,7 +910,7 @@ export const corePlugin = realmPlugin<{
       onError: (error) => {
         throw error
       },
-      theme: lexicalTheme
+      theme: r.getValue(lexicalTheme$)
     })
 
     newEditor.update(() => {