@mdxeditor/editor 1.14.3 → 2.0.0

package/dist/plugins/thematic-break/index.js

@@ -1,39 +1,26 @@
-import { coreSystem } from "../core/index.js";
-import { MdastThematicBreakVisitor } from "./MdastThematicBreakVisitor.js";
-import { LexicalThematicBreakVisitor } from "./LexicalThematicBreakVisitor.js";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 import { INSERT_HORIZONTAL_RULE_COMMAND, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
 import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const thematicBreakSystem = system(
-  (r, [{ activeEditor }]) => {
-    const insertThematicBreak = r.node();
-    r.sub(r.pipe(insertThematicBreak, r.o.withLatestFrom(activeEditor)), ([, theEditor]) => {
-      theEditor == null ? void 0 : theEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+import { Action, withLatestFrom } from "@mdxeditor/gurx";
+import { activeEditor$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
+import { LexicalThematicBreakVisitor } from "./LexicalThematicBreakVisitor.js";
+import { MdastThematicBreakVisitor } from "./MdastThematicBreakVisitor.js";
+const insertThematicBreak$ = Action((r) => {
+  r.sub(r.pipe(insertThematicBreak$, withLatestFrom(activeEditor$)), ([, theEditor]) => {
+    theEditor == null ? void 0 : theEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+  });
+});
+const thematicBreakPlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addImportVisitor$]: MdastThematicBreakVisitor,
+      [addLexicalNode$]: HorizontalRuleNode,
+      [addExportVisitor$]: LexicalThematicBreakVisitor,
+      [addComposerChild$]: HorizontalRulePlugin
     });
-    return {
-      insertThematicBreak
-    };
-  },
-  [coreSystem]
-);
-const [
-  /** @internal */
-  thematicBreakPlugin,
-  /** @internal */
-  thematicBreakPluginHooks
-] = realmPlugin({
-  id: "thematic-break",
-  systemSpec: thematicBreakSystem,
-  init: (realm) => {
-    realm.pubKey("addImportVisitor", MdastThematicBreakVisitor);
-    realm.pubKey("addLexicalNode", HorizontalRuleNode);
-    realm.pubKey("addExportVisitor", LexicalThematicBreakVisitor);
-    realm.pubKey("addComposerChild", HorizontalRulePlugin);
   }
 });
 export {
-  thematicBreakPlugin,
-  thematicBreakPluginHooks,
-  thematicBreakSystem
+  insertThematicBreak$,
+  thematicBreakPlugin
 };

package/dist/plugins/toolbar/components/BlockTypeSelect.js

@@ -1,15 +1,16 @@
 import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
 import { $createParagraphNode } from "lexical";
 import React__default from "react";
-import { corePluginHooks } from "../../core/index.js";
+import { convertSelectionToNode$, currentBlockType$, activePlugins$ } from "../../core/index.js";
+import { allowedHeadingLevels$ } from "../../headings/index.js";
 import { Select } from "../primitives/select.js";
-import { headingsPluginHooks } from "../../headings/index.js";
-import { useHasPlugin } from "../../../gurx/react.js";
 const BlockTypeSelect = () => {
-  const convertSelectionToNode = corePluginHooks.usePublisher("convertSelectionToNode");
-  const [currentBlockType] = corePluginHooks.useEmitterValues("currentBlockType");
-  const hasQuote = useHasPlugin("quote");
-  const hasHeadings = useHasPlugin("headings");
+  const convertSelectionToNode = usePublisher(convertSelectionToNode$);
+  const currentBlockType = useCellValue(currentBlockType$);
+  const activePlugins = useCellValue(activePlugins$);
+  const hasQuote = activePlugins.includes("quote");
+  const hasHeadings = activePlugins.includes("headings");
   if (!hasQuote && !hasHeadings) {
     return null;
   }
@@ -18,7 +19,7 @@ const BlockTypeSelect = () => {
     items.push({ label: "Quote", value: "quote" });
   }
   if (hasHeadings) {
-    const [allowedHeadingLevels] = headingsPluginHooks.useEmitterValues("allowedHeadingLevels");
+    const allowedHeadingLevels = useCellValue(allowedHeadingLevels$);
     items.push(...allowedHeadingLevels.map((n) => ({ label: `Heading ${n}`, value: `h${n}` })));
   }
   return /* @__PURE__ */ React__default.createElement(

package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.js

@@ -1,17 +1,17 @@
+import { currentFormat$, iconComponentFor$, applyFormat$ } from "../../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import React__default from "react";
-import { corePluginHooks } from "../../core/index.js";
 import { IS_BOLD, IS_ITALIC, IS_UNDERLINE } from "../../../FormatConstants.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 const BoldItalicUnderlineToggles = () => {
-  const [currentFormat] = corePluginHooks.useEmitterValues("currentFormat");
-  const applyFormat = corePluginHooks.usePublisher("applyFormat");
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
+  const applyFormat = usePublisher(applyFormat$);
   const boldIsOn = (currentFormat & IS_BOLD) !== 0;
   const italicIsOn = (currentFormat & IS_ITALIC) !== 0;
   const underlineIsOn = (currentFormat & IS_UNDERLINE) !== 0;
   const boldTitle = boldIsOn ? "Remove bold" : "Bold";
   const italicTitle = italicIsOn ? "Remove italic" : "Italic";
   const underlineTitle = underlineIsOn ? "Remove underline" : "Underline";
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(
     MultipleChoiceToggleGroup,
     {

package/dist/plugins/toolbar/components/ChangeAdmonitionType.js

@@ -1,9 +1,10 @@
 import React__default from "react";
-import { corePluginHooks } from "../../core/index.js";
+import { editorInFocus$, rootEditor$ } from "../../core/index.js";
 import { Select } from "../primitives/select.js";
 import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
+import { useCellValues } from "@mdxeditor/gurx";
 const ChangeAdmonitionType = () => {
-  const [editorInFocus, rootEditor] = corePluginHooks.useEmitterValues("editorInFocus", "rootEditor");
+  const [editorInFocus, rootEditor] = useCellValues(editorInFocus$, rootEditor$);
   const admonitionNode = editorInFocus.rootNode;
   return /* @__PURE__ */ React__default.createElement(
     Select,

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

@@ -1,12 +1,12 @@
+import { useCellValues } from "@mdxeditor/gurx";
 import React__default from "react";
-import { corePluginHooks } from "../../core/index.js";
-import { Select } from "../primitives/select.js";
-import { codeMirrorHooks } from "../../codemirror/index.js";
 import styles from "../../../styles/ui.module.css.js";
+import { codeBlockLanguages$ } from "../../codemirror/index.js";
+import { editorInFocus$, activeEditor$ } from "../../core/index.js";
+import { Select } from "../primitives/select.js";
 const ChangeCodeMirrorLanguage = () => {
-  const [editorInFocus, theEditor] = corePluginHooks.useEmitterValues("editorInFocus", "activeEditor");
+  const [editorInFocus, theEditor, codeBlockLanguages] = useCellValues(editorInFocus$, activeEditor$, codeBlockLanguages$);
   const codeBlockNode = editorInFocus.rootNode;
-  const [codeBlockLanguages] = codeMirrorHooks.useEmitterValues("codeBlockLanguages");
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement("label", null, "Code block language:"), /* @__PURE__ */ React__default.createElement(
     Select,
     {

package/dist/plugins/toolbar/components/CodeToggle.js

@@ -1,10 +1,11 @@
 import React__default from "react";
 import { IS_CODE } from "../../../FormatConstants.js";
-import { corePluginHooks } from "../../core/index.js";
+import { currentFormat$, iconComponentFor$, applyFormat$ } from "../../core/index.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const CodeToggle = () => {
-  const [currentFormat, iconComponentFor] = corePluginHooks.useEmitterValues("currentFormat", "iconComponentFor");
-  const applyFormat = corePluginHooks.usePublisher("applyFormat");
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
+  const applyFormat = usePublisher(applyFormat$);
   const codeIsOn = (currentFormat & IS_CODE) !== 0;
   const title = codeIsOn ? "Remove code format" : "Inline code format";
   return /* @__PURE__ */ React__default.createElement(

package/dist/plugins/toolbar/components/CreateLink.js

@@ -1,15 +1,17 @@
 import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import { linkDialogPluginHooks } from "../../link-dialog/index.js";
+import { openLinkEditDialog$ } from "../../link-dialog/index.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const CreateLink = () => {
-  const openLinkDialog = linkDialogPluginHooks.usePublisher("openLinkEditDialog");
-  const [iconComponentFor] = linkDialogPluginHooks.useEmitterValues("iconComponentFor");
+  const openLinkDialog = usePublisher(openLinkEditDialog$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
       title: "Create link",
       onClick: (_) => {
-        openLinkDialog(true);
+        openLinkDialog();
       }
     },
     iconComponentFor("link")

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.js

@@ -1,11 +1,11 @@
+import { viewMode$, iconComponentFor$ } from "../../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import React__default from "react";
-import { diffSourcePluginHooks } from "../../diff-source/index.js";
-import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 import styles from "../../../styles/ui.module.css.js";
+import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 const DiffSourceToggleWrapper = ({ children }) => {
-  const [viewMode] = diffSourcePluginHooks.useEmitterValues("viewMode");
-  const changeViewMode = diffSourcePluginHooks.usePublisher("viewMode");
-  const [iconComponentFor] = diffSourcePluginHooks.useEmitterValues("iconComponentFor");
+  const [viewMode, iconComponentFor] = useCellValues(viewMode$, iconComponentFor$);
+  const changeViewMode = usePublisher(viewMode$);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Diff mode") : /* @__PURE__ */ React__default.createElement("span", { className: styles.toolbarTitleMode }, "Source mode"), /* @__PURE__ */ React__default.createElement("div", { style: { marginLeft: "auto", pointerEvents: "auto", opacity: 1 } }, /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {

package/dist/plugins/toolbar/components/InsertAdmonition.js

@@ -1,10 +1,12 @@
 import React__default from "react";
 import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
-import { directivesPluginHooks } from "../../directives/index.js";
+import { insertDirective$ } from "../../directives/index.js";
 import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const InsertAdmonition = () => {
-  const insertDirective = directivesPluginHooks.usePublisher("insertDirective");
-  const [iconComponentFor] = directivesPluginHooks.useEmitterValues("iconComponentFor");
+  const insertDirective = usePublisher(insertDirective$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
   const items = React__default.useMemo(
     () => ADMONITION_TYPES.map((type) => ({ value: type, label: type.replace(/^./, (l) => l.toUpperCase()) })),
     []

package/dist/plugins/toolbar/components/InsertCodeBlock.js

@@ -1,9 +1,11 @@
 import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import { codeBlockPluginHooks } from "../../codeblock/index.js";
+import { insertCodeBlock$ } from "../../codeblock/index.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const InsertCodeBlock = () => {
-  const insertCodeBlock = codeBlockPluginHooks.usePublisher("insertCodeBlock");
-  const [iconComponentFor] = codeBlockPluginHooks.useEmitterValues("iconComponentFor");
+  const insertCodeBlock = usePublisher(insertCodeBlock$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {

package/dist/plugins/toolbar/components/InsertFrontmatter.js

@@ -1,12 +1,13 @@
 import React__default from "react";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
-import { frontmatterPluginHooks } from "../../frontmatter/index.js";
+import { insertFrontmatter$, hasFrontmatter$ } from "../../frontmatter/index.js";
 import styles from "../../../styles/ui.module.css.js";
 import classNames from "classnames";
+import { usePublisher, useCellValues } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const InsertFrontmatter = () => {
-  const insertFrontmatter = frontmatterPluginHooks.usePublisher("insertFrontmatter");
-  const [hasFrontmatter] = frontmatterPluginHooks.useEmitterValues("hasFrontmatter");
-  const [iconComponentFor] = frontmatterPluginHooks.useEmitterValues("iconComponentFor");
+  const insertFrontmatter = usePublisher(insertFrontmatter$);
+  const [hasFrontmatter, iconComponentFor] = useCellValues(hasFrontmatter$, iconComponentFor$);
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {
@@ -14,7 +15,7 @@ const InsertFrontmatter = () => {
       className: classNames({
         [styles.activeToolbarButton]: hasFrontmatter
       }),
-      onClick: insertFrontmatter.bind(null, true)
+      onClick: () => insertFrontmatter()
     },
     iconComponentFor("frontmatter")
   );

package/dist/plugins/toolbar/components/InsertImage.js

@@ -1,13 +1,14 @@
 import React__default from "react";
-import { imagePluginHooks } from "../../image/index.js";
+import { openNewImageDialog$ } from "../../image/index.js";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import styles from "../../../styles/ui.module.css.js";
-import { corePluginHooks } from "../../core/index.js";
+import { readOnly$, iconComponentFor$ } from "../../core/index.js";
 import { TooltipWrap } from "../primitives/TooltipWrap.js";
+import { usePublisher, useCellValues } from "@mdxeditor/gurx";
 const InsertImage = React__default.forwardRef((_, forwardedRef) => {
-  const openNewImageDialog = imagePluginHooks.usePublisher("openNewImageDialog");
-  const [readOnly, iconComponentFor] = corePluginHooks.useEmitterValues("readOnly", "iconComponentFor");
-  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog(true) }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: "Insert image" }, iconComponentFor("add_photo")));
+  const openNewImageDialog = usePublisher(openNewImageDialog$);
+  const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
+  return /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly, onClick: () => openNewImageDialog() }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: "Insert image" }, iconComponentFor("add_photo")));
 });
 export {
   InsertImage

package/dist/plugins/toolbar/components/InsertSandpack.js

@@ -1,11 +1,12 @@
 import React__default from "react";
 import { ButtonOrDropdownButton } from "../primitives/toolbar.js";
-import { sandpackPluginHooks } from "../../sandpack/index.js";
+import { sandpackConfig$, insertSandpack$ } from "../../sandpack/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const InsertSandpack = () => {
-  const [sandpackConfig] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
-  const insertSandpack = sandpackPluginHooks.usePublisher("insertSandpack");
+  const [sandpackConfig, iconComponentFor] = useCellValues(sandpackConfig$, iconComponentFor$);
+  const insertSandpack = usePublisher(insertSandpack$);
   const items = React__default.useMemo(() => sandpackConfig.presets.map((preset) => ({ value: preset.name, label: preset.label })), [sandpackConfig]);
-  const [iconComponentFor] = sandpackPluginHooks.useEmitterValues("iconComponentFor");
   return /* @__PURE__ */ React__default.createElement(ButtonOrDropdownButton, { title: "Insert Sandpack", onChoose: insertSandpack, items }, iconComponentFor("sandpack"));
 };
 export {

package/dist/plugins/toolbar/components/InsertTable.js

@@ -1,9 +1,11 @@
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import React__default from "react";
-import { tablePluginHooks } from "../../table/index.js";
+import { insertTable$ } from "../../table/index.js";
+import { useCellValue, usePublisher } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const InsertTable = () => {
-  const [iconComponentFor] = tablePluginHooks.useEmitterValues("iconComponentFor");
-  const insertTable = tablePluginHooks.usePublisher("insertTable");
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const insertTable = usePublisher(insertTable$);
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {

package/dist/plugins/toolbar/components/InsertThematicBreak.js

@@ -1,10 +1,12 @@
 import React__default from "react";
-import { thematicBreakPluginHooks } from "../../thematic-break/index.js";
+import { insertThematicBreak$ } from "../../thematic-break/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const InsertThematicBreak = () => {
-  const insertThematicBreak = thematicBreakPluginHooks.usePublisher("insertThematicBreak");
-  const [iconComponentFor] = thematicBreakPluginHooks.useEmitterValues("iconComponentFor");
-  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Insert thematic break", onClick: insertThematicBreak.bind(null, true) }, iconComponentFor("horizontal_rule"));
+  const insertThematicBreak = usePublisher(insertThematicBreak$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  return /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: "Insert thematic break", onClick: () => insertThematicBreak() }, iconComponentFor("horizontal_rule"));
 };
 export {
   InsertThematicBreak

package/dist/plugins/toolbar/components/ListsToggle.js

@@ -1,10 +1,11 @@
 import React__default from "react";
-import { listsPluginHooks } from "../../lists/index.js";
+import { currentListType$, applyListType$ } from "../../lists/index.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import { iconComponentFor$ } from "../../core/index.js";
 const ListsToggle = () => {
-  const [currentListType] = listsPluginHooks.useEmitterValues("currentListType");
-  const applyListType = listsPluginHooks.usePublisher("applyListType");
-  const [iconComponentFor] = listsPluginHooks.useEmitterValues("iconComponentFor");
+  const [currentListType, iconComponentFor] = useCellValues(currentListType$, iconComponentFor$);
+  const applyListType = usePublisher(applyListType$);
   return /* @__PURE__ */ React__default.createElement(
     SingleChoiceToggleGroup,
     {

package/dist/plugins/toolbar/components/ShowSandpackInfo.js

@@ -1,12 +1,17 @@
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
-import { corePluginHooks } from "../../core/index.js";
-import { sandpackPluginHooks } from "../../sandpack/index.js";
+import { editorInFocus$, activeEditor$, iconComponentFor$ } from "../../core/index.js";
+import { sandpackConfig$ } from "../../sandpack/index.js";
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { useCellValues } from "@mdxeditor/gurx";
 const ShowSandpackInfo = () => {
-  const [editorInFocus, theEditor, iconComponentFor] = corePluginHooks.useEmitterValues("editorInFocus", "activeEditor", "iconComponentFor");
+  const [editorInFocus, theEditor, iconComponentFor, sandpackConfig] = useCellValues(
+    editorInFocus$,
+    activeEditor$,
+    iconComponentFor$,
+    sandpackConfig$
+  );
   const sandpackNode = editorInFocus.rootNode;
-  const [sandpackConfig] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
   const preset = sandpackConfig.presets.find((preset2) => preset2.meta === sandpackNode.getMeta());
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,

package/dist/plugins/toolbar/components/UndoRedo.js

@@ -1,12 +1,12 @@
 import { mergeRegister } from "@lexical/utils";
+import { useCellValues } from "@mdxeditor/gurx";
 import { CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from "lexical";
 import React__default from "react";
 import { IS_APPLE } from "../../../utils/detectMac.js";
-import { corePluginHooks } from "../../core/index.js";
+import { iconComponentFor$, activeEditor$ } from "../../core/index.js";
 import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
 const UndoRedo = () => {
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
-  const [activeEditor] = corePluginHooks.useEmitterValues("activeEditor");
+  const [iconComponentFor, activeEditor] = useCellValues(iconComponentFor$, activeEditor$);
   const [canUndo, setCanUndo] = React__default.useState(false);
   const [canRedo, setCanRedo] = React__default.useState(false);
   React__default.useEffect(() => {

package/dist/plugins/toolbar/index.js

@@ -1,40 +1,24 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { Cell, useCellValues } from "@mdxeditor/gurx";
 import React__default from "react";
-import { coreSystem, corePluginHooks } from "../core/index.js";
+import { addTopAreaChild$, readOnly$ } from "../core/index.js";
 import { Root } from "./primitives/toolbar.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const toolbarSystem = system(
-  (r) => {
-    const toolbarContents = r.node(() => null);
-    return {
-      toolbarContents
-    };
-  },
-  [coreSystem]
-);
+const toolbarContents$ = Cell(() => null);
 const DEFAULT_TOOLBAR_CONTENTS = () => {
   return "This is an empty toolbar. Pass `{toolbarContents: () => { return <>toolbar components</> }}` to the toolbarPlugin to customize it.";
 };
-const [
-  /** @internal */
-  toolbarPlugin,
-  /** @internal */
-  toolbarPluginHooks
-] = realmPlugin({
-  id: "toolbar",
-  systemSpec: toolbarSystem,
-  init: (realm, params) => {
-    realm.pubKey("toolbarContents", (params == null ? void 0 : params.toolbarContents) ?? DEFAULT_TOOLBAR_CONTENTS);
-    realm.pubKey("addTopAreaChild", ToolbarWrapper);
+const toolbarPlugin = realmPlugin({
+  init(realm, params) {
+    realm.pubIn({
+      [toolbarContents$]: (params == null ? void 0 : params.toolbarContents) ?? DEFAULT_TOOLBAR_CONTENTS,
+      [addTopAreaChild$]: () => {
+        const [toolbarContents, readOnly] = useCellValues(toolbarContents$, readOnly$);
+        return /* @__PURE__ */ React__default.createElement(Root, { readOnly }, toolbarContents());
+      }
+    });
   }
 });
-const ToolbarWrapper = () => {
-  const [toolbarContents] = toolbarPluginHooks.useEmitterValues("toolbarContents");
-  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
-  return /* @__PURE__ */ React__default.createElement(Root, { readOnly }, toolbarContents());
-};
 export {
-  toolbarPlugin,
-  toolbarPluginHooks,
-  toolbarSystem
+  toolbarContents$,
+  toolbarPlugin
 };

package/dist/plugins/toolbar/primitives/DialogButton.js

@@ -3,35 +3,34 @@ import * as RadixToolbar from "@radix-ui/react-toolbar";
 import React__default from "react";
 import classNames from "classnames";
 import { useCombobox } from "downshift";
-import { corePluginHooks } from "../../core/index.js";
+import { editorRootElementRef$, readOnly$, iconComponentFor$ } from "../../core/index.js";
 import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
+import { useCellValues, useCellValue } from "@mdxeditor/gurx";
 const MAX_SUGGESTIONS = 20;
-const DialogButton = React__default.forwardRef(
-  ({ autocompleteSuggestions = [], submitButtonTitle, dialogInputPlaceholder, onSubmit, tooltipTitle, buttonContent }, forwardedRef) => {
-    const [editorRootElementRef, readOnly] = corePluginHooks.useEmitterValues("editorRootElementRef", "readOnly");
-    const [open, setOpen] = React__default.useState(false);
-    const onSubmitCallback = React__default.useCallback(
-      (value) => {
-        onSubmit(value);
-        setOpen(false);
-      },
-      [onSubmit]
-    );
-    return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
-      DialogForm,
-      {
-        submitButtonTitle,
-        autocompleteSuggestions,
-        onSubmitCallback,
-        dialogInputPlaceholder
-      }
-    ))));
-  }
-);
+const DialogButton = React__default.forwardRef(({ autocompleteSuggestions = [], submitButtonTitle, dialogInputPlaceholder, onSubmit, tooltipTitle, buttonContent }, forwardedRef) => {
+  const [editorRootElementRef, readOnly] = useCellValues(editorRootElementRef$, readOnly$);
+  const [open, setOpen] = React__default.useState(false);
+  const onSubmitCallback = React__default.useCallback(
+    (value) => {
+      onSubmit(value);
+      setOpen(false);
+    },
+    [onSubmit]
+  );
+  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
+    DialogForm,
+    {
+      submitButtonTitle,
+      autocompleteSuggestions,
+      onSubmitCallback,
+      dialogInputPlaceholder
+    }
+  ))));
+});
 const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
   const [items, setItems] = React__default.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const iconComponentFor = useCellValue(iconComponentFor$);
   const enableAutoComplete = autocompleteSuggestions.length > 0;
   const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
     initialInputValue: "",

package/dist/plugins/toolbar/primitives/TooltipWrap.js

@@ -2,9 +2,10 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import classNames from "classnames";
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
-import { corePluginHooks } from "../../core/index.js";
+import { useCellValue } from "@mdxeditor/gurx";
+import { editorRootElementRef$ } from "../../core/index.js";
 const TooltipWrap = React__default.forwardRef(({ title, children }, ref) => {
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
   return /* @__PURE__ */ React__default.createElement(Tooltip.Provider, { delayDuration: 100 }, /* @__PURE__ */ React__default.createElement(Tooltip.Root, null, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { ref, asChild: true }, /* @__PURE__ */ React__default.createElement("span", { className: styles.tooltipTrigger }, children)), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 10 }, title))));
 });
 export {

package/dist/plugins/toolbar/primitives/select.js

@@ -3,14 +3,15 @@ import * as RadixSelect from "@radix-ui/react-select";
 import classNames from "classnames";
 import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
-import { corePluginHooks } from "../../core/index.js";
+import { readOnly$, iconComponentFor$, editorRootElementRef$ } from "../../core/index.js";
+import { useCellValues, useCellValue } from "@mdxeditor/gurx";
 const SelectItem = React__default.forwardRef(
   ({ children, className, ...props }, forwardedRef) => {
     return /* @__PURE__ */ React__default.createElement(RadixSelect.Item, { ...props, ref: forwardedRef, className: classNames(className, styles.selectItem) }, /* @__PURE__ */ React__default.createElement(RadixSelect.ItemText, null, children));
   }
 );
 const SelectTrigger = ({ title, placeholder, className }) => {
-  const [readOnly, iconComponentFor] = corePluginHooks.useEmitterValues("readOnly", "iconComponentFor");
+  const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
   return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(
     RadixSelect.Trigger,
     {
@@ -27,7 +28,7 @@ const SelectContent = ({
   children,
   className = styles.selectContainer
 }) => {
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
   return /* @__PURE__ */ React__default.createElement(RadixSelect.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(RadixSelect.Content, { className, onCloseAutoFocus: (e) => e.preventDefault(), position: "popper" }, /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true }, children)));
 };
 const SelectButtonTrigger = ({
@@ -35,7 +36,7 @@ const SelectButtonTrigger = ({
   title,
   className
 }) => {
-  const [readOnly, iconComponentFor] = corePluginHooks.useEmitterValues("readOnly", "iconComponentFor");
+  const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
   return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, iconComponentFor("arrow_drop_down"))));
 };
 const Select = (props) => {

package/dist/plugins/toolbar/primitives/toolbar.js

@@ -5,7 +5,8 @@ import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
 import { SelectButtonTrigger, SelectContent, SelectItem } from "./select.js";
-import { corePluginHooks } from "../../core/index.js";
+import { readOnly$, editorInFocus$ } from "../../core/index.js";
+import { useCellValue } from "@mdxeditor/gurx";
 function decorateWithRef(Component, decoratedProps) {
   return React__default.forwardRef((props, ref) => {
     const className = classNames(decoratedProps.className, props.className);
@@ -63,7 +64,12 @@ const MultipleChoiceToggleGroup = ({ items }) => {
     item.contents
   )));
 };
-const SingleChoiceToggleGroup = ({ value, onChange, className, items }) => {
+const SingleChoiceToggleGroup = ({
+  value,
+  onChange,
+  className,
+  items
+}) => {
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.toolbarGroupOfGroups }, /* @__PURE__ */ React__default.createElement(
     RadixToolbar.ToggleGroup,
     {
@@ -77,14 +83,14 @@ const SingleChoiceToggleGroup = ({ value, onChange, className, items }) => {
   ));
 };
 const ButtonOrDropdownButton = (props) => {
-  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  const readOnly = useCellValue(readOnly$);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.items.length === 1 ? /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: props.title, onClick: () => props.onChoose(""), disabled: readOnly }, props.children) : /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: "", onValueChange: props.onChoose }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: props.title }, props.children), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, props.items.map((item, index) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label)))));
 };
 function isConditionalContentsOption(option) {
   return Object.hasOwn(option, "when");
 }
 const ConditionalContents = ({ options }) => {
-  const [editorInFocus] = corePluginHooks.useEmitterValues("editorInFocus");
+  const editorInFocus = useCellValue(editorInFocus$);
   const contents = React__default.useMemo(() => {
     const option = options.find((option2) => {
       if (isConditionalContentsOption(option2)) {