@mdxeditor/editor 0.9.0 → 0.10.0-alpha.1

package/dist/plugins/core/index.js

@@ -0,0 +1,343 @@
+import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { $findMatchingParent, $insertNodeToNearestRoot } from "@lexical/utils";
+import { createCommand, SELECTION_CHANGE_COMMAND, $getRoot, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, ParagraphNode, TextNode } from "lexical";
+import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
+import { importMarkdownToLexical } from "../../importMarkdownToLexical.js";
+import { LexicalLinebreakVisitor } from "./LexicalLinebreakVisitor.js";
+import { LexicalParagraphVisitor } from "./LexicalParagraphVisitor.js";
+import { LexicalRootVisitor } from "./LexicalRootVisitor.js";
+import { LexicalTextVisitor } from "./LexicalTextVisitor.js";
+import { MdastFormattingVisitor } from "./MdastFormattingVisitor.js";
+import { MdastInlineCodeVisitor } from "./MdastInlineCodeVisitor.js";
+import { MdastParagraphVisitor } from "./MdastParagraphVisitor.js";
+import { MdastRootVisitor } from "./MdastRootVisitor.js";
+import { MdastTextVisitor } from "./MdastTextVisitor.js";
+import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
+system((r) => {
+  const foo = r.node("foo");
+  return { foo };
+});
+const coreSystem = system((r) => {
+  function createAppendNodeFor(node) {
+    const appendNode = r.node();
+    r.link(
+      r.pipe(
+        appendNode,
+        r.o.withLatestFrom(node),
+        r.o.map(([newValue, values]) => {
+          if (values.includes(newValue)) {
+            return values;
+          }
+          return [...values, newValue];
+        })
+      ),
+      node
+    );
+    return appendNode;
+  }
+  const rootEditor = r.node(null);
+  const activeEditor = r.node(null, true);
+  const contentEditableClassName = r.node("");
+  const inFocus = r.node(false, true);
+  const currentFormat = r.node(0, true);
+  const applyFormat = r.node();
+  const currentSelection = r.node(null);
+  const activeEditorSubscriptions = r.node([]);
+  const rootEditorSubscriptions = r.node([]);
+  const editorInFocus = r.node(null);
+  const rebind = () => r.o.scan((teardowns, [subs, activeEditorValue]) => {
+    teardowns.forEach((teardown) => {
+      if (!teardown) {
+        throw new Error("You have a subscription that does not return a teardown");
+      }
+      teardown();
+    });
+    return activeEditorValue ? subs.map((s) => s(activeEditorValue)) : [];
+  }, []);
+  r.pipe(r.combine(activeEditorSubscriptions, activeEditor), rebind());
+  r.pipe(r.combine(rootEditorSubscriptions, rootEditor), rebind());
+  const createRootEditorSubscription = createAppendNodeFor(rootEditorSubscriptions);
+  const createActiveEditorSubscription = createAppendNodeFor(activeEditorSubscriptions);
+  function handleSelectionChange() {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      r.pubKeys({
+        currentSelection: selection,
+        currentFormat: selection.format
+      });
+    }
+  }
+  r.pub(createRootEditorSubscription, (theRootEditor) => {
+    return theRootEditor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_, theActiveEditor) => {
+        r.pubIn({
+          [activeEditor.key]: theActiveEditor,
+          [inFocus.key]: true
+        });
+        if (theActiveEditor._parentEditor === null) {
+          theActiveEditor.getEditorState().read(() => {
+            r.pub(editorInFocus, {
+              rootNode: $getRoot(),
+              editorType: "lexical"
+            });
+          });
+        }
+        handleSelectionChange();
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  });
+  r.pub(createRootEditorSubscription, (theRootEditor) => {
+    return theRootEditor.registerUpdateListener(({ dirtyElements, dirtyLeaves, editorState }) => {
+      if (dirtyElements.size === 0 && dirtyLeaves.size === 0) {
+        return;
+      }
+      let theNewMarkdownValue;
+      editorState.read(() => {
+        theNewMarkdownValue = exportMarkdownFromLexical({
+          root: $getRoot(),
+          visitors: r.getValue(exportVisitors),
+          jsxComponentDescriptors: r.getValue(jsxComponentDescriptors),
+          toMarkdownExtensions: r.getValue(toMarkdownExtensions),
+          toMarkdownOptions: r.getValue(toMarkdownOptions),
+          jsxIsAvailable: r.getValue(jsxIsAvailable)
+        });
+      });
+      r.pub(markdown, theNewMarkdownValue.trim());
+    });
+  });
+  const initialMarkdown = r.node("");
+  const markdown = r.node("", true);
+  r.link(initialMarkdown, markdown);
+  const importVisitors = r.node([]);
+  const syntaxExtensions = r.node([]);
+  const mdastExtensions = r.node([]);
+  const usedLexicalNodes = r.node([]);
+  const exportVisitors = r.node([]);
+  const toMarkdownExtensions = r.node([]);
+  const toMarkdownOptions = r.node({}, true);
+  const jsxIsAvailable = r.node(false);
+  const jsxComponentDescriptors = r.node([]);
+  const editorRootElementRef = r.node(null);
+  const addLexicalNode = createAppendNodeFor(usedLexicalNodes);
+  const addImportVisitor = createAppendNodeFor(importVisitors);
+  const addSyntaxExtension = createAppendNodeFor(syntaxExtensions);
+  const addMdastExtension = createAppendNodeFor(mdastExtensions);
+  const addExportVisitor = createAppendNodeFor(exportVisitors);
+  const addToMarkdownExtension = createAppendNodeFor(toMarkdownExtensions);
+  const setMarkdown = r.node();
+  r.sub(
+    r.pipe(setMarkdown, r.o.withLatestFrom(rootEditor, importVisitors, mdastExtensions, syntaxExtensions)),
+    ([theNewMarkdownValue, editor, importVisitors2, mdastExtensions2, syntaxExtensions2]) => {
+      editor == null ? void 0 : editor.update(() => {
+        $getRoot().clear();
+        importMarkdownToLexical({
+          root: $getRoot(),
+          visitors: importVisitors2,
+          mdastExtensions: mdastExtensions2,
+          markdown: theNewMarkdownValue,
+          syntaxExtensions: syntaxExtensions2
+        });
+      });
+    }
+  );
+  const initialRootEditorState = r.node((theRootEditor) => {
+    r.pub(rootEditor, theRootEditor);
+    r.pub(activeEditor, theRootEditor);
+    importMarkdownToLexical({
+      root: $getRoot(),
+      visitors: r.getValue(importVisitors),
+      mdastExtensions: r.getValue(mdastExtensions),
+      markdown: r.getValue(initialMarkdown),
+      syntaxExtensions: r.getValue(syntaxExtensions)
+    });
+  });
+  r.pub(createActiveEditorSubscription, (editor) => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        handleSelectionChange();
+      });
+    });
+  });
+  r.pub(createActiveEditorSubscription, (theEditor) => {
+    return theEditor.registerCommand(
+      BLUR_COMMAND,
+      (payload) => {
+        var _a;
+        const theRootEditor = r.getValue(rootEditor);
+        if (theRootEditor) {
+          const movingOutside = !((_a = theRootEditor.getRootElement()) == null ? void 0 : _a.contains(payload.relatedTarget));
+          if (movingOutside) {
+            r.pub(inFocus, false);
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  });
+  const composerChildren = r.node([]);
+  const addComposerChild = createAppendNodeFor(composerChildren);
+  const topAreaChildren = r.node([]);
+  const addTopAreaChild = createAppendNodeFor(topAreaChildren);
+  const editorWrappers = r.node([]);
+  const addEditorWrapper = createAppendNodeFor(editorWrappers);
+  const nestedEditorChildren = r.node([]);
+  const addNestedEditorChild = createAppendNodeFor(nestedEditorChildren);
+  const historyState = r.node(createEmptyHistoryState());
+  r.sub(r.pipe(applyFormat, r.o.withLatestFrom(activeEditor)), ([format, theEditor]) => {
+    theEditor == null ? void 0 : theEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+  });
+  const currentBlockType = r.node("");
+  const applyBlockType = r.node();
+  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) {
+      const blockType = $isHeadingNode(element) ? element.getTag() : element.getType();
+      r.pub(currentBlockType, blockType);
+    }
+  });
+  const convertSelectionToNode = r.node();
+  r.sub(r.pipe(convertSelectionToNode, r.o.withLatestFrom(activeEditor)), ([factory, editor]) => {
+    editor == null ? void 0 : editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, factory);
+        setTimeout(() => {
+          editor.focus();
+        });
+      }
+    });
+  });
+  const insertDecoratorNode = r.node();
+  r.sub(r.pipe(insertDecoratorNode, r.o.withLatestFrom(activeEditor)), ([nodeFactory, theEditor]) => {
+    theEditor == null ? void 0 : theEditor.focus(
+      () => {
+        theEditor.getEditorState().read(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const focusNode = selection.focus.getNode();
+            if (focusNode !== null) {
+              theEditor.update(() => {
+                const node = nodeFactory();
+                $insertNodeToNearestRoot(node);
+                if (Object.hasOwn(node, "select") && typeof node.select === "function") {
+                  setTimeout(() => node.select(), 80);
+                }
+              });
+            }
+          }
+        });
+      },
+      { defaultSelection: "rootEnd" }
+    );
+  });
+  return {
+    // state
+    activeEditor,
+    inFocus,
+    historyState,
+    currentSelection,
+    // jsx
+    jsxIsAvailable,
+    jsxComponentDescriptors,
+    // lexical editor
+    initialRootEditorState,
+    rootEditor,
+    createRootEditorSubscription,
+    createActiveEditorSubscription,
+    // import
+    importVisitors,
+    syntaxExtensions,
+    mdastExtensions,
+    usedLexicalNodes,
+    addImportVisitor,
+    addLexicalNode,
+    addSyntaxExtension,
+    addMdastExtension,
+    // export
+    toMarkdownExtensions,
+    toMarkdownOptions,
+    addToMarkdownExtension,
+    addExportVisitor,
+    exportVisitors,
+    // markdown strings
+    initialMarkdown,
+    setMarkdown,
+    markdown,
+    // DOM
+    editorRootElementRef,
+    contentEditableClassName,
+    // child controls
+    composerChildren,
+    addComposerChild,
+    topAreaChildren,
+    addTopAreaChild,
+    nestedEditorChildren,
+    addNestedEditorChild,
+    editorWrappers,
+    addEditorWrapper,
+    // editor content state and commands
+    currentFormat,
+    editorInFocus,
+    applyFormat,
+    currentBlockType,
+    applyBlockType,
+    convertSelectionToNode,
+    insertDecoratorNode
+  };
+}, []);
+const [
+  /** @internal */
+  corePlugin,
+  /** @internal */
+  corePluginHooks
+] = realmPlugin({
+  id: "core",
+  systemSpec: coreSystem,
+  applyParamsToSystem(realm, params) {
+    realm.pubKey("contentEditableClassName", params.contentEditableClassName);
+    realm.pubKey("toMarkdownOptions", params.toMarkdownOptions);
+    realm.singletonSubKey("markdown", params.onChange);
+  },
+  init(realm, params) {
+    realm.pubKey("initialMarkdown", params.initialMarkdown.trim());
+    realm.pubKey("addImportVisitor", MdastRootVisitor);
+    realm.pubKey("addImportVisitor", MdastParagraphVisitor);
+    realm.pubKey("addImportVisitor", MdastTextVisitor);
+    realm.pubKey("addImportVisitor", MdastFormattingVisitor);
+    realm.pubKey("addImportVisitor", MdastInlineCodeVisitor);
+    realm.pubKey("addLexicalNode", ParagraphNode);
+    realm.pubKey("addLexicalNode", TextNode);
+    realm.pubKey("addExportVisitor", LexicalRootVisitor);
+    realm.pubKey("addExportVisitor", LexicalParagraphVisitor);
+    realm.pubKey("addExportVisitor", LexicalTextVisitor);
+    realm.pubKey("addExportVisitor", LexicalLinebreakVisitor);
+    realm.pubKey("addComposerChild", SharedHistoryPlugin);
+  }
+});
+export {
+  NESTED_EDITOR_UPDATED_COMMAND,
+  corePlugin,
+  corePluginHooks,
+  coreSystem
+};

package/dist/plugins/core/ui/PopoverUtils.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as RadixPopover from '@radix-ui/react-popover';
+export declare const PopoverPortal: (props: RadixPopover.PopoverPortalProps) => React.JSX.Element;
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<RadixPopover.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<any>>;

package/dist/plugins/core/ui/PopoverUtils.js

@@ -0,0 +1,17 @@
+import React__default from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { corePluginHooks } from "../index.js";
+import styles from "../../../styles/ui.module.css.js";
+const PopoverPortal = (props) => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { ...props, container: editorRootElementRef == null ? void 0 : editorRootElementRef.current });
+};
+const PopoverContent = React__default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React__default.createElement(RadixPopover.Content, { ...props, className: styles.popoverContent, sideOffset: 5, side: "top", ref }, /* @__PURE__ */ React__default.createElement("span", { className: styles.popoverArrow }, /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, null)), props.children);
+  }
+);
+export {
+  PopoverContent,
+  PopoverPortal
+};

package/dist/plugins/diff-source/DiffSourceWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DiffSourceWrapper: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/plugins/diff-source/DiffSourceWrapper.js

@@ -0,0 +1,11 @@
+import React__default from "react";
+import { diffSourcePluginHooks } from "./index.js";
+import { DiffViewer } from "./DiffViewer.js";
+import { SourceEditor } from "./SourceEditor.js";
+const DiffSourceWrapper = ({ children }) => {
+  const [viewMode] = diffSourcePluginHooks.useEmitterValues("viewMode");
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { style: { display: viewMode === "rich-text" ? "block" : "none" } }, children), viewMode === "diff" ? /* @__PURE__ */ React__default.createElement(DiffViewer, null) : null, viewMode === "source" ? /* @__PURE__ */ React__default.createElement(SourceEditor, null) : null);
+};
+export {
+  DiffSourceWrapper
+};

package/dist/plugins/diff-source/DiffViewer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DiffViewer: React.FC;

package/dist/plugins/diff-source/DiffViewer.js

@@ -0,0 +1,18 @@
+import React__default from "react";
+import { parseDiff, Diff, Hunk } from "react-diff-view";
+import { formatLines, diffLines } from "unidiff";
+import "../../node_modules/react-diff-view/style/index.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { diffSourcePluginHooks } from "./index.js";
+const DiffViewer = () => {
+  const [newText] = corePluginHooks.useEmitterValues("markdown");
+  const [oldText] = diffSourcePluginHooks.useEmitterValues("diffMarkdown");
+  const diffText = formatLines(diffLines(oldText, newText), { context: 3 });
+  if (diffText.trim() === "")
+    return /* @__PURE__ */ React__default.createElement("div", null, "No changes");
+  const [diff] = parseDiff(diffText, { nearbySequences: "zip" });
+  return /* @__PURE__ */ React__default.createElement(Diff, { viewType: "split", diffType: "modify", hunks: diff.hunks || [] }, (hunks) => hunks.map((hunk) => /* @__PURE__ */ React__default.createElement(Hunk, { key: hunk.content, hunk })));
+};
+export {
+  DiffViewer
+};

package/dist/plugins/diff-source/SourceEditor.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SourceEditor: () => React.JSX.Element;

package/dist/plugins/diff-source/SourceEditor.js

@@ -0,0 +1,25 @@
+import { markdown } from "@codemirror/lang-markdown";
+import { SandpackProvider, CodeEditor } from "@codesandbox/sandpack-react";
+import React__default from "react";
+import { diffSourcePluginHooks } from "./index.js";
+import { corePluginHooks } from "../core/index.js";
+const SourceEditor = () => {
+  const [markdown$1] = corePluginHooks.useEmitterValues("markdown");
+  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
+  const codeMirrorRef = React__default.useRef(null);
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
+    CodeEditor,
+    {
+      showLineNumbers: true,
+      additionalLanguages: [{ name: "markdown", extensions: ["md"], language: markdown() }],
+      initMode: "lazy",
+      filePath: `file.md`,
+      code: markdown$1,
+      onCodeUpdate: updateMarkdown,
+      ref: codeMirrorRef
+    }
+  ))));
+};
+export {
+  SourceEditor
+};