@mdxeditor/editor 1.14.3 → 2.0.1

package/dist/plugins/headings/index.js

@@ -1,11 +1,11 @@
-import { coreSystem } from "../core/index.js";
-import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
 import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
-import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
+import { Cell } from "@mdxeditor/gurx";
 import { KEY_DOWN_COMMAND, $createParagraphNode, COMMAND_PRIORITY_LOW } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 import { controlOrMeta } from "../../utils/detectMac.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
+import { createRootEditorSubscription$, convertSelectionToNode$, addActivePlugin$, addImportVisitor$, addLexicalNode$, addExportVisitor$ } from "../core/index.js";
+import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
+import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
 const FORMATTING_KEYS = [48, 49, 50, 51, 52, 53, 54];
 const ALL_HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
 const CODE_TO_HEADING_LEVEL_MAP = {
@@ -16,54 +16,48 @@ const CODE_TO_HEADING_LEVEL_MAP = {
   53: 5,
   54: 6
 };
-const headingsSystem = system(
-  (r, [{ createRootEditorSubscription, convertSelectionToNode }]) => {
-    const allowedHeadingLevels = r.node(ALL_HEADING_LEVELS);
-    r.pub(createRootEditorSubscription, (theRootEditor) => {
-      return theRootEditor.registerCommand(
-        KEY_DOWN_COMMAND,
-        (event) => {
-          const { keyCode, ctrlKey, metaKey, altKey } = event;
-          if (FORMATTING_KEYS.includes(keyCode) && controlOrMeta(metaKey, ctrlKey) && altKey) {
-            event.preventDefault();
-            theRootEditor.update(() => {
-              if (keyCode === 48) {
-                r.pub(convertSelectionToNode, () => $createParagraphNode());
-              } else {
-                const allowedHeadingLevelsValues = r.getValue(allowedHeadingLevels);
-                const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[keyCode];
-                if (!allowedHeadingLevelsValues.includes(requestedHeadingLevel)) {
-                  r.pub(convertSelectionToNode, () => $createHeadingNode(`h${requestedHeadingLevel}`));
-                }
+const allowedHeadingLevels$ = Cell(ALL_HEADING_LEVELS, (r) => {
+  r.pub(createRootEditorSubscription$, (theRootEditor) => {
+    return theRootEditor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const { keyCode, ctrlKey, metaKey, altKey } = event;
+        if (FORMATTING_KEYS.includes(keyCode) && controlOrMeta(metaKey, ctrlKey) && altKey) {
+          event.preventDefault();
+          theRootEditor.update(() => {
+            if (keyCode === 48) {
+              r.pub(convertSelectionToNode$, () => $createParagraphNode());
+            } else {
+              const allowedHeadingLevels = r.getValue(allowedHeadingLevels$);
+              const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[keyCode];
+              if (!allowedHeadingLevels.includes(requestedHeadingLevel)) {
+                r.pub(convertSelectionToNode$, () => $createHeadingNode(`h${requestedHeadingLevel}`));
               }
-            });
-            return true;
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      );
+            }
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  });
+});
+const headingsPlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addActivePlugin$]: "headings",
+      [addImportVisitor$]: MdastHeadingVisitor,
+      [addLexicalNode$]: HeadingNode,
+      [addExportVisitor$]: LexicalHeadingVisitor
     });
-    return {
-      allowedHeadingLevels
-    };
-  },
-  [coreSystem]
-);
-const [headingsPlugin, headingsPluginHooks] = realmPlugin({
-  id: "headings",
-  systemSpec: headingsSystem,
-  applyParamsToSystem(realm, params) {
-    realm.pubKey("allowedHeadingLevels", (params == null ? void 0 : params.allowedHeadingLevels) ?? ALL_HEADING_LEVELS);
   },
-  init: (realm) => {
-    realm.pubKey("addImportVisitor", MdastHeadingVisitor);
-    realm.pubKey("addLexicalNode", HeadingNode);
-    realm.pubKey("addExportVisitor", LexicalHeadingVisitor);
+  update(realm, params) {
+    realm.pub(allowedHeadingLevels$, (params == null ? void 0 : params.allowedHeadingLevels) ?? ALL_HEADING_LEVELS);
   }
 });
 export {
-  headingsPlugin,
-  headingsPluginHooks,
-  headingsSystem
+  ALL_HEADING_LEVELS,
+  allowedHeadingLevels$,
+  headingsPlugin
 };

package/dist/plugins/image/ImageDialog.js

@@ -3,14 +3,18 @@ import classNames from "classnames";
 import React__default from "react";
 import { useForm } from "react-hook-form";
 import styles from "../../styles/ui.module.css.js";
-import { corePluginHooks } from "../core/index.js";
-import { imagePluginHooks } from "./index.js";
+import { editorRootElementRef$ } from "../core/index.js";
+import { imageAutocompleteSuggestions$, imageDialogState$, saveImage$, closeImageDialog$ } from "./index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const ImageDialog = () => {
-  const [imageAutocompleteSuggestions, state] = imagePluginHooks.useEmitterValues("imageAutocompleteSuggestions", "imageDialogState");
-  const saveImage = imagePluginHooks.usePublisher("saveImage");
-  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
-  const closeImageDialog = imagePluginHooks.usePublisher("closeImageDialog");
+  const [imageAutocompleteSuggestions, state, editorRootElementRef] = useCellValues(
+    imageAutocompleteSuggestions$,
+    imageDialogState$,
+    editorRootElementRef$
+  );
+  const saveImage = usePublisher(saveImage$);
+  const closeImageDialog = usePublisher(closeImageDialog$);
   const { register, handleSubmit, control, setValue, reset } = useForm({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     values: state.type === "editing" ? state.initialValues : {}
@@ -21,7 +25,7 @@ const ImageDialog = () => {
       open: state.type !== "inactive",
       onOpenChange: (open) => {
         if (!open) {
-          closeImageDialog(true);
+          closeImageDialog();
           reset({ src: "", title: "", altText: "" });
         }
       }

package/dist/plugins/image/ImageEditor.js

@@ -4,11 +4,12 @@ import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection.
 import { mergeRegister } from "@lexical/utils";
 import classNames from "classnames";
 import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
-import { imagePluginHooks } from "./index.js";
+import { disableImageResize$, imagePreviewHandler$, openEditImageDialog$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
-import { corePluginHooks } from "../core/index.js";
+import { iconComponentFor$, readOnly$ } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -47,6 +48,13 @@ function LazyImage({
   );
 }
 function ImageEditor({ src, title, alt, nodeKey, width, height }) {
+  const [disableImageResize, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues(
+    disableImageResize$,
+    imagePreviewHandler$,
+    iconComponentFor$,
+    readOnly$
+  );
+  const openEditImageDialog = usePublisher(openEditImageDialog$);
   const imageRef = React__default.useRef(null);
   const buttonRef = React__default.useRef(null);
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -54,12 +62,8 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
   const [selection, setSelection] = React__default.useState(null);
   const activeEditorRef = React__default.useRef(null);
   const [isResizing, setIsResizing] = React__default.useState(false);
-  const [disableImageResize] = imagePluginHooks.useEmitterValues("disableImageResize");
-  const [imagePreviewHandler] = imagePluginHooks.useEmitterValues("imagePreviewHandler");
   const [imageSource, setImageSource] = React__default.useState(null);
   const [initialImagePath, setInitialImagePath] = React__default.useState(null);
-  const openEditImageDialog = imagePluginHooks.usePublisher("openEditImageDialog");
-  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -118,7 +122,7 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
     } else {
       setImageSource(src);
     }
-  }, [src, imagePreviewHandler]);
+  }, [src, imagePreviewHandler, initialImagePath]);
   React__default.useEffect(() => {
     let isMounted = true;
     const unregister = mergeRegister(
@@ -211,6 +215,7 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
       type: "button",
       className: classNames(styles.iconButton, styles.editImageButton),
       title: "Edit image",
+      disabled: readOnly,
       onClick: () => {
         openEditImageDialog({
           nodeKey,

package/dist/plugins/image/ImageNode.js

@@ -16,12 +16,21 @@ function convertImageElement(domNode) {
   return null;
 }
 class ImageNode extends DecoratorNode {
+  /**
+   * Constructs a new {@link ImageNode} with the specified image parameters.
+   * Use {@link $createImageNode} to construct one.
+   */
   constructor(src, altText, title, width, height, key) {
     super(key);
+    /** @internal */
     __publicField(this, "__src");
+    /** @internal */
     __publicField(this, "__altText");
+    /** @internal */
     __publicField(this, "__title");
+    /** @internal */
     __publicField(this, "__width");
+    /** @internal */
     __publicField(this, "__height");
     this.__src = src;
     this.__title = title;
@@ -29,12 +38,15 @@ class ImageNode extends DecoratorNode {
     this.__width = width || "inherit";
     this.__height = height || "inherit";
   }
+  /** @internal */
   static getType() {
     return "image";
   }
+  /** @internal */
   static clone(node) {
     return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
   }
+  /** @internal */
   static importJSON(serializedNode) {
     const { altText, title, src, width, height } = serializedNode;
     const node = $createImageNode({
@@ -46,6 +58,7 @@ class ImageNode extends DecoratorNode {
     });
     return node;
   }
+  /** @internal */
   exportDOM() {
     const element = document.createElement("img");
     element.setAttribute("src", this.__src);
@@ -61,6 +74,7 @@ class ImageNode extends DecoratorNode {
     }
     return { element };
   }
+  /** @internal */
   static importDOM() {
     return {
       img: () => ({
@@ -69,6 +83,7 @@ class ImageNode extends DecoratorNode {
       })
     };
   }
+  /** @internal */
   exportJSON() {
     return {
       altText: this.getAltText(),
@@ -80,11 +95,15 @@ class ImageNode extends DecoratorNode {
       version: 1
     };
   }
+  /**
+   * Sets the image dimensions
+   */
   setWidthAndHeight(width, height) {
     const writable = this.getWritable();
     writable.__width = width;
     writable.__height = height;
   }
+  /** @internal */
   createDOM(config) {
     const span = document.createElement("span");
     const theme = config.theme;
@@ -94,6 +113,7 @@ class ImageNode extends DecoratorNode {
     }
     return span;
   }
+  /** @internal */
   updateDOM() {
     return false;
   }
@@ -112,9 +132,6 @@ class ImageNode extends DecoratorNode {
   getWidth() {
     return this.__width;
   }
-  hasExplicitDimensions() {
-    return this.__width !== "inherit" || this.__height !== "inherit";
-  }
   setTitle(title) {
     this.getWritable().__title = title;
   }
@@ -124,6 +141,11 @@ class ImageNode extends DecoratorNode {
   setAltText(altText) {
     this.getWritable().__altText = altText ?? "";
   }
+  /** @internal */
+  hasExplicitDimensions() {
+    return this.__width !== "inherit" || this.__height !== "inherit";
+  }
+  /** @internal */
   decorate(_parentEditor) {
     return /* @__PURE__ */ React__default.createElement(
       ImageEditor,
@@ -138,8 +160,8 @@ class ImageNode extends DecoratorNode {
     );
   }
 }
-function $createImageNode(options) {
-  const { altText, title, src, key, width, height } = options;
+function $createImageNode(params) {
+  const { altText, title, src, key, width, height } = params;
   return new ImageNode(src, altText, title, width, height, key);
 }
 function $isImageNode(node) {

package/dist/plugins/image/index.js

@@ -1,37 +1,24 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
 import { $wrapNodeInElement } from "@lexical/utils";
+import { Signal, Cell, withLatestFrom, Action, mapTo, map } from "@mdxeditor/gurx";
 import { $getNodeByKey, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, COMMAND_PRIORITY_LOW, DROP_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, createCommand, $createRangeSelection, $setSelection, $getSelection, $isNodeSelection } from "lexical";
-import { coreSystem } from "../core/index.js";
-import { $createImageNode, $isImageNode, ImageNode } from "./ImageNode.js";
-import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
-import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
+import { rootEditor$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
 import { ImageDialog } from "./ImageDialog.js";
-import { system } from "../../gurx/realmFactory.js";
-import { realmPlugin } from "../../gurx/react.js";
-const imageSystem = system(
-  (r, [{ rootEditor }]) => {
-    const insertImage = r.node();
-    const imageAutocompleteSuggestions = r.node([]);
-    const disableImageResize = r.node(false);
-    const imageUploadHandler = r.node(null);
-    const imagePreviewHandler = r.node(null);
-    const imageDialogState = r.node({ type: "inactive" });
-    const openNewImageDialog = r.node();
-    const openEditImageDialog = r.node();
-    const closeImageDialog = r.node();
-    const saveImage = r.node();
-    r.link(r.pipe(closeImageDialog, r.o.mapTo({ type: "inactive" })), imageDialogState);
-    r.link(r.pipe(openNewImageDialog, r.o.mapTo({ type: "new" })), imageDialogState);
-    r.link(
-      r.pipe(
-        openEditImageDialog,
-        r.o.map((payload) => ({ type: "editing", ...payload }))
-      ),
-      imageDialogState
-    );
+import { $createImageNode, ImageNode, $isImageNode } from "./ImageNode.js";
+import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
+import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
+const insertImage$ = Signal();
+const imageAutocompleteSuggestions$ = Cell([]);
+const disableImageResize$ = Cell(false);
+const imageUploadHandler$ = Cell(null);
+const imagePreviewHandler$ = Cell(null);
+const imageDialogState$ = Cell(
+  { type: "inactive" },
+  (r) => {
     r.sub(
-      r.pipe(saveImage, r.o.withLatestFrom(rootEditor, imageUploadHandler, imageDialogState)),
-      ([values, theEditor, imageUploadHandler2, dialogState]) => {
+      r.pipe(saveImage$, withLatestFrom(rootEditor$, imageUploadHandler$, imageDialogState$)),
+      ([values, theEditor, imageUploadHandler, dialogState]) => {
         const handler = dialogState.type === "editing" ? (src) => {
           theEditor == null ? void 0 : theEditor.update(() => {
             const { nodeKey } = dialogState;
@@ -40,7 +27,7 @@ const imageSystem = system(
             imageNode.setAltText(values.altText);
             imageNode.setSrc(src);
           });
-          r.pub(imageDialogState, { type: "inactive" });
+          r.pub(imageDialogState$, { type: "inactive" });
         } : (src) => {
           theEditor == null ? void 0 : theEditor.update(() => {
             const imageNode = $createImageNode({ altText: values.altText ?? "", src, title: values.title ?? "" });
@@ -49,10 +36,10 @@ const imageSystem = system(
               $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
             }
           });
-          r.pub(imageDialogState, { type: "inactive" });
+          r.pub(imageDialogState$, { type: "inactive" });
         };
         if (values.file.length > 0) {
-          imageUploadHandler2 == null ? void 0 : imageUploadHandler2(values.file.item(0)).then(handler).catch((e) => {
+          imageUploadHandler == null ? void 0 : imageUploadHandler(values.file.item(0)).then(handler).catch((e) => {
             throw e;
           });
         } else if (values.src) {
@@ -60,7 +47,7 @@ const imageSystem = system(
         }
       }
     );
-    r.sub(rootEditor, (editor) => {
+    r.sub(rootEditor$, (editor) => {
       editor == null ? void 0 : editor.registerCommand(
         INSERT_IMAGE_COMMAND,
         (payload) => {
@@ -73,7 +60,7 @@ const imageSystem = system(
         },
         COMMAND_PRIORITY_EDITOR
       );
-      const theUploadHandler = r.getValue(imageUploadHandler);
+      const theUploadHandler = r.getValue(imageUploadHandler$);
       editor == null ? void 0 : editor.registerCommand(
         DRAGSTART_COMMAND,
         (event) => {
@@ -91,7 +78,7 @@ const imageSystem = system(
       editor == null ? void 0 : editor.registerCommand(
         DROP_COMMAND,
         (event) => {
-          return onDrop(event, editor, r.getValue(imageUploadHandler));
+          return onDrop(event, editor, r.getValue(imageUploadHandler$));
         },
         COMMAND_PRIORITY_HIGH
       );
@@ -107,7 +94,7 @@ const imageSystem = system(
           if (!cbPayload.length || cbPayload.length === 0) {
             return false;
           }
-          const imageUploadHandlerValue = r.getValue(imageUploadHandler);
+          const imageUploadHandlerValue = r.getValue(imageUploadHandler$);
           Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
             urls.forEach((url) => {
               editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
@@ -123,42 +110,40 @@ const imageSystem = system(
         COMMAND_PRIORITY_CRITICAL
       );
     });
-    return {
-      imageDialogState,
-      saveImage,
-      openNewImageDialog,
-      openEditImageDialog,
-      closeImageDialog,
-      imageUploadHandler,
-      imageAutocompleteSuggestions,
-      disableImageResize,
-      insertImage,
-      imagePreviewHandler
-    };
-  },
-  [coreSystem]
+  }
 );
-const [
-  /** @internal */
-  imagePlugin,
-  /** @internal */
-  imagePluginHooks
-] = realmPlugin({
-  id: "image",
-  systemSpec: imageSystem,
-  applyParamsToSystem: (realm, params) => {
-    realm.pubKey("imageUploadHandler", (params == null ? void 0 : params.imageUploadHandler) || null);
-    realm.pubKey("imageAutocompleteSuggestions", (params == null ? void 0 : params.imageAutocompleteSuggestions) || []);
-    realm.pubKey("disableImageResize", Boolean(params == null ? void 0 : params.disableImageResize));
-    realm.pubKey("imagePreviewHandler", (params == null ? void 0 : params.imagePreviewHandler) || null);
+const openNewImageDialog$ = Action((r) => {
+  r.link(r.pipe(openNewImageDialog$, mapTo({ type: "new" })), imageDialogState$);
+});
+const openEditImageDialog$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      openEditImageDialog$,
+      map((payload) => ({ type: "editing", ...payload }))
+    ),
+    imageDialogState$
+  );
+});
+const closeImageDialog$ = Action((r) => {
+  r.link(r.pipe(closeImageDialog$, mapTo({ type: "inactive" })), imageDialogState$);
+});
+const saveImage$ = Signal();
+const imagePlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addImportVisitor$]: [MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor],
+      [addLexicalNode$]: ImageNode,
+      [addExportVisitor$]: LexicalImageVisitor,
+      [addComposerChild$]: ImageDialog
+    });
   },
-  init: (realm) => {
-    realm.pubKey("addImportVisitor", MdastImageVisitor);
-    realm.pubKey("addImportVisitor", MdastHtmlImageVisitor);
-    realm.pubKey("addImportVisitor", MdastJsxImageVisitor);
-    realm.pubKey("addLexicalNode", ImageNode);
-    realm.pubKey("addExportVisitor", LexicalImageVisitor);
-    realm.pubKey("addComposerChild", ImageDialog);
+  update(realm, params) {
+    realm.pubIn({
+      [imageUploadHandler$]: (params == null ? void 0 : params.imageUploadHandler) || null,
+      [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) || [],
+      [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
+      [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) || null
+    });
   }
 });
 const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
@@ -294,7 +279,15 @@ export {
   $isImageNode,
   INSERT_IMAGE_COMMAND,
   ImageNode,
+  closeImageDialog$,
+  disableImageResize$,
+  imageAutocompleteSuggestions$,
+  imageDialogState$,
   imagePlugin,
-  imagePluginHooks,
-  imageSystem
+  imagePreviewHandler$,
+  imageUploadHandler$,
+  insertImage$,
+  openEditImageDialog$,
+  openNewImageDialog$,
+  saveImage$
 };

package/dist/plugins/jsx/LexicalJsxNode.js

@@ -7,8 +7,9 @@ var __publicField = (obj, key, value) => {
 import { DecoratorNode } from "lexical";
 import React__default from "react";
 import { NestedEditorsContext } from "../core/NestedLexicalEditor.js";
-import { jsxPluginHooks } from "./index.js";
 import { voidEmitter } from "../../utils/voidEmitter.js";
+import { useCellValue } from "@mdxeditor/gurx";
+import { jsxComponentDescriptors$ } from "../core/index.js";
 class LexicalJsxNode extends DecoratorNode {
   constructor(mdastNode, key) {
     super(key);
@@ -68,7 +69,7 @@ class LexicalJsxNode extends DecoratorNode {
 }
 function JsxEditorContainer(props) {
   const { mdastNode } = props;
-  const [jsxComponentDescriptors] = jsxPluginHooks.useEmitterValues("jsxComponentDescriptors");
+  const jsxComponentDescriptors = useCellValue(jsxComponentDescriptors$);
   const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name);
   if (!descriptor) {
     throw new Error(`No JSX descriptor found for ${mdastNode.name}`);