@mdxeditor/editor 0.8.0 → 0.10.0-alpha.1

package/README.md

@@ -1,11 +1,11 @@
-# MDX Editor
+# MDXEditor
 
 ![npm](https://img.shields.io/npm/v/@mdxeditor/editor)
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@mdxeditor/editor)
 
 > Because markdown editing can be even more delightful.
 
-MDX Editor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. [See the live demo](https://mdxeditor.dev/editor/demo) that has the default features turned on. It supports most (if not all) of the markdown syntax, including tables, images, code blocks, etc. It also allows users to edit JSX components with a dedicated property editor.
+MDXEditor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. [See the live demo](https://mdxeditor.dev/editor/demo) that has the default features turned on. It supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a dedicated property editor.
 
 ```jsx
 import {MDXEditor} from '@mdxeditor/editor';

package/dist/FormatConstants.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_FORMAT: 0;
+export declare const IS_BOLD: 1;
+export declare const IS_ITALIC: 2;
+export declare const IS_STRIKETHROUGH: 4;
+export declare const IS_UNDERLINE: 8;
+export declare const IS_CODE: 16;
+export declare const IS_SUBSCRIPT: 32;
+export declare const IS_SUPERSCRIPT: 64;
+export declare const IS_HIGHLIGHT: 128;

package/dist/FormatConstants.js

@@ -0,0 +1,10 @@
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+const IS_UNDERLINE = 8;
+const IS_CODE = 16;
+export {
+  IS_BOLD,
+  IS_CODE,
+  IS_ITALIC,
+  IS_UNDERLINE
+};

package/dist/MDXEditor.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { RealmPluginInitializer } from './gurx';
+import { ToMarkdownOptions } from './exportMarkdownFromLexical';
+export interface MDXEditorProps {
+    contentEditableClassName?: string;
+    markdown: string;
+    onChange?: (markdown: string) => void;
+    toMarkdownOptions?: ToMarkdownOptions;
+    plugins?: React.ComponentProps<typeof RealmPluginInitializer>['plugins'];
+    className?: string;
+}
+/**
+ * The interface for the {@link MDXEditor} object reference.
+ *
+ * @example
+ * ```tsx
+ *  const mdxEditorRef = React.useRef<MDXEditorMethods>(null)
+ *  <MDXEditor ref={mdxEditorRef} />
+ * ```
+ */
+export interface MDXEditorMethods {
+    /**
+     * Gets the current markdown value.
+     */
+    getMarkdown: () => string;
+    /**
+     * Updates the markdown value of the editor.
+     */
+    setMarkdown: (value: string) => void;
+}
+export declare const MDXEditor: React.ForwardRefExoticComponent<MDXEditorProps & React.RefAttributes<MDXEditorMethods>>;

package/dist/MDXEditor.js

@@ -0,0 +1,105 @@
+import React__default from "react";
+import { corePlugin, corePluginHooks } from "./plugins/core/index.js";
+import { lexicalTheme } from "./styles/lexicalTheme.js";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import styles from "./styles/ui.module.css.js";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import classNames from "classnames";
+import { noop } from "./utils/fp.js";
+import { RealmPluginInitializer } from "./gurx/react.js";
+const LexicalProvider = ({ children }) => {
+  const [initialRootEditorState, nodes] = corePluginHooks.useEmitterValues("initialRootEditorState", "usedLexicalNodes");
+  return /* @__PURE__ */ React__default.createElement(
+    LexicalComposer,
+    {
+      initialConfig: {
+        editorState: initialRootEditorState,
+        namespace: "MDXEditor",
+        theme: lexicalTheme,
+        nodes,
+        onError: (error) => {
+          throw error;
+        }
+      }
+    },
+    children
+  );
+};
+const RichTextEditor = () => {
+  const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers] = corePluginHooks.useEmitterValues(
+    "contentEditableClassName",
+    "composerChildren",
+    "topAreaChildren",
+    "editorWrappers"
+  );
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement(
+    RichTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { className: classNames(styles.contentEditable, contentEditableClassName) }),
+      placeholder: /* @__PURE__ */ React__default.createElement("div", null),
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  )), composerChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
+};
+const DEFAULT_MARKDOWN_OPTIONS = {
+  listItemIndent: "one"
+};
+const RenderRecurisveWrappers = ({
+  wrappers,
+  children
+}) => {
+  if (wrappers.length === 0) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+  }
+  const Wrapper = wrappers[0];
+  return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: wrappers.slice(1) }, children));
+};
+const EditorRootElement = ({ children, className }) => {
+  const editorRootElementRef = React__default.useRef(null);
+  const setEditorRootElementRef = corePluginHooks.usePublisher("editorRootElementRef");
+  React__default.useEffect(() => {
+    setEditorRootElementRef(editorRootElementRef);
+  }, [editorRootElementRef, setEditorRootElementRef]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className), ref: editorRootElementRef }, children);
+};
+const Methods = ({ mdxRef }) => {
+  const realm = corePluginHooks.useRealmContext();
+  React__default.useImperativeHandle(
+    mdxRef,
+    () => {
+      return {
+        getMarkdown: () => {
+          return realm.getKeyValue("markdown");
+        },
+        setMarkdown: (markdown) => {
+          realm.pubKey("setMarkdown", markdown);
+        }
+      };
+    },
+    [realm]
+  );
+  return null;
+};
+const MDXEditor = React__default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React__default.createElement(
+    RealmPluginInitializer,
+    {
+      plugins: [
+        corePlugin({
+          contentEditableClassName: props.contentEditableClassName ?? "",
+          initialMarkdown: props.markdown,
+          onChange: props.onChange ?? noop,
+          toMarkdownOptions: props.toMarkdownOptions ?? DEFAULT_MARKDOWN_OPTIONS
+        }),
+        ...props.plugins || []
+      ]
+    },
+    /* @__PURE__ */ React__default.createElement(EditorRootElement, null, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
+    /* @__PURE__ */ React__default.createElement(Methods, { mdxRef: ref })
+  );
+});
+export {
+  MDXEditor
+};

package/dist/directive-editors/AdmonitionDirectiveDescriptor.d.ts

@@ -0,0 +1,4 @@
+import { DirectiveDescriptor } from '../plugins/directives';
+export declare const ADMONITION_TYPES: readonly ["note", "tip", "danger", "info", "caution"];
+export type AdmonitionKind = (typeof ADMONITION_TYPES)[number];
+export declare const AdmonitionDirectiveDescriptor: DirectiveDescriptor;

package/dist/directive-editors/AdmonitionDirectiveDescriptor.js

@@ -0,0 +1,29 @@
+import React__default from "react";
+import { useNestedEditorContext, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
+const ADMONITION_TYPES = ["note", "tip", "danger", "info", "caution"];
+const AdmonitionDirectiveDescriptor = {
+  name: "admonition",
+  attributes: [],
+  hasChildren: true,
+  testNode(node) {
+    return ADMONITION_TYPES.includes(node.name);
+  },
+  Editor({ mdastNode }) {
+    const {
+      config: { theme },
+      focusEmitter
+    } = useNestedEditorContext();
+    return /* @__PURE__ */ React__default.createElement("div", { className: theme.admonition[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
+      NestedLexicalEditor,
+      {
+        focusEmitter,
+        getContent: (node) => node.children,
+        getUpdatedMdastNode: (mdastNode2, children) => ({ ...mdastNode2, children })
+      }
+    ));
+  }
+};
+export {
+  ADMONITION_TYPES,
+  AdmonitionDirectiveDescriptor
+};

package/dist/directive-editors/GenericDirectiveEditor.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DirectiveEditorProps } from '../plugins/directives';
+export declare const GenericDirectiveEditor: React.FC<DirectiveEditorProps>;

package/dist/directive-editors/GenericDirectiveEditor.js

@@ -0,0 +1,32 @@
+import React__default 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 GenericDirectiveEditor = ({ mdastNode, descriptor }) => {
+  const updateMdastNode = useMdastNodeUpdater();
+  const properties = React__default.useMemo(() => {
+    return descriptor.attributes.reduce((acc, attributeName) => {
+      acc[attributeName] = (mdastNode.attributes || {})[attributeName] || "";
+      return acc;
+    }, {});
+  }, [mdastNode, descriptor]);
+  const onChange = React__default.useCallback(
+    (values) => {
+      updateMdastNode({ attributes: Object.fromEntries(Object.entries(values).filter(([, value]) => value !== "")) });
+    },
+    [updateMdastNode]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: mdastNode.type === "textDirective" ? styles.inlineEditor : styles.blockEditor }, descriptor.attributes.length == 0 && descriptor.hasChildren && mdastNode.type !== "textDirective" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name) : null, descriptor.attributes.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name || "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
+    NestedLexicalEditor,
+    {
+      block: mdastNode.type === "containerDirective",
+      getContent: (node) => node.children,
+      getUpdatedMdastNode: (mdastNode2, children) => {
+        return { ...mdastNode2, children };
+      }
+    }
+  ) : /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name));
+};
+export {
+  GenericDirectiveEditor
+};

package/dist/exportMarkdownFromLexical.d.ts

@@ -0,0 +1,114 @@
+import { LexicalNode, RootNode as LexicalRootNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
+import type { JsxComponentDescriptor } from './plugins/jsx';
+export type { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
+/**
+ * A set of covenience utilities to manipulate the mdast tree when processing lexical nodes.
+ */
+export interface LexicalVisitActions<T extends LexicalNode> {
+    /**
+     * Iterate over the immediate children of a lexical node with the given mdast node as a parent.
+     */
+    visitChildren(node: T, mdastParent: Mdast.Parent): void;
+    /**
+     * Create a new mdast node with the given type, and props.
+     * Iterate over the immediate children of the current lexical node with the new mdast node as a parent.
+     * @param hasChildren - true by default. Pass false to skip iterating over the lexical node children.
+     */
+    addAndStepInto(type: string, props?: Record<string, unknown>, hasChildren?: boolean): void;
+    /**
+     * Append a new mdast node to a parent node.
+     * @param parentNode - the mdast parent node to append the new node to.
+     * @param node - the mdast node to append.
+     */
+    appendToParent<T extends Mdast.Parent>(parentNode: T, node: T['children'][number]): T['children'][number] | Mdast.Root;
+    /**
+     * Used when processing JSX nodes so that later, the correct import statement can be added to the document.
+     * @param componentName - the name of the component that has to be imported.
+     * @see {@link JsxComponentDescriptor}
+     */
+    registerReferredComponent(componentName: string): void;
+}
+/**
+ * The params passed to the {@link LexicalExportVisitor.visitLexicalNode} method.
+ */
+export interface LexicalNodeVisitParams<T extends LexicalNode> {
+    /**
+     * The lexical node that is being visited.
+     */
+    lexicalNode: T;
+    /**
+     * The mdast parent node that the result of the lexical node conversion should be appended to.
+     */
+    mdastParent: Mdast.Parent;
+    /**
+     * A set of actions that can be used to manipulate the mdast tree.
+     * These are "convenience" utilities that avoid the repetitive boilerplate of creating mdast nodes.
+     */
+    actions: LexicalVisitActions<T>;
+}
+/**
+ * Implement this interface in order to process mdast node(s) into a lexical tree.
+ * This is part of the process that converts the editor contents to markdown.
+ */
+export interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.Content> {
+    /**
+     * Return true if the given node is of the type that this visitor can process.
+     * You can safely use the node type guard functions (as in $isParagraphNode, $isLinkNode, etc.) here.
+     */
+    testLexicalNode?(lexicalNode: LexicalNode): lexicalNode is LN;
+    /**
+     * Process the given node and manipulate the mdast tree accordingly.
+     * @see {@link LexicalNodeVisitParams} and {@link LexicalVisitActions} for more information.
+     */
+    visitLexicalNode?(params: LexicalNodeVisitParams<LN>): void;
+    /**
+     * Return true if the current node should be joined with the previous node.
+     * This is necessary due to some inconsistencies between the lexical tree and the mdast tree when it comes to formatting.
+     */
+    shouldJoin?(prevNode: Mdast.Content, currentNode: UN): boolean;
+    /**
+     * Join the current node with the previous node, returning the resulting new node
+     * For this to be called by the tree walk, shouldJoin must return true.
+     */
+    join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
+}
+export type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
+export interface ExportLexicalTreeOptions {
+    root: LexicalRootNode;
+    visitors: LexicalVisitor[];
+    jsxComponentDescriptors: JsxComponentDescriptor[];
+    jsxIsAvailable: boolean;
+}
+export declare function exportLexicalTreeToMdast({ root, visitors, jsxComponentDescriptors, jsxIsAvailable }: ExportLexicalTreeOptions): Mdast.Root;
+export type ToMarkdownExtension = NonNullable<ToMarkdownOptions['extensions']>[number];
+export interface ExportMarkdownFromLexicalOptions extends ExportLexicalTreeOptions {
+    visitors: LexicalVisitor[];
+    /**
+     * the markdown extensions to use
+     */
+    toMarkdownExtensions: ToMarkdownExtension[];
+    /**
+     * The options to pass to `toMarkdown`
+     */
+    toMarkdownOptions: ToMarkdownOptions;
+}
+/**
+ * Configures how the lexical tree is converted to a mdast tree and then to markdown.
+ */
+export interface LexicalConvertOptions {
+    /**
+     * The visitors to use when processing the lexical tree
+     */
+    visitors?: LexicalVisitor[];
+    /**
+     * the markdown extensions to use
+     */
+    toMarkdownExtensions?: ToMarkdownExtension[];
+    /**
+     * The options to pass to `toMarkdown`
+     */
+    toMarkdownOptions?: ToMarkdownOptions;
+}
+export declare function exportMarkdownFromLexical({ root, toMarkdownOptions, toMarkdownExtensions, visitors, jsxComponentDescriptors, jsxIsAvailable }: ExportMarkdownFromLexicalOptions): string;

package/dist/exportMarkdownFromLexical.js

@@ -0,0 +1,199 @@
+import { $isElementNode } from "lexical";
+import { toMarkdown } from "mdast-util-to-markdown";
+function isParent(node) {
+  return node.children instanceof Array;
+}
+function exportLexicalTreeToMdast({
+  root,
+  visitors,
+  jsxComponentDescriptors,
+  jsxIsAvailable
+}) {
+  let unistRoot = null;
+  const referredComponents = /* @__PURE__ */ new Set();
+  visit(root, null);
+  function registerReferredComponent(componentName) {
+    referredComponents.add(componentName);
+  }
+  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) => {
+        var _a;
+        return (_a = visitor.shouldJoin) == null ? void 0 : _a.call(visitor, 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) {
+    var _a;
+    const visitor = visitors.find((visitor2) => {
+      var _a2;
+      return (_a2 = visitor2.testLexicalNode) == null ? void 0 : _a2.call(visitor2, lexicalNode);
+    });
+    if (!visitor) {
+      throw new Error(`no lexical visitor found for ${lexicalNode.getType()}`, {
+        cause: lexicalNode
+      });
+    }
+    (_a = visitor.visitLexicalNode) == null ? void 0 : _a.call(visitor, {
+      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,
+        registerReferredComponent
+      }
+    });
+  }
+  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);
+    if (!descriptor) {
+      throw new Error(`Component ${componentName} is used but not imported`);
+    }
+    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]);
+      }
+    }
+  }
+  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, []);
+  if (!jsxIsAvailable) {
+    convertUnderlineJsxToHtml(typedRoot);
+  }
+  return typedRoot;
+}
+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 == null ? void 0 : lastChild.type) === "text") {
+      const trailingWhitespace = lastChild.value.match(TRAILING_WHITESPACE_REGEXP);
+      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 == null ? void 0 : firstChild.type) === "text") {
+      const leadingWhitespace = firstChild.value.match(LEADING_WHITESPACE_REGEXP);
+      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 (Object.hasOwn(node, "children")) {
+    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
+  });
+}
+export {
+  exportLexicalTreeToMdast,
+  exportMarkdownFromLexical
+};

package/dist/gurx/index.d.ts

@@ -0,0 +1,3 @@
+export * from './realm';
+export * from './react';
+export * from './realmFactory';