@mdxeditor/editor 0.10.0 → 0.11.0

package/dist/plugins/codemirror/index.js

@@ -0,0 +1,62 @@
+import { coreSystem } from "../core/index.js";
+import { codeBlockSystem } from "../codeblock/index.js";
+import { CodeMirrorEditor } from "./CodeMirrorEditor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const defaultCodeBlockLanguages = {
+  js: "JavaScript",
+  ts: "TypeScript",
+  tsx: "TypeScript (React)",
+  jsx: "JavaScript (React)",
+  css: "CSS"
+};
+const codeMirrorSystem = system(
+  (r, [, { insertCodeBlock }]) => {
+    const codeBlockLanguages = r.node(defaultCodeBlockLanguages);
+    const insertCodeMirror = r.node();
+    r.link(
+      r.pipe(
+        insertCodeMirror,
+        r.o.map(({ language, code }) => {
+          return {
+            code,
+            language,
+            meta: ""
+          };
+        })
+      ),
+      insertCodeBlock
+    );
+    return {
+      codeBlockLanguages,
+      insertCodeMirror
+    };
+  },
+  [coreSystem, codeBlockSystem]
+);
+const [
+  /** @internal */
+  codeMirrorPlugin,
+  /** @internal */
+  codeMirrorHooks
+] = realmPlugin({
+  id: "codemirror",
+  systemSpec: codeMirrorSystem,
+  applyParamsToSystem(r, params) {
+    r.pubKey("codeBlockLanguages", params.codeBlockLanguages);
+  },
+  init(r, { codeBlockLanguages }) {
+    r.pubKey("appendCodeBlockEditorDescriptor", {
+      match(language, meta) {
+        return codeBlockLanguages.hasOwnProperty(language) && meta === "";
+      },
+      priority: 1,
+      Editor: CodeMirrorEditor
+    });
+  }
+});
+export {
+  codeMirrorHooks,
+  codeMirrorPlugin,
+  codeMirrorSystem
+};

package/dist/plugins/core/LexicalLinebreakVisitor.d.ts

@@ -0,0 +1,4 @@
+import { LineBreakNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalLinebreakVisitor: LexicalExportVisitor<LineBreakNode, Mdast.Text>;

package/dist/plugins/core/LexicalLinebreakVisitor.js

@@ -0,0 +1,10 @@
+import { $isLineBreakNode } from "lexical";
+const LexicalLinebreakVisitor = {
+  testLexicalNode: $isLineBreakNode,
+  visitLexicalNode: ({ mdastParent, actions }) => {
+    actions.appendToParent(mdastParent, { type: "text", value: "\n" });
+  }
+};
+export {
+  LexicalLinebreakVisitor
+};

package/dist/plugins/core/LexicalParagraphVisitor.d.ts

@@ -0,0 +1,4 @@
+import { ParagraphNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalParagraphVisitor: LexicalExportVisitor<ParagraphNode, Mdast.Paragraph>;

package/dist/plugins/core/LexicalParagraphVisitor.js

@@ -0,0 +1,10 @@
+import { $isParagraphNode } from "lexical";
+const LexicalParagraphVisitor = {
+  testLexicalNode: $isParagraphNode,
+  visitLexicalNode: ({ actions }) => {
+    actions.addAndStepInto("paragraph");
+  }
+};
+export {
+  LexicalParagraphVisitor
+};

package/dist/plugins/core/LexicalRootVisitor.d.ts

@@ -0,0 +1,4 @@
+import { RootNode as LexicalRootNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalRootVisitor: LexicalExportVisitor<LexicalRootNode, Mdast.Content>;

package/dist/plugins/core/LexicalRootVisitor.js

@@ -0,0 +1,10 @@
+import { $isRootNode } from "lexical";
+const LexicalRootVisitor = {
+  testLexicalNode: $isRootNode,
+  visitLexicalNode: ({ actions }) => {
+    actions.addAndStepInto("root");
+  }
+};
+export {
+  LexicalRootVisitor
+};

package/dist/plugins/core/LexicalTextVisitor.d.ts

@@ -0,0 +1,5 @@
+import { TextNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare function isMdastText(mdastNode: Mdast.Content): mdastNode is Mdast.Text;
+export declare const LexicalTextVisitor: LexicalExportVisitor<TextNode, Mdast.Text>;

package/dist/plugins/core/LexicalTextVisitor.js

@@ -0,0 +1,85 @@
+import { $isTextNode } from "lexical";
+import { IS_CODE, IS_ITALIC, IS_BOLD, IS_UNDERLINE } from "../../FormatConstants.js";
+function isMdastText(mdastNode) {
+  return mdastNode.type === "text";
+}
+const LexicalTextVisitor = {
+  shouldJoin: (prevNode, currentNode) => {
+    return ["text", "emphasis", "strong", "mdxJsxTextElement"].includes(prevNode.type) && prevNode.type === currentNode.type;
+  },
+  join(prevNode, currentNode) {
+    if (isMdastText(prevNode) && isMdastText(currentNode)) {
+      return {
+        type: "text",
+        value: prevNode.value + currentNode.value
+      };
+    } else {
+      return {
+        ...prevNode,
+        children: [...prevNode.children, ...currentNode.children]
+      };
+    }
+  },
+  testLexicalNode: $isTextNode,
+  visitLexicalNode: ({ lexicalNode, mdastParent, actions }) => {
+    const previousSibling = lexicalNode.getPreviousSibling();
+    const prevFormat = $isTextNode(previousSibling) ? previousSibling.getFormat() : 0;
+    const textContent = lexicalNode.getTextContent();
+    const format = lexicalNode.getFormat() ?? 0;
+    if (format & IS_CODE) {
+      actions.addAndStepInto("inlineCode", {
+        value: textContent
+      });
+      return;
+    }
+    let localParentNode = mdastParent;
+    if (prevFormat & format & IS_ITALIC) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "emphasis",
+        children: []
+      });
+    }
+    if (prevFormat & format & IS_BOLD) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "strong",
+        children: []
+      });
+    }
+    if (prevFormat & format & IS_UNDERLINE) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "u",
+        children: [],
+        attributes: []
+      });
+    }
+    if (format & IS_ITALIC && !(prevFormat & IS_ITALIC)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "emphasis",
+        children: []
+      });
+    }
+    if (format & IS_BOLD && !(prevFormat & IS_BOLD)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "strong",
+        children: []
+      });
+    }
+    if (format & IS_UNDERLINE && !(prevFormat & IS_UNDERLINE)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "u",
+        children: [],
+        attributes: []
+      });
+    }
+    actions.appendToParent(localParentNode, {
+      type: "text",
+      value: textContent
+    });
+  }
+};
+export {
+  LexicalTextVisitor,
+  isMdastText
+};

package/dist/plugins/core/MdastFormattingVisitor.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { MdxJsxTextElement } from 'mdast-util-mdx';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastFormattingVisitor: MdastImportVisitor<Mdast.Emphasis | Mdast.Strong | MdxJsxTextElement>;

package/dist/plugins/core/MdastFormattingVisitor.js

@@ -0,0 +1,36 @@
+import { IS_UNDERLINE, IS_ITALIC, IS_BOLD } from "../../FormatConstants.js";
+function isOpeningUnderlineNode(node) {
+  return node.type === "html" && node.value === "<u>";
+}
+function isClosingUnderlineNode(node) {
+  return node.type === "html" && node.value === "</u>";
+}
+function isJsxUnderlineNode(node) {
+  return node.type === "mdxJsxTextElement" && node.name === "u";
+}
+const MdastFormattingVisitor = {
+  testNode(mdastNode) {
+    return mdastNode.type === "emphasis" || mdastNode.type === "strong" || isJsxUnderlineNode(mdastNode) || isOpeningUnderlineNode(mdastNode) || isClosingUnderlineNode(mdastNode);
+  },
+  visitNode({ mdastNode, lexicalParent, actions, mdastParent }) {
+    if (isOpeningUnderlineNode(mdastNode)) {
+      actions.addFormatting(IS_UNDERLINE, mdastParent);
+      return;
+    }
+    if (isClosingUnderlineNode(mdastNode)) {
+      actions.removeFormatting(IS_UNDERLINE, mdastParent);
+      return;
+    }
+    if (mdastNode.type === "emphasis") {
+      actions.addFormatting(IS_ITALIC);
+    } else if (mdastNode.type === "strong") {
+      actions.addFormatting(IS_BOLD);
+    } else if (isJsxUnderlineNode(mdastNode)) {
+      actions.addFormatting(IS_UNDERLINE);
+    }
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+export {
+  MdastFormattingVisitor
+};

package/dist/plugins/core/MdastInlineCodeVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastInlineCodeVisitor: MdastImportVisitor<Mdast.InlineCode>;

package/dist/plugins/core/MdastInlineCodeVisitor.js

@@ -0,0 +1,11 @@
+import { $createTextNode } from "lexical";
+import { IS_CODE } from "../../FormatConstants.js";
+const MdastInlineCodeVisitor = {
+  testNode: "inlineCode",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(IS_CODE));
+  }
+};
+export {
+  MdastInlineCodeVisitor
+};

package/dist/plugins/core/MdastParagraphVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastParagraphVisitor: MdastImportVisitor<Mdast.Paragraph>;

package/dist/plugins/core/MdastParagraphVisitor.js

@@ -0,0 +1,15 @@
+import { $createParagraphNode } from "lexical";
+const lexicalTypesThatShouldSkipParagraphs = ["listitem", "quote", "admonition"];
+const MdastParagraphVisitor = {
+  testNode: "paragraph",
+  visitNode: function({ mdastNode, lexicalParent, actions }) {
+    if (lexicalTypesThatShouldSkipParagraphs.includes(lexicalParent.getType())) {
+      actions.visitChildren(mdastNode, lexicalParent);
+    } else {
+      actions.addAndStepInto($createParagraphNode());
+    }
+  }
+};
+export {
+  MdastParagraphVisitor
+};

package/dist/plugins/core/MdastRootVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastRootVisitor: MdastImportVisitor<Mdast.Content>;

package/dist/plugins/core/MdastRootVisitor.js

@@ -0,0 +1,9 @@
+const MdastRootVisitor = {
+  testNode: "root",
+  visitNode({ actions, mdastNode, lexicalParent }) {
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+export {
+  MdastRootVisitor
+};

package/dist/plugins/core/MdastTextVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastTextVisitor: MdastImportVisitor<Mdast.Text>;

package/dist/plugins/core/MdastTextVisitor.js

@@ -0,0 +1,10 @@
+import { $createTextNode } from "lexical";
+const MdastTextVisitor = {
+  testNode: "text",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(actions.getParentFormatting()));
+  }
+};
+export {
+  MdastTextVisitor
+};

package/dist/plugins/core/NestedLexicalEditor.d.ts

@@ -0,0 +1,96 @@
+import { DecoratorNode, EditorConfig, LexicalEditor } from 'lexical';
+import * as Mdast from 'mdast';
+import type { Data, Node } from 'unist';
+import React from 'react';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { VoidEmitter } from '../../utils/voidEmitter';
+/**
+ * The value of the {@link NestedEditorsContext} React context.
+ */
+export interface NestedEditorsContextValue<T extends Node> {
+    /**
+     * The parent lexical editor
+     */
+    parentEditor: LexicalEditor;
+    /**
+     * The parent editor config
+     */
+    config: EditorConfig;
+    /**
+     * The mdast node that is being edited
+     */
+    mdastNode: T;
+    /**
+     * The lexical node that is being edited
+     */
+    lexicalNode: DecoratorNode<any> & {
+        /**
+         * Use this method to update the mdast node. This will also update the mdast tree of the parent editor.
+         */
+        setMdastNode: (mdastNode: any) => void;
+    };
+    /**
+     * Subscribe to the emitter and implement the logic to focus the custom editor.
+     */
+    focusEmitter: VoidEmitter;
+}
+/**
+ * Use this context to provide the necessary values to the {@link NestedLexicalEditor} React component.
+ * Place it as a wrapper in your custom lexical node decorators.
+ */
+export declare const NestedEditorsContext: React.Context<NestedEditorsContextValue<Node<Data>> | undefined>;
+/**
+ * A hook to get the current {@link NestedEditorsContext} value. Use this in your custom editor components.
+ */
+export declare function useNestedEditorContext<T extends Mdast.Content>(): NestedEditorsContextValue<T>;
+/**
+ * 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: Partial<T>) => void;
+/**
+ * A hook that returns a function that removes the lexical node from the editor.
+ */
+export declare function useLexicalNodeRemove(): () => void;
+/**
+ * The properties of the {@link NestedLexicalEditor} React component.
+ * @typeParam T - The type of the mdast node of the editor.
+ */
+export 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.Content[];
+    /**
+     * 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.Content[]) => T;
+    /**
+     * Props passed to the {@link https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalContentEditable.tsx | ContentEditable} component.
+     */
+    contentEditableProps?: React.ComponentProps<typeof ContentEditable>;
+    /**
+     * Whether or not the editor edits blocks (multiple paragraphs)
+     */
+    block?: boolean;
+    /**
+     * An emitter (usually constructed in the lexical node) that will activate the editor when the node is focused.
+     */
+    focusEmitter?: VoidEmitter;
+}
+/**
+ * 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 <NestedLexicalEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
+ * ```
+ */
+export declare const NestedLexicalEditor: <T extends Mdast.Content>(props: NestedEditorProps<T>) => React.JSX.Element;

package/dist/plugins/core/NestedLexicalEditor.js

@@ -0,0 +1,181 @@
+import { $addUpdateTag, $getNodeByKey, createEditor, $getRoot, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL } from "lexical";
+import React__default from "react";
+import { corePluginHooks, NESTED_EDITOR_UPDATED_COMMAND } from "./index.js";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
+import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
+import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
+import styles from "../../styles/ui.module.css.js";
+import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
+import { mergeRegister } from "@lexical/utils";
+import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
+const NestedEditorsContext = React__default.createContext(void 0);
+function useNestedEditorContext() {
+  const context = React__default.useContext(NestedEditorsContext);
+  if (!context) {
+    throw new Error("useNestedEditor must be used within a NestedEditorsProvider");
+  }
+  return context;
+}
+function useMdastNodeUpdater() {
+  const { parentEditor, mdastNode, lexicalNode } = useNestedEditorContext();
+  return function updateMdastNode(node) {
+    parentEditor.update(() => {
+      $addUpdateTag("history-push");
+      const currentNode = $getNodeByKey(lexicalNode.getKey());
+      if (currentNode) {
+        currentNode.setMdastNode({ ...mdastNode, ...node });
+      }
+    });
+  };
+}
+function useLexicalNodeRemove() {
+  const { parentEditor, lexicalNode } = useNestedEditorContext();
+  return () => {
+    parentEditor.update(() => {
+      const node = $getNodeByKey(lexicalNode.getKey());
+      node.selectNext();
+      node.remove();
+    });
+  };
+}
+const NestedLexicalEditor = function(props) {
+  const { getContent, getUpdatedMdastNode, contentEditableProps, block = false } = props;
+  const { mdastNode, lexicalNode } = useNestedEditorContext();
+  const updateMdastNode = useMdastNodeUpdater();
+  const removeNode = useLexicalNodeRemove();
+  const content = getContent(mdastNode);
+  const [rootEditor] = corePluginHooks.useEmitterValues("rootEditor");
+  const [importVisitors, exportVisitors, usedLexicalNodes, jsxComponentDescriptors, jsxIsAvailable, nestedEditorChildren] = corePluginHooks.useEmitterValues(
+    "importVisitors",
+    "exportVisitors",
+    "usedLexicalNodes",
+    "jsxComponentDescriptors",
+    "jsxIsAvailable",
+    "nestedEditorChildren"
+  );
+  const setEditorInFocus = corePluginHooks.usePublisher("editorInFocus");
+  const [editor] = React__default.useState(() => {
+    const editor2 = createEditor({
+      nodes: usedLexicalNodes,
+      theme: lexicalTheme
+    });
+    return editor2;
+  });
+  React__default.useEffect(() => {
+    var _a;
+    (_a = props.focusEmitter) == null ? void 0 : _a.subscribe(() => {
+      editor.focus();
+    });
+  }, [editor, props.focusEmitter]);
+  React__default.useEffect(() => {
+    editor.update(() => {
+      $getRoot().clear();
+      let theContent = content;
+      if (block) {
+        if (theContent.length === 0) {
+          theContent = [{ type: "paragraph", children: [] }];
+        }
+      } else {
+        theContent = [{ type: "paragraph", children: content }];
+      }
+      importMdastTreeToLexical({
+        root: $getRoot(),
+        mdastRoot: {
+          type: "root",
+          children: theContent
+        },
+        visitors: importVisitors
+      });
+    });
+  }, [editor, block, importVisitors]);
+  React__default.useEffect(() => {
+    function updateParentNode() {
+      editor.getEditorState().read(() => {
+        const mdast = exportLexicalTreeToMdast({
+          root: $getRoot(),
+          visitors: exportVisitors,
+          jsxComponentDescriptors,
+          jsxIsAvailable
+        });
+        const content2 = block ? mdast.children : mdast.children[0].children;
+        updateMdastNode(getUpdatedMdastNode(structuredClone(mdastNode), content2));
+      });
+    }
+    return mergeRegister(
+      editor.registerCommand(
+        BLUR_COMMAND,
+        (payload) => {
+          const relatedTarget = payload.relatedTarget;
+          if (isPartOftheEditorUI(relatedTarget, rootEditor.getRootElement())) {
+            return false;
+          }
+          updateParentNode();
+          setEditorInFocus(null);
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      // triggered by codemirror
+      editor.registerCommand(
+        NESTED_EDITOR_UPDATED_COMMAND,
+        () => {
+          updateParentNode();
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          setEditorInFocus({ editorType: "lexical", rootNode: lexicalNode });
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH
+      ),
+      editor.registerCommand(
+        KEY_BACKSPACE_COMMAND,
+        (_, editor2) => {
+          const editorElement = editor2.getRootElement();
+          if ((editorElement == null ? void 0 : editorElement.innerText) === "\n") {
+            removeNode();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      )
+    );
+  }, [
+    block,
+    editor,
+    exportVisitors,
+    getUpdatedMdastNode,
+    jsxComponentDescriptors,
+    jsxIsAvailable,
+    lexicalNode,
+    mdastNode,
+    removeNode,
+    setEditorInFocus,
+    updateMdastNode,
+    rootEditor
+  ]);
+  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(
+    RichTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { ...contentEditableProps, className: styles.nestedEditor }),
+      placeholder: null,
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  ), /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null), nestedEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
+};
+export {
+  NestedEditorsContext,
+  NestedLexicalEditor,
+  useLexicalNodeRemove,
+  useMdastNodeUpdater,
+  useNestedEditorContext
+};

package/dist/plugins/core/PropertyPopover.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * The properties of the {@link PropertyPopover} React component.
+ */
+export interface PropertyPopoverProps {
+    /**
+     * The properties to edit. The key is the name of the property, and the value is the initial value.
+     */
+    properties: Record<string, string>;
+    /**
+     * Triggered when the user edits the property values.
+     */
+    onChange: (values: Record<string, string>) => void;
+    /**
+     * The title to display in the popover.
+     */
+    title: string;
+}
+/**
+ * A React component that can be used in custom editors to edit the properties of the node.
+ * Displays a simple, static key/value editing UI in a popover.
+ */
+export declare const PropertyPopover: React.FC<PropertyPopoverProps>;

package/dist/plugins/core/PropertyPopover.js

@@ -0,0 +1,36 @@
+import * as RadixPopover from "@radix-ui/react-popover";
+import React__default from "react";
+import { useForm } from "react-hook-form";
+import SettingsIcon from "../../icons/settings.svg.js";
+import styles from "../../styles/ui.module.css.js";
+import { PopoverPortal, PopoverContent } from "./ui/PopoverUtils.js";
+const PropertyPopover = ({ title, properties, onChange }) => {
+  const [open, setOpen] = React__default.useState(false);
+  const { register, handleSubmit, reset } = useForm({ defaultValues: properties });
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open, onOpenChange: (v) => setOpen(v) }, /* @__PURE__ */ React__default.createElement(RadixPopover.Trigger, { className: styles.iconButton }, /* @__PURE__ */ React__default.createElement(SettingsIcon, { style: { display: "block" } })), /* @__PURE__ */ React__default.createElement(PopoverPortal, null, /* @__PURE__ */ React__default.createElement(PopoverContent, null, /* @__PURE__ */ React__default.createElement(
+    "form",
+    {
+      onSubmit: handleSubmit((values) => {
+        onChange(values);
+        setOpen(false);
+      })
+    },
+    /* @__PURE__ */ React__default.createElement("h3", { className: styles.propertyPanelTitle }, title, " Attributes"),
+    /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, "Attribute"), /* @__PURE__ */ React__default.createElement("th", null, "Value"))), /* @__PURE__ */ React__default.createElement("tbody", null, Object.keys(properties).map((propName) => /* @__PURE__ */ React__default.createElement("tr", { key: propName }, /* @__PURE__ */ React__default.createElement("th", { className: styles.readOnlyColumnCell }, " ", propName, " "), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("input", { ...register(propName), className: styles.propertyEditorInput }))))), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 2 }, /* @__PURE__ */ React__default.createElement("div", { className: styles.buttonsFooter }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", className: styles.primaryButton }, "Save"), /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        type: "reset",
+        className: styles.secondaryButton,
+        onClick: (e) => {
+          e.preventDefault();
+          reset(properties);
+          setOpen(false);
+        }
+      },
+      "Cancel"
+    ))))))
+  ))));
+};
+export {
+  PropertyPopover
+};

package/dist/plugins/core/SharedHistoryPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SharedHistoryPlugin: () => React.JSX.Element;