@nkzw/mdx-editor 0.1.0

package/dist/plugins/core/MdastHTMLNode.js

@@ -0,0 +1,120 @@
+const MDX_NODE_TYPES = ["mdxJsxTextElement", "mdxJsxFlowElement"];
+function isMdastHTMLNode(node) {
+  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(node.name);
+}
+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 {
+  htmlTags,
+  isMdastHTMLNode
+};

package/dist/plugins/core/MdastHTMLVisitor.js

@@ -0,0 +1,17 @@
+import { $createGenericHTMLNode } from "./GenericHTMLNode.js";
+import { isMdastHTMLNode } from "./MdastHTMLNode.js";
+const MdastHTMLVisitor = {
+  testNode: isMdastHTMLNode,
+  visitNode: function({ mdastNode, actions, lexicalParent }) {
+    if (mdastNode.name === "span" && mdastNode.attributes.length === 1 && mdastNode.attributes[0].type === "mdxJsxAttribute" && mdastNode.attributes[0].name === "style") {
+      actions.addStyle(mdastNode.attributes[0].value, mdastNode);
+      actions.visitChildren(mdastNode, lexicalParent);
+    } else {
+      actions.addAndStepInto($createGenericHTMLNode(mdastNode.name, mdastNode.type, mdastNode.attributes));
+    }
+  },
+  priority: -100
+};
+export {
+  MdastHTMLVisitor
+};

package/dist/plugins/core/MdastParagraphVisitor.js

@@ -0,0 +1,23 @@
+import { $isListItemNode } from "@lexical/list";
+import { $createLineBreakNode, $createParagraphNode } from "lexical";
+const lexicalTypesThatShouldSkipParagraphs = ["admonition"];
+const MdastParagraphVisitor = {
+  testNode: "paragraph",
+  visitNode: function({ mdastNode, mdastParent, lexicalParent, actions }) {
+    const parentType = lexicalParent.getType();
+    const isListItem = $isListItemNode(lexicalParent);
+    if (isListItem || lexicalTypesThatShouldSkipParagraphs.includes(parentType)) {
+      const mdastNodeIndex = mdastParent?.children.indexOf(mdastNode) ?? -1;
+      const previousMdastSibling = mdastNodeIndex > 0 ? mdastParent?.children.at(mdastNodeIndex - 1) : void 0;
+      if (isListItem && previousMdastSibling?.type === "paragraph") {
+        lexicalParent.append($createLineBreakNode(), $createLineBreakNode());
+      }
+      actions.visitChildren(mdastNode, lexicalParent);
+    } else {
+      actions.addAndStepInto($createParagraphNode());
+    }
+  }
+};
+export {
+  MdastParagraphVisitor
+};

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.js

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

package/dist/plugins/core/NestedLexicalEditor.js

@@ -0,0 +1,221 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createEditor, $getRoot, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, KEY_BACKSPACE_COMMAND, COMMAND_PRIORITY_CRITICAL, $getNodeByKey, $addUpdateTag } from "lexical";
+import React from "react";
+import { rootEditor$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, jsxIsAvailable$, nestedEditorChildren$, lexicalTheme$, editorInFocus$, 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 classNames from "classnames";
+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";
+import { useRealm, useCellValues, usePublisher } from "@mdxeditor/gurx";
+const NestedEditorsContext = React.createContext(void 0);
+function useNestedEditorContext() {
+  const context = React.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 realm = useRealm();
+  const [
+    rootEditor,
+    importVisitors,
+    exportVisitors,
+    usedLexicalNodes,
+    jsxComponentDescriptors,
+    directiveDescriptors,
+    codeBlockEditorDescriptors,
+    defaultCodeBlockLanguage,
+    jsxIsAvailable,
+    nestedEditorChildren,
+    lexicalTheme
+  ] = useCellValues(
+    rootEditor$,
+    importVisitors$,
+    exportVisitors$,
+    usedLexicalNodes$,
+    jsxComponentDescriptors$,
+    directiveDescriptors$,
+    codeBlockEditorDescriptors$,
+    defaultCodeBlockLanguage$,
+    jsxIsAvailable$,
+    nestedEditorChildren$,
+    lexicalTheme$
+  );
+  const setEditorInFocus = usePublisher(editorInFocus$);
+  const [editor] = React.useState(() => {
+    const editor2 = createEditor({
+      nodes: usedLexicalNodes,
+      theme: realm.getValue(lexicalTheme$),
+      namespace: "NestedEditor"
+    });
+    return editor2;
+  });
+  React.useEffect(() => {
+    focusEmitter.subscribe(() => {
+      editor.focus();
+    });
+  }, [editor, focusEmitter]);
+  React.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,
+        directiveDescriptors,
+        codeBlockEditorDescriptors,
+        defaultCodeBlockLanguage,
+        jsxComponentDescriptors
+      });
+    });
+  }, [editor, block, importVisitors]);
+  React.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(
+        FOCUS_COMMAND,
+        () => {
+          setEditorInFocus({ editorType: "lexical", rootNode: lexicalNode, editorRef: editor });
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      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, editorRef: editor });
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH
+      ),
+      editor.registerCommand(
+        KEY_BACKSPACE_COMMAND,
+        (_, editor2) => {
+          const editorElement = editor2.getRootElement();
+          if (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__ */ jsxs(LexicalNestedComposer, { initialEditor: editor, initialTheme: lexicalTheme, children: [
+    /* @__PURE__ */ jsx(
+      RichTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(ContentEditable, { ...contentEditableProps, className: classNames(styles.nestedEditor, contentEditableProps?.className) }),
+        placeholder: null,
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ),
+    /* @__PURE__ */ jsx(SharedHistoryPlugin, {}),
+    nestedEditorChildren.map((Child, index) => /* @__PURE__ */ jsx(Child, {}, index))
+  ] });
+};
+export {
+  NestedEditorsContext,
+  NestedLexicalEditor,
+  useLexicalNodeRemove,
+  useMdastNodeUpdater,
+  useNestedEditorContext
+};

package/dist/plugins/core/PropertyPopover.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as RadixPopover from "@radix-ui/react-popover";
+import React from "react";
+import { useForm } from "react-hook-form";
+import styles from "../../styles/ui.module.css.js";
+import { useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "./index.js";
+import { PopoverPortal, PopoverContent } from "./ui/PopoverUtils.js";
+const PropertyPopover = ({ title, properties, onChange }) => {
+  const [open, setOpen] = React.useState(false);
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const { register, handleSubmit, reset } = useForm({ defaultValues: properties });
+  return /* @__PURE__ */ jsxs(
+    RadixPopover.Root,
+    {
+      open,
+      onOpenChange: (v) => {
+        setOpen(v);
+      },
+      children: [
+        /* @__PURE__ */ jsx(RadixPopover.Trigger, { className: styles.iconButton, children: /* @__PURE__ */ jsx("div", { children: iconComponentFor("settings") }) }),
+        /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: (e) => {
+              void handleSubmit(onChange)(e);
+              setOpen(false);
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("h3", { className: styles.propertyPanelTitle, children: [
+                title,
+                " Attributes"
+              ] }),
+              /* @__PURE__ */ jsxs("table", { className: styles.propertyEditorTable, children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { className: styles.readOnlyColumnCell, children: "Attribute" }),
+                  /* @__PURE__ */ jsx("th", { children: "Value" })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: Object.keys(properties).map((propName) => /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsxs("th", { className: styles.readOnlyColumnCell, children: [
+                    " ",
+                    propName,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("input", { ...register(propName), className: styles.propertyEditorInput }) })
+                ] }, propName)) }),
+                /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 2, children: /* @__PURE__ */ jsxs("div", { className: styles.buttonsFooter, children: [
+                  /* @__PURE__ */ jsx("button", { type: "submit", className: styles.primaryButton, children: "Save" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "reset",
+                      className: styles.secondaryButton,
+                      onClick: (e) => {
+                        e.preventDefault();
+                        reset(properties);
+                        setOpen(false);
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] }) }) }) })
+              ] })
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  PropertyPopover
+};

package/dist/plugins/core/SharedHistoryPlugin.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { historyState$ } from "./index.js";
+import { useCellValue } from "@mdxeditor/gurx";
+const SharedHistoryPlugin = () => {
+  return /* @__PURE__ */ jsx(HistoryPlugin, { externalHistoryState: useCellValue(historyState$) });
+};
+export {
+  SharedHistoryPlugin
+};