@mdxeditor/editor 0.9.0 → 0.10.0-alpha.2

package/dist/index.js

@@ -1,74 +1,135 @@
-import { d, g, j, l, m, x, p, w, f, h, k, $, n, y, q, v, A, C, F, I, J, L, M, b, o, r, T, z, c } from "./index-ce0832cc.js";
-import { AdmonitionKind } from "lexical";
-import "@lexical/react/LexicalComposer";
-import "@lexical/react/LexicalContentEditable";
-import "@lexical/react/LexicalErrorBoundary";
-import "@lexical/react/LexicalHorizontalRulePlugin";
-import "@lexical/react/LexicalLinkPlugin";
-import "@lexical/react/LexicalListPlugin";
-import "@lexical/react/LexicalRichTextPlugin";
-import "@lexical/react/LexicalTabIndentationPlugin";
-import "classnames";
-import "react";
-import "@lexical/code";
-import "@lexical/link";
-import "@lexical/list";
-import "@lexical/react/LexicalHorizontalRuleNode";
-import "@lexical/rich-text";
-import "mdast-util-directive";
-import "mdast-util-from-markdown";
-import "mdast-util-frontmatter";
-import "mdast-util-gfm-table";
-import "mdast-util-mdx";
-import "micromark-extension-directive";
-import "micromark-extension-frontmatter";
-import "micromark-extension-gfm-table";
-import "micromark-extension-mdxjs";
-import "@lexical/utils";
-import "@lexical/react/LexicalComposerContext";
-import "@lexical/selection";
-import "@lexical/react/LexicalHistoryPlugin";
-import "mdast-util-to-markdown";
-import "@radix-ui/react-popover";
-import "@radix-ui/react-tooltip";
-import "downshift";
-import "@lexical/markdown";
-import "@lexical/react/LexicalMarkdownShortcutPlugin";
-import "react-diff-view";
-import "unidiff";
-import "@radix-ui/react-toolbar";
-import "@radix-ui/react-select";
-import "@radix-ui/react-dialog";
-import "@lexical/react/LexicalNestedComposer";
+import "./styles/globals.css.js";
+import { MDXEditor } from "./MDXEditor.js";
+import { headingsPlugin, headingsSystem } from "./plugins/headings/index.js";
+import { thematicBreakPlugin, thematicBreakPluginHooks, thematicBreakSystem } from "./plugins/thematic-break/index.js";
+import { listsPlugin, listsPluginHooks, listsSystem } from "./plugins/lists/index.js";
+import { tablePlugin, tablePluginHooks, tableSystem } from "./plugins/table/index.js";
+import { linkPlugin, linkSystem } from "./plugins/link/index.js";
+import { INSERT_IMAGE_COMMAND, imagePlugin, imagePluginHooks, imageSystem } from "./plugins/image/index.js";
+import { frontmatterPlugin, frontmatterPluginHooks, frontmatterSystem } from "./plugins/frontmatter/index.js";
+import { quotePlugin, quotePluginHooks } from "./plugins/quote/index.js";
+import { jsxPlugin, jsxPluginHooks, jsxSystem } from "./plugins/jsx/index.js";
+import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
+import { sandpackPlugin, sandpackPluginHooks, sandpackSystem } from "./plugins/sandpack/index.js";
+import { codeMirrorHooks, codeMirrorPlugin, codeMirrorSystem } from "./plugins/codemirror/index.js";
+import { codeBlockPlugin, codeBlockPluginHooks, codeBlockSystem } from "./plugins/codeblock/index.js";
+import { directivesPlugin, directivesPluginHooks, directivesSystem } from "./plugins/directives/index.js";
+import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-editors/AdmonitionDirectiveDescriptor.js";
+import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
+import { linkDialogPlugin, linkDialogPluginHooks } from "./plugins/link-dialog/index.js";
+import { toolbarPlugin, toolbarPluginHooks, toolbarSystem } from "./plugins/toolbar/index.js";
+import { diffSourcePlugin, diffSourcePluginHooks, diffSourceSystem } from "./plugins/diff-source/index.js";
+import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
+import { BlockTypeSelect } from "./plugins/toolbar/components/BlockTypeSelect.js";
+import { BoldItalicUnderlineToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
+import { ChangeAdmonitionType } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
+import { ChangeCodeMirrorLanguage } from "./plugins/toolbar/components/ChangeCodeMirrorLanguage.js";
+import { CodeToggle } from "./plugins/toolbar/components/CodeToggle.js";
+import { CreateLink } from "./plugins/toolbar/components/CreateLink.js";
+import { DiffSourceToggleWrapper } from "./plugins/toolbar/components/DiffSourceToggleWrapper.js";
+import { InsertAdmonition } from "./plugins/toolbar/components/InsertAdmonition.js";
+import { InsertCodeBlock } from "./plugins/toolbar/components/InsertCodeBlock.js";
+import { InsertFrontmatter } from "./plugins/toolbar/components/InsertFrontmatter.js";
+import { InsertImage } from "./plugins/toolbar/components/InsertImage.js";
+import { InsertSandpack } from "./plugins/toolbar/components/InsertSandpack.js";
+import { InsertTable } from "./plugins/toolbar/components/InsertTable.js";
+import { InsertThematicBreak } from "./plugins/toolbar/components/InsertThematicBreak.js";
+import { ListsToggle } from "./plugins/toolbar/components/ListsToggle.js";
+import { ShowSandpackInfo } from "./plugins/toolbar/components/ShowSandpackInfo.js";
+import { UndoRedo } from "./plugins/toolbar/components/UndoRedo.js";
+import { KitchenSinkToolbar } from "./plugins/toolbar/components/KitchenSinkToolbar.js";
+import { Button, ButtonOrDropdownButton, ButtonWithTooltip, ConditionalContents, MultipleChoiceToggleGroup, Root, Separator, SingleChoiceToggleGroup, SingleToggleGroup, ToggleSingleGroupWithItem, ToolbarToggleItem } from "./plugins/toolbar/primitives/toolbar.js";
+import { DialogButton } from "./plugins/toolbar/primitives/DialogButton.js";
+import { TooltipWrap } from "./plugins/toolbar/primitives/TooltipWrap.js";
+import { Select, SelectButtonTrigger, SelectContent, SelectItem, SelectTrigger } from "./plugins/toolbar/primitives/select.js";
+import { useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
 export {
-  d as $createAdmonitionNode,
-  g as $createCodeBlockNode,
-  j as $createFrontmatterNode,
-  l as $createImageNode,
-  m as $createJsxNode,
-  x as $createLeafDirectiveNode,
-  p as $createSandpackNode,
-  w as $createTableNode,
-  f as $isAdmonitionNode,
-  h as $isCodeBlockNode,
-  k as $isFrontmatterNode,
-  $ as $isImageNode,
-  n as $isJsxNode,
-  y as $isLeafDirectiveNode,
-  q as $isSandpackNode,
-  v as $isTableNode,
-  AdmonitionKind,
-  A as AdmonitionNode,
-  C as CodeBlockNode,
-  F as FrontmatterNode,
-  I as ImageNode,
-  J as JsxNode,
-  L as LeafDirectiveNode,
-  M as MDXEditor,
-  b as NestedEditor,
-  o as SandpackNode,
-  r as TableNode,
-  T as ToolbarComponents,
-  z as defaultMdxOptionValues,
-  c as useMdastNodeUpdater
+  ADMONITION_TYPES,
+  AdmonitionDirectiveDescriptor,
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  Button,
+  ButtonOrDropdownButton,
+  ButtonWithTooltip,
+  ChangeAdmonitionType,
+  ChangeCodeMirrorLanguage,
+  CodeToggle,
+  ConditionalContents,
+  CreateLink,
+  DialogButton,
+  DiffSourceToggleWrapper,
+  GenericDirectiveEditor,
+  GenericJsxEditor,
+  INSERT_IMAGE_COMMAND,
+  InsertAdmonition,
+  InsertCodeBlock,
+  InsertFrontmatter,
+  InsertImage,
+  InsertSandpack,
+  InsertTable,
+  InsertThematicBreak,
+  KitchenSinkToolbar,
+  ListsToggle,
+  MDXEditor,
+  MultipleChoiceToggleGroup,
+  Root,
+  Select,
+  SelectButtonTrigger,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Separator,
+  ShowSandpackInfo,
+  SingleChoiceToggleGroup,
+  SingleToggleGroup,
+  ToggleSingleGroupWithItem,
+  ToolbarToggleItem,
+  TooltipWrap,
+  UndoRedo,
+  codeBlockPlugin,
+  codeBlockPluginHooks,
+  codeBlockSystem,
+  codeMirrorHooks,
+  codeMirrorPlugin,
+  codeMirrorSystem,
+  diffSourcePlugin,
+  diffSourcePluginHooks,
+  diffSourceSystem,
+  directivesPlugin,
+  directivesPluginHooks,
+  directivesSystem,
+  frontmatterPlugin,
+  frontmatterPluginHooks,
+  frontmatterSystem,
+  headingsPlugin,
+  headingsSystem,
+  imagePlugin,
+  imagePluginHooks,
+  imageSystem,
+  jsxPlugin,
+  jsxPluginHooks,
+  jsxSystem,
+  linkDialogPlugin,
+  linkDialogPluginHooks,
+  linkPlugin,
+  linkSystem,
+  listsPlugin,
+  listsPluginHooks,
+  listsSystem,
+  markdownShortcutPlugin,
+  quotePlugin,
+  quotePluginHooks,
+  sandpackPlugin,
+  sandpackPluginHooks,
+  sandpackSystem,
+  tablePlugin,
+  tablePluginHooks,
+  tableSystem,
+  thematicBreakPlugin,
+  thematicBreakPluginHooks,
+  thematicBreakSystem,
+  toolbarPlugin,
+  toolbarPluginHooks,
+  toolbarSystem,
+  useCodeBlockEditorContext
 };

package/dist/jsx-editors/GenericJsxEditor.d.ts

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

package/dist/jsx-editors/GenericJsxEditor.js

@@ -0,0 +1,56 @@
+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 GenericJsxEditor = ({ mdastNode, descriptor }) => {
+  const updateMdastNode = useMdastNodeUpdater();
+  const properties = React__default.useMemo(() => {
+    return descriptor.props.reduce((acc, descriptor2) => {
+      const attribute = mdastNode.attributes.find((attr) => attr.name === descriptor2.name);
+      if (attribute) {
+        acc[descriptor2.name] = attribute.value;
+      } else {
+        acc[descriptor2.name] = "";
+      }
+      return acc;
+    }, {});
+  }, [mdastNode, descriptor]);
+  const onChange = React__default.useCallback(
+    (values) => {
+      const newAttributes = mdastNode.attributes.slice();
+      Object.entries(values).forEach(([key, value]) => {
+        const attributeToUpdate = newAttributes.find((attr) => attr.name === key);
+        if (value === "") {
+          if (attributeToUpdate) {
+            newAttributes.splice(newAttributes.indexOf(attributeToUpdate), 1);
+          }
+        } else {
+          if (attributeToUpdate) {
+            attributeToUpdate.value = value;
+          } else {
+            newAttributes.push({
+              type: "mdxJsxAttribute",
+              name: key,
+              value
+            });
+          }
+        }
+      });
+      updateMdastNode({ attributes: newAttributes });
+    },
+    [mdastNode, updateMdastNode]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor }, descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === "flow" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name) : null, descriptor.props.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name || "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
+    NestedLexicalEditor,
+    {
+      block: descriptor.kind === "flow",
+      getContent: (node) => node.children,
+      getUpdatedMdastNode: (mdastNode2, children) => {
+        return { ...mdastNode2, children };
+      }
+    }
+  ) : /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name));
+};
+export {
+  GenericJsxEditor
+};

package/dist/node_modules/react-diff-view/style/index.css.js

@@ -0,0 +1,4 @@
+const index = "";
+export {
+  index as default
+};

package/dist/plugins/codeblock/CodeBlockNode.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { CodeBlockEditorProps } from '.';
+/**
+ * The options necessary to construct a new code block node.
+ */
+export interface CreateCodeBlockNodeOptions {
+    /**
+     * The code contents of the block.
+     */
+    code: string;
+    /**
+     * The language of the code block (i.e. `js`, `jsx`, etc.). This is used for syntax highlighting.
+     */
+    language: string;
+    /**
+     * The additional meta data of the block.
+     */
+    meta: string;
+}
+/**
+ * A serialized representation of an {@link CodeBlockNode}.
+ */
+export type SerializedCodeBlockNode = Spread<CreateCodeBlockNodeOptions & {
+    type: 'codeblock';
+    version: 1;
+}, SerializedLexicalNode>;
+/**
+ * A lexical node that represents a fenced code block. Use {@link "$createCodeBlockNode"} to construct one.
+ */
+export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
+    __code: string;
+    __meta: string;
+    __language: string;
+    __focusEmitter: {
+        publish: () => void; /**
+         * The code contents of the block.
+         */
+        subscribe: (cb: () => void) => void;
+    };
+    static getType(): string;
+    static clone(node: CodeBlockNode): CodeBlockNode;
+    static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode;
+    constructor(code: string, language: string, meta: string, key?: NodeKey);
+    exportJSON(): SerializedCodeBlockNode;
+    createDOM(_config: EditorConfig): HTMLDivElement;
+    updateDOM(): false;
+    getCode(): string;
+    getMeta(): string;
+    getLanguage(): string;
+    setCode: (code: string) => void;
+    setMeta: (meta: string) => void;
+    setLanguage: (language: string) => void;
+    select: () => void;
+    decorate(editor: LexicalEditor): JSX.Element;
+}
+interface CodeBlockEditorContainerProps extends CodeBlockEditorProps {
+    /** The Lexical editor that contains the node */
+    parentEditor: LexicalEditor;
+    /** The Lexical node that is being edited */
+    codeBlockNode: CodeBlockNode;
+}
+/**
+ * A set of functions that modify the underlying code block node. Get this with the {@link useCodeBlockEditorContext} hook.
+ */
+export interface CodeBlockEditorContextValue {
+    /**
+     * Updates the code contents of the code block.
+     */
+    setCode(code: string): void;
+    /**
+     * Updates the language of the code block. See {@link https://www.markdownguide.org/extended-syntax/#syntax-highlighting} for language examples.
+     *
+     */
+    setLanguage(language: string): void;
+    /**
+     * Updates the meta of the code block. The meta is the additional string that comes after the code block language.
+     */
+    setMeta(meta: string): void;
+    /**
+     * The Lexical node that's being edited.
+     */
+    lexicalNode: CodeBlockNode;
+}
+/**
+ * Use this hook in your custom code block editors to modify the underlying node code, language, and meta.
+ */
+export declare function useCodeBlockEditorContext(): CodeBlockEditorContextValue;
+export declare function CodeBlockEditorContainer(props: CodeBlockEditorContainerProps): React.JSX.Element;
+/**
+ * Creates a {@link CodeBlockNode}.
+ * @param options - The code contents, the language  (i.e. js, jsx, etc.), and the additional meta data of the block.
+ */
+export declare function $createCodeBlockNode(options: Partial<CreateCodeBlockNodeOptions>): CodeBlockNode;
+/**
+ * Returns true if the given node is a {@link CodeBlockNode}.
+ */
+export declare function $isCodeBlockNode(node: LexicalNode | null | undefined): node is CodeBlockNode;
+export {};

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -0,0 +1,155 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import React__default from "react";
+import { DecoratorNode } from "lexical";
+import { codeBlockPluginHooks } from "./index.js";
+import { voidEmitter } from "../../utils/voidEmitter.js";
+import { NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
+class CodeBlockNode extends DecoratorNode {
+  constructor(code, language, meta, key) {
+    super(key);
+    __publicField(this, "__code");
+    __publicField(this, "__meta");
+    __publicField(this, "__language");
+    __publicField(this, "__focusEmitter", voidEmitter());
+    __publicField(this, "setCode", (code) => {
+      if (code !== this.__code) {
+        this.getWritable().__code = code;
+      }
+    });
+    __publicField(this, "setMeta", (meta) => {
+      if (meta !== this.__meta) {
+        this.getWritable().__meta = meta;
+      }
+    });
+    __publicField(this, "setLanguage", (language) => {
+      if (language !== this.__language) {
+        this.getWritable().__language = language;
+      }
+    });
+    __publicField(this, "select", () => {
+      this.__focusEmitter.publish();
+    });
+    this.__code = code;
+    this.__meta = meta;
+    this.__language = language;
+  }
+  static getType() {
+    return "codeblock";
+  }
+  static clone(node) {
+    return new CodeBlockNode(node.__code, node.__language, node.__meta, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const { code, meta, language } = serializedNode;
+    return $createCodeBlockNode({
+      code,
+      language,
+      meta
+    });
+  }
+  exportJSON() {
+    return {
+      code: this.getCode(),
+      language: this.getLanguage(),
+      meta: this.getMeta(),
+      type: "codeblock",
+      version: 1
+    };
+  }
+  // View
+  createDOM(_config) {
+    return document.createElement("div");
+  }
+  updateDOM() {
+    return false;
+  }
+  getCode() {
+    return this.__code;
+  }
+  getMeta() {
+    return this.__meta;
+  }
+  getLanguage() {
+    return this.__language;
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ React__default.createElement(
+      CodeBlockEditorContainer,
+      {
+        parentEditor: editor,
+        code: this.getCode(),
+        meta: this.getMeta(),
+        language: this.getLanguage(),
+        codeBlockNode: this,
+        nodeKey: this.getKey(),
+        focusEmitter: this.__focusEmitter
+      }
+    );
+  }
+}
+const CodeBlockEditorContext = React__default.createContext(null);
+const CodeBlockEditorContextProvider = ({ parentEditor, lexicalNode, children }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    CodeBlockEditorContext.Provider,
+    {
+      value: {
+        lexicalNode,
+        setCode: (code) => {
+          parentEditor.update(() => {
+            lexicalNode.setCode(code);
+            setTimeout(() => {
+              parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
+            }, 0);
+          });
+        },
+        setLanguage: (language) => {
+          parentEditor.update(() => {
+            lexicalNode.setLanguage(language);
+          });
+        },
+        setMeta: (meta) => {
+          parentEditor.update(() => {
+            lexicalNode.setMeta(meta);
+          });
+        }
+      }
+    },
+    children
+  );
+};
+function useCodeBlockEditorContext() {
+  const context = React__default.useContext(CodeBlockEditorContext);
+  if (!context) {
+    throw new Error("useCodeBlockEditor must be used within a CodeBlockEditor");
+  }
+  return context;
+}
+function CodeBlockEditorContainer(props) {
+  const [codeBlockEditorDescriptors] = codeBlockPluginHooks.useEmitterValues("codeBlockEditorDescriptors");
+  const descriptor = codeBlockEditorDescriptors.sort((a, b) => b.priority - a.priority).find((descriptor2) => descriptor2.match(props.language || "", props.meta || ""));
+  if (!descriptor) {
+    throw new Error(`No CodeBlockEditor registered for language=${props.language} meta=${props.meta}`);
+  }
+  const Editor = descriptor.Editor;
+  const { codeBlockNode: _, parentEditor: __, ...restProps } = props;
+  return /* @__PURE__ */ React__default.createElement(CodeBlockEditorContextProvider, { parentEditor: props.parentEditor, lexicalNode: props.codeBlockNode }, /* @__PURE__ */ React__default.createElement(Editor, { ...restProps }));
+}
+function $createCodeBlockNode(options) {
+  const { code = "", language = "", meta = "" } = options;
+  return new CodeBlockNode(code, language, meta);
+}
+function $isCodeBlockNode(node) {
+  return node instanceof CodeBlockNode;
+}
+export {
+  $createCodeBlockNode,
+  $isCodeBlockNode,
+  CodeBlockEditorContainer,
+  CodeBlockNode,
+  useCodeBlockEditorContext
+};

package/dist/plugins/codeblock/CodeBlockVisitor.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { CodeBlockNode } from './CodeBlockNode';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const CodeBlockVisitor: LexicalExportVisitor<CodeBlockNode, Mdast.Code>;

package/dist/plugins/codeblock/CodeBlockVisitor.js

@@ -0,0 +1,14 @@
+import { $isCodeBlockNode } from "./CodeBlockNode.js";
+const CodeBlockVisitor = {
+  testLexicalNode: $isCodeBlockNode,
+  visitLexicalNode: ({ lexicalNode, actions }) => {
+    actions.addAndStepInto("code", {
+      value: lexicalNode.getCode(),
+      lang: lexicalNode.getLanguage(),
+      meta: lexicalNode.getMeta()
+    });
+  }
+};
+export {
+  CodeBlockVisitor
+};

package/dist/plugins/codeblock/MdastCodeVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastCodeVisitor: MdastImportVisitor<Mdast.Code>;

package/dist/plugins/codeblock/MdastCodeVisitor.js

@@ -0,0 +1,16 @@
+import { $createCodeBlockNode } from "./CodeBlockNode.js";
+const MdastCodeVisitor = {
+  testNode: "code",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto(
+      $createCodeBlockNode({
+        code: mdastNode.value,
+        language: mdastNode.lang,
+        meta: mdastNode.meta
+      })
+    );
+  }
+};
+export {
+  MdastCodeVisitor
+};