@mdxeditor/editor 3.16.0 → 3.17.1

package/dist/MDXEditor.js

@@ -128,7 +128,8 @@ const MDXEditor = React__default.forwardRef((props, ref) => {
           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 ?? []
       ]

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { Directives } from 'mdast-util-directive';
 import { DOMConversionMap } from 'lexical';
 import { DOMExportOutput } from 'lexical';
 import { EditorConfig } from 'lexical';
+import { EditorThemeClasses } from 'lexical';
 import { ElementNode } from 'lexical';
 import { Extension } from 'micromark-util-types';
 import { Extension as Extension_2 } from '@codemirror/state';
@@ -1787,6 +1788,10 @@ export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends
     priority?: number;
 }
 
+export declare const lexicalTheme$: NodeRef<EditorThemeClasses>;
+
+export declare const lexicalTheme: EditorThemeClasses;
+
 /**
  * A generic visitor that can be used to process any lexical node.
  * @group Markdown Processing
@@ -2114,6 +2119,10 @@ export declare 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;
 }
 
 /**

package/dist/index.js

@@ -4,7 +4,7 @@ import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -60,6 +60,7 @@ import { uuidv4 } from "./utils/uuid4.js";
 import { voidEmitter } from "./utils/voidEmitter.js";
 import { RealmWithPlugins, realmPlugin } from "./RealmWithPlugins.js";
 import { DEFAULT_FORMAT, IS_BOLD, IS_CODE, IS_HIGHLIGHT, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE } from "./FormatConstants.js";
+import { lexicalTheme } from "./styles/lexicalTheme.js";
 import { htmlTags, isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
 import { $createGenericHTMLNode, $isGenericHTMLNode, GenericHTMLNode, TYPE_NAME } from "./plugins/core/GenericHTMLNode.js";
 import { $createTableNode, $isTableNode, TableNode } from "./plugins/table/TableNode.js";
@@ -253,6 +254,8 @@ export {
   jsxComponentDescriptors$,
   jsxIsAvailable$,
   jsxPlugin,
+  lexicalTheme,
+  lexicalTheme$,
   linkAutocompleteSuggestions$,
   linkDialogPlugin,
   linkDialogState$,

package/dist/plugins/core/NestedLexicalEditor.js

@@ -1,19 +1,18 @@
 import { $addUpdateTag, $getNodeByKey, createEditor, $getRoot, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL } from "lexical";
 import React__default from "react";
-import { NESTED_EDITOR_UPDATED_COMMAND, rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, nestedEditorChildren$, editorInFocus$ } from "./index.js";
+import { NESTED_EDITOR_UPDATED_COMMAND, rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, nestedEditorChildren$, lexicalTheme$, editorInFocus$ } from "./index.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
 import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer.js";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
 import classNames from "classnames";
-import { lexicalTheme } from "../../styles/lexicalTheme.js";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
 import styles from "../../styles/ui.module.css.js";
 import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
 import { mergeRegister } from "@lexical/utils";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
-import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import { useRealm, useCellValues, usePublisher } from "@mdxeditor/gurx";
 const NestedEditorsContext = React__default.createContext(void 0);
 function useNestedEditorContext() {
   const context = React__default.useContext(NestedEditorsContext);
@@ -54,6 +53,7 @@ const NestedLexicalEditor = function(props) {
   const updateMdastNode = useMdastNodeUpdater();
   const removeNode = useLexicalNodeRemove();
   const content = getContent(mdastNode);
+  const realm = useRealm();
   const [
     rootEditor,
     importVisitors,
@@ -63,7 +63,8 @@ const NestedLexicalEditor = function(props) {
     directiveDescriptors,
     codeBlockEditorDescriptors,
     jsxIsAvailable,
-    nestedEditorChildren
+    nestedEditorChildren,
+    lexicalTheme
   ] = useCellValues(
     rootEditor$,
     importVisitors$,
@@ -73,13 +74,14 @@ const NestedLexicalEditor = function(props) {
     directiveDescriptors$,
     codeBlockEditorDescriptors$,
     jsxIsAvailable$,
-    nestedEditorChildren$
+    nestedEditorChildren$,
+    lexicalTheme$
   );
   const setEditorInFocus = usePublisher(editorInFocus$);
   const [editor] = React__default.useState(() => {
     const editor2 = createEditor({
       nodes: usedLexicalNodes,
-      theme: lexicalTheme
+      theme: realm.getValue(lexicalTheme$)
     });
     return editor2;
   });
@@ -192,7 +194,7 @@ const NestedLexicalEditor = function(props) {
     updateMdastNode,
     rootEditor
   ]);
-  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor, initialTheme: lexicalTheme }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
       contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { ...contentEditableProps, className: classNames(styles.nestedEditor, contentEditableProps == null ? void 0 : contentEditableProps.className) }),

package/dist/plugins/core/index.js

@@ -470,6 +470,7 @@ const addActivePlugin$ = Appender(activePlugins$);
 const translation$ = Cell(() => {
   throw new Error("No translation function provided");
 });
+const lexicalTheme$ = Cell(lexicalTheme);
 const corePlugin = realmPlugin({
   init(r, params) {
     const initialMarkdown = (params == null ? void 0 : params.initialMarkdown) ?? "";
@@ -497,7 +498,8 @@ const corePlugin = realmPlugin({
       [translation$]: params == null ? void 0 : params.translation,
       [addMdastExtension$]: gfmStrikethroughFromMarkdown(),
       [addSyntaxExtension$]: gfmStrikethrough(),
-      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown()]
+      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown()],
+      [lexicalTheme$]: (params == null ? void 0 : params.lexicalTheme) ?? lexicalTheme
     });
     r.singletonSub(markdownErrorSignal$, params == null ? void 0 : params.onError);
     r.singletonSub(mutableMarkdownSignal$, params == null ? void 0 : params.onChange);
@@ -518,7 +520,7 @@ const corePlugin = realmPlugin({
       onError: (error) => {
         throw error;
       },
-      theme: lexicalTheme
+      theme: r.getValue(lexicalTheme$)
     });
     newEditor.update(() => {
       const markdown = (params == null ? void 0 : params.initialMarkdown.trim()) ?? "";
@@ -605,6 +607,7 @@ export {
   insertMarkdown$,
   jsxComponentDescriptors$,
   jsxIsAvailable$,
+  lexicalTheme$,
   markdown$,
   markdownErrorSignal$,
   markdownProcessingError$,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.16.0",
+  "version": "3.17.1",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",