@nkzw/mdx-editor 0.1.0

package/dist/plugins/codemirror/index.js

@@ -0,0 +1,115 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { Cell, Signal, map } from "@mdxeditor/gurx";
+import { insertCodeBlock$, appendCodeBlockEditorDescriptor$ } from "../codeblock/index.js";
+import { CodeMirrorEditor } from "./CodeMirrorEditor.js";
+const EMPTY_VALUE = "__EMPTY_VALUE__";
+function normalizeCodeBlockLanguages(input) {
+  const items = [];
+  const keyMap = {};
+  const supportMap = {};
+  if (Array.isArray(input)) {
+    for (const lang of input) {
+      const rawCanonical = lang.alias?.[0] ?? lang.name.toLowerCase();
+      const canonical = rawCanonical || EMPTY_VALUE;
+      items.push({ value: canonical, label: lang.name });
+      keyMap[rawCanonical] = canonical;
+      if (lang.alias) {
+        for (const alias of lang.alias) {
+          keyMap[alias] = canonical;
+        }
+      }
+      if (lang.extensions) {
+        for (const ext of lang.extensions) {
+          keyMap[ext] = canonical;
+        }
+      }
+      keyMap[lang.name.toLowerCase()] = canonical;
+      if (lang.support) {
+        supportMap[canonical] = lang.support;
+      }
+    }
+  } else {
+    const firstKeyByLabel = {};
+    for (const [key, label] of Object.entries(input)) {
+      if (!(label in firstKeyByLabel)) {
+        firstKeyByLabel[label] = key;
+        items.push({ value: key || EMPTY_VALUE, label });
+      }
+      keyMap[key] = firstKeyByLabel[label] || EMPTY_VALUE;
+    }
+  }
+  return { items, keyMap, supportMap };
+}
+function getCodeBlockLanguageSelectData(normalized, language) {
+  const value = normalized.keyMap[language] ?? language;
+  if (!value || normalized.items.some((item) => item.value === value)) {
+    return { value, items: normalized.items };
+  }
+  return {
+    value,
+    items: [...normalized.items, { value, label: language }]
+  };
+}
+const codeBlockLanguages$ = Cell(
+  normalizeCodeBlockLanguages({
+    js: "JavaScript",
+    ts: "TypeScript",
+    tsx: "TypeScript (React)",
+    jsx: "JavaScript (React)",
+    css: "CSS"
+  })
+);
+const insertCodeMirror$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertCodeMirror$,
+      map(({ language, code }) => {
+        return {
+          code,
+          language,
+          meta: ""
+        };
+      })
+    ),
+    insertCodeBlock$
+  );
+});
+const codeMirrorExtensions$ = Cell([]);
+const codeMirrorAutoLoadLanguageSupport$ = Cell(true);
+const codeMirrorPlugin = realmPlugin({
+  update(r, params) {
+    r.pubIn({
+      [codeBlockLanguages$]: normalizeCodeBlockLanguages(params?.codeBlockLanguages ?? {}),
+      [codeMirrorExtensions$]: params?.codeMirrorExtensions ?? [],
+      [codeMirrorAutoLoadLanguageSupport$]: params?.autoLoadLanguageSupport ?? true
+    });
+  },
+  init(r, params) {
+    const normalized = normalizeCodeBlockLanguages(params?.codeBlockLanguages ?? {});
+    r.pubIn({
+      [codeBlockLanguages$]: normalized,
+      [codeMirrorExtensions$]: params?.codeMirrorExtensions ?? [],
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(normalized),
+      [codeMirrorAutoLoadLanguageSupport$]: params?.autoLoadLanguageSupport ?? true
+    });
+  }
+});
+function buildCodeBlockDescriptor(normalized) {
+  return {
+    match(language, meta) {
+      return !meta || Object.hasOwn(normalized.keyMap, language ?? "");
+    },
+    priority: 1,
+    Editor: CodeMirrorEditor
+  };
+}
+export {
+  EMPTY_VALUE,
+  codeBlockLanguages$,
+  codeMirrorAutoLoadLanguageSupport$,
+  codeMirrorExtensions$,
+  codeMirrorPlugin,
+  getCodeBlockLanguageSelectData,
+  insertCodeMirror$,
+  normalizeCodeBlockLanguages
+};

package/dist/plugins/codemirror/useCodeMirrorRef.js

@@ -0,0 +1,101 @@
+import { $getNodeByKey, $createParagraphNode } from "lexical";
+import React from "react";
+import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
+import { activeEditor$, editorInFocus$ } from "../core/index.js";
+import { useCellValue, usePublisher } from "@mdxeditor/gurx";
+function useCodeMirrorRef(nodeKey, language, focusEmitter) {
+  const activeEditor = useCellValue(activeEditor$);
+  const setEditorInFocus = usePublisher(editorInFocus$);
+  const codeMirrorRef = React.useRef(null);
+  const { lexicalNode } = useCodeBlockEditorContext();
+  const atBottom = React.useRef(false);
+  const atTop = React.useRef(false);
+  const onFocusHandler = React.useCallback(() => {
+    setEditorInFocus({
+      editorType: "codeblock",
+      rootNode: lexicalNode,
+      editorRef: codeMirrorRef.current
+    });
+  }, [lexicalNode, setEditorInFocus]);
+  const onKeyDownHandler = React.useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        const state = codeMirrorRef.current?.getCodemirror()?.state;
+        if (state) {
+          const docLength = state.doc.length;
+          const selectionEnd = state.selection.ranges[0].to;
+          if (docLength === selectionEnd) {
+            if (!atBottom.current) {
+              atBottom.current = true;
+            } else {
+              activeEditor?.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                const nextSibling = node.getNextSibling();
+                if (nextSibling) {
+                  codeMirrorRef.current?.getCodemirror()?.contentDOM.blur();
+                  node.selectNext();
+                } else {
+                  node.insertAfter($createParagraphNode());
+                }
+              });
+              atBottom.current = false;
+            }
+          }
+        }
+      } else if (e.key === "ArrowUp") {
+        const state = codeMirrorRef.current?.getCodemirror()?.state;
+        if (state) {
+          const selectionStart = state.selection.ranges[0].from;
+          if (selectionStart === 0) {
+            if (!atTop.current) {
+              atTop.current = true;
+            } else {
+              activeEditor?.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                const previousSibling = node.getPreviousSibling();
+                if (previousSibling) {
+                  codeMirrorRef.current?.getCodemirror()?.contentDOM.blur();
+                  node.selectPrevious();
+                }
+              });
+              atTop.current = false;
+            }
+          }
+        }
+      } else if (e.key === "Enter") {
+        e.stopPropagation();
+      } else if (e.key === "Backspace" || e.key === "Delete") {
+        const state = codeMirrorRef.current?.getCodemirror()?.state;
+        const docLength = state?.doc.length;
+        if (docLength === 0) {
+          activeEditor?.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            node.remove();
+          });
+        }
+      }
+    },
+    [activeEditor, nodeKey]
+  );
+  React.useEffect(() => {
+    const codeMirror = codeMirrorRef.current;
+    setTimeout(() => {
+      codeMirror?.getCodemirror()?.contentDOM.addEventListener("focus", onFocusHandler);
+      codeMirror?.getCodemirror()?.contentDOM.addEventListener("keydown", onKeyDownHandler);
+    }, 300);
+    return () => {
+      codeMirror?.getCodemirror()?.contentDOM.removeEventListener("focus", onFocusHandler);
+      codeMirror?.getCodemirror()?.contentDOM.removeEventListener("keydown", onKeyDownHandler);
+    };
+  }, [codeMirrorRef, onFocusHandler, onKeyDownHandler, language]);
+  React.useEffect(() => {
+    focusEmitter.subscribe(() => {
+      codeMirrorRef.current?.getCodemirror()?.focus();
+      onFocusHandler();
+    });
+  }, [focusEmitter, codeMirrorRef, nodeKey, onFocusHandler]);
+  return codeMirrorRef;
+}
+export {
+  useCodeMirrorRef
+};

package/dist/plugins/core/GenericHTMLNode.js

@@ -0,0 +1,118 @@
+import { $applyNodeReplacement, ElementNode } from "lexical";
+const TYPE_NAME = "generic-html";
+class GenericHTMLNode extends ElementNode {
+  /** @internal */
+  __tag;
+  /** @internal */
+  __nodeType;
+  /** @internal */
+  __attributes;
+  /** @internal */
+  static getType() {
+    return TYPE_NAME;
+  }
+  /** @internal */
+  static clone(node) {
+    return new GenericHTMLNode(node.__tag, node.__nodeType, node.__attributes, node.__key);
+  }
+  /**
+   * Constructs a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
+   */
+  constructor(tag, type, attributes, key) {
+    super(key);
+    this.__tag = tag;
+    this.__nodeType = type;
+    this.__attributes = attributes;
+  }
+  getTag() {
+    return this.__tag;
+  }
+  getNodeType() {
+    return this.__nodeType;
+  }
+  getAttributes() {
+    return this.__attributes;
+  }
+  updateAttributes(attributes) {
+    const self = this.getWritable();
+    self.__attributes = attributes;
+  }
+  getStyle() {
+    return this.__attributes.find((attribute) => attribute.name === "style")?.value;
+  }
+  // View
+  createDOM() {
+    const tag = this.__tag;
+    const element = document.createElement(tag);
+    this.__attributes.forEach((attribute) => {
+      element.setAttribute(attribute.name, attribute.value);
+    });
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importDOM() {
+    return {};
+  }
+  exportDOM(editor) {
+    const { element } = super.exportDOM(editor);
+    return {
+      element
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createGenericHTMLNode(serializedNode.tag, serializedNode.mdxType, serializedNode.attributes);
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      tag: this.getTag(),
+      attributes: this.__attributes,
+      mdxType: this.__nodeType,
+      type: TYPE_NAME,
+      version: 1
+    };
+  }
+  /*
+    // Mutation
+    insertNewAfter(selection?: RangeSelection, restoreSelection = true): ParagraphNode | GenericHTMLNode {
+      const anchorOffset = selection ? selection.anchor.offset : 0
+      const newElement =
+        anchorOffset > 0 && anchorOffset < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const direction = this.getDirection()
+      newElement.setDirection(direction)
+      this.insertAfter(newElement, restoreSelection)
+      return newElement
+    }
+  
+    collapseAtStart(): true {
+      const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const children = this.getChildren()
+      children.forEach((child) => newElement.append(child))
+      this.replace(newElement)
+      return true
+    }*/
+  extractWithChild() {
+    return true;
+  }
+  isInline() {
+    return this.__nodeType === "mdxJsxTextElement";
+  }
+}
+function $createGenericHTMLNode(tag, type, attributes) {
+  return $applyNodeReplacement(new GenericHTMLNode(tag, type, attributes));
+}
+function $isGenericHTMLNode(node) {
+  return node instanceof GenericHTMLNode;
+}
+export {
+  $createGenericHTMLNode,
+  $isGenericHTMLNode,
+  GenericHTMLNode,
+  TYPE_NAME
+};

package/dist/plugins/core/LexicalGenericHTMLNodeVisitor.js

@@ -0,0 +1,15 @@
+import { $isGenericHTMLNode } from "./GenericHTMLNode.js";
+const LexicalGenericHTMLVisitor = {
+  testLexicalNode: $isGenericHTMLNode,
+  visitLexicalNode({ actions, lexicalNode }) {
+    actions.addAndStepInto("mdxJsxTextElement", {
+      name: lexicalNode.getTag(),
+      type: lexicalNode.getNodeType(),
+      attributes: lexicalNode.getAttributes()
+    });
+  },
+  priority: -100
+};
+export {
+  LexicalGenericHTMLVisitor
+};

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

@@ -0,0 +1,160 @@
+import { $isTextNode } from "lexical";
+import { IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT, IS_ITALIC, IS_BOLD, IS_STRIKETHROUGH, IS_HIGHLIGHT, IS_CODE } from "../../FormatConstants.js";
+function isMdastText(mdastNode) {
+  return mdastNode.type === "text";
+}
+const JOINABLE_TAGS = ["u", "span", "sub", "sup"];
+const LexicalTextVisitor = {
+  shouldJoin: (prevNode, currentNode) => {
+    if (["text", "emphasis", "strong", "highlight"].includes(prevNode.type)) {
+      return prevNode.type === currentNode.type;
+    }
+    if (prevNode.type === "mdxJsxTextElement" && // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    currentNode.type === "mdxJsxTextElement" && JOINABLE_TAGS.includes(currentNode.name)) {
+      const currentMdxNode = currentNode;
+      return prevNode.name === currentMdxNode.name && JSON.stringify(prevNode.attributes) === JSON.stringify(currentMdxNode.attributes);
+    }
+    return false;
+  },
+  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();
+    const style = lexicalNode.getStyle();
+    let localParentNode = mdastParent;
+    if (style) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "span",
+        children: [],
+        attributes: [{ type: "mdxJsxAttribute", name: "style", value: style }]
+      });
+    }
+    if (prevFormat & format & IS_UNDERLINE) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "u",
+        children: [],
+        attributes: []
+      });
+    }
+    if (prevFormat & format & IS_SUPERSCRIPT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sup",
+        children: [],
+        attributes: []
+      });
+    }
+    if (prevFormat & format & IS_SUBSCRIPT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sub",
+        children: [],
+        attributes: []
+      });
+    }
+    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_STRIKETHROUGH) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "delete",
+        children: []
+      });
+    }
+    if (prevFormat & format & IS_HIGHLIGHT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "highlight",
+        children: []
+      });
+    }
+    if (format & IS_UNDERLINE && !(prevFormat & IS_UNDERLINE)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "u",
+        children: [],
+        attributes: []
+      });
+    }
+    if (format & IS_SUPERSCRIPT && !(prevFormat & IS_SUPERSCRIPT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sup",
+        children: [],
+        attributes: []
+      });
+    }
+    if (format & IS_SUBSCRIPT && !(prevFormat & IS_SUBSCRIPT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "sub",
+        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_STRIKETHROUGH && !(prevFormat & IS_STRIKETHROUGH)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "delete",
+        children: []
+      });
+    }
+    if (format & IS_HIGHLIGHT && !(prevFormat & IS_HIGHLIGHT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "highlight",
+        children: []
+      });
+    }
+    if (format & IS_CODE) {
+      actions.appendToParent(localParentNode, {
+        type: "inlineCode",
+        value: textContent
+      });
+      return;
+    }
+    actions.appendToParent(localParentNode, {
+      type: "text",
+      value: textContent
+    });
+  }
+};
+export {
+  LexicalTextVisitor,
+  isMdastText
+};

package/dist/plugins/core/MdastBreakVisitor.js

@@ -0,0 +1,10 @@
+import { $createLineBreakNode } from "lexical";
+const MdastBreakVisitor = {
+  testNode: "break",
+  visitNode: function({ lexicalParent }) {
+    lexicalParent.append($createLineBreakNode());
+  }
+};
+export {
+  MdastBreakVisitor
+};

package/dist/plugins/core/MdastFormattingVisitor.js

@@ -0,0 +1,81 @@
+import { IS_ITALIC, IS_BOLD, IS_CODE, IS_STRIKETHROUGH, IS_HIGHLIGHT, IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT } from "../../FormatConstants.js";
+import { $createTextNode } from "lexical";
+function buildFormattingVisitors(tag, format) {
+  return [
+    {
+      testNode: (node) => node.type === "mdxJsxTextElement" && node.name === tag,
+      visitNode({ actions, mdastNode, lexicalParent }) {
+        actions.addFormatting(format);
+        actions.visitChildren(mdastNode, lexicalParent);
+      }
+    },
+    {
+      testNode: (node) => node.type === "html" && node.value === `<${tag}>`,
+      visitNode({ actions, mdastParent }) {
+        actions.addFormatting(format, mdastParent);
+      }
+    },
+    {
+      testNode: (node) => node.type === "html" && node.value === `</${tag}>`,
+      visitNode({ actions, mdastParent }) {
+        actions.removeFormatting(format, mdastParent);
+      }
+    }
+  ];
+}
+const StrikeThroughVisitor = {
+  testNode: "delete",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_STRIKETHROUGH);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+const HighlightVisitor = {
+  testNode: "highlight",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_HIGHLIGHT);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+const MdCodeVisitor = {
+  testNode: "inlineCode",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(actions.getParentFormatting() | IS_CODE));
+  }
+};
+const MdEmphasisVisitor = {
+  testNode: "emphasis",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_ITALIC);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+const MdStrongVisitor = {
+  testNode: "strong",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_BOLD);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+const formattingVisitors = [
+  // emphasis
+  MdEmphasisVisitor,
+  // strong
+  MdStrongVisitor,
+  // underline
+  ...buildFormattingVisitors("u", IS_UNDERLINE),
+  // code
+  ...buildFormattingVisitors("code", IS_CODE),
+  MdCodeVisitor,
+  // strikethrough
+  StrikeThroughVisitor,
+  // highlight
+  HighlightVisitor,
+  // superscript
+  ...buildFormattingVisitors("sup", IS_SUPERSCRIPT),
+  // subscript
+  ...buildFormattingVisitors("sub", IS_SUBSCRIPT)
+];
+export {
+  formattingVisitors
+};