@mdxeditor/editor 0.6.1 → 0.7.0

package/dist/{index-8a24135d.js → index-c4470fd7.js}

@@ -1034,15 +1034,10 @@ const LexicalImageVisitor = {
   testLexicalNode: $isImageNode,
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
     actions.appendToParent(mdastParent, {
-      type: "paragraph",
-      children: [
-        {
-          type: "image",
-          url: lexicalNode.getSrc(),
-          alt: lexicalNode.getAltText(),
-          title: lexicalNode.getTitle()
-        }
-      ]
+      type: "image",
+      url: lexicalNode.getSrc(),
+      alt: lexicalNode.getAltText(),
+      title: lexicalNode.getTitle()
     });
   }
 };
@@ -2208,6 +2203,7 @@ function seedTable() {
 const [EditorSystem, EditorSystemType] = system((r) => {
   const editor = r.node(null, true);
   const markdownSource = r.node("");
+  const setMarkdown = r.node();
   const historyState = r.node(createEmptyHistoryState());
   const activeEditor = r.derive(editor, null);
   const currentFormat = r.node(0, true);
@@ -2243,6 +2239,17 @@ const [EditorSystem, EditorSystemType] = system((r) => {
     ),
     editorSubscriptions
   );
+  r.sub(r.pipe(setMarkdown, r.o.withLatestFrom(editor, markdownParseOptions)), ([markdown2, editor2, markdownParseOptions2]) => {
+    r.pub(markdownSource, markdown2);
+    editor2 == null ? void 0 : editor2.update(() => {
+      $getRoot().clear();
+      importMarkdownToLexical({
+        root: $getRoot(),
+        markdown: markdown2,
+        ...markdownParseOptions2
+      });
+    });
+  });
   r.sub(r.pipe(applyListType, r.o.withLatestFrom(activeEditor)), ([listType, theEditor]) => {
     theEditor == null ? void 0 : theEditor.dispatchCommand(ListTypeCommandMap.get(listType), void 0);
   });
@@ -2452,6 +2459,7 @@ const [EditorSystem, EditorSystemType] = system((r) => {
     lexicalNodes,
     imageAutocompleteSuggestions,
     markdownSource,
+    setMarkdown,
     imageUploadHandler
   };
 }, []);
@@ -2462,9 +2470,11 @@ const [JsxSystem, JsxSystemType] = system((r) => {
   };
 }, []);
 const [ViewModeSystem] = system(
-  (r, [{ editor, markdownParseOptions, markdownSource }, {}]) => {
+  (r, [{ markdownSource, setMarkdown }, {}]) => {
     const viewMode = r.node("editor");
     const headMarkdown = r.node("");
+    const markdownSourceFromEditor = r.node("");
+    r.link(markdownSource, markdownSourceFromEditor);
     r.sub(
       r.pipe(
         viewMode,
@@ -2477,23 +2487,17 @@ const [ViewModeSystem] = system(
           },
           { current: "editor", next: "editor" }
         ),
-        r.o.withLatestFrom(editor, markdownSource, markdownParseOptions)
+        r.o.withLatestFrom(markdownSourceFromEditor)
       ),
-      ([{ current }, editor2, markdownSource2, markdownParseOptions2]) => {
+      ([{ current }, markdownSourceFromEditor2]) => {
         if (current === "markdown") {
-          editor2 == null ? void 0 : editor2.update(() => {
-            $getRoot().clear();
-            importMarkdownToLexical({
-              root: $getRoot(),
-              markdown: markdownSource2,
-              ...markdownParseOptions2
-            });
-          });
+          r.pub(setMarkdown, markdownSourceFromEditor2);
         }
       }
     );
     return {
       viewMode,
+      markdownSourceFromEditor,
       headMarkdown
     };
   },
@@ -2959,62 +2963,62 @@ const SvgArrowDropDown = (props) => /* @__PURE__ */ React.createElement("svg", {
   maskType: "alpha"
 } }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m12 15-5-5h10l-5 5Z" })));
 const DropDownIcon = SvgArrowDropDown;
-const editorRoot = "_editorRoot_2nk92_47";
-const dropZone = "_dropZone_2nk92_141";
-const editorWrapper = "_editorWrapper_2nk92_149";
-const nestedListItem = "_nestedListItem_2nk92_153";
-const toolbarRoot = "_toolbarRoot_2nk92_157";
-const toolbarModeSwitch = "_toolbarModeSwitch_2nk92_178";
-const toolbarToggleItem = "_toolbarToggleItem_2nk92_187";
-const toolbarGroupOfGroups = "_toolbarGroupOfGroups_2nk92_197";
-const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_2nk92_201";
-const toolbarButton = "_toolbarButton_2nk92_215";
-const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_2nk92_244";
-const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_2nk92_245";
-const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_2nk92_246";
-const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_2nk92_260";
-const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_2nk92_261";
-const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_2nk92_294";
-const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_2nk92_300";
-const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_2nk92_323";
-const contentEditable = "_contentEditable_2nk92_327";
-const sandpackWrapper = "_sandpackWrapper_2nk92_335";
-const frontmatterWrapper = "_frontmatterWrapper_2nk92_339";
-const frontmatterToggleButton = "_frontmatterToggleButton_2nk92_349";
-const frontmatterEditorTable = "_frontmatterEditorTable_2nk92_357";
-const iconButton = "_iconButton_2nk92_375";
-const frontmatterInput = "_frontmatterInput_2nk92_381";
-const primaryButton = "_primaryButton_2nk92_396";
-const linkDialogEditForm = "_linkDialogEditForm_2nk92_406";
-const linkDialogInputContainer = "_linkDialogInputContainer_2nk92_412";
-const linkDialogInputWrapper = "_linkDialogInputWrapper_2nk92_418";
-const linkDialogInput = "_linkDialogInput_2nk92_412";
-const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_2nk92_448";
-const linkDialogAnchor = "_linkDialogAnchor_2nk92_493";
-const linkDialogPopoverContent = "_linkDialogPopoverContent_2nk92_507";
-const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_2nk92_507";
-const dialogContent = "_dialogContent_2nk92_507";
-const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_2nk92_521";
-const tooltipContent = "_tooltipContent_2nk92_543";
-const actionButton = "_actionButton_2nk92_557";
-const primaryActionButton = "_primaryActionButton_2nk92_563";
-const tableEditor = "_tableEditor_2nk92_572";
-const toolCell = "_toolCell_2nk92_583";
-const tableColumnEditorTrigger = "_tableColumnEditorTrigger_2nk92_600";
-const tableRowEditorTrigger = "_tableRowEditorTrigger_2nk92_600";
-const addRowButton = "_addRowButton_2nk92_600";
-const addColumnButton = "_addColumnButton_2nk92_600";
-const tableColumnEditorToolbar = "_tableColumnEditorToolbar_2nk92_634";
-const toggleGroupRoot = "_toggleGroupRoot_2nk92_646";
-const tableToolsColumn = "_tableToolsColumn_2nk92_663";
-const leftAlignedCell = "_leftAlignedCell_2nk92_671";
-const rightAlignedCell = "_rightAlignedCell_2nk92_675";
-const centeredCell = "_centeredCell_2nk92_679";
-const dialogOverlay = "_dialogOverlay_2nk92_707";
-const overlayShow = "_overlayShow_2nk92_1";
-const contentShow = "_contentShow_2nk92_1";
-const focusedImage = "_focusedImage_2nk92_749";
-const imageWrapper = "_imageWrapper_2nk92_753";
+const editorRoot = "_editorRoot_3tbtr_47";
+const dropZone = "_dropZone_3tbtr_141";
+const editorWrapper = "_editorWrapper_3tbtr_149";
+const nestedListItem = "_nestedListItem_3tbtr_153";
+const toolbarRoot = "_toolbarRoot_3tbtr_157";
+const toolbarModeSwitch = "_toolbarModeSwitch_3tbtr_178";
+const toolbarToggleItem = "_toolbarToggleItem_3tbtr_187";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_3tbtr_197";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_3tbtr_201";
+const toolbarButton = "_toolbarButton_3tbtr_215";
+const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_3tbtr_244";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_3tbtr_245";
+const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_3tbtr_246";
+const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_3tbtr_260";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_3tbtr_261";
+const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_3tbtr_294";
+const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_3tbtr_300";
+const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_3tbtr_323";
+const contentEditable = "_contentEditable_3tbtr_327";
+const sandpackWrapper = "_sandpackWrapper_3tbtr_335";
+const frontmatterWrapper = "_frontmatterWrapper_3tbtr_339";
+const frontmatterToggleButton = "_frontmatterToggleButton_3tbtr_349";
+const frontmatterEditorTable = "_frontmatterEditorTable_3tbtr_357";
+const iconButton = "_iconButton_3tbtr_375";
+const frontmatterInput = "_frontmatterInput_3tbtr_381";
+const primaryButton = "_primaryButton_3tbtr_396";
+const linkDialogEditForm = "_linkDialogEditForm_3tbtr_406";
+const linkDialogInputContainer = "_linkDialogInputContainer_3tbtr_412";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_3tbtr_418";
+const linkDialogInput = "_linkDialogInput_3tbtr_412";
+const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_3tbtr_448";
+const linkDialogAnchor = "_linkDialogAnchor_3tbtr_493";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_3tbtr_507";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_3tbtr_507";
+const dialogContent = "_dialogContent_3tbtr_507";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_3tbtr_521";
+const tooltipContent = "_tooltipContent_3tbtr_543";
+const actionButton = "_actionButton_3tbtr_557";
+const primaryActionButton = "_primaryActionButton_3tbtr_563";
+const tableEditor = "_tableEditor_3tbtr_572";
+const toolCell = "_toolCell_3tbtr_583";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_3tbtr_600";
+const tableRowEditorTrigger = "_tableRowEditorTrigger_3tbtr_600";
+const addRowButton = "_addRowButton_3tbtr_600";
+const addColumnButton = "_addColumnButton_3tbtr_600";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_3tbtr_634";
+const toggleGroupRoot = "_toggleGroupRoot_3tbtr_646";
+const tableToolsColumn = "_tableToolsColumn_3tbtr_663";
+const leftAlignedCell = "_leftAlignedCell_3tbtr_671";
+const rightAlignedCell = "_rightAlignedCell_3tbtr_675";
+const centeredCell = "_centeredCell_3tbtr_679";
+const dialogOverlay = "_dialogOverlay_3tbtr_707";
+const overlayShow = "_overlayShow_3tbtr_1";
+const contentShow = "_contentShow_3tbtr_1";
+const focusedImage = "_focusedImage_3tbtr_749";
+const imageWrapper = "_imageWrapper_3tbtr_753";
 const styles = {
   editorRoot,
   dropZone,
@@ -3300,8 +3304,8 @@ const ViewModeToggler = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { style: { display: viewMode === "editor" ? "block" : "none" } }, children), viewMode === "diff" ? /* @__PURE__ */ React__default.createElement(MarkdownDiffView, null) : null, viewMode === "markdown" ? /* @__PURE__ */ React__default.createElement(SourceEditor, null) : null);
 };
 const SourceEditor = () => {
-  const [markdown$1] = useEmitterValues("markdownSource");
-  const updateMarkdown = usePublisher("markdownSource");
+  const [markdown$1] = useEmitterValues("markdownSourceFromEditor");
+  const updateMarkdown = usePublisher("markdownSourceFromEditor");
   const codeMirrorRef = React__default.useRef(null);
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
     CodeEditor,
@@ -3883,17 +3887,17 @@ function getDragSelection(event) {
   return range;
 }
 const LazyFrontmatterEditor = React__default.lazy(
-  () => import("./FrontmatterEditor-d7636318.js").then((module) => ({ default: module.FrontmatterEditor }))
+  () => import("./FrontmatterEditor-b72331c7.js").then((module) => ({ default: module.FrontmatterEditor }))
 );
-const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-8ef34a83.js").then((module) => ({ default: module.JsxEditor })));
+const LazyJsxEditor = React__default.lazy(() => import("./JsxEditor-060f9970.js").then((module) => ({ default: module.JsxEditor })));
 const LazySandpackEditor = React__default.lazy(
-  () => import("./SandpackEditor-06e1f073.js").then((module) => ({ default: module.SandpackEditor }))
+  () => import("./SandpackEditor-832b228d.js").then((module) => ({ default: module.SandpackEditor }))
 );
 const LazyCodeBlockEditor = React__default.lazy(
-  () => import("./CodeBlockEditor-fabf9e47.js").then((module) => ({ default: module.CodeBlockEditor }))
+  () => import("./CodeBlockEditor-1c54f872.js").then((module) => ({ default: module.CodeBlockEditor }))
 );
-const LazyTableEditor = React__default.lazy(() => import("./TableEditor-caed8091.js").then((module) => ({ default: module.TableEditor })));
-const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-f3061c5d.js").then((module) => ({ default: module.ImageEditor })));
+const LazyTableEditor = React__default.lazy(() => import("./TableEditor-1eb334a7.js").then((module) => ({ default: module.TableEditor })));
+const LazyImageEditor = React__default.lazy(() => import("./ImageEditor-c9bc92be.js").then((module) => ({ default: module.ImageEditor })));
 const defaultNodeDecorators = {
   FrontmatterEditor: LazyFrontmatterEditor,
   JsxEditor: LazyJsxEditor,
@@ -4059,16 +4063,18 @@ const MDXEditor = React__default.forwardRef(
 );
 const MDXMethods = ({ mdxRef }) => {
   const [markdownSource] = useEmitterValues("markdownSource");
+  const setMarkdown = usePublisher("setMarkdown");
   React__default.useImperativeHandle(
     mdxRef,
     () => {
       return {
         getMarkdown: () => {
           return markdownSource;
-        }
+        },
+        setMarkdown
       };
     },
-    [markdownSource]
+    [markdownSource, setMarkdown]
   );
   return null;
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-33efcac7.cjs"),r=require("lexical");require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("react"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("@codesandbox/sandpack-react"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog"),exports.$createAdmonitionNode=e.$createAdmonitionNode,exports.$createCodeBlockNode=e.$createCodeBlockNode,exports.$createFrontmatterNode=e.$createFrontmatterNode,exports.$createImageNode=e.$createImageNode,exports.$createJsxNode=e.$createJsxNode,exports.$createSandpackNode=e.$createSandpackNode,exports.$createTableNode=e.$createTableNode,exports.$isAdmonitionNode=e.$isAdmonitionNode,exports.$isCodeBlockNode=e.$isCodeBlockNode,exports.$isFrontmatterNode=e.$isFrontmatterNode,exports.$isImageNode=e.$isImageNode,exports.$isJsxNode=e.$isJsxNode,exports.$isSandpackNode=e.$isSandpackNode,exports.$isTableNode=e.$isTableNode,exports.AdmonitionNode=e.AdmonitionNode,exports.CodeBlockNode=e.CodeBlockNode,exports.FrontmatterNode=e.FrontmatterNode,exports.ImageNode=e.ImageNode,exports.JsxNode=e.JsxNode,exports.MDXEditor=e.MDXEditor,exports.SandpackNode=e.SandpackNode,exports.TableNode=e.TableNode,exports.ToolbarComponents=e.ToolbarComponents,exports.defaultMdxOptionValues=e.defaultMdxOptionValues,Object.defineProperty(exports,"AdmonitionKind",{enumerable:!0,get:()=>r.AdmonitionKind});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-567e8779.cjs"),r=require("lexical");require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalContentEditable"),require("@lexical/react/LexicalErrorBoundary"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalRichTextPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("classnames"),require("react"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-popover"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("@codesandbox/sandpack-react"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog"),exports.$createAdmonitionNode=e.$createAdmonitionNode,exports.$createCodeBlockNode=e.$createCodeBlockNode,exports.$createFrontmatterNode=e.$createFrontmatterNode,exports.$createImageNode=e.$createImageNode,exports.$createJsxNode=e.$createJsxNode,exports.$createSandpackNode=e.$createSandpackNode,exports.$createTableNode=e.$createTableNode,exports.$isAdmonitionNode=e.$isAdmonitionNode,exports.$isCodeBlockNode=e.$isCodeBlockNode,exports.$isFrontmatterNode=e.$isFrontmatterNode,exports.$isImageNode=e.$isImageNode,exports.$isJsxNode=e.$isJsxNode,exports.$isSandpackNode=e.$isSandpackNode,exports.$isTableNode=e.$isTableNode,exports.AdmonitionNode=e.AdmonitionNode,exports.CodeBlockNode=e.CodeBlockNode,exports.FrontmatterNode=e.FrontmatterNode,exports.ImageNode=e.ImageNode,exports.JsxNode=e.JsxNode,exports.MDXEditor=e.MDXEditor,exports.SandpackNode=e.SandpackNode,exports.TableNode=e.TableNode,exports.ToolbarComponents=e.ToolbarComponents,exports.defaultMdxOptionValues=e.defaultMdxOptionValues,Object.defineProperty(exports,"AdmonitionKind",{enumerable:!0,get:()=>r.AdmonitionKind});

package/dist/index.d.ts

@@ -609,7 +609,14 @@ export declare const MDXEditor: React_2.ForwardRefExoticComponent<MDXEditorProps
  * ```
  */
 export declare interface MDXEditorMethods {
+    /**
+     * gets the current markdown value
+     */
     getMarkdown: () => string;
+    /**
+     * Updates the markdown value
+     */
+    setMarkdown: (value: string) => void;
 }
 
 /**
@@ -618,6 +625,8 @@ export declare interface MDXEditorMethods {
 export declare interface MDXEditorProps {
     /**
      * The markdown content to be edited.
+     * Notice: this is the initial value of the editor.
+     * If you want to change the value of the editor, use the `setMarkdown` method.
      */
     markdown: string;
     /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, d, g, j, k, n, r, c, f, h, $, l, o, q, A, C, F, I, J, M, m, p, T, v } from "./index-8a24135d.js";
+import { b, d, g, j, k, n, r, c, f, h, $, l, o, q, A, C, F, I, J, M, m, p, T, v } from "./index-c4470fd7.js";
 import { AdmonitionKind } from "lexical";
 import "@lexical/react/LexicalComposer";
 import "@lexical/react/LexicalContentEditable";