@mdxeditor/editor 1.0.0 → 1.1.0

package/dist/importMarkdownToLexical.js

@@ -3,6 +3,7 @@ function isParent(node) {
   return node.children instanceof Array;
 }
 function importMarkdownToLexical({ root, markdown, visitors, syntaxExtensions, mdastExtensions }) {
+  var _a;
   const mdastRoot = fromMarkdown(markdown, {
     extensions: syntaxExtensions,
     mdastExtensions
@@ -10,6 +11,9 @@ function importMarkdownToLexical({ root, markdown, visitors, syntaxExtensions, m
   if (mdastRoot.children.length === 0) {
     mdastRoot.children.push({ type: "paragraph", children: [] });
   }
+  if (((_a = mdastRoot.children.at(-1)) == null ? void 0 : _a.type) !== "paragraph") {
+    mdastRoot.children.push({ type: "paragraph", children: [] });
+  }
   importMdastTreeToLexical({ root, mdastRoot, visitors });
 }
 function importMdastTreeToLexical({ root, mdastRoot, visitors }) {

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

@@ -97,7 +97,7 @@ export declare const codeBlockSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -152,7 +152,7 @@ export declare const codeBlockSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -230,7 +230,7 @@ codeBlockPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -285,7 +285,7 @@ codeBlockPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -355,7 +355,7 @@ codeBlockPluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -416,7 +416,7 @@ codeBlockPluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -477,7 +477,7 @@ codeBlockPluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -537,7 +537,7 @@ codeBlockPluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -598,7 +598,7 @@ codeBlockPluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -659,7 +659,7 @@ codeBlockPluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;

package/dist/plugins/codemirror/index.d.ts

@@ -45,7 +45,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -100,7 +100,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -155,7 +155,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -215,7 +215,7 @@ export declare const codeMirrorSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -284,7 +284,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -339,7 +339,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -394,7 +394,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -454,7 +454,7 @@ codeMirrorPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -531,7 +531,7 @@ codeMirrorHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -598,7 +598,7 @@ codeMirrorHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -665,7 +665,7 @@ codeMirrorHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -731,7 +731,7 @@ codeMirrorHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -798,7 +798,7 @@ codeMirrorHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -865,7 +865,7 @@ codeMirrorHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;

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

@@ -72,10 +72,6 @@ export interface NestedEditorProps<T extends Mdast.Content> {
      * Whether or not the editor edits blocks (multiple paragraphs)
      */
     block?: boolean;
-    /**
-     * An emitter (usually constructed in the lexical node) that will activate the editor when the node is focused.
-     */
-    focusEmitter?: VoidEmitter;
 }
 /**
  * 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.

package/dist/plugins/core/NestedLexicalEditor.js

@@ -44,7 +44,7 @@ function useLexicalNodeRemove() {
 }
 const NestedLexicalEditor = function(props) {
   const { getContent, getUpdatedMdastNode, contentEditableProps, block = false } = props;
-  const { mdastNode, lexicalNode } = useNestedEditorContext();
+  const { mdastNode, lexicalNode, focusEmitter } = useNestedEditorContext();
   const updateMdastNode = useMdastNodeUpdater();
   const removeNode = useLexicalNodeRemove();
   const content = getContent(mdastNode);
@@ -66,11 +66,10 @@ const NestedLexicalEditor = function(props) {
     return editor2;
   });
   React__default.useEffect(() => {
-    var _a;
-    (_a = props.focusEmitter) == null ? void 0 : _a.subscribe(() => {
+    focusEmitter == null ? void 0 : focusEmitter.subscribe(() => {
       editor.focus();
     });
-  }, [editor, props.focusEmitter]);
+  }, [editor, focusEmitter]);
   React__default.useEffect(() => {
     editor.update(() => {
       $getRoot().clear();

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

@@ -60,7 +60,7 @@ export declare const coreSystem: SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<React.ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -90,7 +90,7 @@ interface CorePluginParams {
     placeholder?: React.ReactNode;
     autoFocus: boolean | {
         defaultSelection?: 'rootStart' | 'rootEnd';
-        preventScroll?: boolean;
+        preventScroll?: boolean | undefined;
     };
     onChange: (markdown: string) => void;
     onBlur?: (e: FocusEvent) => void;
@@ -131,7 +131,7 @@ corePlugin: PluginConstructor<SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<React.ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -189,7 +189,7 @@ corePluginHooks: {
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -245,7 +245,7 @@ corePluginHooks: {
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -301,7 +301,7 @@ corePluginHooks: {
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -356,7 +356,7 @@ corePluginHooks: {
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -412,7 +412,7 @@ corePluginHooks: {
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -468,7 +468,7 @@ corePluginHooks: {
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;

package/dist/plugins/core/index.js

@@ -2,7 +2,7 @@ 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, BLUR_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
+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";
@@ -137,8 +137,8 @@ const coreSystem = system((r) => {
   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]) => {
+    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({
@@ -148,6 +148,9 @@ const coreSystem = system((r) => {
           markdown: theNewMarkdownValue,
           syntaxExtensions: syntaxExtensions2
         });
+        if (!inFocus2) {
+          $setSelection(null);
+        }
       });
     }
   );
@@ -169,8 +172,7 @@ const coreSystem = system((r) => {
       }
       setTimeout(
         () => theRootEditor.focus(noop, {
-          defaultSelection: autoFocusValue.defaultSelection ?? "rootStart",
-          preventScroll: autoFocusValue.preventScroll ?? false
+          defaultSelection: autoFocusValue.defaultSelection ?? "rootStart"
         })
       );
     }
@@ -296,7 +298,7 @@ const coreSystem = system((r) => {
                   $insertNodeToNearestRoot(node);
                 }
                 if (Object.hasOwn(node, "select") && typeof node.select === "function") {
-                  setTimeout(() => node.select(), 80);
+                  setTimeout(() => node.select());
                 }
               });
             }

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

@@ -1,17 +1,57 @@
 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";
+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 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 })));
+  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 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,
+          collapseUnchanged: { margin: 2, minSize: 3 },
+          a: {
+            doc: oldMarkdown,
+            extensions: [...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+          },
+          b: {
+            doc: newMarkdown,
+            extensions: [
+              ...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]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { ref });
 };
 export {
   DiffViewer

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

@@ -1,2 +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

@@ -1,28 +1,44 @@
 import { markdown } from "@codemirror/lang-markdown";
-import { SandpackProvider, CodeEditor } from "@codesandbox/sandpack-react";
+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";
-import { EditorView } from "@codemirror/view";
+const COMMON_STATE_CONFIG_EXTENSIONS = [basicSetup, basicLight, markdown(), lineNumbers()];
 const SourceEditor = () => {
-  const [markdown$1, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
+  const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
   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,
-    {
-      readOnly,
-      extensions: [EditorView.lineWrapping],
-      showLineNumbers: true,
-      additionalLanguages: [{ name: "markdown", extensions: ["md"], language: markdown() }],
-      initMode: "lazy",
-      filePath: `file.md`,
-      code: markdown$1,
-      onCodeUpdate: updateMarkdown,
-      ref: codeMirrorRef
-    }
-  ))));
+  const editorViewRef = React__default.useRef(null);
+  const ref = React__default.useCallback(
+    (el) => {
+      var _a;
+      if (el !== null) {
+        const extensions = [
+          ...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]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { ref, className: "cm-sourceView" });
 };
 export {
+  COMMON_STATE_CONFIG_EXTENSIONS,
   SourceEditor
 };

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

@@ -46,7 +46,7 @@ export declare const diffSourceSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -101,7 +101,7 @@ export declare const diffSourceSystem: SystemSpec<[SystemSpec<[], (r: Realm) =>
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -163,7 +163,7 @@ diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -218,7 +218,7 @@ diffSourcePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     placeholder: RealmNode<ReactNode>;
     autoFocus: RealmNode<boolean | {
         defaultSelection?: "rootStart" | "rootEnd" | undefined;
-        preventScroll: boolean;
+        preventScroll?: boolean | undefined;
     }>;
     readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -287,7 +287,7 @@ diffSourcePluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -347,7 +347,7 @@ diffSourcePluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -407,7 +407,7 @@ diffSourcePluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -466,7 +466,7 @@ diffSourcePluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -526,7 +526,7 @@ diffSourcePluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;
@@ -586,7 +586,7 @@ diffSourcePluginHooks: {
         placeholder: RealmNode<ReactNode>;
         autoFocus: RealmNode<boolean | {
             defaultSelection?: "rootStart" | "rootEnd" | undefined;
-            preventScroll: boolean;
+            preventScroll?: boolean | undefined;
         }>;
         readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<ComponentType<{}>[]>;

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

@@ -23,7 +23,8 @@ const diffSourceSystem = system(
         r.o.withLatestFrom(markdownSourceEditorValue)
       ),
       ([{ current }, markdownSourceFromEditor]) => {
-        if (current === "source") {
+        if (current === "source" || current === "diff") {
+          console.log("setting markdown", markdownSourceFromEditor);
           r.pub(setMarkdown, markdownSourceFromEditor);
         }
       }