@portabletext/toolbar 0.0.0

package/dist/index.cjs

@@ -0,0 +1,1945 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var compilerRuntime = require("react/compiler-runtime"), editor = require("@portabletext/editor"), behaviors = require("@portabletext/editor/behaviors"), selectors = require("@portabletext/editor/selectors"), react = require("@xstate/react"), xstate = require("xstate"), React = require("react");
+function _interopNamespaceCompat(e) {
+  if (e && typeof e == "object" && "default" in e) return e;
+  var n = /* @__PURE__ */ Object.create(null);
+  return e && Object.keys(e).forEach(function(k) {
+    if (k !== "default") {
+      var d = Object.getOwnPropertyDescriptor(e, k);
+      Object.defineProperty(n, k, d.get ? d : {
+        enumerable: !0,
+        get: function() {
+          return e[k];
+        }
+      });
+    }
+  }), n.default = e, Object.freeze(n);
+}
+var selectors__namespace = /* @__PURE__ */ _interopNamespaceCompat(selectors), React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
+function useToolbarSchema(props) {
+  const $ = compilerRuntime.c(37), editor$1 = editor.useEditor(), schema = editor.useEditorSelector(editor$1, _temp$1);
+  let t0;
+  if ($[0] !== props || $[1] !== schema.decorators) {
+    let t12;
+    $[3] !== props ? (t12 = (decorator) => props.extendDecorator?.(decorator) ?? decorator, $[3] = props, $[4] = t12) : t12 = $[4], t0 = schema.decorators.map(t12), $[0] = props, $[1] = schema.decorators, $[2] = t0;
+  } else
+    t0 = $[2];
+  let t1;
+  if ($[5] !== props || $[6] !== schema.annotations) {
+    let t22;
+    $[8] !== props ? (t22 = (annotation) => props.extendAnnotation?.(annotation) ?? annotation, $[8] = props, $[9] = t22) : t22 = $[9], t1 = schema.annotations.map(t22), $[5] = props, $[6] = schema.annotations, $[7] = t1;
+  } else
+    t1 = $[7];
+  let t2;
+  if ($[10] !== props || $[11] !== schema.lists) {
+    let t32;
+    $[13] !== props ? (t32 = (list) => props.extendList?.(list) ?? list, $[13] = props, $[14] = t32) : t32 = $[14], t2 = schema.lists.map(t32), $[10] = props, $[11] = schema.lists, $[12] = t2;
+  } else
+    t2 = $[12];
+  let t3;
+  if ($[15] !== props || $[16] !== schema.blockObjects) {
+    let t42;
+    $[18] !== props ? (t42 = (blockObject) => props.extendBlockObject?.(blockObject) ?? blockObject, $[18] = props, $[19] = t42) : t42 = $[19], t3 = schema.blockObjects.map(t42), $[15] = props, $[16] = schema.blockObjects, $[17] = t3;
+  } else
+    t3 = $[17];
+  let t4;
+  if ($[20] !== props || $[21] !== schema.inlineObjects) {
+    let t52;
+    $[23] !== props ? (t52 = (inlineObject) => props.extendInlineObject?.(inlineObject) ?? inlineObject, $[23] = props, $[24] = t52) : t52 = $[24], t4 = schema.inlineObjects.map(t52), $[20] = props, $[21] = schema.inlineObjects, $[22] = t4;
+  } else
+    t4 = $[22];
+  let t5;
+  if ($[25] !== props || $[26] !== schema.styles) {
+    let t62;
+    $[28] !== props ? (t62 = (style) => props.extendStyle?.(style) ?? style, $[28] = props, $[29] = t62) : t62 = $[29], t5 = schema.styles.map(t62), $[25] = props, $[26] = schema.styles, $[27] = t5;
+  } else
+    t5 = $[27];
+  let t6;
+  return $[30] !== t0 || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 ? (t6 = {
+    decorators: t0,
+    annotations: t1,
+    lists: t2,
+    blockObjects: t3,
+    inlineObjects: t4,
+    styles: t5
+  }, $[30] = t0, $[31] = t1, $[32] = t2, $[33] = t3, $[34] = t4, $[35] = t5, $[36] = t6) : t6 = $[36], t6;
+}
+function _temp$1(snapshot) {
+  return snapshot.context.schema;
+}
+const disableListener = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("*", () => {
+  input.editor.getSnapshot().context.readOnly ? sendBack({
+    type: "disable"
+  }) : sendBack({
+    type: "enable"
+  });
+}).unsubscribe), activeListener$6 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("*", () => {
+  const snapshot = input.editor.getSnapshot();
+  selectors__namespace.isActiveAnnotation(input.schemaType.name)(snapshot) ? sendBack({
+    type: "set active"
+  }) : sendBack({
+    type: "set inactive"
+  });
+}).unsubscribe), keyboardShortcutRemove = xstate.fromCallback(({
+  input
+}) => {
+  const shortcut = input.schemaType.shortcut;
+  if (shortcut)
+    return input.editor.registerBehavior({
+      behavior: behaviors.defineBehavior({
+        on: "keyboard.keydown",
+        guard: ({
+          event
+        }) => shortcut.guard(event.originEvent),
+        actions: [() => [behaviors.raise({
+          type: "annotation.remove",
+          annotation: {
+            name: input.schemaType.name
+          }
+        }), behaviors.effect(() => {
+          input.editor.send({
+            type: "focus"
+          });
+        })]]
+      })
+    });
+}), keyboardShortcutShowInsertDialog = xstate.fromCallback(({
+  input,
+  sendBack
+}) => {
+  const shortcut = input.schemaType.shortcut;
+  if (shortcut)
+    return input.editor.registerBehavior({
+      behavior: behaviors.defineBehavior({
+        on: "keyboard.keydown",
+        guard: ({
+          event
+        }) => shortcut.guard(event.originEvent),
+        actions: [() => [behaviors.effect(() => {
+          sendBack({
+            type: "open dialog"
+          });
+        })]]
+      })
+    });
+}), annotationButtonMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    "add annotation": ({
+      context,
+      event
+    }) => {
+      event.type === "add" && (context.editor.send({
+        type: "annotation.add",
+        annotation: {
+          name: context.schemaType.name,
+          value: event.annotation.value
+        }
+      }), context.editor.send({
+        type: "focus"
+      }));
+    },
+    "remove annotation": ({
+      context
+    }) => {
+      context.editor.send({
+        type: "annotation.remove",
+        annotation: {
+          name: context.schemaType.name
+        }
+      }), context.editor.send({
+        type: "focus"
+      });
+    }
+  },
+  actors: {
+    "active listener": activeListener$6,
+    "disable listener": disableListener,
+    "keyboard shortcut.remove": keyboardShortcutRemove,
+    "keyboard shortcut.show insert dialog": keyboardShortcutShowInsertDialog
+  }
+}).createMachine({
+  id: "annotation button",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaType: input.schemaType
+  }),
+  invoke: [{
+    src: "active listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor,
+      schemaType: context.schemaType
+    })
+  }, {
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor,
+      schemaType: context.schemaType
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          on: {
+            enable: {
+              target: "#annotation button.enabled.inactive"
+            },
+            "set active": {
+              target: "active"
+            }
+          }
+        },
+        active: {
+          on: {
+            enable: {
+              target: "#annotation button.enabled.active"
+            },
+            "set inactive": {
+              target: "inactive"
+            }
+          }
+        }
+      }
+    },
+    enabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          initial: "idle",
+          on: {
+            disable: {
+              target: "#annotation button.disabled.inactive"
+            },
+            "set active": {
+              target: "#annotation button.enabled.active"
+            },
+            add: {
+              actions: "add annotation"
+            }
+          },
+          states: {
+            idle: {
+              invoke: {
+                src: "keyboard shortcut.show insert dialog",
+                input: ({
+                  context
+                }) => ({
+                  editor: context.editor,
+                  schemaType: context.schemaType
+                })
+              },
+              on: {
+                "open dialog": {
+                  target: "showing dialog"
+                }
+              }
+            },
+            "showing dialog": {
+              on: {
+                "close dialog": {
+                  target: "idle"
+                }
+              }
+            }
+          }
+        },
+        active: {
+          invoke: {
+            src: "keyboard shortcut.remove",
+            input: ({
+              context
+            }) => ({
+              editor: context.editor,
+              schemaType: context.schemaType
+            })
+          },
+          on: {
+            "set inactive": {
+              target: "#annotation button.enabled.inactive"
+            },
+            disable: {
+              target: "#annotation button.disabled.active"
+            },
+            remove: {
+              actions: "remove annotation"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useAnnotationButton(props) {
+  const $ = compilerRuntime.c(8), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaType ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaType: props.schemaType
+    }
+  }, $[0] = editor$1, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
+  const [snapshot, send] = react.useActor(annotationButtonMachine, t0);
+  let t1;
+  $[3] !== snapshot ? (t1 = {
+    matches: (state) => snapshot.matches(state)
+  }, $[3] = snapshot, $[4] = t1) : t1 = $[4];
+  let t2;
+  return $[5] !== send || $[6] !== t1 ? (t2 = {
+    snapshot: t1,
+    send
+  }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
+}
+const activeListener$5 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("*", () => {
+  const snapshot = input.editor.getSnapshot(), activeAnnotations = selectors__namespace.getActiveAnnotations(snapshot), focusBlock = selectors__namespace.getFocusBlock(snapshot);
+  if (activeAnnotations.length === 0 || !focusBlock) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const firstSelectedChild = input.editor.dom.getChildNodes(snapshot).at(0);
+  if (!firstSelectedChild || !(firstSelectedChild instanceof Element)) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const elementRef = React__namespace.createRef();
+  elementRef.current = firstSelectedChild, sendBack({
+    type: "set active",
+    annotations: activeAnnotations.flatMap((annotation) => {
+      const schemaType = input.schemaTypes.find((schemaType2) => schemaType2.name === annotation._type);
+      return schemaType ? {
+        value: annotation,
+        schemaType,
+        at: [{
+          _key: focusBlock.node._key
+        }, "markDefs", {
+          _key: annotation._key
+        }]
+      } : [];
+    }),
+    elementRef
+  });
+}).unsubscribe), annotationPopoverMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    reset: xstate.assign({
+      annotations: [],
+      elementRef: React__namespace.createRef()
+    }),
+    remove: ({
+      context,
+      event
+    }) => {
+      event.type === "remove" && (context.editor.send({
+        type: "annotation.remove",
+        annotation: {
+          name: event.schemaType.name
+        }
+      }), context.editor.send({
+        type: "focus"
+      }));
+    }
+  },
+  actors: {
+    "disable listener": disableListener,
+    "active listener": activeListener$5
+  }
+}).createMachine({
+  id: "annotation popover",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaTypes: input.schemaTypes,
+    annotations: [],
+    elementRef: React__namespace.createRef()
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          entry: ["reset"],
+          on: {
+            "set active": {
+              actions: xstate.assign({
+                annotations: ({
+                  event
+                }) => event.annotations,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              }),
+              target: "active"
+            },
+            enable: {
+              target: "#annotation popover.enabled.inactive"
+            }
+          }
+        },
+        active: {
+          on: {
+            "set inactive": {
+              target: "inactive"
+            },
+            enable: {
+              target: "#annotation popover.enabled.active"
+            }
+          }
+        }
+      }
+    },
+    enabled: {
+      invoke: [{
+        src: "active listener",
+        input: ({
+          context
+        }) => ({
+          editor: context.editor,
+          schemaTypes: context.schemaTypes
+        })
+      }],
+      initial: "inactive",
+      states: {
+        inactive: {
+          entry: ["reset"],
+          on: {
+            "set active": {
+              target: "active",
+              actions: xstate.assign({
+                annotations: ({
+                  event
+                }) => event.annotations,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              })
+            },
+            disable: {
+              target: "#annotation popover.disabled.inactive"
+            }
+          }
+        },
+        active: {
+          on: {
+            "set inactive": {
+              target: "inactive"
+            },
+            disable: {
+              target: "#annotation popover.disabled.active"
+            },
+            "set active": {
+              actions: xstate.assign({
+                annotations: ({
+                  event
+                }) => event.annotations,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              })
+            },
+            edit: {
+              actions: ({
+                context,
+                event
+              }) => {
+                context.editor.send({
+                  type: "annotation.set",
+                  at: event.at,
+                  props: event.props
+                }), context.editor.send({
+                  type: "focus"
+                });
+              }
+            },
+            remove: {
+              actions: ({
+                context,
+                event
+              }) => {
+                context.editor.send({
+                  type: "annotation.remove",
+                  annotation: {
+                    name: event.schemaType.name
+                  }
+                }), context.editor.send({
+                  type: "focus"
+                });
+              }
+            },
+            close: {
+              actions: ({
+                context
+              }) => {
+                context.editor.send({
+                  type: "focus"
+                });
+              },
+              target: "inactive"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useAnnotationPopover(props) {
+  const $ = compilerRuntime.c(14), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaTypes ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaTypes: props.schemaTypes
+    }
+  }, $[0] = editor$1, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(annotationPopoverMachine, t0);
+  let t1;
+  $[3] !== actorSnapshot.context.annotations || $[4] !== actorSnapshot.context.elementRef ? (t1 = {
+    annotations: actorSnapshot.context.annotations,
+    elementRef: actorSnapshot.context.elementRef
+  }, $[3] = actorSnapshot.context.annotations, $[4] = actorSnapshot.context.elementRef, $[5] = t1) : t1 = $[5];
+  let t2;
+  $[6] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2) : t2 = $[7];
+  let t3;
+  $[8] !== t1 || $[9] !== t2 ? (t3 = {
+    context: t1,
+    matches: t2
+  }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
+  let t4;
+  return $[11] !== send || $[12] !== t3 ? (t4 = {
+    snapshot: t3,
+    send
+  }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
+}
+const keyboardShortcutListener$2 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => {
+  const shortcut = input.schemaType.shortcut;
+  if (shortcut)
+    return input.editor.registerBehavior({
+      behavior: behaviors.defineBehavior({
+        on: "keyboard.keydown",
+        guard: ({
+          event
+        }) => shortcut.guard(event.originEvent),
+        actions: [() => [behaviors.effect(() => {
+          sendBack({
+            type: "open dialog"
+          });
+        })]]
+      })
+    });
+}), blockObjectButtonMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    insert: ({
+      context,
+      event
+    }) => {
+      event.type === "insert" && (context.editor.send({
+        type: "insert.block object",
+        blockObject: {
+          name: context.schemaType.name,
+          value: event.value
+        },
+        placement: event.placement ?? "auto"
+      }), context.editor.send({
+        type: "focus"
+      }));
+    }
+  },
+  actors: {
+    "disable listener": disableListener,
+    "keyboard shortcut listener": keyboardShortcutListener$2
+  }
+}).createMachine({
+  id: "block object button",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaType: input.schemaType
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: "enabled"
+        }
+      }
+    },
+    enabled: {
+      on: {
+        disable: {
+          target: "disabled"
+        }
+      },
+      initial: "idle",
+      states: {
+        idle: {
+          invoke: [{
+            src: "keyboard shortcut listener",
+            input: ({
+              context
+            }) => ({
+              editor: context.editor,
+              schemaType: context.schemaType
+            })
+          }],
+          on: {
+            "open dialog": {
+              target: "showing dialog"
+            }
+          }
+        },
+        "showing dialog": {
+          on: {
+            "close dialog": {
+              target: "idle"
+            },
+            insert: {
+              actions: ["insert"],
+              target: "idle"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useBlockObjectButton(props) {
+  const $ = compilerRuntime.c(8), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaType ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaType: props.schemaType
+    }
+  }, $[0] = editor$1, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(blockObjectButtonMachine, t0);
+  let t1;
+  $[3] !== actorSnapshot ? (t1 = {
+    matches: (state) => actorSnapshot.matches(state)
+  }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
+  let t2;
+  return $[5] !== send || $[6] !== t1 ? (t2 = {
+    snapshot: t1,
+    send
+  }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
+}
+const activeListener$4 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("selection", () => {
+  const snapshot = input.editor.getSnapshot();
+  if (!selectors__namespace.isSelectionCollapsed(snapshot)) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const focusBlockObject = selectors__namespace.getFocusBlockObject(snapshot);
+  if (!focusBlockObject) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const schemaType = input.schemaTypes.find((schemaType2) => schemaType2.name === focusBlockObject.node._type);
+  if (!schemaType) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const firstSelectedNode = input.editor.dom.getBlockNodes(snapshot).at(0);
+  if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const elementRef = React__namespace.createRef();
+  elementRef.current = firstSelectedNode, sendBack({
+    type: "set active",
+    blockObjects: [{
+      value: focusBlockObject.node,
+      schemaType,
+      at: focusBlockObject.path
+    }],
+    elementRef
+  });
+}).unsubscribe), blockObjectPopoverMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    reset: xstate.assign({
+      blockObjects: [],
+      elementRef: React__namespace.createRef()
+    })
+  },
+  actors: {
+    "disable listener": disableListener,
+    "active listener": activeListener$4
+  }
+}).createMachine({
+  id: "block object popover",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaTypes: input.schemaTypes,
+    blockObjects: [],
+    elementRef: React__namespace.createRef()
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }, {
+    src: "active listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor,
+      schemaTypes: context.schemaTypes
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          entry: ["reset"],
+          on: {
+            "set active": {
+              actions: xstate.assign({
+                blockObjects: ({
+                  event
+                }) => event.blockObjects,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              }),
+              target: "active"
+            },
+            enable: {
+              target: "#block object popover.enabled.inactive"
+            }
+          }
+        },
+        active: {
+          on: {
+            "set inactive": {
+              target: "inactive"
+            },
+            enable: {
+              target: "#block object popover.enabled.active"
+            }
+          }
+        }
+      }
+    },
+    enabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          entry: ["reset"],
+          on: {
+            "set active": {
+              target: "active",
+              actions: xstate.assign({
+                blockObjects: ({
+                  event
+                }) => event.blockObjects,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              })
+            },
+            disable: {
+              target: "#block object popover.disabled.inactive"
+            }
+          }
+        },
+        active: {
+          on: {
+            "set inactive": {
+              target: "inactive"
+            },
+            disable: {
+              target: "#block object popover.disabled.active"
+            },
+            "set active": {
+              actions: xstate.assign({
+                blockObjects: ({
+                  event
+                }) => event.blockObjects,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              })
+            },
+            edit: {
+              actions: ({
+                context,
+                event
+              }) => {
+                context.editor.send({
+                  type: "block.set",
+                  at: event.at,
+                  props: event.props
+                }), context.editor.send({
+                  type: "focus"
+                });
+              }
+            },
+            remove: {
+              actions: ({
+                context,
+                event
+              }) => {
+                context.editor.send({
+                  type: "delete.block",
+                  at: event.at
+                }), context.editor.send({
+                  type: "focus"
+                });
+              }
+            },
+            close: {
+              actions: ({
+                context
+              }) => {
+                context.editor.send({
+                  type: "focus"
+                });
+              },
+              target: "inactive"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useBlockObjectPopover(props) {
+  const $ = compilerRuntime.c(14), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaTypes ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaTypes: props.schemaTypes
+    }
+  }, $[0] = editor$1, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(blockObjectPopoverMachine, t0);
+  let t1;
+  $[3] !== actorSnapshot.context.blockObjects || $[4] !== actorSnapshot.context.elementRef ? (t1 = {
+    blockObjects: actorSnapshot.context.blockObjects,
+    elementRef: actorSnapshot.context.elementRef
+  }, $[3] = actorSnapshot.context.blockObjects, $[4] = actorSnapshot.context.elementRef, $[5] = t1) : t1 = $[5];
+  let t2;
+  $[6] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2) : t2 = $[7];
+  let t3;
+  $[8] !== t1 || $[9] !== t2 ? (t3 = {
+    context: t1,
+    matches: t2
+  }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
+  let t4;
+  return $[11] !== send || $[12] !== t3 ? (t4 = {
+    snapshot: t3,
+    send
+  }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
+}
+const keyboardShortcutListener$1 = xstate.fromCallback(({
+  input
+}) => {
+  const shortcut = input.schemaType.shortcut;
+  if (shortcut)
+    return input.editor.registerBehavior({
+      behavior: behaviors.defineBehavior({
+        on: "keyboard.keydown",
+        guard: ({
+          event
+        }) => shortcut.guard(event.originEvent),
+        actions: [() => [behaviors.raise({
+          type: "decorator.toggle",
+          decorator: input.schemaType.name
+        })]]
+      })
+    });
+}), decoratorKeyboardShortcutMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actors: {
+    "disable listener": disableListener,
+    "keyboard shortcut listener": keyboardShortcutListener$1
+  }
+}).createMachine({
+  id: "decorator keyboard shortcut",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaType: input.schemaType
+  }),
+  invoke: {
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  },
+  initial: "disabled",
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: "enabled"
+        }
+      }
+    },
+    enabled: {
+      invoke: {
+        src: "keyboard shortcut listener",
+        input: ({
+          context
+        }) => ({
+          editor: context.editor,
+          schemaType: context.schemaType
+        })
+      },
+      on: {
+        disable: {
+          target: "disabled"
+        }
+      }
+    }
+  }
+});
+function useDecoratorKeyboardShortcut(props) {
+  const $ = compilerRuntime.c(3), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaType ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaType: props.schemaType
+    }
+  }, $[0] = editor$1, $[1] = props.schemaType, $[2] = t0) : t0 = $[2], react.useActorRef(decoratorKeyboardShortcutMachine, t0);
+}
+function useMutuallyExclusiveDecorator(props) {
+  const $ = compilerRuntime.c(5), editor$1 = editor.useEditor();
+  let t0, t1;
+  $[0] !== editor$1 || $[1] !== props.schemaType.mutuallyExclusive || $[2] !== props.schemaType.name ? (t0 = () => {
+    const mutuallyExclusive = props.schemaType.mutuallyExclusive;
+    if (mutuallyExclusive)
+      return editor$1.registerBehavior({
+        behavior: behaviors.defineBehavior({
+          on: "decorator.add",
+          guard: (t2) => {
+            const {
+              event
+            } = t2;
+            return event.decorator === props.schemaType.name;
+          },
+          actions: [(t3) => {
+            const {
+              event: event_0
+            } = t3;
+            return [behaviors.forward(event_0), ...mutuallyExclusive.map(_temp)];
+          }]
+        })
+      });
+  }, t1 = [editor$1, props.schemaType.name, props.schemaType.mutuallyExclusive], $[0] = editor$1, $[1] = props.schemaType.mutuallyExclusive, $[2] = props.schemaType.name, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), React.useEffect(t0, t1);
+}
+function _temp(decorator) {
+  return behaviors.raise({
+    type: "decorator.remove",
+    decorator
+  });
+}
+const activeListener$3 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("*", () => {
+  const snapshot = input.editor.getSnapshot();
+  selectors__namespace.isActiveDecorator(input.schemaType.name)(snapshot) ? sendBack({
+    type: "set active"
+  }) : sendBack({
+    type: "set inactive"
+  });
+}).unsubscribe), decoratorButtonMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    toggle: ({
+      context,
+      event
+    }) => {
+      event.type === "toggle" && (context.editor.send({
+        type: "decorator.toggle",
+        decorator: context.schemaType.name
+      }), context.editor.send({
+        type: "focus"
+      }));
+    }
+  },
+  actors: {
+    "disable listener": disableListener,
+    "active listener": activeListener$3
+  }
+}).createMachine({
+  id: "decorator button",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaType: input.schemaType
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }, {
+    src: "active listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor,
+      schemaType: context.schemaType
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          on: {
+            enable: {
+              target: "#decorator button.enabled.inactive"
+            },
+            "set active": {
+              target: "active"
+            }
+          }
+        },
+        active: {
+          on: {
+            enable: {
+              target: "#decorator button.enabled.active"
+            },
+            "set inactive": {
+              target: "inactive"
+            }
+          }
+        }
+      }
+    },
+    enabled: {
+      on: {
+        toggle: {
+          actions: ["toggle"]
+        }
+      },
+      initial: "inactive",
+      states: {
+        inactive: {
+          on: {
+            disable: {
+              target: "#decorator button.disabled.inactive"
+            },
+            "set active": {
+              target: "active"
+            }
+          }
+        },
+        active: {
+          on: {
+            disable: {
+              target: "#decorator button.disabled.active"
+            },
+            "set inactive": {
+              target: "inactive"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useDecoratorButton(props) {
+  const $ = compilerRuntime.c(8), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaType ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaType: props.schemaType
+    }
+  }, $[0] = editor$1, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(decoratorButtonMachine, t0);
+  useDecoratorKeyboardShortcut(props), useMutuallyExclusiveDecorator(props);
+  let t1;
+  $[3] !== actorSnapshot ? (t1 = {
+    matches: (state) => actorSnapshot.matches(state)
+  }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
+  let t2;
+  return $[5] !== send || $[6] !== t1 ? (t2 = {
+    snapshot: t1,
+    send
+  }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
+}
+const historyButtonsMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actors: {
+    "disable listener": disableListener
+  }
+}).createMachine({
+  id: "history buttons",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor
+  }),
+  invoke: {
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  },
+  initial: "disabled",
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: "enabled"
+        }
+      }
+    },
+    enabled: {
+      on: {
+        disable: {
+          target: "disabled"
+        },
+        "history.undo": {
+          actions: ({
+            context
+          }) => {
+            context.editor.send({
+              type: "history.undo"
+            }), context.editor.send({
+              type: "focus"
+            });
+          }
+        },
+        "history.redo": {
+          actions: ({
+            context
+          }) => {
+            context.editor.send({
+              type: "history.redo"
+            }), context.editor.send({
+              type: "focus"
+            });
+          }
+        }
+      }
+    }
+  }
+});
+function useHistoryButtons() {
+  const $ = compilerRuntime.c(7), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 ? (t0 = {
+    input: {
+      editor: editor$1
+    }
+  }, $[0] = editor$1, $[1] = t0) : t0 = $[1];
+  const [actorSnapshot, send] = react.useActor(historyButtonsMachine, t0);
+  let t1;
+  $[2] !== actorSnapshot ? (t1 = {
+    matches: (state) => actorSnapshot.matches(state)
+  }, $[2] = actorSnapshot, $[3] = t1) : t1 = $[3];
+  let t2;
+  return $[4] !== send || $[5] !== t1 ? (t2 = {
+    snapshot: t1,
+    send
+  }, $[4] = send, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
+}
+const keyboardShortcutListener = xstate.fromCallback(({
+  input,
+  sendBack
+}) => {
+  const shortcut = input.schemaType.shortcut;
+  if (shortcut)
+    return input.editor.registerBehavior({
+      behavior: behaviors.defineBehavior({
+        on: "keyboard.keydown",
+        guard: ({
+          event
+        }) => shortcut.guard(event.originEvent),
+        actions: [() => [behaviors.effect(() => {
+          sendBack({
+            type: "open dialog"
+          });
+        })]]
+      })
+    });
+}), inlineObjectButtonMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    insert: ({
+      context,
+      event
+    }) => {
+      event.type === "insert" && (context.editor.send({
+        type: "insert.inline object",
+        inlineObject: {
+          name: context.schemaType.name,
+          value: event.value
+        }
+      }), context.editor.send({
+        type: "focus"
+      }));
+    }
+  },
+  actors: {
+    "disable listener": disableListener,
+    "keyboard shortcut listener": keyboardShortcutListener
+  }
+}).createMachine({
+  id: "inline object button",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaType: input.schemaType
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: "enabled"
+        }
+      }
+    },
+    enabled: {
+      on: {
+        disable: {
+          target: "disabled"
+        }
+      },
+      initial: "idle",
+      states: {
+        idle: {
+          invoke: [{
+            src: "keyboard shortcut listener",
+            input: ({
+              context
+            }) => ({
+              editor: context.editor,
+              schemaType: context.schemaType
+            })
+          }],
+          on: {
+            "open dialog": {
+              target: "showing dialog"
+            }
+          }
+        },
+        "showing dialog": {
+          on: {
+            "close dialog": {
+              target: "idle"
+            },
+            insert: {
+              actions: ["insert"],
+              target: "idle"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useInlineObjectButton(props) {
+  const $ = compilerRuntime.c(8), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaType ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaType: props.schemaType
+    }
+  }, $[0] = editor$1, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(inlineObjectButtonMachine, t0);
+  let t1;
+  $[3] !== actorSnapshot ? (t1 = {
+    matches: (state) => actorSnapshot.matches(state)
+  }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
+  let t2;
+  return $[5] !== send || $[6] !== t1 ? (t2 = {
+    snapshot: t1,
+    send
+  }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
+}
+const activeListener$2 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("selection", () => {
+  const snapshot = input.editor.getSnapshot();
+  if (!selectors__namespace.isSelectionCollapsed(snapshot)) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const focusInlineObject = selectors__namespace.getFocusInlineObject(snapshot);
+  if (!focusInlineObject) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const schemaType = input.schemaTypes.find((schemaType2) => schemaType2.name === focusInlineObject.node._type);
+  if (!schemaType) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const firstSelectedNode = input.editor.dom.getChildNodes(snapshot).at(0);
+  if (!firstSelectedNode || !(firstSelectedNode instanceof Element)) {
+    sendBack({
+      type: "set inactive"
+    });
+    return;
+  }
+  const elementRef = React__namespace.createRef();
+  elementRef.current = firstSelectedNode, sendBack({
+    type: "set active",
+    inlineObjects: [{
+      value: focusInlineObject.node,
+      schemaType,
+      at: focusInlineObject.path
+    }],
+    elementRef
+  });
+}).unsubscribe), inlineObjectPopoverMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    reset: xstate.assign({
+      inlineObjects: [],
+      elementRef: React__namespace.createRef()
+    })
+  },
+  actors: {
+    "disable listener": disableListener,
+    "active listener": activeListener$2
+  }
+}).createMachine({
+  id: "inline object popover",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaTypes: input.schemaTypes,
+    inlineObjects: [],
+    elementRef: React__namespace.createRef()
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }, {
+    src: "active listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor,
+      schemaTypes: context.schemaTypes
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          entry: ["reset"],
+          on: {
+            "set active": {
+              actions: xstate.assign({
+                inlineObjects: ({
+                  event
+                }) => event.inlineObjects,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              }),
+              target: "active"
+            },
+            enable: {
+              target: "#inline object popover.enabled.inactive"
+            }
+          }
+        },
+        active: {
+          on: {
+            "set inactive": {
+              target: "inactive"
+            },
+            enable: {
+              target: "#inline object popover.enabled.active"
+            }
+          }
+        }
+      }
+    },
+    enabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          entry: ["reset"],
+          on: {
+            "set active": {
+              target: "active",
+              actions: xstate.assign({
+                inlineObjects: ({
+                  event
+                }) => event.inlineObjects,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              })
+            },
+            disable: {
+              target: "#inline object popover.disabled.inactive"
+            }
+          }
+        },
+        active: {
+          on: {
+            "set inactive": {
+              target: "inactive"
+            },
+            disable: {
+              target: "#inline object popover.disabled.active"
+            },
+            "set active": {
+              actions: xstate.assign({
+                inlineObjects: ({
+                  event
+                }) => event.inlineObjects,
+                elementRef: ({
+                  event
+                }) => event.elementRef
+              })
+            },
+            edit: {
+              actions: ({
+                context,
+                event
+              }) => {
+                context.editor.send({
+                  type: "child.set",
+                  at: event.at,
+                  props: event.props
+                }), context.editor.send({
+                  type: "focus"
+                });
+              }
+            },
+            remove: {
+              actions: ({
+                context,
+                event
+              }) => {
+                context.editor.send({
+                  type: "delete.child",
+                  at: event.at
+                }), context.editor.send({
+                  type: "focus"
+                });
+              }
+            },
+            close: {
+              actions: ({
+                context
+              }) => {
+                context.editor.send({
+                  type: "focus"
+                });
+              },
+              target: "inactive"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useInlineObjectPopover(props) {
+  const $ = compilerRuntime.c(14), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaTypes ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaTypes: props.schemaTypes
+    }
+  }, $[0] = editor$1, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(inlineObjectPopoverMachine, t0);
+  let t1;
+  $[3] !== actorSnapshot.context.elementRef || $[4] !== actorSnapshot.context.inlineObjects ? (t1 = {
+    inlineObjects: actorSnapshot.context.inlineObjects,
+    elementRef: actorSnapshot.context.elementRef
+  }, $[3] = actorSnapshot.context.elementRef, $[4] = actorSnapshot.context.inlineObjects, $[5] = t1) : t1 = $[5];
+  let t2;
+  $[6] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[6] = actorSnapshot, $[7] = t2) : t2 = $[7];
+  let t3;
+  $[8] !== t1 || $[9] !== t2 ? (t3 = {
+    context: t1,
+    matches: t2
+  }, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
+  let t4;
+  return $[11] !== send || $[12] !== t3 ? (t4 = {
+    snapshot: t3,
+    send
+  }, $[11] = send, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
+}
+const activeListener$1 = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("*", () => {
+  const snapshot = input.editor.getSnapshot();
+  selectors__namespace.isActiveListItem(input.schemaType.name)(snapshot) ? sendBack({
+    type: "set active"
+  }) : sendBack({
+    type: "set inactive"
+  });
+}).unsubscribe), listButtonMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    toggle: ({
+      context,
+      event
+    }) => {
+      event.type === "toggle" && (context.editor.send({
+        type: "list item.toggle",
+        listItem: context.schemaType.name
+      }), context.editor.send({
+        type: "focus"
+      }));
+    }
+  },
+  actors: {
+    "disable listener": disableListener,
+    "active listener": activeListener$1
+  }
+}).createMachine({
+  id: "list button",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaType: input.schemaType
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }, {
+    src: "active listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor,
+      schemaType: context.schemaType
+    })
+  }],
+  initial: "disabled",
+  states: {
+    disabled: {
+      initial: "inactive",
+      states: {
+        inactive: {
+          on: {
+            enable: {
+              target: "#list button.enabled.inactive"
+            },
+            "set active": {
+              target: "active"
+            }
+          }
+        },
+        active: {
+          on: {
+            enable: {
+              target: "#list button.enabled.active"
+            },
+            "set inactive": {
+              target: "inactive"
+            }
+          }
+        }
+      }
+    },
+    enabled: {
+      on: {
+        toggle: {
+          actions: ["toggle"]
+        }
+      },
+      initial: "inactive",
+      states: {
+        inactive: {
+          on: {
+            disable: {
+              target: "#list button.disabled.inactive"
+            },
+            "set active": {
+              target: "active"
+            }
+          }
+        },
+        active: {
+          on: {
+            disable: {
+              target: "#list button.disabled.active"
+            },
+            "set inactive": {
+              target: "inactive"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+function useListButton(props) {
+  const $ = compilerRuntime.c(8), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaType ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaType: props.schemaType
+    }
+  }, $[0] = editor$1, $[1] = props.schemaType, $[2] = t0) : t0 = $[2];
+  const [actorSnapshot, send] = react.useActor(listButtonMachine, t0);
+  let t1;
+  $[3] !== actorSnapshot ? (t1 = {
+    matches: (state) => actorSnapshot.matches(state)
+  }, $[3] = actorSnapshot, $[4] = t1) : t1 = $[4];
+  let t2;
+  return $[5] !== send || $[6] !== t1 ? (t2 = {
+    snapshot: t1,
+    send
+  }, $[5] = send, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
+}
+const styleKeyboardShortcutsListener = xstate.fromCallback(({
+  input
+}) => {
+  const unregisterBehaviors = input.schemaTypes.flatMap((schemaType) => {
+    const shortcut = schemaType.shortcut;
+    return shortcut ? [input.editor.registerBehavior({
+      behavior: behaviors.defineBehavior({
+        on: "keyboard.keydown",
+        guard: ({
+          event
+        }) => shortcut.guard(event.originEvent),
+        actions: [() => [behaviors.raise({
+          type: "style.toggle",
+          style: schemaType.name
+        })]]
+      })
+    })] : [];
+  });
+  return () => {
+    for (const unregisterBehavior of unregisterBehaviors)
+      unregisterBehavior();
+  };
+}), styleKeyboardShortcutsMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actors: {
+    "disable listener": disableListener,
+    "style keyboard shortcuts listener": styleKeyboardShortcutsListener
+  }
+}).createMachine({
+  id: "style keyboard shortcuts",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    schemaTypes: input.schemaTypes
+  }),
+  invoke: {
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  },
+  initial: "disabled",
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: "enabled"
+        }
+      }
+    },
+    enabled: {
+      invoke: {
+        src: "style keyboard shortcuts listener",
+        input: ({
+          context
+        }) => ({
+          editor: context.editor,
+          schemaTypes: context.schemaTypes
+        })
+      },
+      on: {
+        disable: {
+          target: "disabled"
+        }
+      }
+    }
+  }
+});
+function useStyleKeyboardShortcuts(props) {
+  const $ = compilerRuntime.c(3), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 || $[1] !== props.schemaTypes ? (t0 = {
+    input: {
+      editor: editor$1,
+      schemaTypes: props.schemaTypes
+    }
+  }, $[0] = editor$1, $[1] = props.schemaTypes, $[2] = t0) : t0 = $[2], react.useActorRef(styleKeyboardShortcutsMachine, t0);
+}
+const activeListener = xstate.fromCallback(({
+  input,
+  sendBack
+}) => input.editor.on("*", () => {
+  const snapshot = input.editor.getSnapshot(), activeStyle = selectors__namespace.getActiveStyle(snapshot);
+  sendBack({
+    type: "set active style",
+    style: activeStyle
+  });
+}).unsubscribe), styleSelectorMachine = xstate.setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actors: {
+    "disable listener": disableListener,
+    "active listener": activeListener
+  }
+}).createMachine({
+  id: "style selector",
+  context: ({
+    input
+  }) => ({
+    editor: input.editor,
+    activeStyle: void 0
+  }),
+  invoke: [{
+    src: "disable listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }, {
+    src: "active listener",
+    input: ({
+      context
+    }) => ({
+      editor: context.editor
+    })
+  }],
+  on: {
+    "set active style": {
+      actions: xstate.assign({
+        activeStyle: ({
+          event
+        }) => event.style
+      })
+    }
+  },
+  initial: "disabled",
+  states: {
+    disabled: {
+      on: {
+        enable: {
+          target: "enabled"
+        }
+      }
+    },
+    enabled: {
+      on: {
+        disable: {
+          target: "disabled"
+        },
+        toggle: {
+          actions: [({
+            context,
+            event
+          }) => {
+            context.editor.send({
+              type: "style.toggle",
+              style: event.style
+            }), context.editor.send({
+              type: "focus"
+            });
+          }]
+        }
+      }
+    }
+  }
+});
+function useStyleSelector(props) {
+  const $ = compilerRuntime.c(12), editor$1 = editor.useEditor();
+  let t0;
+  $[0] !== editor$1 ? (t0 = {
+    input: {
+      editor: editor$1
+    }
+  }, $[0] = editor$1, $[1] = t0) : t0 = $[1];
+  const [actorSnapshot, send] = react.useActor(styleSelectorMachine, t0);
+  useStyleKeyboardShortcuts(props);
+  let t1;
+  $[2] !== actorSnapshot ? (t1 = (state) => actorSnapshot.matches(state), $[2] = actorSnapshot, $[3] = t1) : t1 = $[3];
+  let t2;
+  $[4] !== actorSnapshot.context.activeStyle ? (t2 = {
+    activeStyle: actorSnapshot.context.activeStyle
+  }, $[4] = actorSnapshot.context.activeStyle, $[5] = t2) : t2 = $[5];
+  let t3;
+  $[6] !== t1 || $[7] !== t2 ? (t3 = {
+    matches: t1,
+    context: t2
+  }, $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8];
+  let t4;
+  return $[9] !== send || $[10] !== t3 ? (t4 = {
+    snapshot: t3,
+    send
+  }, $[9] = send, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
+}
+exports.useAnnotationButton = useAnnotationButton;
+exports.useAnnotationPopover = useAnnotationPopover;
+exports.useBlockObjectButton = useBlockObjectButton;
+exports.useBlockObjectPopover = useBlockObjectPopover;
+exports.useDecoratorButton = useDecoratorButton;
+exports.useHistoryButtons = useHistoryButtons;
+exports.useInlineObjectButton = useInlineObjectButton;
+exports.useInlineObjectPopover = useInlineObjectPopover;
+exports.useListButton = useListButton;
+exports.useStyleSelector = useStyleSelector;
+exports.useToolbarSchema = useToolbarSchema;
+//# sourceMappingURL=index.cjs.map