@nkzw/mdx-editor 0.1.0

package/dist/exportMarkdownFromLexical.js

@@ -0,0 +1,262 @@
+import { $isElementNode } from "lexical";
+import { toMarkdown } from "mdast-util-to-markdown";
+import { isMdastHTMLNode } from "./plugins/core/MdastHTMLNode.js";
+import { mergeStyleAttributes } from "./utils/mergeStyleAttributes.js";
+function isParent(node) {
+  return node.children instanceof Array;
+}
+function exportLexicalTreeToMdast({
+  root,
+  visitors,
+  jsxComponentDescriptors,
+  jsxIsAvailable,
+  addImportStatements = true
+}) {
+  let unistRoot = null;
+  const referredComponents = /* @__PURE__ */ new Set();
+  const knownImportSources = /* @__PURE__ */ new Map();
+  visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  visit(root, null);
+  function registerReferredComponent(componentName, importStatement) {
+    referredComponents.add(componentName);
+    if (importStatement) {
+      knownImportSources.set(componentName, { ...importStatement });
+    }
+  }
+  function appendToParent(parentNode, node) {
+    if (unistRoot === null) {
+      unistRoot = node;
+      return unistRoot;
+    }
+    if (!isParent(parentNode)) {
+      throw new Error("Attempting to append children to a non-parent");
+    }
+    const siblings = parentNode.children;
+    const prevSibling = siblings.at(-1);
+    if (prevSibling) {
+      const joinVisitor = visitors.find((visitor) => visitor.shouldJoin?.(prevSibling, node));
+      if (joinVisitor) {
+        const joinedNode = joinVisitor.join(prevSibling, node);
+        siblings.splice(siblings.length - 1, 1, joinedNode);
+        return joinedNode;
+      }
+    }
+    siblings.push(node);
+    return node;
+  }
+  function visitChildren(lexicalNode, parentNode) {
+    lexicalNode.getChildren().forEach((lexicalChild) => {
+      visit(lexicalChild, parentNode);
+    });
+  }
+  function visit(lexicalNode, mdastParent, usedVisitors = null) {
+    const visitor = visitors.find((visitor2, index) => {
+      if (usedVisitors?.has(index)) {
+        return false;
+      }
+      return visitor2.testLexicalNode?.(lexicalNode);
+    });
+    if (!visitor) {
+      throw new Error(`no lexical visitor found for ${lexicalNode.getType()}`, {
+        cause: lexicalNode
+      });
+    }
+    visitor.visitLexicalNode?.({
+      lexicalNode,
+      mdastParent,
+      actions: {
+        addAndStepInto(type, props = {}, hasChildren = true) {
+          const newNode = {
+            type,
+            ...props,
+            ...hasChildren ? { children: [] } : {}
+          };
+          appendToParent(mdastParent, newNode);
+          if ($isElementNode(lexicalNode) && hasChildren) {
+            visitChildren(lexicalNode, newNode);
+          }
+        },
+        appendToParent,
+        visitChildren,
+        visit,
+        registerReferredComponent,
+        nextVisitor() {
+          visit(lexicalNode, mdastParent, (usedVisitors ?? /* @__PURE__ */ new Set()).add(visitors.indexOf(visitor)));
+          return;
+        }
+      }
+    });
+  }
+  if (unistRoot === null) {
+    throw new Error("traversal ended with no root element");
+  }
+  const importsMap = /* @__PURE__ */ new Map();
+  const defaultImportsMap = /* @__PURE__ */ new Map();
+  for (const componentName of referredComponents) {
+    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === componentName) ?? knownImportSources.get(componentName) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
+    if (!descriptor) {
+      throw new Error(`Component ${componentName} is used but not imported`);
+    }
+    if (!descriptor.source) {
+      continue;
+    }
+    if (descriptor.defaultExport) {
+      defaultImportsMap.set(componentName, descriptor.source);
+    } else {
+      const { source } = descriptor;
+      const existing = importsMap.get(source);
+      if (existing) {
+        existing.push(componentName);
+      } else {
+        importsMap.set(source, [componentName]);
+      }
+    }
+  }
+  if (!addImportStatements) {
+    for (const [path, names] of importsMap.entries()) {
+      const cleaned = names.filter((n) => knownImportSources.has(n));
+      if (cleaned.length > 0) {
+        importsMap.set(path, cleaned);
+      } else {
+        importsMap.delete(path);
+      }
+    }
+    for (const key of defaultImportsMap.keys()) {
+      if (!knownImportSources.has(key)) {
+        defaultImportsMap.delete(key);
+      }
+    }
+  }
+  const imports = Array.from(importsMap).map(([source, componentNames]) => {
+    return {
+      type: "mdxjsEsm",
+      value: `import { ${componentNames.join(", ")} } from '${source}'`
+    };
+  });
+  imports.push(
+    ...Array.from(defaultImportsMap).map(([componentName, source]) => {
+      return {
+        type: "mdxjsEsm",
+        value: `import ${componentName} from '${source}'`
+      };
+    })
+  );
+  const typedRoot = unistRoot;
+  const frontmatter = typedRoot.children.find((child) => child.type === "yaml");
+  if (frontmatter) {
+    typedRoot.children.splice(typedRoot.children.indexOf(frontmatter) + 1, 0, ...imports);
+  } else {
+    typedRoot.children.unshift(...imports);
+  }
+  fixWrappingWhitespace(typedRoot, []);
+  collapseNestedHtmlTags(typedRoot);
+  if (!jsxIsAvailable) {
+    convertUnderlineJsxToHtml(typedRoot);
+  }
+  return typedRoot;
+}
+function collapseNestedHtmlTags(node) {
+  if ("children" in node && node.children.length > 0) {
+    if (isMdastHTMLNode(node) && node.children.length === 1) {
+      const onlyChild = node.children[0];
+      if (onlyChild.type === "mdxJsxTextElement" && onlyChild.name === "span") {
+        onlyChild.attributes.forEach((attribute) => {
+          if (attribute.type === "mdxJsxAttribute") {
+            const parentAttribute = node.attributes.find((attr) => attr.type === "mdxJsxAttribute" && attr.name === attribute.name);
+            if (parentAttribute) {
+              if (attribute.name === "className") {
+                const mergedClassesSet = /* @__PURE__ */ new Set([
+                  ...parentAttribute.value.split(" "),
+                  ...attribute.value.split(" ")
+                ]);
+                parentAttribute.value = Array.from(mergedClassesSet).join(" ");
+              } else if (attribute.name === "style") {
+                parentAttribute.value = mergeStyleAttributes(parentAttribute.value, attribute.value);
+              }
+            } else {
+              node.attributes.push(attribute);
+            }
+          }
+        });
+        node.children = onlyChild.children;
+      }
+    }
+    node.children.forEach((child) => {
+      collapseNestedHtmlTags(child);
+    });
+  }
+}
+function convertUnderlineJsxToHtml(node) {
+  if (Object.hasOwn(node, "children")) {
+    const nodeAsParent = node;
+    const newChildren = [];
+    nodeAsParent.children.forEach((child) => {
+      if (child.type === "mdxJsxTextElement" && child.name === "u") {
+        newChildren.push(...[{ type: "html", value: "<u>" }, ...child.children, { type: "html", value: "</u>" }]);
+      } else {
+        newChildren.push(child);
+        convertUnderlineJsxToHtml(child);
+      }
+    });
+    nodeAsParent.children = newChildren;
+  }
+}
+const TRAILING_WHITESPACE_REGEXP = /\s+$/;
+const LEADING_WHITESPACE_REGEXP = /^\s+/;
+function fixWrappingWhitespace(node, parentChain) {
+  if (node.type === "strong" || node.type === "emphasis") {
+    const lastChild = node.children.at(-1);
+    if (lastChild?.type === "text") {
+      const trailingWhitespace = TRAILING_WHITESPACE_REGEXP.exec(lastChild.value);
+      if (trailingWhitespace) {
+        lastChild.value = lastChild.value.replace(TRAILING_WHITESPACE_REGEXP, "");
+        const parent = parentChain.at(-1);
+        if (parent) {
+          parent.children.splice(parent.children.indexOf(node) + 1, 0, {
+            type: "text",
+            value: trailingWhitespace[0]
+          });
+          fixWrappingWhitespace(parent, parentChain.slice(0, -1));
+        }
+      }
+    }
+    const firstChild = node.children.at(0);
+    if (firstChild?.type === "text") {
+      const leadingWhitespace = LEADING_WHITESPACE_REGEXP.exec(firstChild.value);
+      if (leadingWhitespace) {
+        firstChild.value = firstChild.value.replace(LEADING_WHITESPACE_REGEXP, "");
+        const parent = parentChain.at(-1);
+        if (parent) {
+          parent.children.splice(parent.children.indexOf(node), 0, {
+            type: "text",
+            value: leadingWhitespace[0]
+          });
+          fixWrappingWhitespace(parent, parentChain.slice(0, -1));
+        }
+      }
+    }
+  }
+  if ("children" in node && node.children.length > 0) {
+    const nodeAsParent = node;
+    nodeAsParent.children.forEach((child) => {
+      fixWrappingWhitespace(child, [...parentChain, nodeAsParent]);
+    });
+  }
+}
+function exportMarkdownFromLexical({
+  root,
+  toMarkdownOptions,
+  toMarkdownExtensions,
+  visitors,
+  jsxComponentDescriptors,
+  jsxIsAvailable
+}) {
+  return toMarkdown(exportLexicalTreeToMdast({ root, visitors, jsxComponentDescriptors, jsxIsAvailable }), {
+    extensions: toMarkdownExtensions,
+    ...toMarkdownOptions
+  }) + "\n";
+}
+export {
+  exportLexicalTreeToMdast,
+  exportMarkdownFromLexical
+};

package/dist/horizontalRuleShortcut.js

@@ -0,0 +1,37 @@
+import { $createHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { KEY_ENTER_COMMAND, $getSelection, $isRangeSelection, $isTextNode, $isParagraphNode, $isRootOrShadowRoot, COMMAND_PRIORITY_HIGH } from "lexical";
+import { createRootEditorSubscription$ } from "./plugins/core/index.js";
+import { realmPlugin } from "./RealmWithPlugins.js";
+const registerHorizontalRuleOnEnter = (editor) => editor.registerCommand(
+  KEY_ENTER_COMMAND,
+  () => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+      return false;
+    }
+    const textNode = selection.anchor.getNode();
+    const paragraph = textNode.getParent();
+    if (!$isTextNode(textNode) || selection.anchor.offset !== 3 || textNode.getTextContent() !== "---" || !$isParagraphNode(paragraph) || paragraph.getChildrenSize() !== 1 || !$isRootOrShadowRoot(paragraph.getParent())) {
+      return false;
+    }
+    const horizontalRule = $createHorizontalRuleNode();
+    paragraph.clear();
+    if (paragraph.getNextSibling()) {
+      paragraph.replace(horizontalRule);
+    } else {
+      paragraph.insertBefore(horizontalRule);
+    }
+    horizontalRule.selectNext();
+    return true;
+  },
+  COMMAND_PRIORITY_HIGH
+);
+const horizontalRuleOnEnterPlugin = realmPlugin({
+  init(realm) {
+    realm.pub(createRootEditorSubscription$, registerHorizontalRuleOnEnter);
+  }
+});
+export {
+  horizontalRuleOnEnterPlugin,
+  registerHorizontalRuleOnEnter
+};

package/dist/importMarkdownToLexical.js

@@ -0,0 +1,172 @@
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { toMarkdown } from "mdast-util-to-markdown";
+function isParent(node) {
+  return node.children instanceof Array;
+}
+class MarkdownParseError extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.name = "MarkdownParseError";
+    this.cause = cause;
+  }
+}
+class UnrecognizedMarkdownConstructError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "UnrecognizedMarkdownConstructError";
+  }
+}
+function gatherMetadata(mdastNode) {
+  const importsMap = /* @__PURE__ */ new Map();
+  if (mdastNode.type !== "root") {
+    return {
+      importDeclarations: {}
+    };
+  }
+  const importStatements = mdastNode.children.filter((n) => n.type === "mdxjsEsm").filter((n) => n.value.startsWith("import "));
+  importStatements.forEach((imp) => {
+    (imp.data?.estree?.body ?? []).forEach((declaration) => {
+      if (declaration.type !== "ImportDeclaration") {
+        return;
+      }
+      declaration.specifiers.forEach((specifier) => {
+        importsMap.set(specifier.local.name, {
+          source: `${declaration.source.value}`,
+          defaultExport: specifier.type === "ImportDefaultSpecifier"
+        });
+      });
+    });
+  });
+  return {
+    importDeclarations: Object.fromEntries(importsMap.entries())
+  };
+}
+function importMarkdownToLexical({
+  root,
+  markdown,
+  visitors,
+  syntaxExtensions,
+  mdastExtensions,
+  ...descriptors
+}) {
+  let mdastRoot;
+  try {
+    mdastRoot = fromMarkdown(markdown, {
+      extensions: syntaxExtensions,
+      mdastExtensions
+    });
+  } catch (e) {
+    if (e instanceof Error) {
+      throw new MarkdownParseError(`Error parsing markdown: ${e.message}`, e);
+    } else {
+      throw new MarkdownParseError(`Error parsing markdown: ${e}`, e);
+    }
+  }
+  if (mdastRoot.children.length === 0) {
+    mdastRoot.children.push({ type: "paragraph", children: [] });
+  }
+  if (mdastRoot.children.at(-1)?.type !== "paragraph") {
+    mdastRoot.children.push({ type: "paragraph", children: [] });
+  }
+  importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors });
+}
+function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }) {
+  const formattingMap = /* @__PURE__ */ new WeakMap();
+  const styleMap = /* @__PURE__ */ new WeakMap();
+  const metaData = gatherMetadata(mdastRoot);
+  visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  function visitChildren(mdastNode, lexicalParent) {
+    if (!isParent(mdastNode)) {
+      throw new Error("Attempting to visit children of a non-parent");
+    }
+    mdastNode.children.forEach((child) => {
+      visit(child, lexicalParent, mdastNode);
+    });
+  }
+  function visit(mdastNode, lexicalParent, mdastParent, skipVisitors = null) {
+    const visitor = visitors.find((visitor2, index) => {
+      if (skipVisitors?.has(index)) {
+        return false;
+      }
+      if (typeof visitor2.testNode === "string") {
+        return visitor2.testNode === mdastNode.type;
+      }
+      return visitor2.testNode(mdastNode, descriptors);
+    });
+    if (!visitor) {
+      try {
+        throw new UnrecognizedMarkdownConstructError(`Unsupported markdown syntax: ${toMarkdown(mdastNode)}`);
+      } catch (_e) {
+        throw new UnrecognizedMarkdownConstructError(
+          `Parsing of the following markdown structure failed: ${JSON.stringify({
+            type: mdastNode.type,
+            name: "name" in mdastNode ? mdastNode.name : "N/A"
+          })}`
+        );
+      }
+    }
+    visitor.visitNode({
+      //@ts-expect-error root type is glitching
+      mdastNode,
+      lexicalParent,
+      mdastParent,
+      descriptors,
+      metaData,
+      actions: {
+        visitChildren,
+        nextVisitor() {
+          visit(mdastNode, lexicalParent, mdastParent, (skipVisitors ?? /* @__PURE__ */ new Set()).add(visitors.indexOf(visitor)));
+        },
+        addAndStepInto(lexicalNode) {
+          lexicalParent.append(lexicalNode);
+          if (isParent(mdastNode)) {
+            visitChildren(mdastNode, lexicalNode);
+          }
+        },
+        addFormatting(format, node) {
+          if (!node) {
+            if (isParent(mdastNode)) {
+              node = mdastNode;
+            }
+          }
+          if (node) {
+            formattingMap.set(node, format | (formattingMap.get(mdastParent) ?? 0));
+          }
+        },
+        removeFormatting(format, node) {
+          if (!node) {
+            if (isParent(mdastNode)) {
+              node = mdastNode;
+            }
+          }
+          if (node) {
+            formattingMap.set(node, format ^ (formattingMap.get(mdastParent) ?? 0));
+          }
+        },
+        getParentFormatting() {
+          return formattingMap.get(mdastParent) ?? 0;
+        },
+        addStyle(style, node) {
+          if (!node) {
+            if (isParent(mdastNode)) {
+              node = mdastNode;
+            }
+          }
+          if (node) {
+            styleMap.set(node, style);
+          }
+        },
+        getParentStyle() {
+          return styleMap.get(mdastParent) ?? "";
+        }
+      }
+    });
+  }
+  visit(mdastRoot, root, null);
+}
+export {
+  MarkdownParseError,
+  UnrecognizedMarkdownConstructError,
+  importMarkdownToLexical,
+  importMdastTreeToLexical
+};

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import { FocusEvent as FocusEvent_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { LexicalEditor } from 'lexical';
+import { Options } from 'mdast-util-to-markdown';
+import { ReactNode } from 'react';
+import { Realm } from '@mdxeditor/gurx';
+import { RefAttributes } from 'react';
+
+export declare const horizontalRuleOnEnterPlugin: (params?: unknown) => RealmPlugin;
+
+export declare const MarkdownEditor: ForwardRefExoticComponent<MarkdownEditorProps & RefAttributes<MarkdownEditorHandle>>;
+
+export declare type MarkdownEditorColorScheme = 'dark' | 'inherit' | 'light' | 'system';
+
+export declare type MarkdownEditorDensity = 'compact' | 'document';
+
+export declare type MarkdownEditorHandle = {
+    focus: (options?: {
+        defaultSelection?: 'rootStart' | 'rootEnd';
+        preventScroll?: boolean;
+    }) => void;
+    getMarkdown: () => string;
+    getSelectionMarkdown: () => string;
+    insertMarkdown: (markdown: string) => void;
+    setMarkdown: (markdown: string) => void;
+};
+
+export declare type MarkdownEditorProps = {
+    additionalPlugins?: RealmPlugin[];
+    ariaLabel?: string;
+    autoFocus?: boolean | {
+        defaultSelection?: 'rootStart' | 'rootEnd';
+        preventScroll?: boolean;
+    };
+    className?: string;
+    colorScheme?: MarkdownEditorColorScheme;
+    contentClassName?: string;
+    defaultValue?: string;
+    density?: MarkdownEditorDensity;
+    minHeight?: number | string;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (markdown: string) => void;
+    onError?: (error: Error) => void;
+    onFocus?: (event: FocusEvent_2<HTMLDivElement>) => void;
+    onHeightChange?: (height: number) => void;
+    onKeyDown?: (event: KeyboardEvent_2<HTMLDivElement>) => void;
+    onNavigate?: (target: string) => void;
+    onOpenExternalLink?: (href: string) => void;
+    overlayContainer?: HTMLElement | null;
+    placeholder?: ReactNode;
+    readOnly?: boolean;
+    resolveLink?: (href: string) => string | null;
+    spellCheck?: boolean;
+    toMarkdownOptions?: ToMarkdownOptions;
+    value?: string;
+    variant?: MarkdownEditorVariant;
+};
+
+export declare type MarkdownEditorVariant = 'card' | 'embedded' | 'plain';
+
+/**
+ * A plugin for the editor.
+ * @group Core
+ */
+declare interface RealmPlugin {
+    init?: (realm: Realm) => void;
+    update?: (realm: Realm) => void;
+    postInit?: (realm: Realm) => void;
+}
+
+export declare const registerHorizontalRuleOnEnter: (editor: LexicalEditor) => () => void;
+
+declare interface ToMarkdownOptions extends Options {
+}
+
+export { }
+
+
+declare module 'micromark-util-types' {
+    interface TokenTypeMap {
+        comment: 'comment';
+        commentEnd: 'commentEnd';
+        data: 'data';
+    }
+}

package/dist/index.js

@@ -0,0 +1,8 @@
+/* empty css                  */
+import { MarkdownEditor } from "./MarkdownEditor.js";
+import { horizontalRuleOnEnterPlugin, registerHorizontalRuleOnEnter } from "./horizontalRuleShortcut.js";
+export {
+  MarkdownEditor,
+  horizontalRuleOnEnterPlugin,
+  registerHorizontalRuleOnEnter
+};

package/dist/jsx-editors/GenericJsxEditor.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMdastNodeUpdater, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
+import { PropertyPopover } from "../plugins/core/PropertyPopover.js";
+import styles from "../styles/ui.module.css.js";
+const isExpressionValue = (value) => {
+  if (value !== null && typeof value === "object" && "type" in value && "value" in value && typeof value.value === "string") {
+    return true;
+  }
+  return false;
+};
+const isStringValue = (value) => typeof value === "string";
+const isMdxJsxAttribute = (value) => {
+  if (value.type === "mdxJsxAttribute" && typeof value.name === "string") {
+    return true;
+  }
+  return false;
+};
+const GenericJsxEditor = ({ mdastNode, descriptor, PropertyEditor }) => {
+  const updateMdastNode = useMdastNodeUpdater();
+  const properties = React.useMemo(
+    () => descriptor.props.reduce((acc, { name }) => {
+      const attribute = mdastNode.attributes.find((attr) => isMdxJsxAttribute(attr) ? attr.name === name : false);
+      if (attribute) {
+        if (isExpressionValue(attribute.value)) {
+          acc[name] = attribute.value.value;
+          return acc;
+        }
+        if (isStringValue(attribute.value)) {
+          acc[name] = attribute.value;
+          return acc;
+        }
+      }
+      acc[name] = "";
+      return acc;
+    }, {}),
+    [mdastNode, descriptor]
+  );
+  const onChange = React.useCallback(
+    (values) => {
+      const updatedAttributes = Object.entries(values).reduce((acc, [name, value]) => {
+        if (value === "") {
+          return acc;
+        }
+        const property = descriptor.props.find((prop) => prop.name === name);
+        if (property?.type === "expression") {
+          acc.push({
+            type: "mdxJsxAttribute",
+            name,
+            value: { type: "mdxJsxAttributeValueExpression", value }
+          });
+          return acc;
+        }
+        acc.push({
+          type: "mdxJsxAttribute",
+          name,
+          value
+        });
+        return acc;
+      }, []);
+      updateMdastNode({ attributes: updatedAttributes });
+    },
+    [mdastNode, updateMdastNode, descriptor]
+  );
+  const PropertyEditorComponent = PropertyEditor ?? PropertyPopover;
+  const shouldRenderComponentName = descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === "flow";
+  return /* @__PURE__ */ jsxs("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor, children: [
+    shouldRenderComponentName ? /* @__PURE__ */ jsx("span", { className: styles.genericComponentName, children: mdastNode.name ?? "Fragment" }) : null,
+    descriptor.props.length > 0 ? /* @__PURE__ */ jsx(PropertyEditorComponent, { properties, title: mdastNode.name ?? "", onChange }) : null,
+    descriptor.hasChildren ? /* @__PURE__ */ jsx(
+      NestedLexicalEditor,
+      {
+        block: descriptor.kind === "flow",
+        getContent: (node) => node.children,
+        getUpdatedMdastNode: (mdastNode2, children) => {
+          return { ...mdastNode2, children };
+        }
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: styles.genericComponentName, children: mdastNode.name })
+  ] });
+};
+export {
+  GenericJsxEditor
+};