@mdxeditor/editor 0.0.0-development

package/dist/plugins/codemirror/index.js

@@ -0,0 +1,62 @@
+import { coreSystem } from "../core/index.js";
+import { codeBlockSystem } from "../codeblock/index.js";
+import { CodeMirrorEditor } from "./CodeMirrorEditor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const defaultCodeBlockLanguages = {
+  js: "JavaScript",
+  ts: "TypeScript",
+  tsx: "TypeScript (React)",
+  jsx: "JavaScript (React)",
+  css: "CSS"
+};
+const codeMirrorSystem = system(
+  (r, [, { insertCodeBlock }]) => {
+    const codeBlockLanguages = r.node(defaultCodeBlockLanguages);
+    const insertCodeMirror = r.node();
+    r.link(
+      r.pipe(
+        insertCodeMirror,
+        r.o.map(({ language, code }) => {
+          return {
+            code,
+            language,
+            meta: ""
+          };
+        })
+      ),
+      insertCodeBlock
+    );
+    return {
+      codeBlockLanguages,
+      insertCodeMirror
+    };
+  },
+  [coreSystem, codeBlockSystem]
+);
+const [
+  /** @internal */
+  codeMirrorPlugin,
+  /** @internal */
+  codeMirrorHooks
+] = realmPlugin({
+  id: "codemirror",
+  systemSpec: codeMirrorSystem,
+  applyParamsToSystem(r, params) {
+    r.pubKey("codeBlockLanguages", params.codeBlockLanguages);
+  },
+  init(r, { codeBlockLanguages }) {
+    r.pubKey("appendCodeBlockEditorDescriptor", {
+      match(language, meta) {
+        return codeBlockLanguages.hasOwnProperty(language) && meta === "";
+      },
+      priority: 1,
+      Editor: CodeMirrorEditor
+    });
+  }
+});
+export {
+  codeMirrorHooks,
+  codeMirrorPlugin,
+  codeMirrorSystem
+};

package/dist/plugins/core/Icon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type IconKey = 'add_column' | 'add_photo' | 'add_row' | 'arrow_drop_down' | 'check' | 'check_small' | 'close' | 'code' | 'content_copy' | 'delete_big' | 'delete_small' | 'sandpack' | 'difference' | 'edit' | 'admonition' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'format_bold' | 'format_italic' | 'format_list_bulleted' | 'format_list_checked' | 'format_list_numbered' | 'format_underlined' | 'code_block' | 'frontmatter' | 'horizontal_rule' | 'insert_col_left' | 'insert_col_right' | 'insert_row_above' | 'insert_row_below' | 'link' | 'link_off' | 'markdown' | 'more_horiz' | 'more_vert' | 'open_in_new' | 'redo' | 'rich_text' | 'settings' | 'table' | 'undo';
+declare const Icon: React.FC<{
+    name: IconKey;
+}>;
+export default Icon;

package/dist/plugins/core/Icon.js

@@ -0,0 +1,94 @@
+import React__default from "react";
+import SvgAddColumn from "../../icons/add_column.svg.js";
+import SvgAddPhoto from "../../icons/add_photo.svg.js";
+import SvgAddRow from "../../icons/add_row.svg.js";
+import SvgArrowDropDown from "../../icons/arrow_drop_down.svg.js";
+import SvgCheck from "../../icons/check.svg.js";
+import SvgCheckSmall from "../../icons/check_small.svg.js";
+import SvgClose from "../../icons/close.svg.js";
+import SvgCode from "../../icons/code.svg.js";
+import SvgContentCopy from "../../icons/content_copy.svg.js";
+import SvgDeleteBig from "../../icons/delete_big.svg.js";
+import SvgDeleteSmall from "../../icons/delete_small.svg.js";
+import SvgSandpack from "../../icons/sandpack.svg.js";
+import SvgDifference from "../../icons/difference.svg.js";
+import SvgEdit from "../../icons/edit.svg.js";
+import SvgAdmonition from "../../icons/admonition.svg.js";
+import SvgFormatAlignCenter from "../../icons/format_align_center.svg.js";
+import SvgFormatAlignLeft from "../../icons/format_align_left.svg.js";
+import SvgFormatAlignRight from "../../icons/format_align_right.svg.js";
+import SvgFormatBold from "../../icons/format_bold.svg.js";
+import SvgFormatItalic from "../../icons/format_italic.svg.js";
+import SvgFormatListBulleted from "../../icons/format_list_bulleted.svg.js";
+import SvgFormatListChecked from "../../icons/format_list_checked.svg.js";
+import SvgFormatListNumbered from "../../icons/format_list_numbered.svg.js";
+import SvgFormatUnderlined from "../../icons/format_underlined.svg.js";
+import SvgCodeBlock from "../../icons/code_block.svg.js";
+import SvgFrontmatter from "../../icons/frontmatter.svg.js";
+import SvgHorizontalRule from "../../icons/horizontal_rule.svg.js";
+import SvgInsertColLeft from "../../icons/insert_col_left.svg.js";
+import SvgInsertColRight from "../../icons/insert_col_right.svg.js";
+import SvgInsertRowAbove from "../../icons/insert_row_above.svg.js";
+import SvgInsertRowBelow from "../../icons/insert_row_below.svg.js";
+import SvgLink from "../../icons/link.svg.js";
+import SvgLinkOff from "../../icons/link_off.svg.js";
+import SvgMarkdown from "../../icons/markdown.svg.js";
+import SvgMoreHoriz from "../../icons/more_horiz.svg.js";
+import SvgMoreVert from "../../icons/more_vert.svg.js";
+import SvgOpenInNew from "../../icons/open_in_new.svg.js";
+import SvgRedo from "../../icons/redo.svg.js";
+import SvgRichText from "../../icons/rich_text.svg.js";
+import SvgSettings from "../../icons/settings.svg.js";
+import SvgTable from "../../icons/table.svg.js";
+import SvgUndo from "../../icons/undo.svg.js";
+const IconMap = {
+  add_column: SvgAddColumn,
+  add_photo: SvgAddPhoto,
+  add_row: SvgAddRow,
+  arrow_drop_down: SvgArrowDropDown,
+  check: SvgCheck,
+  check_small: SvgCheckSmall,
+  close: SvgClose,
+  code: SvgCode,
+  content_copy: SvgContentCopy,
+  delete_big: SvgDeleteBig,
+  delete_small: SvgDeleteSmall,
+  sandpack: SvgSandpack,
+  difference: SvgDifference,
+  edit: SvgEdit,
+  admonition: SvgAdmonition,
+  format_align_center: SvgFormatAlignCenter,
+  format_align_left: SvgFormatAlignLeft,
+  format_align_right: SvgFormatAlignRight,
+  format_bold: SvgFormatBold,
+  format_italic: SvgFormatItalic,
+  format_list_bulleted: SvgFormatListBulleted,
+  format_list_checked: SvgFormatListChecked,
+  format_list_numbered: SvgFormatListNumbered,
+  format_underlined: SvgFormatUnderlined,
+  code_block: SvgCodeBlock,
+  frontmatter: SvgFrontmatter,
+  horizontal_rule: SvgHorizontalRule,
+  insert_col_left: SvgInsertColLeft,
+  insert_col_right: SvgInsertColRight,
+  insert_row_above: SvgInsertRowAbove,
+  insert_row_below: SvgInsertRowBelow,
+  link: SvgLink,
+  link_off: SvgLinkOff,
+  markdown: SvgMarkdown,
+  more_horiz: SvgMoreHoriz,
+  more_vert: SvgMoreVert,
+  open_in_new: SvgOpenInNew,
+  redo: SvgRedo,
+  rich_text: SvgRichText,
+  settings: SvgSettings,
+  table: SvgTable,
+  undo: SvgUndo
+};
+const Icon = ({ name }) => {
+  const IconComponent = IconMap[name];
+  return /* @__PURE__ */ React__default.createElement(IconComponent, null);
+};
+export {
+  Icon as default
+};

package/dist/plugins/core/LexicalLinebreakVisitor.d.ts

@@ -0,0 +1,4 @@
+import { LineBreakNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalLinebreakVisitor: LexicalExportVisitor<LineBreakNode, Mdast.Text>;

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.d.ts

@@ -0,0 +1,4 @@
+import { ParagraphNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalParagraphVisitor: LexicalExportVisitor<ParagraphNode, Mdast.Paragraph>;

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.d.ts

@@ -0,0 +1,4 @@
+import { RootNode as LexicalRootNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalRootVisitor: LexicalExportVisitor<LexicalRootNode, Mdast.Content>;

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.d.ts

@@ -0,0 +1,5 @@
+import { TextNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare function isMdastText(mdastNode: Mdast.Content): mdastNode is Mdast.Text;
+export declare const LexicalTextVisitor: LexicalExportVisitor<TextNode, Mdast.Text>;

package/dist/plugins/core/LexicalTextVisitor.js

@@ -0,0 +1,85 @@
+import { $isTextNode } from "lexical";
+import { IS_CODE, IS_ITALIC, IS_BOLD, IS_UNDERLINE } from "../../FormatConstants.js";
+function isMdastText(mdastNode) {
+  return mdastNode.type === "text";
+}
+const LexicalTextVisitor = {
+  shouldJoin: (prevNode, currentNode) => {
+    return ["text", "emphasis", "strong", "mdxJsxTextElement"].includes(prevNode.type) && prevNode.type === currentNode.type;
+  },
+  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() ?? 0;
+    if (format & IS_CODE) {
+      actions.addAndStepInto("inlineCode", {
+        value: textContent
+      });
+      return;
+    }
+    let localParentNode = mdastParent;
+    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_UNDERLINE) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "u",
+        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_UNDERLINE && !(prevFormat & IS_UNDERLINE)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "mdxJsxTextElement",
+        name: "u",
+        children: [],
+        attributes: []
+      });
+    }
+    actions.appendToParent(localParentNode, {
+      type: "text",
+      value: textContent
+    });
+  }
+};
+export {
+  LexicalTextVisitor,
+  isMdastText
+};

package/dist/plugins/core/MdastBreakVisitor.d.ts

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

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.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { MdxJsxTextElement } from 'mdast-util-mdx';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastFormattingVisitor: MdastImportVisitor<Mdast.Emphasis | Mdast.Strong | MdxJsxTextElement>;

package/dist/plugins/core/MdastFormattingVisitor.js

@@ -0,0 +1,36 @@
+import { IS_UNDERLINE, IS_ITALIC, IS_BOLD } from "../../FormatConstants.js";
+function isOpeningUnderlineNode(node) {
+  return node.type === "html" && node.value === "<u>";
+}
+function isClosingUnderlineNode(node) {
+  return node.type === "html" && node.value === "</u>";
+}
+function isJsxUnderlineNode(node) {
+  return node.type === "mdxJsxTextElement" && node.name === "u";
+}
+const MdastFormattingVisitor = {
+  testNode(mdastNode) {
+    return mdastNode.type === "emphasis" || mdastNode.type === "strong" || isJsxUnderlineNode(mdastNode) || isOpeningUnderlineNode(mdastNode) || isClosingUnderlineNode(mdastNode);
+  },
+  visitNode({ mdastNode, lexicalParent, actions, mdastParent }) {
+    if (isOpeningUnderlineNode(mdastNode)) {
+      actions.addFormatting(IS_UNDERLINE, mdastParent);
+      return;
+    }
+    if (isClosingUnderlineNode(mdastNode)) {
+      actions.removeFormatting(IS_UNDERLINE, mdastParent);
+      return;
+    }
+    if (mdastNode.type === "emphasis") {
+      actions.addFormatting(IS_ITALIC);
+    } else if (mdastNode.type === "strong") {
+      actions.addFormatting(IS_BOLD);
+    } else if (isJsxUnderlineNode(mdastNode)) {
+      actions.addFormatting(IS_UNDERLINE);
+    }
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+export {
+  MdastFormattingVisitor
+};

package/dist/plugins/core/MdastInlineCodeVisitor.d.ts

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

package/dist/plugins/core/MdastInlineCodeVisitor.js

@@ -0,0 +1,27 @@
+import { $createTextNode } from "lexical";
+import { IS_CODE } from "../../FormatConstants.js";
+function isOpeningCodeNode(node) {
+  return node.type === "html" && node.value === "<code>";
+}
+function isClosingCodeNode(node) {
+  return node.type === "html" && node.value === "</code>";
+}
+const MdastInlineCodeVisitor = {
+  testNode: (node) => {
+    return node.type === "inlineCode" || isOpeningCodeNode(node) || isClosingCodeNode(node);
+  },
+  visitNode({ mdastNode, actions, mdastParent }) {
+    if (isOpeningCodeNode(mdastNode)) {
+      actions.addFormatting(IS_CODE, mdastParent);
+      return;
+    }
+    if (isClosingCodeNode(mdastNode)) {
+      actions.removeFormatting(IS_CODE, mdastParent);
+      return;
+    }
+    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(IS_CODE));
+  }
+};
+export {
+  MdastInlineCodeVisitor
+};

package/dist/plugins/core/MdastParagraphVisitor.d.ts

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

package/dist/plugins/core/MdastParagraphVisitor.js

@@ -0,0 +1,15 @@
+import { $createParagraphNode } from "lexical";
+const lexicalTypesThatShouldSkipParagraphs = ["listitem", "quote", "admonition"];
+const MdastParagraphVisitor = {
+  testNode: "paragraph",
+  visitNode: function({ mdastNode, lexicalParent, actions }) {
+    if (lexicalTypesThatShouldSkipParagraphs.includes(lexicalParent.getType())) {
+      actions.visitChildren(mdastNode, lexicalParent);
+    } else {
+      actions.addAndStepInto($createParagraphNode());
+    }
+  }
+};
+export {
+  MdastParagraphVisitor
+};

package/dist/plugins/core/MdastRootVisitor.d.ts

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

package/dist/plugins/core/MdastRootVisitor.js

@@ -0,0 +1,9 @@
+const MdastRootVisitor = {
+  testNode: "root",
+  visitNode({ actions, mdastNode, lexicalParent }) {
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
+export {
+  MdastRootVisitor
+};

package/dist/plugins/core/MdastTextVisitor.d.ts

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

package/dist/plugins/core/MdastTextVisitor.js

@@ -0,0 +1,10 @@
+import { $createTextNode } from "lexical";
+const MdastTextVisitor = {
+  testNode: "text",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(actions.getParentFormatting()));
+  }
+};
+export {
+  MdastTextVisitor
+};

package/dist/plugins/core/NestedLexicalEditor.d.ts

@@ -0,0 +1,92 @@
+import { DecoratorNode, EditorConfig, LexicalEditor } from 'lexical';
+import * as Mdast from 'mdast';
+import type { Data, Node } from 'unist';
+import React from 'react';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable.js';
+import { VoidEmitter } from '../../utils/voidEmitter';
+/**
+ * The value of the {@link NestedEditorsContext} React context.
+ */
+export interface NestedEditorsContextValue<T extends Node> {
+    /**
+     * The parent lexical editor
+     */
+    parentEditor: LexicalEditor;
+    /**
+     * The parent editor config
+     */
+    config: EditorConfig;
+    /**
+     * The mdast node that is being edited
+     */
+    mdastNode: T;
+    /**
+     * The lexical node that is being edited
+     */
+    lexicalNode: DecoratorNode<any> & {
+        /**
+         * Use this method to update the mdast node. This will also update the mdast tree of the parent editor.
+         */
+        setMdastNode: (mdastNode: any) => void;
+    };
+    /**
+     * Subscribe to the emitter and implement the logic to focus the custom editor.
+     */
+    focusEmitter: VoidEmitter;
+}
+/**
+ * Use this context to provide the necessary values to the {@link NestedLexicalEditor} React component.
+ * Place it as a wrapper in your custom lexical node decorators.
+ */
+export declare const NestedEditorsContext: React.Context<NestedEditorsContextValue<Node<Data>> | undefined>;
+/**
+ * A hook to get the current {@link NestedEditorsContext} value. Use this in your custom editor components.
+ */
+export declare function useNestedEditorContext<T extends Mdast.Content>(): NestedEditorsContextValue<T>;
+/**
+ * A hook that returns a function that can be used to update the mdast node. Use this in your custom editor components.
+ */
+export declare function useMdastNodeUpdater<T extends Mdast.Content>(): (node: Partial<T>) => void;
+/**
+ * A hook that returns a function that removes the lexical node from the editor.
+ */
+export declare function useLexicalNodeRemove(): () => void;
+/**
+ * The properties of the {@link NestedLexicalEditor} React component.
+ * @typeParam T - The type of the mdast node of the editor.
+ */
+export interface NestedEditorProps<T extends Mdast.Content> {
+    /**
+     * A function that returns the phrasing content of the mdast node. In most cases, this will be the `children` property of the mdast node, but you can also have multiple nested nodes with their own children.
+     */
+    getContent: (mdastNode: T) => Mdast.Content[];
+    /**
+     * A function that should return the updated mdast node based on the original mdast node and the new content (serialized as mdast tree) produced by the editor.
+     */
+    getUpdatedMdastNode: (mdastNode: T, children: Mdast.Content[]) => T;
+    /**
+     * Props passed to the {@link https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/LexicalContentEditable.tsx | ContentEditable} component.
+     */
+    contentEditableProps?: React.ComponentProps<typeof ContentEditable>;
+    /**
+     * Whether or not the editor edits blocks (multiple paragraphs)
+     */
+    block?: boolean;
+}
+/**
+ * A nested editor React component that allows editing of the contents of complex markdown nodes that have nested markdown content (for example, custom directives or JSX elements). See the {@link NestedEditorProps} for more details on the compoment props.
+ *
+ * @example
+ * You can use a type param to specify the type of the mdast node
+ *
+ * ```tsx
+ *
+ * interface CalloutDirectiveNode extends LeafDirective {
+ *   name: 'callout'
+ *   children: Mdast.PhrasingContent[]
+ * }
+ *
+ * return <NestedLexicalEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
+ * ```
+ */
+export declare const NestedLexicalEditor: <T extends Mdast.Content>(props: NestedEditorProps<T>) => React.JSX.Element;