@mdxeditor/editor 1.14.2 → 2.0.0

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

@@ -2,7 +2,8 @@ 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";
+import { iconComponentFor$ } from "../index.js";
+import { useCellValue } from "@mdxeditor/gurx";
 const MAX_SUGGESTIONS = 20;
 const DownshiftAutoComplete = (props) => {
   if (props.suggestions.length > 0) {
@@ -21,7 +22,7 @@ const DownshiftAutoCompleteWithSuggestions = ({
   setValue
 }) => {
   const [items, setItems] = React__default.useState(suggestions.slice(0, MAX_SUGGESTIONS));
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const iconComponentFor = useCellValue(iconComponentFor$);
   const enableAutoComplete = suggestions.length > 0;
   const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
     initialInputValue,

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

@@ -1,9 +1,10 @@
 import React__default from "react";
 import * as RadixPopover from "@radix-ui/react-popover";
-import { corePluginHooks } from "../index.js";
+import { editorRootElementRef$ } from "../index.js";
 import styles from "../../../styles/ui.module.css.js";
+import { useCellValue } from "@mdxeditor/gurx";
 const PopoverPortal = (props) => {
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { ...props, container: editorRootElementRef == null ? void 0 : editorRootElementRef.current });
 };
 const PopoverContent = React__default.forwardRef(

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

@@ -1,12 +1,11 @@
 import React__default from "react";
-import { diffSourcePluginHooks } from "./index.js";
 import { DiffViewer } from "./DiffViewer.js";
 import { SourceEditor } from "./SourceEditor.js";
-import { corePluginHooks } from "../core/index.js";
+import { markdownProcessingError$, viewMode$ } from "../core/index.js";
 import styles from "../../styles/ui.module.css.js";
+import { useCellValues } from "@mdxeditor/gurx";
 const DiffSourceWrapper = ({ children }) => {
-  const [error] = corePluginHooks.useEmitterValues("markdownProcessingError");
-  const [viewMode] = diffSourcePluginHooks.useEmitterValues("viewMode");
+  const [error, viewMode] = useCellValues(markdownProcessingError$, viewMode$);
   return /* @__PURE__ */ React__default.createElement("div", null, error ? /* @__PURE__ */ React__default.createElement("div", { className: styles.markdownParseError }, /* @__PURE__ */ React__default.createElement("p", null, error.error, "."), /* @__PURE__ */ React__default.createElement("p", null, "You can fix the errors in source mode and switch to rich text mode when you are ready.")) : null, /* @__PURE__ */ React__default.createElement("div", { style: { display: viewMode === "rich-text" && error == null ? "block" : "none" } }, children), viewMode === "diff" ? /* @__PURE__ */ React__default.createElement(DiffViewer, null) : null, viewMode === "source" ? /* @__PURE__ */ React__default.createElement(SourceEditor, null) : null);
 };
 export {

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

@@ -1,20 +1,20 @@
 import React__default from "react";
-import { diffSourcePluginHooks } from "./index.js";
-import { corePluginHooks } from "../core/index.js";
+import { diffMarkdown$, cmExtensions$ } from "./index.js";
+import { markdown$, markdownSourceEditorValue$, onBlur$ } 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";
+import { useCellValues, usePublisher, useCellValue } from "@mdxeditor/gurx";
 const DiffViewer = () => {
-  const [newText] = corePluginHooks.useEmitterValues("markdown");
-  const [oldText] = diffSourcePluginHooks.useEmitterValues("diffMarkdown");
-  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
+  const [newText, oldText] = useCellValues(markdown$, diffMarkdown$);
+  const updateMarkdown = 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 triggerOnBlur = corePluginHooks.usePublisher("onBlur");
+  const cmExtensions = useCellValue(cmExtensions$);
+  const triggerOnBlur = usePublisher(onBlur$);
   const ref = React__default.useCallback(
     (el) => {
       var _a;

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

@@ -4,8 +4,9 @@ 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 { cmExtensions$ } from "./index.js";
+import { markdown$, readOnly$, markdownSourceEditorValue$, onBlur$ } from "../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const COMMON_STATE_CONFIG_EXTENSIONS = [
   basicSetup,
   basicLight,
@@ -14,10 +15,9 @@ const COMMON_STATE_CONFIG_EXTENSIONS = [
   EditorView.lineWrapping
 ];
 const SourceEditor = () => {
-  const [markdown2, readOnly] = corePluginHooks.useEmitterValues("markdown", "readOnly");
-  const [cmExtensions] = diffSourcePluginHooks.useEmitterValues("cmExtensions");
-  const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
-  const triggerOnBlur = corePluginHooks.usePublisher("onBlur");
+  const [markdown2, readOnly, cmExtensions] = useCellValues(markdown$, readOnly$, cmExtensions$);
+  const updateMarkdown = usePublisher(markdownSourceEditorValue$);
+  const triggerOnBlur = usePublisher(onBlur$);
   const editorViewRef = React__default.useRef(null);
   const ref = React__default.useCallback(
     (el) => {

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

@@ -1,59 +1,24 @@
-import { coreSystem } from "../core/index.js";
+import { addEditorWrapper$, viewMode$ } from "../core/index.js";
 import { DiffSourceWrapper } from "./DiffSourceWrapper.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const diffSourceSystem = system(
-  (r, [{ markdown, setMarkdown, markdownSignal }]) => {
-    const diffMarkdown = r.node("");
-    const markdownSourceEditorValue = r.node("");
-    const cmExtensions = r.node([]);
-    r.link(markdown, markdownSourceEditorValue);
-    r.link(markdownSourceEditorValue, markdownSignal);
-    const viewMode = r.node("rich-text");
-    r.sub(
-      r.pipe(
-        viewMode,
-        r.o.scan(
-          (prev, next) => {
-            return {
-              current: prev.next,
-              next
-            };
-          },
-          { current: "rich-text", next: "rich-text" }
-        ),
-        r.o.withLatestFrom(markdownSourceEditorValue)
-      ),
-      ([{ current }, markdownSourceFromEditor]) => {
-        if (current === "source" || current === "diff") {
-          r.pub(setMarkdown, markdownSourceFromEditor);
-        }
-      }
-    );
-    return { viewMode, diffMarkdown, markdownSourceEditorValue, cmExtensions };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  diffSourcePlugin,
-  /** @internal */
-  diffSourcePluginHooks
-] = realmPlugin({
-  id: "diff-source",
-  systemSpec: diffSourceSystem,
-  applyParamsToSystem: (r, params) => {
-    r.pubKey("diffMarkdown", (params == null ? void 0 : params.diffMarkdown) || "");
+import { Cell } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+const diffMarkdown$ = Cell("");
+const cmExtensions$ = Cell([]);
+const diffSourcePlugin = realmPlugin({
+  update: (r, params) => {
+    r.pub(diffMarkdown$, (params == null ? void 0 : params.diffMarkdown) || "");
   },
   init(r, params) {
-    r.pubKey("diffMarkdown", (params == null ? void 0 : params.diffMarkdown) || "");
-    r.pubKey("cmExtensions", (params == null ? void 0 : params.codeMirrorExtensions) || []);
-    r.pubKey("addEditorWrapper", DiffSourceWrapper);
-    r.pubKey("viewMode", (params == null ? void 0 : params.viewMode) || "rich-text");
+    r.pubIn({
+      [diffMarkdown$]: (params == null ? void 0 : params.diffMarkdown) || "",
+      [cmExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
+      [addEditorWrapper$]: DiffSourceWrapper,
+      [viewMode$]: (params == null ? void 0 : params.viewMode) || "rich-text"
+    });
   }
 });
 export {
-  diffSourcePlugin,
-  diffSourcePluginHooks,
-  diffSourceSystem
+  cmExtensions$,
+  diffMarkdown$,
+  diffSourcePlugin
 };

package/dist/plugins/directives/DirectiveNode.js

@@ -7,32 +7,48 @@ var __publicField = (obj, key, value) => {
 import React__default from "react";
 import { DecoratorNode } from "lexical";
 import { NestedEditorsContext } from "../core/NestedLexicalEditor.js";
-import { directivesPluginHooks } from "./index.js";
+import { directiveDescriptors$ } from "./index.js";
 import { voidEmitter } from "../../utils/voidEmitter.js";
+import { useCellValues } from "@mdxeditor/gurx";
 let GENERATION = 0;
 class DirectiveNode extends DecoratorNode {
+  /**
+   * Constructs a new {@link DirectiveNode} with the specified MDAST directive node as the object to edit.
+   */
   constructor(mdastNode, key) {
     super(key);
+    /** @internal */
     __publicField(this, "__mdastNode");
+    /** @internal */
     __publicField(this, "__focusEmitter", voidEmitter());
+    /**
+     * Focuses the direcitive editor.
+     */
     __publicField(this, "select", () => {
       this.__focusEmitter.publish();
     });
     this.__mdastNode = mdastNode;
     this.generation = GENERATION++;
   }
+  /** @internal */
   static getType() {
     return "directive";
   }
+  /** @internal */
   static clone(node) {
     return new DirectiveNode(structuredClone(node.__mdastNode), node.__key);
   }
+  /** @internal */
   static importJSON(serializedNode) {
     return $createDirectiveNode(serializedNode.mdastNode);
   }
+  /**
+   * Returns the MDAST node that is being edited.
+   */
   getMdastNode() {
     return this.__mdastNode;
   }
+  /** @internal */
   exportJSON() {
     return {
       mdastNode: structuredClone(this.__mdastNode),
@@ -40,15 +56,21 @@ class DirectiveNode extends DecoratorNode {
       version: 1
     };
   }
+  /** @internal */
   createDOM() {
     return document.createElement(this.__mdastNode.type === "textDirective" ? "span" : "div");
   }
+  /** @internal */
   updateDOM() {
     return false;
   }
+  /**
+   * Sets a new MDAST node to edit.
+   */
   setMdastNode(mdastNode) {
     this.getWritable().__mdastNode = mdastNode;
   }
+  /** @internal */
   decorate(parentEditor, config) {
     return /* @__PURE__ */ React__default.createElement(
       DirectiveEditorContainer,
@@ -61,23 +83,25 @@ class DirectiveNode extends DecoratorNode {
       }
     );
   }
+  /** @internal */
   isInline() {
     return this.__mdastNode.type === "textDirective";
   }
+  /** @internal */
   isKeyboardSelectable() {
     return true;
   }
 }
-function DirectiveEditorContainer(props) {
+const DirectiveEditorContainer = (props) => {
   const { mdastNode } = props;
-  const [directiveDescriptors] = directivesPluginHooks.useEmitterValues("directiveDescriptors");
+  const [directiveDescriptors] = useCellValues(directiveDescriptors$);
   const descriptor = directiveDescriptors.find((descriptor2) => descriptor2.testNode(mdastNode));
   if (!descriptor) {
     throw new Error(`No descriptor found for directive ${mdastNode.name}`);
   }
   const Editor = descriptor.Editor;
   return /* @__PURE__ */ React__default.createElement(NestedEditorsContext.Provider, { value: props }, /* @__PURE__ */ React__default.createElement(Editor, { descriptor, mdastNode, lexicalNode: props.lexicalNode, parentEditor: props.parentEditor }));
-}
+};
 function $createDirectiveNode(mdastNode, key) {
   return new DirectiveNode(mdastNode, key);
 }
@@ -87,6 +111,5 @@ function $isDirectiveNode(node) {
 export {
   $createDirectiveNode,
   $isDirectiveNode,
-  DirectiveEditorContainer,
   DirectiveNode
 };

package/dist/plugins/directives/index.js

@@ -1,53 +1,46 @@
-import { coreSystem } from "../core/index.js";
-import { directive } from "micromark-extension-directive";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { insertDecoratorNode$, addMdastExtension$, addSyntaxExtension$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addToMarkdownExtension$ } from "../core/index.js";
+import { Cell, Signal, map } from "@mdxeditor/gurx";
 import { directiveFromMarkdown, directiveToMarkdown } from "mdast-util-directive";
+import { directive } from "micromark-extension-directive";
 import { $createDirectiveNode, DirectiveNode } from "./DirectiveNode.js";
+import { $isDirectiveNode } from "./DirectiveNode.js";
 import { DirectiveVisitor } from "./DirectiveVisitor.js";
 import { MdastDirectiveVisitor } from "./MdastDirectiveVisitor.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const directivesSystem = system(
-  (r, [{ insertDecoratorNode }]) => {
-    const directiveDescriptors = r.node([]);
-    const insertDirective = r.node();
-    r.link(
-      r.pipe(
-        insertDirective,
-        r.o.map((payload) => {
-          return () => $createDirectiveNode({ children: [], ...payload });
-        })
-      ),
-      insertDecoratorNode
-    );
-    return {
-      directiveDescriptors,
-      insertDirective
-    };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  directivesPlugin,
-  /** @internal */
-  directivesPluginHooks
-] = realmPlugin({
-  id: "directives",
-  systemSpec: directivesSystem,
-  applyParamsToSystem: (realm, params) => {
-    realm.pubKey("directiveDescriptors", (params == null ? void 0 : params.directiveDescriptors) || []);
+const directiveDescriptors$ = Cell([]);
+const insertDirective$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertDirective$,
+      map((payload) => {
+        return () => $createDirectiveNode({ children: [], ...payload });
+      })
+    ),
+    insertDecoratorNode$
+  );
+});
+const directivesPlugin = realmPlugin({
+  update: (realm, params) => {
+    realm.pub(directiveDescriptors$, (params == null ? void 0 : params.directiveDescriptors) || []);
   },
-  init: (realm, _) => {
-    realm.pubKey("addMdastExtension", directiveFromMarkdown);
-    realm.pubKey("addSyntaxExtension", directive());
-    realm.pubKey("addImportVisitor", MdastDirectiveVisitor);
-    realm.pubKey("addLexicalNode", DirectiveNode);
-    realm.pubKey("addExportVisitor", DirectiveVisitor);
-    realm.pubKey("addToMarkdownExtension", directiveToMarkdown);
+  init: (realm) => {
+    realm.pubIn({
+      // import
+      [addMdastExtension$]: directiveFromMarkdown(),
+      [addSyntaxExtension$]: directive(),
+      [addImportVisitor$]: MdastDirectiveVisitor,
+      // export
+      [addLexicalNode$]: DirectiveNode,
+      [addExportVisitor$]: DirectiveVisitor,
+      [addToMarkdownExtension$]: directiveToMarkdown()
+    });
   }
 });
 export {
+  $createDirectiveNode,
+  $isDirectiveNode,
+  DirectiveNode,
+  directiveDescriptors$,
   directivesPlugin,
-  directivesPluginHooks,
-  directivesSystem
+  insertDirective$
 };

package/dist/plugins/frontmatter/FrontmatterEditor.js

@@ -3,18 +3,19 @@ import classNames from "classnames";
 import YamlParser from "js-yaml";
 import React__default from "react";
 import { useForm, useFieldArray } from "react-hook-form";
-import { frontmatterPluginHooks } from "./index.js";
+import { frontmatterDialogOpen$, removeFrontmatter$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
-import { corePluginHooks } from "../core/index.js";
+import { readOnly$, editorRootElementRef$, iconComponentFor$ } from "../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const FrontmatterEditor = ({ yaml, onChange }) => {
-  const [readOnly, editorRootElementRef, iconComponentFor] = corePluginHooks.useEmitterValues(
-    "readOnly",
-    "editorRootElementRef",
-    "iconComponentFor"
+  const [readOnly, editorRootElementRef, iconComponentFor, frontmatterDialogOpen] = useCellValues(
+    readOnly$,
+    editorRootElementRef$,
+    iconComponentFor$,
+    frontmatterDialogOpen$
   );
-  const [frontmatterDialogOpen] = frontmatterPluginHooks.useEmitterValues("frontmatterDialogOpen");
-  const setFrontmatterDialogOpen = frontmatterPluginHooks.usePublisher("frontmatterDialogOpen");
-  const removeFrontmatter = frontmatterPluginHooks.usePublisher("removeFrontmatter");
+  const setFrontmatterDialogOpen = usePublisher(frontmatterDialogOpen$);
+  const removeFrontmatter = usePublisher(removeFrontmatter$);
   const yamlConfig = React__default.useMemo(() => {
     if (!yaml) {
       return [];
@@ -33,16 +34,19 @@ const FrontmatterEditor = ({ yaml, onChange }) => {
   const onSubmit = React__default.useCallback(
     ({ yamlConfig: yamlConfig2 }) => {
       if (yamlConfig2.length === 0) {
-        removeFrontmatter(true);
+        removeFrontmatter();
         setFrontmatterDialogOpen(false);
         return;
       }
-      const yaml2 = yamlConfig2.reduce((acc, { key, value }) => {
-        if (key && value) {
-          acc[key] = value;
-        }
-        return acc;
-      }, {});
+      const yaml2 = yamlConfig2.reduce(
+        (acc, { key, value }) => {
+          if (key && value) {
+            acc[key] = value;
+          }
+          return acc;
+        },
+        {}
+      );
       onChange(YamlParser.dump(yaml2).trim());
       setFrontmatterDialogOpen(false);
     },

package/dist/plugins/frontmatter/index.js

@@ -1,76 +1,65 @@
-import { coreSystem } from "../core/index.js";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { rootEditor$, createRootEditorSubscription$, addMdastExtension$, addSyntaxExtension$, addLexicalNode$, addImportVisitor$, addExportVisitor$, addToMarkdownExtension$ } from "../core/index.js";
+import { Cell, Action, withLatestFrom } from "@mdxeditor/gurx";
+import { $getRoot } from "lexical";
 import { frontmatterFromMarkdown, frontmatterToMarkdown } from "mdast-util-frontmatter";
 import { frontmatter } from "micromark-extension-frontmatter";
-import { MdastFrontmatterVisitor } from "./MdastFrontmatterVisitor.js";
-import { LexicalFrontmatterVisitor } from "./LexicalFrontmatterVisitor.js";
-import { $getRoot } from "lexical";
 import { $isFrontmatterNode, $createFrontmatterNode, FrontmatterNode } from "./FrontmatterNode.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const frontmatterSystem = system(
-  (r, [{ rootEditor, createRootEditorSubscription }]) => {
-    const insertFrontmatter = r.node();
-    const removeFrontmatter = r.node();
-    const frontmatterDialogOpen = r.node(false);
-    const hasFrontmatter = r.node(false);
-    r.sub(r.pipe(insertFrontmatter, r.o.withLatestFrom(rootEditor)), ([, theEditor]) => {
-      theEditor == null ? void 0 : theEditor.update(() => {
-        const firstItem = $getRoot().getFirstChild();
-        if (!$isFrontmatterNode(firstItem)) {
-          const fmNode = $createFrontmatterNode('"": ""');
-          if (firstItem) {
-            firstItem.insertBefore(fmNode);
-          } else {
-            $getRoot().append(fmNode);
-          }
+import { LexicalFrontmatterVisitor } from "./LexicalFrontmatterVisitor.js";
+import { MdastFrontmatterVisitor } from "./MdastFrontmatterVisitor.js";
+const frontmatterDialogOpen$ = Cell(false);
+const insertFrontmatter$ = Action((r) => {
+  r.sub(r.pipe(insertFrontmatter$, withLatestFrom(rootEditor$)), ([, rootEditor]) => {
+    rootEditor == null ? void 0 : rootEditor.update(() => {
+      const firstItem = $getRoot().getFirstChild();
+      if (!$isFrontmatterNode(firstItem)) {
+        const fmNode = $createFrontmatterNode('"": ""');
+        if (firstItem) {
+          firstItem.insertBefore(fmNode);
+        } else {
+          $getRoot().append(fmNode);
         }
-      });
-      r.pub(frontmatterDialogOpen, true);
+      }
     });
-    r.sub(r.pipe(removeFrontmatter, r.o.withLatestFrom(rootEditor)), ([, theEditor]) => {
-      theEditor == null ? void 0 : theEditor.update(() => {
-        const firstItem = $getRoot().getFirstChild();
-        if ($isFrontmatterNode(firstItem)) {
-          firstItem.remove();
-        }
-      });
-      r.pub(frontmatterDialogOpen, false);
+    r.pub(frontmatterDialogOpen$, true);
+  });
+});
+const removeFrontmatter$ = Action((r) => {
+  r.sub(r.pipe(removeFrontmatter$, withLatestFrom(rootEditor$)), ([, rootEditor]) => {
+    rootEditor == null ? void 0 : rootEditor.update(() => {
+      const firstItem = $getRoot().getFirstChild();
+      if ($isFrontmatterNode(firstItem)) {
+        firstItem.remove();
+      }
     });
-    r.pub(createRootEditorSubscription, (rootEditor2) => {
-      return rootEditor2.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          r.pub(hasFrontmatter, $isFrontmatterNode($getRoot().getFirstChild()));
-        });
+    r.pub(frontmatterDialogOpen$, false);
+  });
+});
+const hasFrontmatter$ = Cell(false, (r) => {
+  r.pub(createRootEditorSubscription$, (rootEditor) => {
+    return rootEditor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        r.pub(hasFrontmatter$, $isFrontmatterNode($getRoot().getFirstChild()));
       });
     });
-    return {
-      insertFrontmatter,
-      removeFrontmatter,
-      hasFrontmatter,
-      frontmatterDialogOpen
-    };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  frontmatterPlugin,
-  /** @internal */
-  frontmatterPluginHooks
-] = realmPlugin({
-  id: "frontmatter",
-  systemSpec: frontmatterSystem,
+  });
+});
+const frontmatterPlugin = realmPlugin({
   init: (realm) => {
-    realm.pubKey("addMdastExtension", frontmatterFromMarkdown("yaml"));
-    realm.pubKey("addSyntaxExtension", frontmatter());
-    realm.pubKey("addLexicalNode", FrontmatterNode);
-    realm.pubKey("addImportVisitor", MdastFrontmatterVisitor);
-    realm.pubKey("addExportVisitor", LexicalFrontmatterVisitor);
-    realm.pubKey("addToMarkdownExtension", frontmatterToMarkdown("yaml"));
+    realm.pubIn({
+      [addMdastExtension$]: frontmatterFromMarkdown("yaml"),
+      [addSyntaxExtension$]: frontmatter(),
+      [addLexicalNode$]: FrontmatterNode,
+      [addImportVisitor$]: MdastFrontmatterVisitor,
+      [addExportVisitor$]: LexicalFrontmatterVisitor,
+      [addToMarkdownExtension$]: frontmatterToMarkdown("yaml")
+    });
   }
 });
 export {
+  frontmatterDialogOpen$,
   frontmatterPlugin,
-  frontmatterPluginHooks,
-  frontmatterSystem
+  hasFrontmatter$,
+  insertFrontmatter$,
+  removeFrontmatter$
 };