@mdxeditor/editor 0.0.0-development

package/dist/plugins/core/index.js

@@ -0,0 +1,420 @@
+import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin.js";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
+import { createCommand, SELECTION_CHANGE_COMMAND, $getRoot, COMMAND_PRIORITY_CRITICAL, $setSelection, BLUR_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, 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 { noop } from "../../utils/fp.js";
+import { controlOrMeta } from "../../utils/detectMac.js";
+import { MdastBreakVisitor } from "./MdastBreakVisitor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
+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 readOnly = r.node(false);
+  const placeholder = r.node("");
+  const autoFocus = r.node(false);
+  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 onBlur = r.node();
+  const iconComponentFor = r.node((name) => {
+    throw new Error(`No icon component for ${name}`);
+  });
+  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, inFocus)),
+    ([theNewMarkdownValue, editor, importVisitors2, mdastExtensions2, syntaxExtensions2, inFocus2]) => {
+      editor == null ? void 0 : editor.update(() => {
+        $getRoot().clear();
+        importMarkdownToLexical({
+          root: $getRoot(),
+          visitors: importVisitors2,
+          mdastExtensions: mdastExtensions2,
+          markdown: theNewMarkdownValue,
+          syntaxExtensions: syntaxExtensions2
+        });
+        if (!inFocus2) {
+          $setSelection(null);
+        }
+      });
+    }
+  );
+  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)
+    });
+    const autoFocusValue = r.getValue(autoFocus);
+    if (autoFocusValue) {
+      if (autoFocusValue === true) {
+        setTimeout(() => theRootEditor.focus(noop, { defaultSelection: "rootStart" }));
+        return;
+      }
+      setTimeout(
+        () => theRootEditor.focus(noop, {
+          defaultSelection: autoFocusValue.defaultSelection ?? "rootStart"
+        })
+      );
+    }
+  });
+  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.pubIn({
+              [inFocus.key]: false,
+              [onBlur.key]: payload
+            });
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  });
+  r.pub(createRootEditorSubscription, (theRootEditor) => {
+    return theRootEditor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const { keyCode, ctrlKey, metaKey } = event;
+        if (keyCode === 65 && controlOrMeta(metaKey, ctrlKey)) {
+          let shouldOverride = false;
+          theRootEditor.getEditorState().read(() => {
+            shouldOverride = $isDecoratorNode($getRoot().getFirstChild()) || $isDecoratorNode($getRoot().getLastChild());
+          });
+          if (shouldOverride) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            theRootEditor.update(() => {
+              var _a;
+              const rootElement = theRootEditor.getRootElement();
+              (_a = window.getSelection()) == null ? void 0 : _a.selectAllChildren(rootElement);
+              rootElement.focus({
+                preventScroll: true
+              });
+            });
+            return true;
+          }
+        }
+        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();
+                if (node.isInline()) {
+                  $insertNodes([node]);
+                  if ($isRootOrShadowRoot(node.getParentOrThrow())) {
+                    $wrapNodeInElement(node, $createParagraphNode).selectEnd();
+                  }
+                } else {
+                  $insertNodeToNearestRoot(node);
+                }
+                if ("select" in node && typeof node.select === "function") {
+                  setTimeout(() => node.select());
+                }
+              });
+            }
+          }
+        });
+      },
+      { defaultSelection: "rootEnd" }
+    );
+  });
+  r.sub(r.pipe(readOnly, r.o.withLatestFrom(rootEditor)), ([readOnly2, theRootEditor]) => {
+    theRootEditor == null ? void 0 : theRootEditor.setEditable(!readOnly2);
+  });
+  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,
+    placeholder,
+    autoFocus,
+    readOnly,
+    // child controls
+    composerChildren,
+    addComposerChild,
+    topAreaChildren,
+    addTopAreaChild,
+    nestedEditorChildren,
+    addNestedEditorChild,
+    editorWrappers,
+    addEditorWrapper,
+    // editor content state and commands
+    currentFormat,
+    editorInFocus,
+    applyFormat,
+    currentBlockType,
+    applyBlockType,
+    convertSelectionToNode,
+    insertDecoratorNode,
+    // Events
+    onBlur,
+    iconComponentFor
+  };
+}, []);
+const [
+  /** @internal */
+  corePlugin,
+  /** @internal */
+  corePluginHooks
+] = realmPlugin({
+  id: "core",
+  systemSpec: coreSystem,
+  applyParamsToSystem(realm, params) {
+    realm.pubKeys({
+      contentEditableClassName: params.contentEditableClassName,
+      toMarkdownOptions: params.toMarkdownOptions,
+      autoFocus: params.autoFocus,
+      placeholder: params.placeholder,
+      readOnly: params.readOnly
+    });
+    realm.singletonSubKey("markdown", params.onChange);
+    realm.singletonSubKey("onBlur", params.onBlur);
+  },
+  init(realm, params) {
+    realm.pubKey("initialMarkdown", params.initialMarkdown.trim());
+    realm.pubKey("iconComponentFor", params.iconComponentFor);
+    realm.pubKey("addImportVisitor", MdastRootVisitor);
+    realm.pubKey("addImportVisitor", MdastParagraphVisitor);
+    realm.pubKey("addImportVisitor", MdastTextVisitor);
+    realm.pubKey("addImportVisitor", MdastFormattingVisitor);
+    realm.pubKey("addImportVisitor", MdastInlineCodeVisitor);
+    realm.pubKey("addImportVisitor", MdastBreakVisitor);
+    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/DownshiftAutoComplete.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Control, UseFormSetValue, UseFormRegister } from 'react-hook-form';
+interface DownshiftAutoCompleteProps {
+    suggestions: string[];
+    control: Control<any, any>;
+    setValue: UseFormSetValue<any>;
+    register: UseFormRegister<any>;
+    placeholder: string;
+    inputName: string;
+    autofocus?: boolean;
+    initialInputValue: string;
+}
+export declare const DownshiftAutoComplete: React.FC<DownshiftAutoCompleteProps>;
+export declare const DownshiftAutoCompleteWithSuggestions: React.FC<DownshiftAutoCompleteProps>;
+export {};

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

@@ -0,0 +1,83 @@
+import { useCombobox } from "downshift";
+import React__default from "react";
+import { Controller } from "react-hook-form";
+import styles from "../../../styles/ui.module.css.js";
+import { corePluginHooks } from "../index.js";
+const MAX_SUGGESTIONS = 20;
+const DownshiftAutoComplete = (props) => {
+  if (props.suggestions.length > 0) {
+    return /* @__PURE__ */ React__default.createElement(DownshiftAutoCompleteWithSuggestions, { ...props });
+  } else {
+    return /* @__PURE__ */ React__default.createElement("input", { className: styles.textInput, size: 40, autoFocus: true, ...props.register(props.inputName) });
+  }
+};
+const DownshiftAutoCompleteWithSuggestions = ({
+  autofocus,
+  suggestions,
+  control,
+  inputName,
+  placeholder,
+  initialInputValue,
+  setValue
+}) => {
+  const [items, setItems] = React__default.useState(suggestions.slice(0, MAX_SUGGESTIONS));
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const enableAutoComplete = suggestions.length > 0;
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue,
+    onInputValueChange({ inputValue = "" }) {
+      setValue(inputName, inputValue);
+      inputValue = (inputValue == null ? void 0 : inputValue.toLowerCase()) || "";
+      const matchingItems = [];
+      for (const suggestion of suggestions) {
+        if (suggestion.toLowerCase().includes(inputValue)) {
+          matchingItems.push(suggestion);
+          if (matchingItems.length >= MAX_SUGGESTIONS) {
+            break;
+          }
+        }
+      }
+      setItems(matchingItems);
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    }
+  });
+  const dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.downshiftAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.downshiftInputWrapper }, /* @__PURE__ */ React__default.createElement(
+    Controller,
+    {
+      name: inputName,
+      control,
+      render: ({ field }) => {
+        const downshiftSrcProps = getInputProps();
+        return /* @__PURE__ */ React__default.createElement(
+          "input",
+          {
+            ...downshiftSrcProps,
+            name: field.name,
+            placeholder,
+            className: styles.downshiftInput,
+            size: 30,
+            "data-editor-dialog": true,
+            autoFocus: autofocus
+          }
+        );
+      }
+    }
+  ), enableAutoComplete && /* @__PURE__ */ React__default.createElement("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps() }, iconComponentFor("arrow_drop_down"))), /* @__PURE__ */ React__default.createElement("div", { className: styles.downshiftAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      "data-selected": selectedItem === item,
+      "data-highlighted": highlightedIndex === index,
+      key: `${item}${index}`,
+      ...getItemProps({ item, index })
+    },
+    item
+  )))));
+};
+export {
+  DownshiftAutoComplete,
+  DownshiftAutoCompleteWithSuggestions
+};

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,59 @@
+import React__default from "react";
+import { diffSourcePluginHooks } from "./index.js";
+import { corePluginHooks } from "../core/index.js";
+import { MergeView } from "@codemirror/merge";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { COMMON_STATE_CONFIG_EXTENSIONS } from "./SourceEditor.js";
+const DiffViewer = () => {
+  const [newText] = corePluginHooks.useEmitterValues("markdown");
+  const [oldText] = diffSourcePluginHooks.useEmitterValues("diffMarkdown");
+  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
+  return /* @__PURE__ */ React__default.createElement(CmMergeView, { oldMarkdown: oldText, newMarkdown: newText, onUpdate: updateMarkdown });
+};
+const CmMergeView = ({ oldMarkdown, newMarkdown, onUpdate }) => {
+  const cmMergeViewRef = React__default.useRef(null);
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
+  const ref = React__default.useCallback(
+    (el) => {
+      var _a;
+      if (el !== null) {
+        cmMergeViewRef.current = new MergeView({
+          renderRevertControl: () => {
+            const el2 = document.createElement("button");
+            el2.classList.add("cm-merge-revert");
+            el2.appendChild(document.createTextNode("⮕"));
+            return el2;
+          },
+          parent: el,
+          orientation: "a-b",
+          revertControls: "a-to-b",
+          gutter: true,
+          a: {
+            doc: oldMarkdown,
+            extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+          },
+          b: {
+            doc: newMarkdown,
+            extensions: [
+              ...cmExtensions,
+              ...COMMON_STATE_CONFIG_EXTENSIONS,
+              EditorView.updateListener.of(({ state }) => {
+                const md = state.doc.toString();
+                onUpdate(md);
+              })
+            ]
+          }
+        });
+      } else {
+        (_a = cmMergeViewRef.current) == null ? void 0 : _a.destroy();
+        cmMergeViewRef.current = null;
+      }
+    },
+    [newMarkdown, oldMarkdown, onUpdate, cmExtensions]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { ref });
+};
+export {
+  DiffViewer
+};

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

@@ -0,0 +1,4 @@
+import { Extension } from '@codemirror/state';
+import React from 'react';
+export declare const COMMON_STATE_CONFIG_EXTENSIONS: Extension[];
+export declare const SourceEditor: () => React.JSX.Element;

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

@@ -0,0 +1,47 @@
+import { markdown } from "@codemirror/lang-markdown";
+import { EditorState } from "@codemirror/state";
+import { lineNumbers, EditorView } from "@codemirror/view";
+import { basicLight } from "cm6-theme-basic-light";
+import { basicSetup } from "codemirror";
+import React__default from "react";
+import { diffSourcePluginHooks } from "./index.js";
+import { corePluginHooks } from "../core/index.js";
+const COMMON_STATE_CONFIG_EXTENSIONS = [basicSetup, basicLight, markdown(), lineNumbers()];
+const SourceEditor = () => {
+  const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
+  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
+  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
+  const editorViewRef = React__default.useRef(null);
+  const ref = React__default.useCallback(
+    (el) => {
+      var _a;
+      if (el !== null) {
+        const extensions = [
+          // custom extensions should come first so that you can override the default extensions
+          ...cmExtensions,
+          ...COMMON_STATE_CONFIG_EXTENSIONS,
+          EditorView.updateListener.of(({ state }) => {
+            updateMarkdown(state.doc.toString());
+          })
+        ];
+        if (readOnly) {
+          extensions.push(EditorState.readOnly.of(true));
+        }
+        el.innerHTML = "";
+        editorViewRef.current = new EditorView({
+          parent: el,
+          state: EditorState.create({ doc: markdown2, extensions })
+        });
+      } else {
+        (_a = editorViewRef.current) == null ? void 0 : _a.destroy();
+        editorViewRef.current = null;
+      }
+    },
+    [markdown2, readOnly, updateMarkdown, cmExtensions]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView" });
+};
+export {
+  COMMON_STATE_CONFIG_EXTENSIONS,
+  SourceEditor
+};