@mdxeditor/editor 0.0.0-development

package/dist/plugins/core/NestedLexicalEditor.js

@@ -0,0 +1,180 @@
+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.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 });
+      }
+    });
+  };
+}
+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
+        });
+        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
+};