@mdxeditor/editor 0.0.1 → 0.0.5-development

package/dist/plugins/core/MdastHTMLNode.js

@@ -0,0 +1,122 @@
+const MDX_NODE_TYPES = ["mdxJsxTextElement", "mdxJsxFlowElement"];
+function isMdastHTMLNode(node) {
+  var _a;
+  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(((_a = node.name) == null ? void 0 : _a.toLowerCase()) ?? "");
+}
+const htmlTags = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  // 'img',
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];
+export {
+  MDX_NODE_TYPES,
+  htmlTags,
+  isMdastHTMLNode
+};

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

@@ -0,0 +1,3 @@
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+import { MdastHTMLNode } from './MdastHTMLNode';
+export declare const MdastHTMLVisitor: MdastImportVisitor<MdastHTMLNode>;

package/dist/plugins/core/MdastHTMLVisitor.js

@@ -0,0 +1,12 @@
+import { $createGenericHTMLNode } from "./GenericHTMLNode.js";
+import { isMdastHTMLNode } from "./MdastHTMLNode.js";
+const MdastHTMLVisitor = {
+  testNode: isMdastHTMLNode,
+  visitNode: function({ mdastNode, actions }) {
+    actions.addAndStepInto($createGenericHTMLNode(mdastNode.name, mdastNode.type, mdastNode.attributes));
+  },
+  priority: -100
+};
+export {
+  MdastHTMLVisitor
+};

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,27 @@
+import { $createTextNode } from "lexical";
+import { IS_CODE } from "../../FormatConstants.js";
+function isOpeningCodeNode(node) {
+  return node.type === "html" && node.value === "<code>";
+}
+function isClosingCodeNode(node) {
+  return node.type === "html" && node.value === "</code>";
+}
+const MdastInlineCodeVisitor = {
+  testNode: (node) => {
+    return node.type === "inlineCode" || isOpeningCodeNode(node) || isClosingCodeNode(node);
+  },
+  visitNode({ mdastNode, actions, mdastParent }) {
+    if (isOpeningCodeNode(mdastNode)) {
+      actions.addFormatting(IS_CODE, mdastParent);
+      return;
+    }
+    if (isClosingCodeNode(mdastNode)) {
+      actions.removeFormatting(IS_CODE, mdastParent);
+      return;
+    }
+    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,92 @@
+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.js';
+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;
+}
+/**
+ * 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,185 @@
+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 { NESTED_EDITOR_UPDATED_COMMAND, corePluginHooks } from "./index.js";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer.js";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
+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 });
+        }
+      },
+      { discrete: true }
+    );
+    parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
+  };
+}
+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, focusEmitter } = 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(() => {
+    focusEmitter == null ? void 0 : focusEmitter.subscribe(() => {
+      editor.focus();
+    });
+  }, [editor, 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,
+          addImportStatements: false
+        });
+        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,39 @@
+import * as RadixPopover from "@radix-ui/react-popover";
+import React__default from "react";
+import { useForm } from "react-hook-form";
+import styles from "../../styles/ui.module.css.js";
+import { PopoverPortal, PopoverContent } from "./ui/PopoverUtils.js";
+import { corePluginHooks } from "./index.js";
+const PropertyPopover = ({ title, properties, onChange }) => {
+  const [open, setOpen] = React__default.useState(false);
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  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("div", null, iconComponentFor("settings"))), /* @__PURE__ */ React__default.createElement(PopoverPortal, null, /* @__PURE__ */ React__default.createElement(PopoverContent, null, /* @__PURE__ */ React__default.createElement(
+    "form",
+    {
+      onSubmit: (e) => {
+        void handleSubmit(onChange)(e);
+        setOpen(false);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    /* @__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;

package/dist/plugins/core/SharedHistoryPlugin.js

@@ -0,0 +1,10 @@
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin.js";
+import React__default from "react";
+import { corePluginHooks } from "./index.js";
+const SharedHistoryPlugin = () => {
+  const [historyState] = corePluginHooks.useEmitterValues("historyState");
+  return /* @__PURE__ */ React__default.createElement(HistoryPlugin, { externalHistoryState: historyState });
+};
+export {
+  SharedHistoryPlugin
+};