@mdxeditor/editor 0.0.1 → 0.0.4-development

package/dist/plugins/lists/index.js

@@ -0,0 +1,122 @@
+import { coreSystem } from "../core/index.js";
+import { MdastListVisitor } from "./MdastListVisitor.js";
+import { MdastListItemVisitor } from "./MdastListItemVisitor.js";
+import { LexicalListVisitor } from "./LexicalListVisitor.js";
+import { LexicalListItemVisitor } from "./LexicalListItemVisitor.js";
+import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode } from "@lexical/list";
+import { $isRootOrShadowRoot, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_CRITICAL, $getSelection, $isRangeSelection, $isElementNode } from "lexical";
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin.js";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin.js";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin.js";
+import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
+import { gfmTaskListItem } from "micromark-extension-gfm-task-list-item";
+import { gfmTaskListItemFromMarkdown, gfmTaskListItemToMarkdown } from "mdast-util-gfm-task-list-item";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const ListTypeCommandMap = /* @__PURE__ */ new Map([
+  ["number", INSERT_ORDERED_LIST_COMMAND],
+  ["bullet", INSERT_UNORDERED_LIST_COMMAND],
+  ["check", INSERT_CHECK_LIST_COMMAND],
+  ["", REMOVE_LIST_COMMAND]
+]);
+const listsSystem = system(
+  (r, [{ activeEditor, currentSelection }]) => {
+    const currentListType = r.node("");
+    const applyListType = r.node();
+    r.sub(r.pipe(applyListType, r.o.withLatestFrom(activeEditor)), ([listType, theEditor]) => {
+      theEditor == null ? void 0 : theEditor.dispatchCommand(ListTypeCommandMap.get(listType), void 0);
+    });
+    r.sub(r.pipe(currentSelection, r.o.withLatestFrom(activeEditor)), ([selection, theEditor]) => {
+      if (!selection || !theEditor) {
+        return;
+      }
+      const anchorNode = selection.anchor.getNode();
+      let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+        const parent = e.getParent();
+        return parent !== null && $isRootOrShadowRoot(parent);
+      });
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
+      }
+      const elementKey = element.getKey();
+      const elementDOM = theEditor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getListType() : element.getListType();
+          r.pub(currentListType, type);
+        } else {
+          r.pub(currentListType, null);
+        }
+      }
+    });
+    return { currentListType, applyListType };
+  },
+  [coreSystem]
+);
+const [
+  /** @internal */
+  listsPlugin,
+  /** @internal */
+  listsPluginHooks
+] = realmPlugin({
+  id: "lists",
+  systemSpec: listsSystem,
+  init: (realm) => {
+    var _a;
+    realm.pubKey("addMdastExtension", gfmTaskListItemFromMarkdown);
+    realm.pubKey("addSyntaxExtension", gfmTaskListItem);
+    realm.pubKey("addImportVisitor", MdastListVisitor);
+    realm.pubKey("addImportVisitor", MdastListItemVisitor);
+    realm.pubKey("addLexicalNode", ListItemNode);
+    realm.pubKey("addLexicalNode", ListNode);
+    realm.pubKey("addExportVisitor", LexicalListVisitor);
+    realm.pubKey("addExportVisitor", LexicalListItemVisitor);
+    realm.pubKey("addToMarkdownExtension", gfmTaskListItemToMarkdown);
+    (_a = realm.getKeyValue("rootEditor")) == null ? void 0 : _a.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(7), COMMAND_PRIORITY_CRITICAL);
+    realm.pubKey("addComposerChild", TabIndentationPlugin);
+    realm.pubKey("addComposerChild", ListPlugin);
+    realm.pubKey("addComposerChild", CheckListPlugin);
+    realm.pubKey("addNestedEditorChild", TabIndentationPlugin);
+    realm.pubKey("addNestedEditorChild", ListPlugin);
+    realm.pubKey("addNestedEditorChild", CheckListPlugin);
+  }
+});
+function getElementNodesInSelection(selection) {
+  const nodesInSelection = selection.getNodes();
+  if (nodesInSelection.length === 0) {
+    return /* @__PURE__ */ new Set([selection.anchor.getNode().getParentOrThrow(), selection.focus.getNode().getParentOrThrow()]);
+  }
+  return new Set(nodesInSelection.map((n) => $isElementNode(n) ? n : n.getParentOrThrow()));
+}
+function isIndentPermitted(maxDepth) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+  const elementNodesInSelection = getElementNodesInSelection(selection);
+  let totalDepth = 0;
+  for (const elementNode of elementNodesInSelection) {
+    if ($isListNode(elementNode)) {
+      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
+    } else if ($isListItemNode(elementNode)) {
+      const parent = elementNode.getParent();
+      if ((parent == null ? void 0 : parent.getChildren().length) === 1) {
+        const grandParentListItem = parent == null ? void 0 : parent.getParent();
+        if ($isListItemNode(grandParentListItem) && grandParentListItem.getChildren().length === 1) {
+          return false;
+        }
+      }
+      if (!$isListNode(parent)) {
+        throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
+      }
+      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
+    }
+  }
+  return totalDepth <= maxDepth;
+}
+export {
+  listsPlugin,
+  listsPluginHooks,
+  listsSystem
+};

package/dist/plugins/markdown-shortcut/index.d.ts

@@ -0,0 +1,80 @@
+import type { IconKey } from '../core/Icon';
+import type { Options } from 'mdast-util-to-markdown';
+import type { Config } from 'mdast-util-from-markdown/lib';
+import type { Extension } from 'micromark-util-types';
+import type { Content } from 'mdast';
+import type { MdastImportVisitor, LexicalVisitor } from '../..';
+import type { EditorSubscription, EditorInFocus, BlockType } from '../core';
+import type { InitialEditorStateType } from '@lexical/react/LexicalComposer';
+import type { JsxComponentDescriptor } from '../jsx';
+import type { HistoryState } from '@lexical/history';
+import type { PluginConstructor, SystemSpec, Realm, RealmNode } from '../../gurx';
+import React from 'react';
+import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, DecoratorNode, ElementNode } from 'lexical';
+/** @internal */
+export declare const markdownShortcutPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    markdownSignal: RealmNode<string>;
+    editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    placeholder: RealmNode<React.ReactNode>;
+    autoFocus: RealmNode<boolean | {
+        defaultSelection?: "rootStart" | "rootEnd" | undefined;
+        preventScroll?: boolean | undefined;
+    }>;
+    readOnly: RealmNode<boolean>;
+    composerChildren: RealmNode<React.ComponentType<{}>[]>;
+    addComposerChild: RealmNode<React.ComponentType<{}>>;
+    topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<React.ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<React.ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<React.ComponentType<{}>>;
+    editorWrappers: RealmNode<React.ComponentType<{
+        children: React.ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<React.ComponentType<{
+        children: React.ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
+    markdownProcessingError: RealmNode<{
+        error: string;
+        source: string;
+    } | null>;
+    markdownErrorSignal: RealmNode<{
+        error: string;
+        source: string;
+    }>;
+}>], (_: Realm) => {}>, object>;

package/dist/plugins/markdown-shortcut/index.js

@@ -0,0 +1,90 @@
+import { QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE } from "@lexical/markdown";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin.js";
+import React__default from "react";
+import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
+import { coreSystem } from "../core/index.js";
+import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
+import { realmPlugin } from "../../gurx/react.js";
+import { system } from "../../gurx/realmFactory.js";
+const [markdownShortcutPlugin] = realmPlugin({
+  id: "markdown-shortcut",
+  dependencies: [],
+  systemSpec: system((_) => ({}), [coreSystem]),
+  init: (realm, _, pluginIds) => {
+    const allowedHeadingLevels = pluginIds.includes("headings") ? (
+      // @ts-expect-error we query the realm for the allowed heading levels
+      realm.getKeyValue("allowedHeadingLevels")
+    ) : [];
+    const transformers = pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels);
+    realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
+    realm.pubKey("addNestedEditorChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
+  }
+});
+const createBlockNode = (createNode) => {
+  return (parentNode, children, match) => {
+    const node = createNode(match);
+    node.append(...children);
+    parentNode.replace(node);
+    node.select(0, 0);
+  };
+};
+function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
+  const transformers = [
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+    BOLD_STAR,
+    BOLD_UNDERSCORE,
+    INLINE_CODE,
+    ITALIC_STAR,
+    ITALIC_UNDERSCORE
+    // HIGHLIGHT,
+    // STRIKETHROUGH
+  ];
+  if (pluginIds.includes("headings")) {
+    const minHeadingLevel = Math.min(...allowedHeadingLevels);
+    const maxHeadingLevel = Math.max(...allowedHeadingLevels);
+    const headingRegExp = new RegExp(`^(#{${minHeadingLevel},${maxHeadingLevel}})\\s`);
+    const HEADING = {
+      dependencies: [HeadingNode],
+      export: (node, exportChildren) => {
+        if (!$isHeadingNode(node)) {
+          return null;
+        }
+        const level = Number(node.getTag().slice(1));
+        return "#".repeat(level) + " " + exportChildren(node);
+      },
+      regExp: headingRegExp,
+      replace: createBlockNode((match) => {
+        const tag = `h${match[1].length}`;
+        return $createHeadingNode(tag);
+      }),
+      type: "element"
+    };
+    transformers.push(HEADING);
+  }
+  if (pluginIds.includes("quote")) {
+    transformers.push(QUOTE);
+  }
+  if (pluginIds.includes("link")) {
+    transformers.push(LINK);
+  }
+  if (pluginIds.includes("lists")) {
+    transformers.push(ORDERED_LIST, UNORDERED_LIST, CHECK_LIST);
+  }
+  if (pluginIds.includes("codeblock")) {
+    const codeTransformerCopy = {
+      ...CODE,
+      dependencies: [CodeBlockNode],
+      replace: (parentNode, _children, match) => {
+        const codeBlockNode = $createCodeBlockNode({ code: "", language: match ? match[1] : "", meta: "" });
+        parentNode.replace(codeBlockNode);
+        setTimeout(() => codeBlockNode.select(), 80);
+      }
+    };
+    transformers.push(codeTransformerCopy);
+  }
+  return transformers;
+}
+export {
+  markdownShortcutPlugin
+};

package/dist/plugins/quote/LexicalQuoteVisitor.d.ts

@@ -0,0 +1,4 @@
+import { QuoteNode } from '@lexical/rich-text';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalQuoteVisitor: LexicalExportVisitor<QuoteNode, Mdast.Blockquote>;

package/dist/plugins/quote/LexicalQuoteVisitor.js

@@ -0,0 +1,12 @@
+import { $isQuoteNode } from "@lexical/rich-text";
+const LexicalQuoteVisitor = {
+  testLexicalNode: $isQuoteNode,
+  visitLexicalNode: ({ lexicalNode, mdastParent, actions }) => {
+    const paragraph = { type: "paragraph", children: [] };
+    actions.appendToParent(mdastParent, { type: "blockquote", children: [paragraph] });
+    actions.visitChildren(lexicalNode, paragraph);
+  }
+};
+export {
+  LexicalQuoteVisitor
+};

package/dist/plugins/quote/MdastBlockQuoteVisitor.d.ts

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

package/dist/plugins/quote/MdastBlockQuoteVisitor.js

@@ -0,0 +1,10 @@
+import { $createQuoteNode } from "@lexical/rich-text";
+const MdastBlockQuoteVisitor = {
+  testNode: "blockquote",
+  visitNode({ actions }) {
+    actions.addAndStepInto($createQuoteNode());
+  }
+};
+export {
+  MdastBlockQuoteVisitor
+};