@mdxeditor/editor 3.18.0 → 3.19.1

package/dist/MDXEditor.js

@@ -1,7 +1,7 @@
-import { useCellValue, useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
+import { useCellValue, usePublisher, useCellValues, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
-import { corePlugin, rootEditor$, useTranslation, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
+import { corePlugin, rootEditor$, useTranslation, contentEditableRef$, contentEditableClassName$, spellCheck$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
@@ -20,6 +20,10 @@ const LexicalProvider = ({ children }) => {
 };
 const RichTextEditor = () => {
   const t = useTranslation();
+  const setContentEditableRef = usePublisher(contentEditableRef$);
+  const onRef = (_contentEditableRef) => {
+    setContentEditableRef({ current: _contentEditableRef });
+  };
   const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
     contentEditableClassName$,
     spellCheck$,
@@ -31,14 +35,14 @@ const RichTextEditor = () => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper, "mdxeditor-root-contenteditable") }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
-      contentEditable: /* @__PURE__ */ React__default.createElement(
+      contentEditable: /* @__PURE__ */ React__default.createElement("div", { ref: onRef }, /* @__PURE__ */ React__default.createElement(
         ContentEditable,
         {
           className: classNames(styles.contentEditable, contentEditableClassName),
           ariaLabel: t("contentArea.editableMarkdown", "editable markdown"),
           spellCheck
         }
-      ),
+      )),
       placeholder: /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.contentEditable, styles.placeholder, contentEditableClassName) }, /* @__PURE__ */ React__default.createElement("p", null, placeholder)),
       ErrorBoundary: LexicalErrorBoundary
     }

package/dist/importMarkdownToLexical.js

@@ -81,6 +81,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
       mdastNode,
       lexicalParent,
       mdastParent,
+      descriptors,
       actions: {
         visitChildren,
         addAndStepInto(lexicalNode) {

package/dist/index.d.ts

@@ -632,6 +632,12 @@ export declare interface ConditionalContentsOption {
  */
 export declare const contentEditableClassName$: NodeRef<string>;
 
+/**
+ * A reference to the content editable element.
+ * @group Core
+ */
+export declare const contentEditableRef$: NodeRef<default_2.RefObject<HTMLDivElement> | null>;
+
 /**
  * Returns true if the user is pressing the control key on Windows or the meta key on Mac.
  * @group Utils
@@ -1940,9 +1946,9 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
     /**
      * The test function that determines if this visitor should be used for the given node.
      * As a convenience, you can also pass a string here, which will be compared to the node's type.
-     * @param options - the registered descriptors for composite nodes (jsx, directives, code blocks).
+     * @param descriptors - the registered descriptors for composite nodes (jsx, directives, code blocks).
      */
-    testNode: ((mdastNode: Mdast.Nodes, options: Descriptors) => boolean) | string;
+    testNode: ((mdastNode: Mdast.Nodes, descriptors: Descriptors) => boolean) | string;
     visitNode(params: {
         /**
          * The node that is currently being visited.
@@ -1956,6 +1962,10 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
          * The parent lexical node to which the results of the processing should be added.
          */
         lexicalParent: LexicalNode;
+        /**
+         * The descriptors for composite nodes (jsx, directives, code blocks).
+         */
+        descriptors: Descriptors;
         /**
          * A set of convenience utilities that can be used to add nodes to the lexical tree.
          */

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$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, 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$, contentEditableRef$, 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$, spellCheck$, 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";
@@ -189,6 +189,7 @@ export {
   compose,
   composerChildren$,
   contentEditableClassName$,
+  contentEditableRef$,
   controlOrMeta,
   convertSelectionToNode$,
   corePlugin,

package/dist/plugins/core/index.js

@@ -108,6 +108,7 @@ const jsxComponentDescriptors$ = Cell([]);
 const directiveDescriptors$ = Cell([]);
 const codeBlockEditorDescriptors$ = Cell([]);
 const editorRootElementRef$ = Cell(null);
+const contentEditableRef$ = Cell(null);
 const addLexicalNode$ = Appender(usedLexicalNodes$);
 const addImportVisitor$ = Appender(importVisitors$);
 const addSyntaxExtension$ = Appender(syntaxExtensions$);
@@ -592,6 +593,7 @@ export {
   codeBlockEditorDescriptors$,
   composerChildren$,
   contentEditableClassName$,
+  contentEditableRef$,
   convertSelectionToNode$,
   corePlugin,
   createActiveEditorSubscription$,

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -1,3 +1,4 @@
+import { $createParagraphNode } from "lexical";
 import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
 const MdastMdxJsxElementVisitor = {
   testNode: (node, { jsxComponentDescriptors }) => {
@@ -7,8 +8,16 @@ const MdastMdxJsxElementVisitor = {
     }
     return false;
   },
-  visitNode({ lexicalParent, mdastNode }) {
-    lexicalParent.append($createLexicalJsxNode(mdastNode));
+  visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors } }) {
+    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
+    if ((descriptor == null ? void 0 : descriptor.kind) === "text" && mdastNode.type === "mdxJsxFlowElement") {
+      const patchedNode = { ...mdastNode, type: "mdxJsxTextElement" };
+      const paragraph = $createParagraphNode();
+      paragraph.append($createLexicalJsxNode(patchedNode));
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append($createLexicalJsxNode(mdastNode));
+    }
   },
   priority: -200
 };

package/package.json

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