@nkzw/mdx-editor 0.1.0

package/dist/plugins/lists/index.js

@@ -0,0 +1,111 @@
+import { activeEditor$, currentSelection$, rootEditor$, addNestedEditorChild$, addComposerChild$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, addActivePlugin$ } from "../core/index.js";
+import { MdastListVisitor } from "./MdastListVisitor.js";
+import { MdastListItemVisitor } from "./MdastListItemVisitor.js";
+import { LexicalListVisitor } from "./LexicalListVisitor.js";
+import { LexicalListItemVisitor } from "./LexicalListItemVisitor.js";
+import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode } from "@lexical/list";
+import { $isRootOrShadowRoot, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_CRITICAL, $getSelection, $isRangeSelection, $isElementNode } from "lexical";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin.js";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin.js";
+import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
+import { gfmTaskListItem } from "micromark-extension-gfm-task-list-item";
+import { gfmTaskListItemToMarkdown, gfmTaskListItemFromMarkdown } from "mdast-util-gfm-task-list-item";
+import { Signal, withLatestFrom, Cell } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { NotesListItemNode } from "./NotesListItemNode.js";
+import { CheckListPlugin } from "./CheckListPlugin.js";
+const listItemNodeReplacement = {
+  replace: ListItemNode,
+  with: (node) => new NotesListItemNode(node.getValue(), node.getChecked()),
+  withKlass: NotesListItemNode
+};
+const ListTypeCommandMap = /* @__PURE__ */ new Map([
+  ["number", INSERT_ORDERED_LIST_COMMAND],
+  ["bullet", INSERT_UNORDERED_LIST_COMMAND],
+  ["check", INSERT_CHECK_LIST_COMMAND],
+  ["", REMOVE_LIST_COMMAND]
+]);
+const currentListType$ = Cell("", (r) => {
+  r.sub(r.pipe(currentSelection$, withLatestFrom(activeEditor$)), ([selection, theEditor]) => {
+    if (!selection || !theEditor) {
+      return;
+    }
+    const anchorNode = selection.anchor.getNode();
+    let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+      const parent = e.getParent();
+      return parent !== null && $isRootOrShadowRoot(parent);
+    });
+    element ??= anchorNode.getTopLevelElementOrThrow();
+    const elementKey = element.getKey();
+    const elementDOM = theEditor.getElementByKey(elementKey);
+    if (elementDOM !== null) {
+      if ($isListNode(element)) {
+        const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+        const type = parentList ? parentList.getListType() : element.getListType();
+        r.pub(currentListType$, type);
+      } else {
+        r.pub(currentListType$, "");
+      }
+    }
+  });
+});
+const applyListType$ = Signal((r) => {
+  r.sub(r.pipe(applyListType$, withLatestFrom(activeEditor$)), ([listType, theEditor]) => {
+    theEditor?.dispatchCommand(ListTypeCommandMap.get(listType), void 0);
+  });
+});
+const listsPlugin = realmPlugin({
+  init(realm) {
+    realm.getValue(rootEditor$)?.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(7), COMMAND_PRIORITY_CRITICAL);
+    realm.pubIn({
+      [addActivePlugin$]: "lists",
+      [addMdastExtension$]: gfmTaskListItemFromMarkdown(),
+      [addSyntaxExtension$]: gfmTaskListItem(),
+      [addImportVisitor$]: [MdastListVisitor, MdastListItemVisitor],
+      [addLexicalNode$]: [NotesListItemNode, listItemNodeReplacement, ListNode],
+      [addExportVisitor$]: [LexicalListVisitor, LexicalListItemVisitor],
+      [addToMarkdownExtension$]: gfmTaskListItemToMarkdown(),
+      [addComposerChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin],
+      [addNestedEditorChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin]
+      // Note: intentionally not registered to addTableCellEditorChild$ — lists are not supported in table cells
+    });
+  }
+});
+function getElementNodesInSelection(selection) {
+  const nodesInSelection = selection.getNodes();
+  if (nodesInSelection.length === 0) {
+    return /* @__PURE__ */ new Set([selection.anchor.getNode().getParentOrThrow(), selection.focus.getNode().getParentOrThrow()]);
+  }
+  return new Set(nodesInSelection.map((n) => $isElementNode(n) ? n : n.getParentOrThrow()));
+}
+function isIndentPermitted(maxDepth) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+  const elementNodesInSelection = getElementNodesInSelection(selection);
+  let totalDepth = 0;
+  for (const elementNode of elementNodesInSelection) {
+    if ($isListNode(elementNode)) {
+      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
+    } else if ($isListItemNode(elementNode)) {
+      const parent = elementNode.getParent();
+      if (parent?.getChildren().length === 1) {
+        const grandParentListItem = parent.getParent();
+        if ($isListItemNode(grandParentListItem) && grandParentListItem.getChildren().length === 1) {
+          return false;
+        }
+      }
+      if (!$isListNode(parent)) {
+        throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
+      }
+      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
+    }
+  }
+  return totalDepth <= maxDepth;
+}
+export {
+  applyListType$,
+  currentListType$,
+  listsPlugin
+};

package/dist/plugins/markdown-shortcut/index.js

@@ -0,0 +1,114 @@
+import { jsx } from "react/jsx-runtime";
+import { ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, QUOTE, LINK, CODE } from "@lexical/markdown";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
+import { activePlugins$, addTableCellEditorChild$, addNestedEditorChild$, addComposerChild$ } from "../core/index.js";
+import { allowedHeadingLevels$ } from "../headings/index.js";
+import { HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+const markdownShortcutPlugin = realmPlugin({
+  init(realm) {
+    const pluginIds = realm.getValue(activePlugins$);
+    const allowedHeadingLevels = pluginIds.includes("headings") ? realm.getValue(allowedHeadingLevels$) : [];
+    const transformers = pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels);
+    const tableCellTransformers = transformers.filter((t) => !LIST_TRANSFORMERS.has(t));
+    realm.pubIn({
+      [addComposerChild$]: () => /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers }),
+      [addNestedEditorChild$]: () => /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers }),
+      [addTableCellEditorChild$]: () => /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: tableCellTransformers })
+    });
+  }
+});
+const createBlockNode = (createNode) => {
+  return (parentNode, children, match) => {
+    const node = createNode(match);
+    node.append(...children);
+    parentNode.replace(node);
+    node.select(0, 0);
+  };
+};
+const THEMATIC_BREAK = {
+  dependencies: [HorizontalRuleNode],
+  export: (node) => {
+    return $isHorizontalRuleNode(node) ? "***" : null;
+  },
+  regExp: /^(---|\*\*\*|___)\s?$/,
+  replace: (parentNode, _1, _2, isImport) => {
+    const line = $createHorizontalRuleNode();
+    if (isImport || parentNode.getNextSibling() != null) {
+      parentNode.replace(line);
+    } else {
+      parentNode.insertBefore(line);
+    }
+    line.selectNext();
+  },
+  type: "element"
+};
+const LIST_TRANSFORMERS = /* @__PURE__ */ new Set([ORDERED_LIST, UNORDERED_LIST, CHECK_LIST]);
+function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
+  const transformers = [
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+    BOLD_STAR,
+    BOLD_UNDERSCORE,
+    INLINE_CODE,
+    ITALIC_STAR,
+    ITALIC_UNDERSCORE
+    // HIGHLIGHT,
+    // STRIKETHROUGH
+  ];
+  if (pluginIds.includes("headings")) {
+    const minHeadingLevel = Math.min(...allowedHeadingLevels);
+    const maxHeadingLevel = Math.max(...allowedHeadingLevels);
+    const headingRegExp = new RegExp(`^(#{${minHeadingLevel},${maxHeadingLevel}})\\s`);
+    const HEADING = {
+      dependencies: [HeadingNode],
+      export: (node, exportChildren) => {
+        if (!$isHeadingNode(node)) {
+          return null;
+        }
+        const level = Number(node.getTag().slice(1));
+        return "#".repeat(level) + " " + exportChildren(node);
+      },
+      regExp: headingRegExp,
+      replace: createBlockNode((match) => {
+        const tag = `h${match[1].length}`;
+        return $createHeadingNode(tag);
+      }),
+      type: "element"
+    };
+    transformers.push(HEADING);
+  }
+  if (pluginIds.includes("thematicBreak")) {
+    transformers.push(THEMATIC_BREAK);
+  }
+  if (pluginIds.includes("quote")) {
+    transformers.push(QUOTE);
+  }
+  if (pluginIds.includes("link")) {
+    transformers.push(LINK);
+  }
+  if (pluginIds.includes("lists")) {
+    transformers.push(ORDERED_LIST, UNORDERED_LIST, CHECK_LIST);
+  }
+  if (pluginIds.includes("codeblock")) {
+    const codeTransformerCopy = {
+      ...CODE,
+      dependencies: [CodeBlockNode],
+      replace: (parentNode, _children, match) => {
+        const codeBlockNode = $createCodeBlockNode({ code: "", language: match[1] ?? "", meta: "" });
+        parentNode.selectPrevious();
+        parentNode.replace(codeBlockNode);
+        setTimeout(() => {
+          codeBlockNode.select();
+        }, 80);
+      }
+    };
+    transformers.push(codeTransformerCopy);
+  }
+  return transformers;
+}
+export {
+  markdownShortcutPlugin
+};

package/dist/plugins/maxlength/index.js

@@ -0,0 +1,36 @@
+import { $trimTextContentFromAnchor } from "@lexical/selection";
+import { $restoreEditorState } from "@lexical/utils";
+import { RootNode, $getSelection, $isRangeSelection } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { createRootEditorSubscription$ } from "../core/index.js";
+const maxLengthPlugin = realmPlugin({
+  init: (realm, maxLength = Infinity) => {
+    realm.pub(createRootEditorSubscription$, (editor) => {
+      let lastRestoredEditorState = null;
+      return editor.registerNodeTransform(RootNode, (rootNode) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return;
+        }
+        const prevEditorState = editor.getEditorState();
+        const prevTextContentSize = prevEditorState.read(() => rootNode.getTextContentSize());
+        const textContentSize = rootNode.getTextContentSize();
+        if (prevTextContentSize !== textContentSize) {
+          const delCount = textContentSize - maxLength;
+          const anchor = selection.anchor;
+          if (delCount > 0) {
+            if (prevTextContentSize === maxLength && lastRestoredEditorState !== prevEditorState) {
+              lastRestoredEditorState = prevEditorState;
+              $restoreEditorState(editor, prevEditorState);
+            } else {
+              $trimTextContentFromAnchor(editor, anchor, delCount);
+            }
+          }
+        }
+      });
+    });
+  }
+});
+export {
+  maxLengthPlugin
+};

package/dist/plugins/quote/LexicalQuoteVisitor.js

@@ -0,0 +1,10 @@
+import { $isQuoteNode } from "@lexical/rich-text";
+const LexicalQuoteVisitor = {
+  testLexicalNode: $isQuoteNode,
+  visitLexicalNode: ({ actions }) => {
+    actions.addAndStepInto("blockquote");
+  }
+};
+export {
+  LexicalQuoteVisitor
+};

package/dist/plugins/quote/MdastBlockQuoteVisitor.js

@@ -0,0 +1,10 @@
+import { $createQuoteNode } from "@lexical/rich-text";
+const MdastBlockQuoteVisitor = {
+  testNode: "blockquote",
+  visitNode({ actions }) {
+    actions.addAndStepInto($createQuoteNode());
+  }
+};
+export {
+  MdastBlockQuoteVisitor
+};

package/dist/plugins/quote/index.js

@@ -0,0 +1,18 @@
+import { QuoteNode } from "@lexical/rich-text";
+import { MdastBlockQuoteVisitor } from "./MdastBlockQuoteVisitor.js";
+import { LexicalQuoteVisitor } from "./LexicalQuoteVisitor.js";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+const quotePlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addActivePlugin$]: "quote",
+      [addImportVisitor$]: MdastBlockQuoteVisitor,
+      [addLexicalNode$]: QuoteNode,
+      [addExportVisitor$]: LexicalQuoteVisitor
+    });
+  }
+});
+export {
+  quotePlugin
+};

package/dist/plugins/remote/index.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useEffect, useCallback, useMemo, createContext } from "react";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { addComposerChild$ } from "../core/index.js";
+const RemoteMDXEditorRealmContextValueStub = {
+  editorMap: /* @__PURE__ */ new Map(),
+  registerEditor: (_id, _realm) => void 0
+};
+const RemoteMDXEditorRealmContext = createContext(RemoteMDXEditorRealmContextValueStub);
+const RemoteMDXEditorRealmProvider = ({ children }) => {
+  const [editorMap, setEditorMap] = React.useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    return () => {
+      setEditorMap(/* @__PURE__ */ new Map());
+    };
+  }, []);
+  const registerEditor = useCallback((id, realm) => {
+    setEditorMap((prev) => {
+      return new Map(prev).set(id, realm);
+    });
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      editorMap,
+      registerEditor
+    }),
+    [editorMap, registerEditor]
+  );
+  return /* @__PURE__ */ jsx(RemoteMDXEditorRealmContext.Provider, { value: contextValue, children });
+};
+const RemotePluginRegister = ({ realm, editorId }) => {
+  const { registerEditor } = React.useContext(RemoteMDXEditorRealmContext);
+  useEffect(() => {
+    registerEditor(editorId, realm);
+  }, [realm, editorId, registerEditor]);
+  return null;
+};
+const remoteRealmPlugin = realmPlugin({
+  init: (realm, params) => {
+    if (params?.editorId) {
+      realm.pub(addComposerChild$, () => /* @__PURE__ */ jsx(RemotePluginRegister, { realm, editorId: params.editorId }));
+    }
+  }
+});
+function useRemoteMDXEditorRealm(editorId) {
+  return React.useContext(RemoteMDXEditorRealmContext).editorMap.get(editorId);
+}
+export {
+  RemoteMDXEditorRealmProvider,
+  remoteRealmPlugin,
+  useRemoteMDXEditorRealm
+};