@mdxeditor/editor 0.8.0 → 0.10.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-383c60bb.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("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-51585eed.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("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog"),require("@lexical/react/LexicalNestedComposer"),exports.$createAdmonitionNode=e.$createAdmonitionNode,exports.$createCodeBlockNode=e.$createCodeBlockNode,exports.$createFrontmatterNode=e.$createFrontmatterNode,exports.$createImageNode=e.$createImageNode,exports.$createJsxNode=e.$createJsxNode,exports.$createLeafDirectiveNode=e.$createLeafDirectiveNode,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.$isLeafDirectiveNode=e.$isLeafDirectiveNode,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.LeafDirectiveNode=e.LeafDirectiveNode,exports.MDXEditor=e.MDXEditor,exports.NestedEditor=e.NestedEditor,exports.SandpackNode=e.SandpackNode,exports.TableNode=e.TableNode,exports.ToolbarComponents=e.ToolbarComponents,exports.defaultMdxOptionValues=e.defaultMdxOptionValues,exports.useMdastNodeUpdater=e.useMdastNodeUpdater,Object.defineProperty(exports,"AdmonitionKind",{enumerable:!0,get:()=>r.AdmonitionKind});

package/dist/index.d.ts

@@ -8,7 +8,7 @@
 /// <reference types="react" />
 
 import { AdmonitionKind } from 'lexical';
-import type { ComponentType } from 'react';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { DecoratorNode } from 'lexical';
 import type { DOMConversionMap } from 'lexical';
 import type { DOMExportOutput } from 'lexical';
@@ -17,6 +17,7 @@ import { EditorThemeClasses } from 'lexical';
 import { ElementNode } from 'lexical';
 import { FromMarkdownOptions } from 'mdast-util-from-markdown/lib';
 import { Klass } from 'lexical';
+import { LeafDirective } from 'mdast-util-directive';
 import { LexicalEditor } from 'lexical';
 import { LexicalNode } from 'lexical';
 import * as Mdast from 'mdast';
@@ -68,6 +69,11 @@ export declare function $createImageNode(options: CreateImageNodeOptions): Image
  */
 export declare function $createJsxNode(options: CreateJsxNodeOptions): JsxNode;
 
+/**
+ * Creates an {@link LeafDirectiveNode}.
+ */
+export declare function $createLeafDirectiveNode(mdastNode: LeafDirective): LeafDirectiveNode;
+
 /**
  * Creates a {@link SandpackNode}.
  */
@@ -104,6 +110,11 @@ export declare function $isImageNode(node: LexicalNode | null | undefined): node
  */
 export declare function $isJsxNode(node: LexicalNode | null | undefined): node is JsxNode;
 
+/**
+ * Retruns true if the node is an {@link LeafDirectiveNode}.
+ */
+export declare function $isLeafDirectiveNode(node: LexicalNode | null | undefined): node is LeafDirectiveNode;
+
 /**
  * Returns true if the given node is a {@link SandpackNode}.
  */
@@ -241,6 +252,11 @@ export declare interface CreateSandpackNodeOptions {
     language: string;
 }
 
+export declare interface CustomLeafDirectiveEditor<T extends LeafDirective> {
+    testNode: (mdastNode: LeafDirective) => boolean;
+    Editor: React_2.ComponentType<LeafDirectiveEditorProps<T>>;
+}
+
 /**
  * The default set of lexical nodes used in the editor.
  */
@@ -274,6 +290,15 @@ export declare type DefaultMdxOptionValues = {
  */
 export declare const defaultMdxOptionValues: DefaultMdxOptionValues;
 
+declare interface DialogButtonProps {
+    autocompleteSuggestions?: string[];
+    onSubmit: (value: string) => void;
+    tooltipTitle: string;
+    buttonContent?: React_2.ReactNode;
+    dialogInputPlaceholder: string;
+    submitButtonTitle: string;
+}
+
 declare type ExtendedEditorConfig = EditorConfig & {
     theme: EditorConfig['theme'] & {
         nodeDecoratorComponents: NodeDecoratorComponents;
@@ -424,6 +449,34 @@ export declare interface JsxPropertyDescriptor {
     required?: boolean;
 }
 
+export declare interface LeafDirectiveEditorProps<T extends LeafDirective> {
+    /** The Lexical editor that contains the node */
+    parentEditor: LexicalEditor;
+    /** The Lexical node that is being edited */
+    leafDirective: LeafDirectiveNode;
+    /** The MDAST node that is being edited */
+    mdastNode: T;
+}
+
+/**
+ * A lexical node that represents an image. Use {@link "$createLeafDirectiveNode"} to construct one.
+ */
+export declare class LeafDirectiveNode extends DecoratorNode<JSX.Element> {
+    __mdastNode: LeafDirective;
+    static getType(): string;
+    static clone(node: LeafDirectiveNode): LeafDirectiveNode;
+    static importJSON(serializedNode: SerializedLeafDirectiveNode): LeafDirectiveNode;
+    constructor(mdastNode: LeafDirective, key?: NodeKey);
+    getMdastNode(): LeafDirective;
+    exportJSON(): SerializedLeafDirectiveNode;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    setMdastNode(mdastNode: LeafDirective): void;
+    decorate(parentEditor: LexicalEditor, { theme: { nodeDecoratorComponents: { LeafDirectiveEditor } } }: ExtendedEditorConfig): JSX.Element;
+    isInline(): boolean;
+    isKeyboardSelectable(): boolean;
+}
+
 /**
  * Configures how the lexical tree is converted to a mdast tree and then to markdown.
  */
@@ -522,7 +575,22 @@ declare type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
  * Options that control how the the markdown input string is parsed into a tree.
  * @see {@link https://github.com/syntax-tree/mdast-util-from-markdown | fromMarkdown}
  */
-export declare interface MarkdownParseOptions extends Omit<MdastTreeImportOptions, 'mdastRoot'> {
+export declare interface MarkdownParseOptions {
+    /**
+     * The visitors to process the markdown AST with.
+     */
+    visitors?: MdastImportVisitor<Mdast.Content>[];
+    /**
+     * The extensions to use for the markdown parser. Passed as the `extensions` option to the `fromMarkdown` function.
+     */
+    syntaxExtensions?: NonNullable<ParseOptions['extensions']>;
+    /**
+     * The mdast extensions to use for the markdown parser. Passed as the `mdastExtensions` option to the `fromMarkdown` function.
+     */
+    mdastExtensions?: NonNullable<FromMarkdownOptions['mdastExtensions']>;
+}
+
+declare interface MarkdownParseOptions_2 extends Omit<MdastTreeImportOptions, 'mdastRoot'> {
     markdown: string;
     syntaxExtensions: NonNullable<ParseOptions['extensions']>;
     mdastExtensions: NonNullable<FromMarkdownOptions['mdastExtensions']>;
@@ -531,7 +599,7 @@ export declare interface MarkdownParseOptions extends Omit<MdastTreeImportOption
 /**
  * An extension for the `fromMarkdown` utility tree construction.
  */
-declare type MdastExtension = MarkdownParseOptions['mdastExtensions'][number];
+declare type MdastExtension = MarkdownParseOptions_2['mdastExtensions'][number];
 
 /**
  * Implement this interface to convert certian mdast nodes into lexical nodes.
@@ -595,7 +663,7 @@ export declare interface MdastVisitParams<T extends Mdast.Content> {
 }
 
 /**
- * The MDXEditor React component
+ * The MDXEditor React component. See {@link MDXEditorProps} for the list of available props and the {@link MDXEditorMethods} for the methods exposed through the ref.
  */
 export declare const MDXEditor: React_2.ForwardRefExoticComponent<MDXEditorProps & React_2.RefAttributes<MDXEditorMethods>>;
 
@@ -610,11 +678,11 @@ export declare const MDXEditor: React_2.ForwardRefExoticComponent<MDXEditorProps
  */
 export declare interface MDXEditorMethods {
     /**
-     * gets the current markdown value
+     * Gets the current markdown value.
      */
     getMarkdown: () => string;
     /**
-     * Updates the markdown value
+     * Updates the markdown value of the editor.
      */
     setMarkdown: (value: string) => void;
 }
@@ -654,7 +722,7 @@ export declare interface MDXEditorProps {
     /**
      * The set of components to be rendered in the toolbar.
      */
-    toolbarComponents?: ComponentType[];
+    toolbarComponents?: React_2.ComponentType[];
     /**
      * The initial view mode for the editor. Defaults to `ViewMode.editor`.
      */
@@ -675,7 +743,7 @@ export declare interface MDXEditorProps {
      * The options to be used when parsing the markdown content.
      * @see the {@link MarkdownParseOptions} interface for more details.
      */
-    markdownParseOptions?: Partial<MarkdownParseOptions>;
+    markdownParseOptions?: MarkdownParseOptions;
     /**
      * The {@link https://lexical.dev/ | Lexical nodes} used by the editor.
      */
@@ -704,6 +772,44 @@ export declare interface MDXEditorProps {
      * ```
      */
     imageUploadHandler?: (image: File) => Promise<string>;
+    customLeafDirectiveEditors?: CustomLeafDirectiveEditor<any>[];
+}
+
+/**
+ * A nested editor React component that allows editing of the contents of complex markdown nodes that have nested markdown content (for example, custom directives or JSX elements). See the {@link NestedEditorProps} for more details on the compoment props.
+ *
+ * @example
+ * You can use a type param to specify the type of the mdast node
+ *
+ * ```tsx
+ *
+ * interface CalloutDirectiveNode extends LeafDirective {
+ *   name: 'callout'
+ *   children: Mdast.PhrasingContent[]
+ * }
+ *
+ * return <NestedEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
+ * ```
+ */
+export declare const NestedEditor: <T extends Mdast.Content>(props: NestedEditorProps<T>) => React_2.JSX.Element;
+
+/**
+ * The properties of the {@link NestedEditor} React Component.
+ * @typeParam T - The type of the mdast node of the editor.
+ */
+export declare interface NestedEditorProps<T extends Mdast.Content> {
+    /**
+     * A function that returns the phrasing content of the mdast node. In most cases, this will be the `children` property of the mdast node, but you can also have multiple nested nodes with their own children.
+     */
+    getContent: (mdastNode: T) => Mdast.PhrasingContent[];
+    /**
+     * A function that should return the updated mdast node based on the original mdast node and the new content (serialized as mdast tree) produced by the editor.
+     */
+    getUpdatedMdastNode: (mdastNode: T, children: Mdast.PhrasingContent[]) => T;
+    /**
+     * Props passed to the {@link https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalContentEditable.tsx | ContentEditable} component.
+     */
+    contentEditableProps?: React_2.ComponentProps<typeof ContentEditable>;
 }
 
 declare interface NodeDecoratorComponents {
@@ -713,6 +819,7 @@ declare interface NodeDecoratorComponents {
     CodeBlockEditor: React.FC<CodeBlockEditorProps>;
     TableEditor: React.FC<TableEditorProps>;
     ImageEditor: React.FC<ImageEditorProps>;
+    LeafDirectiveEditor: React.FC<LeafDirectiveEditorProps<LeafDirective>>;
 }
 
 /**
@@ -727,6 +834,17 @@ export declare interface SandpackConfig {
      * The list of sandpack presets that can be used.
      */
     presets: Array<SandpackPreset>;
+    /**
+     * The list of sandpack panes to be displayed.
+     */
+    panes?: {
+        /** the console pane, off by defult */
+        console?: boolean;
+        /** the preview pane, on by defult */
+        preview?: boolean;
+        /** the tests pane, on by defult */
+        tests?: boolean;
+    };
 }
 
 declare interface SandpackEditorProps {
@@ -858,6 +976,15 @@ export declare type SerializedJsxNode = Spread<Omit<CreateJsxNodeOptions, 'updat
     type: 'jsx';
 }, SerializedLexicalNode>;
 
+/**
+ * A serialized representation of an {@link LeafDirectiveNode}.
+ */
+export declare type SerializedLeafDirectiveNode = Spread<{
+    mdastNode: LeafDirective;
+    type: 'leafDirective';
+    version: 1;
+}, SerializedLexicalNode>;
+
 /**
  * A serialized representation of an {@link SandpackNode}.
  */
@@ -876,7 +1003,7 @@ export declare type SerializedTableNode = Spread<{
 /**
  * An extension for the `fromMarkdown` utility markdown parse.
  */
-declare type SyntaxExtension = MarkdownParseOptions['syntaxExtensions'][number];
+declare type SyntaxExtension = MarkdownParseOptions_2['syntaxExtensions'][number];
 
 declare interface TableEditorProps {
     parentEditor: LexicalEditor;
@@ -929,13 +1056,12 @@ export declare const ToolbarComponents: {
     BlockTypeSelect: () => React_2.JSX.Element;
     BoldItalicUnderlineButtons: React_2.FC<{}>;
     CodeBlockButton: React_2.FC<{}>;
+    CodeFormattingButton: React_2.FC<{}>;
     FrontmatterButton: React_2.FC<{}>;
     GroupGroup: React_2.FC<{
         children: React_2.ReactNode;
     }>;
-    HorizontalRuleIcon: React_2.FC<React_2.SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
-    }>;
+    HorizontalRuleButton: React_2.FC<{}>;
     LinkButton: React_2.FC<{}>;
     ListButtons: React_2.FC<{}>;
     SandpackButton: React_2.FC<{}>;
@@ -952,11 +1078,17 @@ export declare const ToolbarComponents: {
         title: string;
     } & React_2.RefAttributes<HTMLButtonElement>>;
     ToolbarSeparator: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarSeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
-    ImageButton: React_2.ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+    ImageButton: React_2.ForwardRefExoticComponent<Omit<Record<string, never>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+    DialogButton: React_2.ForwardRefExoticComponent<DialogButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 };
 
 export declare type updateFn = (node: LexicalNode) => void;
 
+/**
+ * A hook that returns a function that can be used to update the mdast node. Use this in your custom editor components.
+ */
+export declare function useMdastNodeUpdater<T extends Mdast.Content>(): (node: T) => void;
+
 /**
  * The editor view mode.
  * editor - The default rich text view mode.

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-470693d8.js";
+import { d, g, j, l, m, x, p, w, f, h, k, $, n, y, q, v, A, C, F, I, J, L, M, b, o, r, T, z, c } from "./index-d34aa66b.js";
 import { AdmonitionKind } from "lexical";
 import "@lexical/react/LexicalComposer";
 import "@lexical/react/LexicalContentEditable";
@@ -39,30 +39,36 @@ import "unidiff";
 import "@radix-ui/react-toolbar";
 import "@radix-ui/react-select";
 import "@radix-ui/react-dialog";
+import "@lexical/react/LexicalNestedComposer";
 export {
-  b as $createAdmonitionNode,
-  d as $createCodeBlockNode,
-  g as $createFrontmatterNode,
-  j as $createImageNode,
-  k as $createJsxNode,
-  n as $createSandpackNode,
-  r as $createTableNode,
-  c as $isAdmonitionNode,
-  f as $isCodeBlockNode,
-  h as $isFrontmatterNode,
+  d as $createAdmonitionNode,
+  g as $createCodeBlockNode,
+  j as $createFrontmatterNode,
+  l as $createImageNode,
+  m as $createJsxNode,
+  x as $createLeafDirectiveNode,
+  p as $createSandpackNode,
+  w as $createTableNode,
+  f as $isAdmonitionNode,
+  h as $isCodeBlockNode,
+  k as $isFrontmatterNode,
   $ as $isImageNode,
-  l as $isJsxNode,
-  o as $isSandpackNode,
-  q as $isTableNode,
+  n as $isJsxNode,
+  y as $isLeafDirectiveNode,
+  q as $isSandpackNode,
+  v as $isTableNode,
   AdmonitionKind,
   A as AdmonitionNode,
   C as CodeBlockNode,
   F as FrontmatterNode,
   I as ImageNode,
   J as JsxNode,
+  L as LeafDirectiveNode,
   M as MDXEditor,
-  m as SandpackNode,
-  p as TableNode,
+  b as NestedEditor,
+  o as SandpackNode,
+  r as TableNode,
   T as ToolbarComponents,
-  v as defaultMdxOptionValues
+  z as defaultMdxOptionValues,
+  c as useMdastNodeUpdater
 };

package/dist/{useCodeMirrorRef-ff0c2781.js → useCodeMirrorRef-0def7994.js}

@@ -1,6 +1,6 @@
 import { $getNodeByKey, $createParagraphNode } from "lexical";
 import React__default from "react";
-import { u as useEmitterValues, a as usePublisher } from "./index-470693d8.js";
+import { u as useEmitterValues, a as usePublisher } from "./index-d34aa66b.js";
 function useCodeMirrorRef(nodeKey, editorType, language) {
   const [activeEditor] = useEmitterValues("activeEditor");
   const setActiveEditorType = usePublisher("activeEditorType");

package/dist/{useCodeMirrorRef-72d8430b.cjs → useCodeMirrorRef-8f68c999.cjs}

@@ -1 +1 @@
-"use strict";const e=require("lexical"),r=require("react"),t=require("./index-383c60bb.cjs");exports.useCodeMirrorRef=function(n,o,l){const[u]=t.useEmitterValues("activeEditor"),i=t.usePublisher("activeEditorType"),s=r.useRef(null),c=r.useRef(!1),d=r.useRef(!1),v=r.useCallback((()=>{i({type:o,nodeKey:n})}),[n,i,o]),a=r.useCallback((r=>{var t,o,l,i;if("ArrowDown"===r.key){const r=null==(o=null==(t=null==s?void 0:s.current)?void 0:t.getCodemirror())?void 0:o.state;if(r){r.doc.length===r.selection.ranges[0].to&&(c.current?(null==u||u.update((()=>{var r,t;const o=e.$getNodeByKey(n);o.getNextSibling()?(null==(t=null==(r=null==s?void 0:s.current)?void 0:r.getCodemirror())||t.contentDOM.blur(),o.selectNext()):o.insertAfter(e.$createParagraphNode())})),c.current=!1):c.current=!0)}}else if("ArrowUp"===r.key){const r=null==(i=null==(l=null==s?void 0:s.current)?void 0:l.getCodemirror())?void 0:i.state;if(r){0===r.selection.ranges[0].from&&(d.current?(null==u||u.update((()=>{var r,t;const o=e.$getNodeByKey(n);o.getPreviousSibling()&&(null==(t=null==(r=null==s?void 0:s.current)?void 0:r.getCodemirror())||t.contentDOM.blur(),o.selectPrevious())})),d.current=!1):d.current=!0)}}else"Enter"===r.key&&r.stopPropagation()}),[u,n]);return r.useEffect((()=>{const e=s.current;return setTimeout((()=>{var r,t,n,o;null==(t=null==(r=null==e?void 0:e.getCodemirror())?void 0:r.contentDOM)||t.addEventListener("focus",v),null==(o=null==(n=null==e?void 0:e.getCodemirror())?void 0:n.contentDOM)||o.addEventListener("keydown",a)}),100),()=>{var r,t;null==(r=null==e?void 0:e.getCodemirror())||r.contentDOM.removeEventListener("focus",v),null==(t=null==e?void 0:e.getCodemirror())||t.contentDOM.removeEventListener("keydown",a)}}),[s,v,a,l]),s};
+"use strict";const e=require("lexical"),r=require("react"),t=require("./index-51585eed.cjs");exports.useCodeMirrorRef=function(n,o,l){const[u]=t.useEmitterValues("activeEditor"),i=t.usePublisher("activeEditorType"),s=r.useRef(null),c=r.useRef(!1),d=r.useRef(!1),v=r.useCallback((()=>{i({type:o,nodeKey:n})}),[n,i,o]),a=r.useCallback((r=>{var t,o,l,i;if("ArrowDown"===r.key){const r=null==(o=null==(t=null==s?void 0:s.current)?void 0:t.getCodemirror())?void 0:o.state;if(r){r.doc.length===r.selection.ranges[0].to&&(c.current?(null==u||u.update((()=>{var r,t;const o=e.$getNodeByKey(n);o.getNextSibling()?(null==(t=null==(r=null==s?void 0:s.current)?void 0:r.getCodemirror())||t.contentDOM.blur(),o.selectNext()):o.insertAfter(e.$createParagraphNode())})),c.current=!1):c.current=!0)}}else if("ArrowUp"===r.key){const r=null==(i=null==(l=null==s?void 0:s.current)?void 0:l.getCodemirror())?void 0:i.state;if(r){0===r.selection.ranges[0].from&&(d.current?(null==u||u.update((()=>{var r,t;const o=e.$getNodeByKey(n);o.getPreviousSibling()&&(null==(t=null==(r=null==s?void 0:s.current)?void 0:r.getCodemirror())||t.contentDOM.blur(),o.selectPrevious())})),d.current=!1):d.current=!0)}}else"Enter"===r.key&&r.stopPropagation()}),[u,n]);return r.useEffect((()=>{const e=s.current;return setTimeout((()=>{var r,t,n,o;null==(t=null==(r=null==e?void 0:e.getCodemirror())?void 0:r.contentDOM)||t.addEventListener("focus",v),null==(o=null==(n=null==e?void 0:e.getCodemirror())?void 0:n.contentDOM)||o.addEventListener("keydown",a)}),100),()=>{var r,t;null==(r=null==e?void 0:e.getCodemirror())||r.contentDOM.removeEventListener("focus",v),null==(t=null==e?void 0:e.getCodemirror())||t.contentDOM.removeEventListener("keydown",a)}}),[s,v,a,l]),s};

package/package.json

@@ -21,7 +21,7 @@
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",

package/dist/FrontmatterEditor-74ad4eb7.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("js-yaml"),t=require("react"),r=require("react-hook-form"),l=require("classnames"),a=require("./index-383c60bb.cjs");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}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("lexical"),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("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const n=i(t),c=e=>n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",...e},n.createElement("mask",{id:"a",width:24,height:24,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},n.createElement("path",{d:"M0 0h24v24H0z"})),n.createElement("g",{mask:"url(#a)"},n.createElement("path",{d:"M10 17V7l5 5-5 5Z"}))),u=e=>n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",...e},n.createElement("mask",{id:"a",width:24,height:24,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},n.createElement("path",{d:"M0 0h24v24H0z"})),n.createElement("g",{mask:"url(#a)"},n.createElement("path",{d:"m12 15-5-5h10l-5 5Z"}))),o=e=>n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},n.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},n.createElement("path",{d:"M0 0h20v20H0z"})),n.createElement("g",{mask:"url(#a)"},n.createElement("path",{d:"M5 17V6.5H4V5h4V4h4v1h4v1.5h-1V17H5Zm1.5-1.5h7v-9h-7v9ZM8 14h1.5V8H8v6Zm2.5 0H12V8h-1.5v6Z"}))),m=t.forwardRef((({className:e,autofocusIfEmpty:r,...i},n)=>(i.autoFocus=Boolean(!i.value&&r),t.createElement("input",{className:l(a.styles.frontmatterInput,e),...i,ref:n}))));exports.FrontmatterEditor=({yaml:l,onChange:i})=>{const[n,s]=t.useState(!0),d=t.useMemo((()=>l?Object.entries(e.load(l)).map((([e,t])=>({key:e,value:t}))):[]),[l]),{register:x,control:h,watch:E}=r.useForm({defaultValues:{yamlConfig:d}}),{fields:f,append:p,remove:g}=r.useFieldArray({control:h,name:"yamlConfig"});return t.useEffect((()=>{const t=E((({yamlConfig:t})=>{const r=t.reduce(((e,{key:t,value:r})=>(t&&r&&(e[t]=r),e)),{});i(e.dump(r).trim())}));return()=>t.unsubscribe()}),[E,i]),t.createElement("div",{className:a.styles.frontmatterWrapper,"data-expanded":n,"data-editor-type":"frontmatter"},t.createElement("button",{className:a.styles.frontmatterToggleButton,onClick:e=>{e.preventDefault(),s((e=>!e))}},n?t.createElement(u,null):t.createElement(c,null),"Document frontmatter"),n&&t.createElement("form",null,t.createElement("table",{className:a.styles.frontmatterEditorTable},t.createElement("colgroup",null,t.createElement("col",null),t.createElement("col",null),t.createElement("col",null)),t.createElement("thead",null,t.createElement("tr",null,t.createElement("th",null,"Key"),t.createElement("th",null,"Value"),t.createElement("th",null))),t.createElement("tbody",null,f.map(((e,r)=>t.createElement("tr",{key:e.id},t.createElement("td",null,t.createElement(m,{...x(`yamlConfig.${r}.key`,{required:!0}),autofocusIfEmpty:!0})),t.createElement("td",null,t.createElement(m,{...x(`yamlConfig.${r}.value`,{required:!0})})),t.createElement("td",null,t.createElement("button",{type:"button",onClick:()=>g(r),className:a.styles.iconButton},t.createElement(o,null))))))),t.createElement("tfoot",null,t.createElement("tr",null,t.createElement("td",null,t.createElement("button",{className:a.styles.primaryButton,type:"button",onClick:()=>{p({key:"",value:""})}},"Add new key")))))))};

package/dist/ImageEditor-e5fd6b26.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),r=require("@lexical/react/LexicalComposerContext"),t=require("@lexical/react/useLexicalNodeSelection"),i=require("@lexical/utils"),l=require("lexical"),a=require("./index-383c60bb.cjs"),c=require("classnames");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("@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/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("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const n=new Set;function u({title:r,className:t,imageRef:i,src:l}){return function(e){if(!n.has(e))throw new Promise((r=>{const t=new Image;t.src=e,t.onload=()=>{n.add(e),r(null)}}))}(l),e.createElement("img",{className:t||void 0,src:l,title:r,ref:i,draggable:"false"})}exports.ImageEditor=function({src:n,title:o,nodeKey:s}){const m=e.useRef(null),d=e.useRef(null),[x,g,q]=t.useLexicalNodeSelection(s),[C]=r.useLexicalComposerContext(),[f,M]=e.useState(null),N=e.useRef(null),O=e.useCallback((e=>{if(x&&l.$isNodeSelection(l.$getSelection())){e.preventDefault();const r=l.$getNodeByKey(s);a.$isImageNode(r)&&r.remove()}return!1}),[x,s]),L=e.useCallback((e=>{const r=l.$getSelection(),t=d.current;return!(!x||!l.$isNodeSelection(r)||1!==r.getNodes().length||null===t||t===document.activeElement)&&(e.preventDefault(),t.focus(),!0)}),[x]),R=e.useCallback((e=>d.current===e.target&&(l.$setSelection(null),C.update((()=>{g(!0);const e=C.getRootElement();null!==e&&e.focus()})),!0)),[C,g]);e.useEffect((()=>{let e=!0;const r=i.mergeRegister(C.registerUpdateListener((({editorState:r})=>{e&&M(r.read((()=>l.$getSelection())))})),C.registerCommand(l.SELECTION_CHANGE_COMMAND,((e,r)=>(N.current=r,!1)),l.COMMAND_PRIORITY_LOW),C.registerCommand(l.CLICK_COMMAND,(e=>{const r=e;return r.target===m.current&&(r.shiftKey?g(!x):(q(),g(!0)),!0)}),l.COMMAND_PRIORITY_LOW),C.registerCommand(l.DRAGSTART_COMMAND,(e=>e.target===m.current&&(e.preventDefault(),!0)),l.COMMAND_PRIORITY_LOW),C.registerCommand(l.KEY_DELETE_COMMAND,O,l.COMMAND_PRIORITY_LOW),C.registerCommand(l.KEY_BACKSPACE_COMMAND,O,l.COMMAND_PRIORITY_LOW),C.registerCommand(l.KEY_ENTER_COMMAND,L,l.COMMAND_PRIORITY_LOW),C.registerCommand(l.KEY_ESCAPE_COMMAND,R,l.COMMAND_PRIORITY_LOW));return()=>{e=!1,r()}}),[q,C,x,s,O,L,R,g]);const E=l.$isNodeSelection(f),_=x;return e.createElement(e.Suspense,{fallback:null},e.createElement(e.Fragment,null,e.createElement("div",{draggable:E,className:a.styles.imageWrapper,"data-editor-block-type":"image"},e.createElement(u,{className:c({[a.styles.focusedImage]:_}),src:n,title:o||"",imageRef:m}))))};

package/dist/SandpackEditor-37261889.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@codesandbox/sandpack-react"),r=require("@lexical/react/LexicalComposerContext"),i=require("react"),a=require("./index-383c60bb.cjs"),t=require("./useCodeMirrorRef-72d8430b.cjs");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("lexical"),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/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("react-diff-view"),require("unidiff"),require("@radix-ui/react-toolbar"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const l=({onChange:r,snippetFileName:i})=>{const{sandpack:a}=e.useSandpack();return r(a.files[i].code),null};exports.SandpackEditor=({nodeKey:c,code:n,meta:u,onChange:o,focusEmitter:s})=>{const[d]=r.useLexicalComposerContext(),[x]=a.useEmitterValues("sandpackConfig"),m=t.useCodeMirrorRef(c,"sandpack","jsx"),q=a.usePublisher("activeEditorType");i.useEffect((()=>{s.subscribe((()=>{var e,r;null==(r=null==(e=null==m?void 0:m.current)?void 0:e.getCodemirror())||r.focus(),q({type:"sandpack",nodeKey:c})}))}),[s,m,q,c]);const p=i.useCallback((e=>{d.update((()=>{o(e)}))}),[o,d]),f=function(e,r){return r.presets.find((r=>r.meta===e))||r.presets.find((e=>e.name===r.defaultPreset))}(u,x);if(!f)throw new Error(`No sandpack preset found for meta: ${u}`);return i.createElement(e.SandpackProvider,{template:f.sandpackTemplate,theme:f.sandpackTheme,files:{[f.snippetFileName]:n,...Object.entries(f.files||{}).reduce(((e,[r,i])=>({...e,[r]:{code:i,readOnly:!0}})),{})},customSetup:{dependencies:f.dependencies}},i.createElement(e.SandpackLayout,null,i.createElement(e.SandpackCodeEditor,{showLineNumbers:!0,showInlineErrors:!0,ref:m}),i.createElement(e.SandpackPreview,null)),i.createElement(l,{onChange:p,snippetFileName:f.snippetFileName}))};