@mdxeditor/editor 1.14.2 → 2.0.0

package/dist/plugins/core/index.js

@@ -1,202 +1,116 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
 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, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
+import { Cell, withLatestFrom, Signal, filter, scan } from "@mdxeditor/gurx";
+import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
+import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
+import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical, MarkdownParseError, UnrecognizedMarkdownConstructError } from "../../importMarkdownToLexical.js";
+import { controlOrMeta } from "../../utils/detectMac.js";
+import { noop } from "../../utils/fp.js";
+import { GenericHTMLNode } from "./GenericHTMLNode.js";
+import { $createGenericHTMLNode, $isGenericHTMLNode, TYPE_NAME } from "./GenericHTMLNode.js";
+import { LexicalGenericHTMLVisitor } from "./LexicalGenericHTMLNodeVisitor.js";
 import { LexicalLinebreakVisitor } from "./LexicalLinebreakVisitor.js";
 import { LexicalParagraphVisitor } from "./LexicalParagraphVisitor.js";
 import { LexicalRootVisitor } from "./LexicalRootVisitor.js";
 import { LexicalTextVisitor } from "./LexicalTextVisitor.js";
+import { MdastBreakVisitor } from "./MdastBreakVisitor.js";
 import { MdastFormattingVisitor } from "./MdastFormattingVisitor.js";
+import { MdastHTMLVisitor } from "./MdastHTMLVisitor.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 { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
-import { mdxJsx } from "micromark-extension-mdx-jsx";
-import { MdastHTMLVisitor } from "./MdastHTMLVisitor.js";
-import { GenericHTMLNode } from "./GenericHTMLNode.js";
-import { $createGenericHTMLNode, $isGenericHTMLNode } from "./GenericHTMLNode.js";
-import { LexicalGenericHTMLVisitor } from "./LexicalGenericHTMLNodeVisitor.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 markdownProcessingError = r.node(null);
-  const markdownErrorSignal = r.node();
+const rootEditor$ = Cell(null);
+const activeEditor$ = Cell(null);
+const contentEditableClassName$ = Cell("");
+const readOnly$ = Cell(false, (r) => {
+  r.sub(r.pipe(readOnly$, withLatestFrom(rootEditor$)), ([readOnly, rootEditor]) => {
+    rootEditor == null ? void 0 : rootEditor.setEditable(!readOnly);
+  });
+});
+const placeholder$ = Cell("");
+const autoFocus$ = Cell(false);
+const inFocus$ = Cell(false);
+const currentFormat$ = Cell(0);
+const markdownProcessingError$ = Cell(null);
+const markdownErrorSignal$ = Signal((r) => {
   r.link(
     r.pipe(
-      markdownProcessingError,
-      r.o.filter((e) => e !== null)
+      markdownProcessingError$,
+      filter((e) => e !== null)
     ),
-    markdownErrorSignal
+    markdownErrorSignal$
   );
-  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 applyFormat$ = Signal((r) => {
+  r.sub(r.pipe(applyFormat$, withLatestFrom(activeEditor$)), ([format, theEditor]) => {
+    theEditor == null ? void 0 : theEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
   });
-  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
-      });
+});
+const currentSelection$ = Cell(null, (r) => {
+  r.sub(r.pipe(currentSelection$, withLatestFrom(activeEditor$)), ([selection, theEditor]) => {
+    if (!selection || !theEditor) {
+      return;
     }
-  }
-  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 }) => {
-      const err = r.getValue(markdownProcessingError);
-      if (err !== null) {
-        return;
-      }
-      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 anchorNode = selection.anchor.getNode();
+    let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
+      const parent = e.getParent();
+      return parent !== null && $isRootOrShadowRoot(parent);
     });
-  });
-  const initialMarkdown = r.node("");
-  const markdown = r.node("", true);
-  const markdownSignal = r.node();
-  r.link(markdown, markdownSignal);
-  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();
-  function tryImportingMarkdown(markdownValue) {
-    try {
-      importMarkdownToLexical({
-        root: $getRoot(),
-        visitors: r.getValue(importVisitors),
-        mdastExtensions: r.getValue(mdastExtensions),
-        markdown: markdownValue,
-        syntaxExtensions: r.getValue(syntaxExtensions)
-      });
-      r.pub(markdownProcessingError, null);
-    } catch (e) {
-      if (e instanceof MarkdownParseError || e instanceof UnrecognizedMarkdownConstructError) {
-        r.pubIn({
-          [markdown.key]: markdownValue,
-          [markdownProcessingError.key]: {
-            error: e.message,
-            source: markdown
-          }
-        });
-      } else {
-        throw e;
-      }
+    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 initialMarkdown$ = Cell("");
+const markdown$ = Cell("");
+const markdownSignal$ = Signal((r) => {
+  r.link(markdown$, markdownSignal$);
+  r.link(initialMarkdown$, markdown$);
+});
+const importVisitors$ = Cell([]);
+const syntaxExtensions$ = Cell([]);
+const mdastExtensions$ = Cell([]);
+const usedLexicalNodes$ = Cell([]);
+const exportVisitors$ = Cell([]);
+const toMarkdownExtensions$ = Cell([]);
+const toMarkdownOptions$ = Cell({});
+const jsxIsAvailable$ = Cell(false);
+const jsxComponentDescriptors$ = Cell([]);
+const editorRootElementRef$ = Cell(null);
+const addLexicalNode$ = Appender(usedLexicalNodes$);
+const addImportVisitor$ = Appender(importVisitors$);
+const addSyntaxExtension$ = Appender(syntaxExtensions$);
+const addMdastExtension$ = Appender(mdastExtensions$);
+const addExportVisitor$ = Appender(exportVisitors$);
+const addToMarkdownExtension$ = Appender(toMarkdownExtensions$);
+const setMarkdown$ = Signal((r) => {
   r.sub(
     r.pipe(
-      setMarkdown,
-      r.o.withLatestFrom(markdown, rootEditor, inFocus),
-      r.o.filter(([newMarkdown, oldMarkdown]) => {
+      setMarkdown$,
+      withLatestFrom(markdown$, rootEditor$, inFocus$),
+      filter(([newMarkdown, oldMarkdown]) => {
         return newMarkdown.trim() !== oldMarkdown.trim();
       })
     ),
-    ([theNewMarkdownValue, , editor, inFocus2]) => {
+    ([theNewMarkdownValue, , editor, inFocus]) => {
       editor == null ? void 0 : editor.update(() => {
         $getRoot().clear();
-        tryImportingMarkdown(theNewMarkdownValue);
-        if (!inFocus2) {
+        tryImportingMarkdown(r, theNewMarkdownValue);
+        if (!inFocus) {
           $setSelection(null);
         } else {
           editor.focus();
@@ -204,124 +118,232 @@ const coreSystem = system((r) => {
       });
     }
   );
-  const initialRootEditorState = r.node((theRootEditor) => {
-    r.pub(rootEditor, theRootEditor);
-    r.pub(activeEditor, theRootEditor);
-    tryImportingMarkdown(r.getValue(initialMarkdown));
-    const autoFocusValue = r.getValue(autoFocus);
-    if (autoFocusValue) {
-      if (autoFocusValue === true) {
-        setTimeout(() => theRootEditor.focus(noop, { defaultSelection: "rootStart" }));
-        return;
+});
+function rebind() {
+  return scan((teardowns, [subs, activeEditorValue]) => {
+    teardowns.forEach((teardown) => {
+      if (!teardown) {
+        throw new Error("You have a subscription that does not return a teardown");
       }
-      setTimeout(
-        () => theRootEditor.focus(noop, {
-          defaultSelection: autoFocusValue.defaultSelection ?? "rootStart"
-        })
-      );
-    }
-  });
-  r.pub(createActiveEditorSubscription, (editor) => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        handleSelectionChange();
-      });
+      teardown();
     });
-  });
-  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 activeEditorValue ? subs.map((s) => s(activeEditorValue)) : [];
+  }, []);
+}
+const activeEditorSubscriptions$ = Cell([], (r) => {
+  r.pipe(r.combine(activeEditorSubscriptions$, activeEditor$), rebind());
+});
+const rootEditorSubscriptions$ = Cell([], (r) => {
+  r.pipe(r.combine(rootEditorSubscriptions$, rootEditor$), rebind());
+});
+const editorInFocus$ = Cell(null);
+const onBlur$ = Signal();
+const iconComponentFor$ = Cell((name) => {
+  throw new Error(`No icon component for ${name}`);
+});
+function Appender(cell$, init) {
+  return Signal((r, sig$) => {
+    r.changeWith(cell$, sig$, (values, newValue) => {
+      if (!Array.isArray(newValue)) {
+        newValue = [newValue];
+      }
+      let result = values;
+      for (const v of newValue) {
+        if (!values.includes(v)) {
+          result = [...result, v];
         }
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  });
-  r.pub(createRootEditorSubscription, (theEditor) => {
-    return theEditor.registerCommand(
-      FOCUS_COMMAND,
-      () => {
-        r.pub(inFocus, true);
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
+      }
+      return result;
+    });
+    init == null ? void 0 : init(r, sig$);
   });
-  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());
+}
+function handleSelectionChange(r) {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection)) {
+    r.pubIn({
+      [currentSelection$]: selection,
+      [currentFormat$]: selection.format
+    });
+  }
+}
+const createRootEditorSubscription$ = Appender(rootEditorSubscriptions$, (r, sig$) => {
+  r.pub(sig$, [
+    (rootEditor) => {
+      return rootEditor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, theActiveEditor) => {
+          r.pubIn({
+            [activeEditor$]: theActiveEditor,
+            [inFocus$]: true
           });
-          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
+          if (theActiveEditor._parentEditor === null) {
+            theActiveEditor.getEditorState().read(() => {
+              r.pub(editorInFocus$, {
+                rootNode: $getRoot(),
+                editorType: "lexical"
               });
             });
-            return true;
           }
+          handleSelectionChange(r);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      );
+    },
+    // Export handler
+    (rootEditor) => {
+      return rootEditor.registerUpdateListener(({ dirtyElements, dirtyLeaves, editorState }) => {
+        const err = r.getValue(markdownProcessingError$);
+        if (err !== null) {
+          return;
         }
-        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;
+        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());
+      });
+    },
+    (rootEditor) => {
+      return rootEditor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          r.pub(inFocus$, true);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      );
+    },
+    // Fixes select all when frontmatter is present
+    (rootEditor) => {
+      return rootEditor.registerCommand(
+        KEY_DOWN_COMMAND,
+        (event) => {
+          const { keyCode, ctrlKey, metaKey } = event;
+          if (keyCode === 65 && controlOrMeta(metaKey, ctrlKey)) {
+            let shouldOverride = false;
+            rootEditor.getEditorState().read(() => {
+              shouldOverride = $isDecoratorNode($getRoot().getFirstChild()) || $isDecoratorNode($getRoot().getLastChild());
+            });
+            if (shouldOverride) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+              rootEditor.update(() => {
+                var _a;
+                const rootElement = rootEditor.getRootElement();
+                (_a = window.getSelection()) == null ? void 0 : _a.selectAllChildren(rootElement);
+                rootElement.focus({
+                  preventScroll: true
+                });
+              });
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      );
     }
-    const anchorNode = selection.anchor.getNode();
-    let element = anchorNode.getKey() === "root" ? anchorNode : $findMatchingParent(anchorNode, (e) => {
-      const parent = e.getParent();
-      return parent !== null && $isRootOrShadowRoot(parent);
+  ]);
+});
+const createActiveEditorSubscription$ = Appender(activeEditorSubscriptions$, (r, sig$) => {
+  r.pub(sig$, [
+    (editor) => {
+      return editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          handleSelectionChange(r);
+        });
+      });
+    },
+    (editor) => {
+      return editor.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$]: false,
+                [onBlur$]: payload
+              });
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      );
+    }
+  ]);
+});
+function tryImportingMarkdown(r, markdownValue) {
+  try {
+    importMarkdownToLexical({
+      root: $getRoot(),
+      visitors: r.getValue(importVisitors$),
+      mdastExtensions: r.getValue(mdastExtensions$),
+      markdown: markdownValue,
+      syntaxExtensions: r.getValue(syntaxExtensions$)
     });
-    if (element === null) {
-      element = anchorNode.getTopLevelElementOrThrow();
+    r.pub(markdownProcessingError$, null);
+  } catch (e) {
+    if (e instanceof MarkdownParseError || e instanceof UnrecognizedMarkdownConstructError) {
+      r.pubIn({
+        [markdown$]: markdownValue,
+        [markdownProcessingError$]: {
+          error: e.message,
+          source: markdownValue
+        }
+      });
+    } else {
+      throw e;
     }
-    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 initialRootEditorState$ = Cell(null, (r) => {
+  r.pub(initialRootEditorState$, (theRootEditor) => {
+    r.pub(rootEditor$, theRootEditor);
+    r.pub(activeEditor$, theRootEditor);
+    tryImportingMarkdown(r, r.getValue(initialMarkdown$));
+    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"
+        })
+      );
     }
   });
-  const convertSelectionToNode = r.node();
-  r.sub(r.pipe(convertSelectionToNode, r.o.withLatestFrom(activeEditor)), ([factory, editor]) => {
+});
+const composerChildren$ = Cell([]);
+const addComposerChild$ = Appender(composerChildren$);
+const topAreaChildren$ = Cell([]);
+const addTopAreaChild$ = Appender(topAreaChildren$);
+const editorWrappers$ = Cell([]);
+const addEditorWrapper$ = Appender(editorWrappers$);
+const nestedEditorChildren$ = Cell([]);
+const addNestedEditorChild$ = Appender(nestedEditorChildren$);
+const historyState$ = Cell(createEmptyHistoryState());
+const currentBlockType$ = Cell("");
+const applyBlockType$ = Signal();
+const convertSelectionToNode$ = Signal((r) => {
+  r.sub(r.pipe(convertSelectionToNode$, withLatestFrom(activeEditor$)), ([factory, editor]) => {
     editor == null ? void 0 : editor.update(() => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
@@ -332,8 +354,9 @@ const coreSystem = system((r) => {
       }
     });
   });
-  const insertDecoratorNode = r.node();
-  r.sub(r.pipe(insertDecoratorNode, r.o.withLatestFrom(activeEditor)), ([nodeFactory, theEditor]) => {
+});
+const insertDecoratorNode$ = Signal((r) => {
+  r.sub(r.pipe(insertDecoratorNode$, withLatestFrom(activeEditor$)), ([nodeFactory, theEditor]) => {
     theEditor == null ? void 0 : theEditor.focus(
       () => {
         theEditor.getEditorState().read(() => {
@@ -365,126 +388,144 @@ const coreSystem = system((r) => {
       { 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,
-    markdownSignal,
-    // 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,
-    // error handling
-    markdownProcessingError,
-    markdownErrorSignal
-  };
-}, []);
-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
+});
+const viewMode$ = Cell("rich-text", (r) => {
+  r.sub(
+    r.pipe(
+      viewMode$,
+      scan(
+        (prev, next) => {
+          return {
+            current: prev.next,
+            next
+          };
+        },
+        { current: "rich-text", next: "rich-text" }
+      ),
+      withLatestFrom(markdownSourceEditorValue$)
+    ),
+    ([{ current }, markdownSourceFromEditor]) => {
+      if (current === "source" || current === "diff") {
+        r.pub(setMarkdown$, markdownSourceFromEditor);
+      }
+    }
+  );
+});
+const markdownSourceEditorValue$ = Cell("", (r) => {
+  r.link(markdown$, markdownSourceEditorValue$);
+  r.link(markdownSourceEditorValue$, markdownSignal$);
+});
+const activePlugins$ = Cell([]);
+const addActivePlugin$ = Appender(activePlugins$);
+const corePlugin = realmPlugin({
+  init(r, params) {
+    r.register(createRootEditorSubscription$);
+    r.register(createActiveEditorSubscription$);
+    r.pubIn({
+      [initialMarkdown$]: params == null ? void 0 : params.initialMarkdown.trim(),
+      [iconComponentFor$]: params == null ? void 0 : params.iconComponentFor,
+      [addImportVisitor$]: [
+        MdastRootVisitor,
+        MdastParagraphVisitor,
+        MdastTextVisitor,
+        MdastFormattingVisitor,
+        MdastInlineCodeVisitor,
+        MdastBreakVisitor
+      ],
+      [addLexicalNode$]: [ParagraphNode, TextNode, GenericHTMLNode],
+      [addExportVisitor$]: [
+        LexicalRootVisitor,
+        LexicalParagraphVisitor,
+        LexicalTextVisitor,
+        LexicalLinebreakVisitor,
+        LexicalGenericHTMLVisitor
+      ],
+      [addComposerChild$]: SharedHistoryPlugin
     });
-    realm.singletonSubKey("markdownSignal", params.onChange);
-    realm.singletonSubKey("onBlur", params.onBlur);
-    realm.singletonSubKey("markdownErrorSignal", params.onError);
-  },
-  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("addLexicalNode", GenericHTMLNode);
-    realm.pubKey("addExportVisitor", LexicalRootVisitor);
-    realm.pubKey("addExportVisitor", LexicalParagraphVisitor);
-    realm.pubKey("addExportVisitor", LexicalTextVisitor);
-    realm.pubKey("addExportVisitor", LexicalLinebreakVisitor);
-    realm.pubKey("addExportVisitor", LexicalGenericHTMLVisitor);
-    realm.pubKey("addComposerChild", SharedHistoryPlugin);
-    if (!params.suppressHtmlProcessing) {
-      realm.pubKey("addMdastExtension", mdxJsxFromMarkdown());
-      realm.pubKey("addSyntaxExtension", mdxJsx());
-      realm.pubKey("addToMarkdownExtension", mdxJsxToMarkdown());
-      realm.pubKey("addImportVisitor", MdastHTMLVisitor);
+    if (!(params == null ? void 0 : params.suppressHtmlProcessing)) {
+      r.pubIn({
+        [addMdastExtension$]: mdxJsxFromMarkdown(),
+        [addSyntaxExtension$]: mdxJsx(),
+        [addToMarkdownExtension$]: mdxJsxToMarkdown(),
+        [addImportVisitor$]: MdastHTMLVisitor
+      });
     }
+  },
+  update(realm, params) {
+    realm.pubIn({
+      [contentEditableClassName$]: params == null ? void 0 : params.contentEditableClassName,
+      [toMarkdownOptions$]: params == null ? void 0 : params.toMarkdownOptions,
+      [autoFocus$]: params == null ? void 0 : params.autoFocus,
+      [placeholder$]: params == null ? void 0 : params.placeholder,
+      [readOnly$]: params == null ? void 0 : params.readOnly
+    });
+    realm.singletonSub(markdownSignal$, params == null ? void 0 : params.onChange);
+    realm.singletonSub(onBlur$, params == null ? void 0 : params.onBlur);
+    realm.singletonSub(markdownErrorSignal$, params == null ? void 0 : params.onError);
   }
 });
 export {
   $createGenericHTMLNode,
   $isGenericHTMLNode,
+  Appender,
   GenericHTMLNode,
   NESTED_EDITOR_UPDATED_COMMAND,
+  TYPE_NAME,
+  activeEditor$,
+  activeEditorSubscriptions$,
+  activePlugins$,
+  addActivePlugin$,
+  addComposerChild$,
+  addEditorWrapper$,
+  addExportVisitor$,
+  addImportVisitor$,
+  addLexicalNode$,
+  addMdastExtension$,
+  addNestedEditorChild$,
+  addSyntaxExtension$,
+  addToMarkdownExtension$,
+  addTopAreaChild$,
+  applyBlockType$,
+  applyFormat$,
+  autoFocus$,
+  composerChildren$,
+  contentEditableClassName$,
+  convertSelectionToNode$,
   corePlugin,
-  corePluginHooks,
-  coreSystem
+  createActiveEditorSubscription$,
+  createRootEditorSubscription$,
+  currentBlockType$,
+  currentFormat$,
+  currentSelection$,
+  editorInFocus$,
+  editorRootElementRef$,
+  editorWrappers$,
+  exportVisitors$,
+  historyState$,
+  iconComponentFor$,
+  importVisitors$,
+  inFocus$,
+  initialMarkdown$,
+  initialRootEditorState$,
+  insertDecoratorNode$,
+  jsxComponentDescriptors$,
+  jsxIsAvailable$,
+  markdown$,
+  markdownErrorSignal$,
+  markdownProcessingError$,
+  markdownSourceEditorValue$,
+  mdastExtensions$,
+  nestedEditorChildren$,
+  onBlur$,
+  placeholder$,
+  readOnly$,
+  rootEditor$,
+  rootEditorSubscriptions$,
+  setMarkdown$,
+  syntaxExtensions$,
+  toMarkdownExtensions$,
+  toMarkdownOptions$,
+  topAreaChildren$,
+  usedLexicalNodes$,
+  viewMode$
 };