@mdxeditor/editor 0.7.2 → 0.9.0

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>>;
 }
 
 /**
@@ -858,6 +965,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 +992,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 +1045,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 +1067,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-911b7e3d.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-ce0832cc.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-dc6425df.js → useCodeMirrorRef-177e9901.js}

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

package/dist/{useCodeMirrorRef-17daf915.cjs → useCodeMirrorRef-6cb866bd.cjs}

@@ -1 +1 @@
-"use strict";const e=require("lexical"),r=require("react"),t=require("./index-93ab76f9.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-21fcefae.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.7.2",
+  "version": "0.9.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -31,7 +31,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "test": "vitest",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "image-upload-backend": "node ./src/stories/file-backend.js"
   },
   "files": [
     "dist"
@@ -105,8 +106,10 @@
     "@ngneat/falso": "^6.4.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@types/express": "^4.17.17",
     "@types/js-yaml": "4.0.5",
     "@types/mdast": "3.0.11",
+    "@types/multer": "^1.4.7",
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",

package/dist/FrontmatterEditor-535e834d.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-93ab76f9.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-b47dff60.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-93ab76f9.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}))))};