fix: codeBlockLanguages are correctly applied

Fixes #27
mdx-editor · Jul 23, 2023 · fa17303 · fa17303
1 parent a93d5d3
commit fa17303
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/system/Sandpack.ts b/src/system/Sandpack.ts
@@ -109,7 +109,7 @@ const defaultSandpackConfig: SandpackConfig = {
   ]
 }
 
-const defaultCodeBlockLanguages = {
+export const defaultCodeBlockLanguages = {
   js: 'JavaScript',
   ts: 'TypeScript',
   tsx: 'TypeScript (React)',
@@ -120,7 +120,7 @@ const defaultCodeBlockLanguages = {
 export const [SandpackSystem] = system(
   (r, [{ activeEditor, activeEditorType, createEditorSubscription }]) => {
     const sandpackConfig = r.node<SandpackConfig>(defaultSandpackConfig)
-    const codeBlockLanguages = r.node(defaultCodeBlockLanguages)
+    const codeBlockLanguages = r.node<Record<string, string>>(defaultCodeBlockLanguages)
     const insertSandpack = r.node<string>()
     const insertCodeBlock = r.node<true>()
 

diff --git a/src/ui/MDXEditor.tsx b/src/ui/MDXEditor.tsx
@@ -26,7 +26,7 @@ import {
   importMarkdownToLexical
 } from '../import'
 import { EditorSystemComponent, useEmitterValues, usePublisher } from '../system/EditorSystemComponent'
-import { SandpackConfig } from '../system/Sandpack'
+import { SandpackConfig, defaultCodeBlockLanguages } from '../system/Sandpack'
 import { NodeDecoratorComponents } from '../types/ExtendedEditorConfig'
 import { JsxComponentDescriptor } from '../types/JsxComponentDescriptors'
 import { ViewMode } from '../types/ViewMode'
@@ -143,6 +143,7 @@ export interface MDXEditorProps {
    * The supported code block languages.
    */
   codeBlockLanguages?: Record<string, string>
+
   /**
    * Implement this so that users can drag and drop or paste images into the editor.
    * Pass an implementation that takes a file as an argument, and returns Promise<string>, where string is the url of the image to be inserted.
@@ -331,7 +332,8 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>(
         visitors: exportVisitors = Object.values(defaultLexicalVisitors)
       } = {},
       lexicalNodes = Object.values(defaultLexicalNodes),
-      customLeafDirectiveEditors = []
+      customLeafDirectiveEditors = [],
+      codeBlockLanguages = defaultCodeBlockLanguages
     },
     ref
   ) => {
@@ -361,6 +363,7 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>(
           }}
         >
           <EditorSystemComponent
+            codeBlockLanguages={codeBlockLanguages}
             markdownSource={markdown}
             headMarkdown={headMarkdown || markdown}
             jsxComponentDescriptors={jsxComponentDescriptors}