@mdxeditor/editor 3.15.0 → 3.17.0

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/exportMarkdownFromLexical.js

@@ -86,7 +86,7 @@ function exportLexicalTreeToMdast({
   const importsMap = /* @__PURE__ */ new Map();
   const defaultImportsMap = /* @__PURE__ */ new Map();
   for (const componentName of referredComponents) {
-    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === componentName);
+    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === componentName) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
     if (!descriptor) {
       throw new Error(`Component ${componentName} is used but not imported`);
     }

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';
@@ -54,6 +55,12 @@ export declare function $createCodeBlockNode(options: Partial<CreateCodeBlockNod
  */
 export declare function $createDirectiveNode(mdastNode: Directives, key?: NodeKey): DirectiveNode;
 
+/**
+ * Creates a {@link FrontmatterNode}.
+ * @param yaml - The YAML string of the frontmatter.
+ */
+export declare function $createFrontmatterNode(yaml: string): FrontmatterNode;
+
 /**
  * Creates a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
  * @group HTML
@@ -86,6 +93,11 @@ export declare function $isCodeBlockNode(node: LexicalNode | null | undefined):
  */
 export declare function $isDirectiveNode(node: LexicalNode | null | undefined): node is DirectiveNode;
 
+/**
+ * Returns `true` if the given node is a {@link FrontmatterNode}.
+ */
+export declare function $isFrontmatterNode(node: LexicalNode | null | undefined): node is FrontmatterNode;
+
 /**
  * Determines if the specified node is a {@link GenericHTMLNode}.
  * @group HTML
@@ -1114,6 +1126,24 @@ export declare function fromWithinEditorRead<T>(editor: LexicalEditor, fn: () =>
  */
 export declare const frontmatterDialogOpen$: NodeRef<boolean>;
 
+/**
+ * Represents {@link https://daily-dev-tips.com/posts/what-exactly-is-frontmatter/ | the frontmatter} of the markdown document.
+ * Use {@link "$createFrontmatterNode"} to construct one.
+ */
+export declare class FrontmatterNode extends DecoratorNode<JSX.Element> {
+    __yaml: string;
+    static getType(): string;
+    static clone(node: FrontmatterNode): FrontmatterNode;
+    static importJSON(serializedNode: SerializedFrontmatterNode): FrontmatterNode;
+    constructor(code: string, key?: NodeKey);
+    exportJSON(): SerializedFrontmatterNode;
+    createDOM(_config: EditorConfig): HTMLDivElement;
+    updateDOM(): false;
+    getYaml(): string;
+    setYaml(yaml: string): void;
+    decorate(editor: LexicalEditor): JSX.Element;
+}
+
 /**
  * A plugin that adds support for frontmatter.
  * @group Frontmatter
@@ -1561,8 +1591,9 @@ export declare function joinProc(...procs: (() => unknown)[]): () => void;
  */
 export declare interface JsxComponentDescriptor {
     /**
-     * The tag name. For example: 'div', 'span', 'MyComponent'.
+     * The tag name. For example: 'div', 'span', 'MyComponent'. Use '*' for any tag.
      * Note: For fragments, use null.
+     *
      */
     name: string | null;
     /**
@@ -1757,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
@@ -2084,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;
 }
 
 /**
@@ -2489,6 +2528,14 @@ export declare type SerializedDirectiveNode = Spread<{
     version: 1;
 }, SerializedLexicalNode>;
 
+/**
+ * A serialized representation of an {@link FrontmatterNode}.
+ */
+export declare type SerializedFrontmatterNode = Spread<{
+    yaml: string;
+    version: 1;
+}, SerializedLexicalNode>;
+
 /**
  * A serialized representation of a {@link GenericHTMLNode}.
  * @group HTML

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,20 +60,24 @@ 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";
 import { $createImageNode, $isImageNode, ImageNode } from "./plugins/image/ImageNode.js";
+import { $createFrontmatterNode, $isFrontmatterNode, FrontmatterNode } from "./plugins/frontmatter/FrontmatterNode.js";
 import { $createCodeBlockNode, $isCodeBlockNode, CodeBlockNode, useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
 import { $createDirectiveNode, $isDirectiveNode, DirectiveNode } from "./plugins/directives/DirectiveNode.js";
 export {
   $createCodeBlockNode,
   $createDirectiveNode,
+  $createFrontmatterNode,
   $createGenericHTMLNode,
   $createImageNode,
   $createTableNode,
   $isCodeBlockNode,
   $isDirectiveNode,
+  $isFrontmatterNode,
   $isGenericHTMLNode,
   $isImageNode,
   $isTableNode,
@@ -99,6 +103,7 @@ export {
   DialogButton,
   DiffSourceToggleWrapper,
   DirectiveNode,
+  FrontmatterNode,
   GenericDirectiveEditor,
   GenericHTMLNode,
   GenericJsxEditor,
@@ -249,6 +254,8 @@ export {
   jsxComponentDescriptors$,
   jsxIsAvailable$,
   jsxPlugin,
+  lexicalTheme,
+  lexicalTheme$,
   linkAutocompleteSuggestions$,
   linkDialogPlugin,
   linkDialogState$,

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/dist/plugins/frontmatter/index.js

@@ -57,6 +57,9 @@ const frontmatterPlugin = realmPlugin({
   }
 });
 export {
+  $createFrontmatterNode,
+  $isFrontmatterNode,
+  FrontmatterNode,
   frontmatterDialogOpen$,
   frontmatterPlugin,
   hasFrontmatter$,

package/dist/plugins/jsx/LexicalJsxNode.js

@@ -70,7 +70,7 @@ class LexicalJsxNode extends DecoratorNode {
 function JsxEditorContainer(props) {
   const { mdastNode } = props;
   const jsxComponentDescriptors = useCellValue(jsxComponentDescriptors$);
-  const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name);
+  const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
   if (!descriptor) {
     throw new Error(`No JSX descriptor found for ${mdastNode.name}`);
   }

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -2,7 +2,7 @@ import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
 const MdastMdxJsxElementVisitor = {
   testNode: (node, { jsxComponentDescriptors }) => {
     if (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") {
-      const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === node.name);
+      const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === node.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
       return descriptor !== void 0;
     }
     return false;

package/package.json

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