@prosekit/web 0.3.1 → 0.3.2

package/dist/{chunk-Y2CJYXR5.js → chunk-LCDA7GFP.js}

@@ -1,6 +1,9 @@
 // src/utils/define-custom-element.ts
 function defineCustomElement(name, constructor, options) {
-  typeof customElements != "undefined" && customElements.define(name, constructor, options);
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  customElements.define(name, constructor, options);
 }
 
 export {

package/dist/prosekit-web-autocomplete.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
-} from "./chunk-Y2CJYXR5.js";
+} from "./chunk-LCDA7GFP.js";
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
 import { ElementBuilder } from "@aria-ui/core";
@@ -42,21 +42,25 @@ import { createContext } from "@aria-ui/core";
 var queryContext = createContext(
   "prosekit/autocomplete-popover/query",
   ""
-), onSubmitContext = createContext(
+);
+var onSubmitContext = createContext(
   "prosekit/autocomplete-popover/onSubmit",
   null
-), openContext = createContext(
+);
+var openContext = createContext(
   "prosekit/autocomplete-popover/open",
-  !1
+  false
 );
 
 // src/components/autocomplete/autocomplete-item/state.ts
 function useAutocompleteItem(element, state) {
   useListboxItem(element, state);
-  let open = openContext.consume(element);
+  const open = openContext.consume(element);
   useEffect(element, () => {
     var _a;
-    !state.value.peek() && open.get() && state.value.set((_a = element.textContent) != null ? _a : "");
+    if (!state.value.peek() && open.get()) {
+      state.value.set((_a = element.textContent) != null ? _a : "");
+    }
   });
 }
 
@@ -70,7 +74,8 @@ import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-list/props.ts
 import { defaultListboxProps } from "@aria-ui/listbox";
-var defaultFilter = defaultListboxProps.filter, defaultAutocompleteListProps = {
+var defaultFilter = defaultListboxProps.filter;
+var defaultAutocompleteListProps = {
   filter: defaultFilter,
   editor: null
 };
@@ -100,10 +105,17 @@ function omit(object, keys) {
 
 // src/components/autocomplete/autocomplete-list/state.ts
 function useAutocompleteList(element, state) {
-  let open = openContext.consume(element), query = queryContext.consume(element), onSubmit = onSubmitContext.consume(element), onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor), onValueChange = (value) => {
+  const open = openContext.consume(element);
+  const query = queryContext.consume(element);
+  const onSubmit = onSubmitContext.consume(element);
+  const onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor);
+  const onValueChange = (value) => {
     var _a;
-    value && ((_a = onSubmit.peek()) == null || _a());
-  }, listboxState = {
+    if (value) {
+      (_a = onSubmit.peek()) == null ? void 0 : _a();
+    }
+  };
+  const listboxState = {
     ...mapSignals({
       ...omit(defaultListboxProps2, ["filter"]),
       onKeydownHandlerAdd,
@@ -111,43 +123,67 @@ function useAutocompleteList(element, state) {
     }),
     filter: state.filter
   };
-  useListbox(element, listboxState), useEffect2(element, () => {
+  useListbox(element, listboxState);
+  useEffect2(element, () => {
     listboxState.query.set(query.get());
-  }), useEffect2(element, () => {
-    open.get() || (listboxState.value.set(""), query.set(""));
-  }), useEffect2(element, () => {
-    if (!open.get())
-      listboxState.autoFocus.set(!1);
-    else {
-      let canceled = !1;
-      return requestAnimationFrame(() => {
-        canceled || listboxState.autoFocus.set(!0);
-      }), () => {
-        canceled = !0;
+  });
+  useEffect2(element, () => {
+    if (!open.get()) {
+      listboxState.value.set("");
+      query.set("");
+    }
+  });
+  useEffect2(element, () => {
+    if (!open.get()) {
+      listboxState.autoFocus.set(false);
+    } else {
+      let canceled = false;
+      requestAnimationFrame(() => {
+        if (canceled) return;
+        listboxState.autoFocus.set(true);
+      });
+      return () => {
+        canceled = true;
       };
     }
-  }), useEffect2(element, () => {
+  });
+  useEffect2(element, () => {
     element.tabIndex = -1;
   });
 }
 function useKeyboardHandler(element, open, editor) {
-  let keydownHandler = createSignal(
+  const keydownHandler = createSignal(
     null
-  ), disposeKeydownHandler;
-  return useEffect2(element, () => {
-    let editorValue = editor.get(), keydownHandlerValue = keydownHandler.get();
-    if (!editorValue || !keydownHandlerValue)
+  );
+  let disposeKeydownHandler;
+  useEffect2(element, () => {
+    const editorValue = editor.get();
+    const keydownHandlerValue = keydownHandler.get();
+    if (!editorValue || !keydownHandlerValue) {
       return;
-    let extension = defineDOMEventHandler(
+    }
+    const extension = defineDOMEventHandler(
       "keydown",
-      (view, event) => view.composing || event.defaultPrevented || !open.get() ? !1 : (keydownHandlerValue(event), event.defaultPrevented)
+      (view, event) => {
+        if (view.composing || event.defaultPrevented || !open.get()) {
+          return false;
+        }
+        keydownHandlerValue(event);
+        return event.defaultPrevented;
+      }
     );
-    disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = editorValue.use(
+    disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
+    disposeKeydownHandler = editorValue.use(
       withPriority(extension, Priority.highest)
     );
-  }), (keydownHandlerValue) => (keydownHandler.set(keydownHandlerValue), () => {
-    disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = void 0;
   });
+  return (keydownHandlerValue) => {
+    keydownHandler.set(keydownHandlerValue);
+    return () => {
+      disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
+      disposeKeydownHandler = void 0;
+    };
+  };
 }
 
 // src/components/autocomplete/autocomplete-list/element.gen.ts
@@ -160,7 +196,9 @@ import { ElementBuilder as ElementBuilder4 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-popover/props.ts
 import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
-var body = typeof document != "undefined" && document.querySelector("body"), defaultBoundary = body || "clippingAncestors", defaultAutocompletePopoverProps = Object.freeze({
+var body = typeof document !== "undefined" && document.querySelector("body");
+var defaultBoundary = body || "clippingAncestors";
+var defaultAutocompletePopoverProps = Object.freeze({
   ...defaultOverlayPositionerProps,
   editor: null,
   regex: null,
@@ -168,9 +206,9 @@ var body = typeof document != "undefined" && document.querySelector("body"), def
   onOpenChange: null,
   placement: "bottom-start",
   offset: 4,
-  inline: !0,
-  hoist: !0,
-  fitViewport: !0,
+  inline: true,
+  hoist: true,
+  fitViewport: true,
   boundary: defaultBoundary,
   overflowPadding: 8
 });
@@ -200,12 +238,13 @@ import {
   useEffect as useEffect3
 } from "@aria-ui/core";
 function useFirstRendering(host) {
-  let firstRendering = createSignal2(!0);
-  return useEffect3(host, () => {
+  const firstRendering = createSignal2(true);
+  useEffect3(host, () => {
     requestAnimationFrame(() => {
-      firstRendering.set(!1);
+      firstRendering.set(false);
     });
-  }), firstRendering;
+  });
+  return firstRendering;
 }
 
 // src/components/autocomplete/autocomplete-popover/helpers.ts
@@ -215,8 +254,17 @@ function defaultQueryBuilder(match) {
 
 // src/components/autocomplete/autocomplete-popover/state.ts
 function useAutocompletePopover(host, state) {
-  let { editor, regex, ...overlayState } = state, reference = createSignal3(null), query = createSignal3(""), onDismiss = createSignal3(null), onSubmit = createSignal3(null), presence = createComputed(() => !!reference.get());
-  queryContext.provide(host, query), onSubmitContext.provide(host, onSubmit), openContext.provide(host, presence), useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence)), useAutocompleteExtension(
+  const { editor, regex, ...overlayState } = state;
+  const reference = createSignal3(null);
+  const query = createSignal3("");
+  const onDismiss = createSignal3(null);
+  const onSubmit = createSignal3(null);
+  const presence = createComputed(() => !!reference.get());
+  queryContext.provide(host, query);
+  onSubmitContext.provide(host, onSubmit);
+  openContext.provide(host, presence);
+  useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence));
+  useAutocompleteExtension(
     host,
     editor,
     regex,
@@ -224,57 +272,83 @@ function useAutocompletePopover(host, state) {
     query,
     onDismiss,
     onSubmit
-  ), useOverlayPositionerState(host, overlayState, { reference }), usePresence(host, presence);
-  let firstRendering = useFirstRendering(host);
+  );
+  useOverlayPositionerState(host, overlayState, { reference });
+  usePresence(host, presence);
+  const firstRendering = useFirstRendering(host);
   useEffect4(host, () => {
     var _a;
-    let queryValue = query.get();
-    firstRendering.peek() || (_a = state.onQueryChange.peek()) == null || _a(queryValue);
-  }), useAnimationFrame(host, () => {
-    let presenceValue = presence.get(), onOpenChangeValue = state.onOpenChange.peek();
-    if (onOpenChangeValue)
-      return () => {
-        onOpenChangeValue(presenceValue);
-      };
+    const queryValue = query.get();
+    if (!firstRendering.peek()) {
+      (_a = state.onQueryChange.peek()) == null ? void 0 : _a(queryValue);
+    }
+  });
+  useAnimationFrame(host, () => {
+    const presenceValue = presence.get();
+    const onOpenChangeValue = state.onOpenChange.peek();
+    if (!onOpenChangeValue) {
+      return;
+    }
+    return () => {
+      onOpenChangeValue(presenceValue);
+    };
   });
 }
 function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
   useEffect4(host, () => {
-    let editorValue = editor.get(), regexValue = regex.get();
-    if (!(!editorValue || !regexValue))
-      return addAutocompleteExtension(
-        editorValue,
-        regexValue,
-        reference,
-        query,
-        onDismiss,
-        onSubmit
-      );
+    const editorValue = editor.get();
+    const regexValue = regex.get();
+    if (!editorValue || !regexValue) {
+      return;
+    }
+    return addAutocompleteExtension(
+      editorValue,
+      regexValue,
+      reference,
+      query,
+      onDismiss,
+      onSubmit
+    );
   });
 }
 function addAutocompleteExtension(editor, regex, reference, query, onDismiss, onSubmit) {
-  let handleEnter = (options) => {
-    let span = editor.view.dom.querySelector(".prosemirror-prediction-match");
-    span && reference.set(span), query.set(defaultQueryBuilder(options.match)), onDismiss.set(options.ignoreMatch), onSubmit.set(options.deleteMatch);
-  }, handleLeave = () => {
-    reference.set(null), query.set(""), onDismiss.set(null), onSubmit.set(null);
-  }, rule = new AutocompleteRule({
+  const handleEnter = (options) => {
+    const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
+    if (span) {
+      reference.set(span);
+    }
+    query.set(defaultQueryBuilder(options.match));
+    onDismiss.set(options.ignoreMatch);
+    onSubmit.set(options.deleteMatch);
+  };
+  const handleLeave = () => {
+    reference.set(null);
+    query.set("");
+    onDismiss.set(null);
+    onSubmit.set(null);
+  };
+  const rule = new AutocompleteRule({
     regex,
     onEnter: handleEnter,
     onLeave: handleLeave
-  }), extension = defineAutocomplete(rule);
+  });
+  const extension = defineAutocomplete(rule);
   return editor.use(extension);
 }
 function createKeymapHandler(handler, enabled) {
   return () => {
-    if (!enabled.get())
-      return !1;
-    let fn = handler.peek();
-    return fn ? (fn(), !0) : !1;
+    if (!enabled.get()) {
+      return false;
+    }
+    const fn = handler.peek();
+    if (!fn) return false;
+    fn();
+    return true;
   };
 }
 function useEscapeKeydown(host, editor, handler) {
-  let extension = withPriority2(defineKeymap({ Escape: handler }), Priority2.highest);
+  const keymap = { Escape: handler };
+  const extension = withPriority2(defineKeymap(keymap), Priority2.highest);
   return useEditorExtension(host, editor, extension);
 }
 

package/dist/prosekit-web-block-handle.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
-} from "./chunk-Y2CJYXR5.js";
+} from "./chunk-LCDA7GFP.js";
 
 // src/components/block-handle/block-drag-handle/element.gen.ts
 import { ElementBuilder } from "@aria-ui/core";
@@ -34,24 +34,39 @@ var blockPopoverContext = createContext(
 
 // src/components/block-handle/block-drag-handle/state.ts
 function useBlockDragHandle(host, state) {
-  let context = blockPopoverContext.consume(host);
+  const context = blockPopoverContext.consume(host);
   useEffect(host, () => {
-    host.draggable = !0;
-  }), useEventListener(host, "pointerdown", () => {
+    host.draggable = true;
+  });
+  useEventListener(host, "pointerdown", () => {
     var _a, _b;
-    let { pos } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
-    pos == null || view == null || (view.dispatch(
+    const { pos } = (_a = context.get()) != null ? _a : {};
+    const { view } = (_b = state.editor.get()) != null ? _b : {};
+    if (pos == null || view == null) {
+      return;
+    }
+    view.dispatch(
       view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
-    ), requestAnimationFrame(() => {
+    );
+    requestAnimationFrame(() => {
       view.focus();
-    }));
-  }), useEventListener(host, "dragstart", (event) => {
+    });
+  });
+  useEventListener(host, "dragstart", (event) => {
     var _a, _b;
-    let { pos, element, node } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
-    pos == null || !element || !node || !view || !event.dataTransfer || (event.dataTransfer.clearData(), event.dataTransfer.setData("text/html", element.outerHTML), event.dataTransfer.effectAllowed = "copyMove", event.dataTransfer.setDragImage(element, 0, 0), view.dragging = {
+    const { pos, element, node } = (_a = context.get()) != null ? _a : {};
+    const { view } = (_b = state.editor.get()) != null ? _b : {};
+    if (pos == null || !element || !node || !view || !event.dataTransfer) {
+      return;
+    }
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData("text/html", element.outerHTML);
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.setDragImage(element, 0, 0);
+    view.dragging = {
       slice: new Slice(Fragment.from(node), 0, 0),
-      move: !0
-    });
+      move: true
+    };
   });
 }
 
@@ -89,16 +104,20 @@ import { defineDOMEventHandler, union } from "@prosekit/core";
 function throttle(callback, wait) {
   let lastTime = 0;
   return (...args) => {
-    let now = Date.now();
-    now - lastTime >= wait && (callback(...args), lastTime = now);
+    const now = Date.now();
+    if (now - lastTime >= wait) {
+      callback(...args);
+      lastTime = now;
+    }
   };
 }
 
 // src/components/block-handle/block-popover/pointer-move.ts
 function defineElementHoverHandler(handler) {
-  let handlePointerEvent = (view, event) => {
+  const handlePointerEvent = (view, event) => {
     var _a;
-    let rect = view.dom.getBoundingClientRect(), pos = (_a = view.posAtCoords({
+    const rect = view.dom.getBoundingClientRect();
+    const pos = (_a = view.posAtCoords({
       top: event.clientY,
       // Use the center of the editor
       left: rect.left + rect.width / 2
@@ -107,19 +126,28 @@ function defineElementHoverHandler(handler) {
       handler(null, null, null, null);
       return;
     }
-    let $pos = view.state.doc.resolve(pos), node = view.state.doc.nodeAt(pos), element = view.nodeDOM(pos);
+    const $pos = view.state.doc.resolve(pos);
+    const node = view.state.doc.nodeAt(pos);
+    const element = view.nodeDOM(pos);
     if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
-      let ancestorPos = $pos.before($pos.depth), node2 = view.state.doc.nodeAt(ancestorPos), element2 = view.nodeDOM(ancestorPos);
+      const ancestorPos = $pos.before($pos.depth);
+      const node2 = view.state.doc.nodeAt(ancestorPos);
+      const element2 = view.nodeDOM(ancestorPos);
       if (!element2) {
         handler(null, null, null, null);
         return;
       }
-      handler({
+      const reference = {
         contextElement: element2,
         // Get the bounding client rect of the parent node, including its
         // margins.
         getBoundingClientRect: () => {
-          let rect2 = element2.getBoundingClientRect(), style = window.getComputedStyle(element2), marginTop = Number.parseInt(style.marginTop, 10) || 0, marginRight = Number.parseInt(style.marginRight, 10) || 0, marginBottom = Number.parseInt(style.marginBottom, 10) || 0, marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
+          const rect2 = element2.getBoundingClientRect();
+          const style = window.getComputedStyle(element2);
+          const marginTop = Number.parseInt(style.marginTop, 10) || 0;
+          const marginRight = Number.parseInt(style.marginRight, 10) || 0;
+          const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
+          const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
           return {
             top: rect2.top - marginTop,
             right: rect2.right + marginRight,
@@ -131,7 +159,8 @@ function defineElementHoverHandler(handler) {
             y: rect2.y - marginTop
           };
         }
-      }, element2, node2, ancestorPos);
+      };
+      handler(reference, element2, node2, ancestorPos);
       return;
     }
     handler(element, element, node, pos);
@@ -145,27 +174,38 @@ function defineElementHoverHandler(handler) {
 
 // src/components/block-handle/block-popover/state.ts
 function useBlockPopover(host, state) {
-  let { editor, ...overlayState } = state, reference = createSignal(null);
+  const { editor, ...overlayState } = state;
+  const reference = createSignal(null);
   useOverlayPositionerState(host, overlayState, { reference });
-  let context = createSignal({
+  const context = createSignal({
     pos: null,
     node: null,
     element: null
   });
   blockPopoverContext.provide(host, context);
-  let open = createSignal(!1);
+  const open = createSignal(false);
   useEffect2(host, () => {
     open.set(!!context.get().element);
-  }), useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
-    reference.set(referenceValue), context.set({ element, node, pos });
   });
-  let presence = createComputed(() => !!reference.get());
-  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed"), usePresence(host, presence);
+  useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
+    reference.set(referenceValue);
+    context.set({ element, node, pos });
+  });
+  const presence = createComputed(() => !!reference.get());
+  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
+  usePresence(host, presence);
 }
 function useHoverExtension(host, editor, handler) {
-  let prevElement = null, prevPos = null, extension = defineElementHoverHandler(
+  let prevElement = null;
+  let prevPos = null;
+  const extension = defineElementHoverHandler(
     (reference, element, node, pos) => {
-      prevElement === element && prevPos === pos || (prevElement = element, prevPos = pos, handler(reference, element, node, pos));
+      if (prevElement === element && prevPos === pos) {
+        return;
+      }
+      prevElement = element;
+      prevPos = pos;
+      handler(reference, element, node, pos);
     }
   );
   useEditorExtension(host, editor, extension);

package/dist/prosekit-web-inline-popover.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
-} from "./chunk-Y2CJYXR5.js";
+} from "./chunk-LCDA7GFP.js";
 
 // src/components/inline-popover/inline-popover/element.gen.ts
 import { ElementBuilder } from "@aria-ui/core";
@@ -13,20 +13,20 @@ import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
 var defaultInlinePopoverProps = Object.freeze({
   ...defaultOverlayPositionerProps,
   editor: null,
-  defaultOpen: !0,
-  open: !1,
+  defaultOpen: true,
+  open: false,
   onOpenChange: null,
-  dismissOnEscape: !0,
+  dismissOnEscape: true,
   placement: "top",
   offset: 12,
-  shift: !0,
-  flip: !0,
-  hide: !0,
-  overlap: !0,
-  inline: !0,
+  shift: true,
+  flip: true,
+  hide: true,
+  overlap: true,
+  inline: true,
   overflowPadding: 8,
   // Don't need boundary when hoist is true.
-  hoist: !0,
+  hoist: true,
   boundary: []
 });
 
@@ -45,21 +45,21 @@ import {
   defineFocusChangeHandler
 } from "@prosekit/core";
 function useEditorFocusChangeEvent(host, editor, handler) {
-  let extension = defineFocusChangeHandler(handler);
+  const extension = defineFocusChangeHandler(handler);
   useEditorExtension(host, editor, extension);
 }
 
 // src/hooks/use-editor-update-event.ts
 import { defineUpdateHandler } from "@prosekit/core";
 function useEditorUpdateEvent(host, editor, handler) {
-  let extension = defineUpdateHandler(handler);
+  const extension = defineUpdateHandler(handler);
   useEditorExtension(host, editor, extension);
 }
 
 // src/hooks/use-keymap.ts
 import { defineKeymap } from "@prosekit/core";
 function useKeymap(host, editor, keymap) {
-  let extension = defineKeymap(keymap);
+  const extension = defineKeymap(keymap);
   return useEditorExtension(host, editor, extension);
 }
 
@@ -68,44 +68,52 @@ import { isTextSelection } from "@prosekit/core";
 
 // src/utils/is-in-code-block.ts
 function isInCodeBlock(selection) {
-  let type = selection.$from.parent.type;
+  const type = selection.$from.parent.type;
   return type.spec.code && type.isBlock;
 }
 
 // src/components/inline-popover/inline-popover/virtual-selection-element.ts
 function getVirtualSelectionElement(view) {
-  if (typeof window == "undefined" || view.isDestroyed)
+  if (typeof window === "undefined" || view.isDestroyed) {
     return null;
-  let selection = view.state.selection;
+  }
+  const selection = view.state.selection;
   if (!selection.empty && !isInCodeBlock(selection) && isTextSelection(selection)) {
-    let decoration = getInlineDecoration(view);
-    if (decoration)
+    const decoration = getInlineDecoration(view);
+    if (decoration) {
       return decoration;
-    let range = getDomRange();
-    if (range)
+    }
+    const range = getDomRange();
+    if (range) {
       return {
         contextElement: view.dom,
         getBoundingClientRect: () => range.getBoundingClientRect(),
         getClientRects: () => range.getClientRects()
       };
+    }
   }
   return null;
 }
 function getDomRange() {
-  let selection = window.getSelection();
-  if (!selection || selection.isCollapsed)
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed) {
     return;
-  let range = typeof selection.rangeCount == "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
-  if (range)
-    return range;
+  }
+  const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
+  if (!range) {
+    return;
+  }
+  return range;
 }
 function getInlineDecoration(view) {
-  let match = view.dom.querySelectorAll(".prosekit-virtual-selection");
-  if (match.length === 0)
+  const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
+  if (match.length === 0) {
     return;
-  if (match.length === 1)
+  }
+  if (match.length === 1) {
     return match[0];
-  let items = Array.from(match);
+  }
+  const items = Array.from(match);
   return {
     contextElement: items[0],
     getBoundingClientRect: () => items[0].getBoundingClientRect(),
@@ -115,27 +123,56 @@ function getInlineDecoration(view) {
 
 // src/components/inline-popover/inline-popover/state.ts
 function useInlinePopover(host, state) {
-  let { editor, defaultOpen, open, onOpenChange, ...overlayState } = state, reference = useInlinePopoverReference(host, editor), hasReference = createComputed(() => !!reference.get());
+  const { editor, defaultOpen, open, onOpenChange, ...overlayState } = state;
+  const reference = useInlinePopoverReference(host, editor);
+  const hasReference = createComputed(() => !!reference.get());
+  useEffect(host, () => {
+    const hasReferenceValue = hasReference.get();
+    const onOpenChangeValue = onOpenChange.peek();
+    const defaultOpenValue = defaultOpen.peek();
+    const openValue = open.peek();
+    if (onOpenChangeValue && (defaultOpenValue || openValue)) {
+      onOpenChangeValue(hasReferenceValue);
+    }
+  });
   useEffect(host, () => {
-    let hasReferenceValue = hasReference.get(), onOpenChangeValue = onOpenChange.peek(), defaultOpenValue = defaultOpen.peek(), openValue = open.peek();
-    onOpenChangeValue && (defaultOpenValue || openValue) && onOpenChangeValue(hasReferenceValue);
-  }), useEffect(host, () => {
-    let hasReferenceValue = hasReference.get(), defaultOpenValue = defaultOpen.peek();
-    hasReferenceValue && defaultOpenValue ? open.set(!0) : hasReferenceValue || open.set(!1);
-  }), useKeymap(host, editor, {
+    const hasReferenceValue = hasReference.get();
+    const defaultOpenValue = defaultOpen.peek();
+    if (hasReferenceValue && defaultOpenValue) {
+      open.set(true);
+    } else if (!hasReferenceValue) {
+      open.set(false);
+    }
+  });
+  useKeymap(host, editor, {
     Escape: () => {
       var _a;
-      return !state.dismissOnEscape.get() || !open.get() ? !1 : (open.set(!1), (_a = onOpenChange.peek()) == null || _a(!1), !0);
+      if (!state.dismissOnEscape.get() || !open.get()) {
+        return false;
+      }
+      open.set(false);
+      (_a = onOpenChange.peek()) == null ? void 0 : _a(false);
+      return true;
     }
-  }), useOverlayPositionerState(host, overlayState, { reference }), useAttribute(host, "data-state", () => open.get() ? "open" : "closed"), usePresence(host, open);
+  });
+  useOverlayPositionerState(host, overlayState, { reference });
+  useAttribute(host, "data-state", () => open.get() ? "open" : "closed");
+  usePresence(host, open);
 }
 function useInlinePopoverReference(host, editor) {
-  let reference = createSignal(null), editorFocused = !1;
-  return useEditorFocusChangeEvent(host, editor, (focus) => {
+  const reference = createSignal(null);
+  let editorFocused = false;
+  useEditorFocusChangeEvent(host, editor, (focus) => {
     editorFocused = focus;
-  }), useEditorUpdateEvent(host, editor, (view) => {
-    !editorFocused && host.contains(host.ownerDocument.activeElement) || reference.set(getVirtualSelectionElement(view));
-  }), reference;
+  });
+  useEditorUpdateEvent(host, editor, (view) => {
+    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
+    if (isPopoverFocused) {
+      return;
+    }
+    reference.set(getVirtualSelectionElement(view));
+  });
+  return reference;
 }
 
 // src/components/inline-popover/inline-popover/element.gen.ts

package/dist/prosekit-web-popover.js

@@ -1,6 +1,6 @@
 import {
   defineCustomElement
-} from "./chunk-Y2CJYXR5.js";
+} from "./chunk-LCDA7GFP.js";
 
 // src/components/popover/popover-content/element.gen.ts
 import { ElementBuilder } from "@aria-ui/core";

package/dist/prosekit-web-resizable.js

@@ -1,6 +1,6 @@
 import {
   defineCustomElement
-} from "./chunk-Y2CJYXR5.js";
+} from "./chunk-LCDA7GFP.js";
 
 // src/components/resizable/resizable-handle/element.gen.ts
 import { ElementBuilder } from "@aria-ui/core";
@@ -22,22 +22,26 @@ import { createContext } from "@aria-ui/core";
 var onResizeContext = createContext(
   "prosekit/resizable/onResize",
   null
-), onResizeStartContext = createContext(
+);
+var onResizeStartContext = createContext(
   "prosekit/resizable/onResizeStart",
   null
-), onResizeEndContext = createContext(
+);
+var onResizeEndContext = createContext(
   "prosekit/resizable/onResizeEnd",
   null
 );
 
 // src/utils/is-finite-positive-number.ts
 function isFinitePositiveNumber(value) {
-  return typeof value == "number" && Number.isFinite(value) && value > 0;
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
 }
 
 // src/components/resizable/resizable-handle/calc-resize.ts
 function calcResize(position, w, h, dx, dy, aspectRatio) {
-  switch (aspectRatio = aspectRatio || w / h, aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1, position) {
+  aspectRatio = aspectRatio ? aspectRatio : w / h;
+  aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1;
+  switch (position) {
     case "bottom-right":
       return calcBottomRightResize(w, h, dx, dy, aspectRatio);
     case "bottom-left":
@@ -59,38 +63,90 @@ function calcResize(position, w, h, dx, dy, aspectRatio) {
   }
 }
 var calcBottomRightResize = (w, h, dx, dy, r) => {
-  w += dx, h += dy;
-  let sum = w + h;
-  return h = sum / (r + 1), w = sum - h, [w, h];
-}, calcBottomLeftResize = (w, h, dx, dy, r) => {
-  w -= dx, h += dy;
-  let sum = w + h;
-  return h = sum / (r + 1), w = sum - h, [w, h];
-}, calcTopRightResize = (w, h, dx, dy, r) => {
-  w += dx, h -= dy;
-  let sum = w + h;
-  return h = sum / (r + 1), w = sum - h, [w, h];
-}, calcTopLeftResize = (w, h, dx, dy, r) => {
-  w -= dx, h -= dy;
-  let sum = w + h;
-  return h = sum / (r + 1), w = sum - h, [w, h];
-}, calcTopResize = (w, h, dx, dy, r) => (h -= dy, w = h * r, [w, h]), calcRightResize = (w, h, dx, dy, r) => (w += dx, h = w / r, [w, h]), calcBottomResize = (w, h, dx, dy, r) => (h += dy, w = h * r, [w, h]), calcLeftResize = (w, h, dx, dy, r) => (w -= dx, h = w / r, [w, h]);
+  w += dx;
+  h += dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcBottomLeftResize = (w, h, dx, dy, r) => {
+  w -= dx;
+  h += dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcTopRightResize = (w, h, dx, dy, r) => {
+  w += dx;
+  h -= dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcTopLeftResize = (w, h, dx, dy, r) => {
+  w -= dx;
+  h -= dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcTopResize = (w, h, dx, dy, r) => {
+  h -= dy;
+  w = h * r;
+  return [w, h];
+};
+var calcRightResize = (w, h, dx, dy, r) => {
+  w += dx;
+  h = w / r;
+  return [w, h];
+};
+var calcBottomResize = (w, h, dx, dy, r) => {
+  h += dy;
+  w = h * r;
+  return [w, h];
+};
+var calcLeftResize = (w, h, dx, dy, r) => {
+  w -= dx;
+  h = w / r;
+  return [w, h];
+};
 
 // src/components/resizable/resizable-handle/state.ts
 function useResizableHandle(host, state) {
-  let onResize = onResizeContext.consume(host), onResizeStart = onResizeStartContext.consume(host), onResizeEnd = onResizeEndContext.consume(host);
+  const onResize = onResizeContext.consume(host);
+  const onResizeStart = onResizeStartContext.consume(host);
+  const onResizeEnd = onResizeEndContext.consume(host);
   useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd });
 }
 function useResizableHandleState(host, state, context) {
-  let startX = 0, startY = 0, width = 0, height = 0, aspectRatio = 1, pointerPressing = createSignal(!1), handlePointerDown = (event) => {
+  let startX = 0;
+  let startY = 0;
+  let width = 0;
+  let height = 0;
+  let aspectRatio = 1;
+  const pointerPressing = createSignal(false);
+  const handlePointerDown = (event) => {
     var _a;
-    event.preventDefault(), pointerPressing.set(!0), startX = event.x, startY = event.y;
-    let size = (_a = context.onResizeStart.get()) == null ? void 0 : _a();
-    size && ([width, height, aspectRatio] = size);
-  }, handlePointerMove = (event) => {
+    event.preventDefault();
+    pointerPressing.set(true);
+    startX = event.x;
+    startY = event.y;
+    const size = (_a = context.onResizeStart.get()) == null ? void 0 : _a();
+    if (size) {
+      ;
+      [width, height, aspectRatio] = size;
+    }
+  };
+  const handlePointerMove = (event) => {
     var _a;
     event.preventDefault();
-    let dx = event.x - startX, dy = event.y - startY, [w, h] = calcResize(
+    const dx = event.x - startX;
+    const dy = event.y - startY;
+    const [w, h] = calcResize(
       state.position.peek(),
       width,
       height,
@@ -98,19 +154,30 @@ function useResizableHandleState(host, state, context) {
       dy,
       aspectRatio
     );
-    (_a = context.onResize.get()) == null || _a(w, h);
-  }, handlePointerUp = (event) => {
+    (_a = context.onResize.get()) == null ? void 0 : _a(w, h);
+  };
+  const handlePointerUp = (event) => {
     var _a;
-    event.preventDefault(), pointerPressing.set(!1), (_a = context.onResizeEnd.get()) == null || _a();
+    event.preventDefault();
+    pointerPressing.set(false);
+    (_a = context.onResizeEnd.get()) == null ? void 0 : _a();
   };
-  useEffect(host, () => (host.addEventListener("pointerdown", handlePointerDown), () => {
-    host.removeEventListener("pointerdown", handlePointerDown);
-  })), useEffect(host, () => {
-    if (!pointerPressing.get())
+  useEffect(host, () => {
+    host.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      host.removeEventListener("pointerdown", handlePointerDown);
+    };
+  });
+  useEffect(host, () => {
+    if (!pointerPressing.get()) {
       return;
-    let win = getWindow(host);
-    return win.addEventListener("pointermove", handlePointerMove), win.addEventListener("pointerup", handlePointerUp), () => {
-      win.removeEventListener("pointermove", handlePointerMove), win.removeEventListener("pointerup", handlePointerUp);
+    }
+    const win = getWindow(host);
+    win.addEventListener("pointermove", handlePointerMove);
+    win.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      win.removeEventListener("pointermove", handlePointerMove);
+      win.removeEventListener("pointerup", handlePointerUp);
     };
   });
 }
@@ -139,19 +206,31 @@ import {
   useEffect as useEffect2
 } from "@aria-ui/core";
 function useResizableRoot(host, state) {
-  let onResizeStart = () => {
+  const onResizeStart = () => {
     var _a, _b;
-    let { width, height } = host.getBoundingClientRect(), aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
-    return isFinitePositiveNumber(aspectRatio) || (aspectRatio = 0), (_b = state.onSizeChangeStart.peek()) == null || _b({ width, height }), [width, height, aspectRatio];
-  }, onResize = (width, height) => {
+    const { width, height } = host.getBoundingClientRect();
+    let aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
+    if (!isFinitePositiveNumber(aspectRatio)) {
+      aspectRatio = 0;
+    }
+    (_b = state.onSizeChangeStart.peek()) == null ? void 0 : _b({ width, height });
+    return [width, height, aspectRatio];
+  };
+  const onResize = (width, height) => {
     var _a;
-    (_a = state.onSizeChange.peek()) == null || _a({ width, height }), state.width.set(width), state.height.set(height);
-  }, onResizeEnd = () => {
+    (_a = state.onSizeChange.peek()) == null ? void 0 : _a({ width, height });
+    state.width.set(width);
+    state.height.set(height);
+  };
+  const onResizeEnd = () => {
     var _a;
-    let { width, height } = host.getBoundingClientRect();
-    (_a = state.onSizeChangeEnd.peek()) == null || _a({ width, height });
+    const { width, height } = host.getBoundingClientRect();
+    (_a = state.onSizeChangeEnd.peek()) == null ? void 0 : _a({ width, height });
   };
-  onResizeStartContext.provide(host, createSignal2(onResizeStart)), onResizeContext.provide(host, createSignal2(onResize)), onResizeEndContext.provide(host, createSignal2(onResizeEnd)), useEffect2(host, () => {
+  onResizeStartContext.provide(host, createSignal2(onResizeStart));
+  onResizeContext.provide(host, createSignal2(onResize));
+  onResizeEndContext.provide(host, createSignal2(onResizeEnd));
+  useEffect2(host, () => {
     updateResizableRootStyles(
       host,
       state.width.get(),
@@ -161,7 +240,16 @@ function useResizableRoot(host, state) {
   });
 }
 function updateResizableRootStyles(host, width, height, aspectRatio) {
-  host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "", host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "", isFinitePositiveNumber(aspectRatio) && (host.style.aspectRatio = `${aspectRatio}`, width && width > 0 && aspectRatio >= 1 ? host.style.height = "auto" : height && height > 0 && aspectRatio <= 1 && (host.style.width = "auto"));
+  host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "";
+  host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "";
+  if (isFinitePositiveNumber(aspectRatio)) {
+    host.style.aspectRatio = `${aspectRatio}`;
+    if (width && width > 0 && aspectRatio >= 1) {
+      host.style.height = "auto";
+    } else if (height && height > 0 && aspectRatio <= 1) {
+      host.style.width = "auto";
+    }
+  }
 }
 
 // src/components/resizable/resizable-root/element.gen.ts

package/dist/prosekit-web-tooltip.js

@@ -1,6 +1,6 @@
 import {
   defineCustomElement
-} from "./chunk-Y2CJYXR5.js";
+} from "./chunk-LCDA7GFP.js";
 
 // src/components/tooltip/tooltip-content/element.gen.ts
 import { ElementBuilder } from "@aria-ui/core";
@@ -9,12 +9,12 @@ import { ElementBuilder } from "@aria-ui/core";
 import { defaultTooltipContentProps as defaultProps } from "@aria-ui/tooltip";
 var defaultTooltipContentProps = {
   ...defaultProps,
-  shift: !0,
-  flip: !0,
+  shift: true,
+  flip: true,
   offset: 6,
   overflowPadding: 4,
   // Don't need boundary when hoist is true.
-  hoist: !0,
+  hoist: true,
   boundary: []
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -74,9 +74,9 @@
     "@aria-ui/tooltip": "^0.0.21",
     "@floating-ui/dom": "^1.6.7",
     "@zag-js/dom-query": "^0.61.0",
-    "@prosekit/core": "^0.7.2",
-    "@prosekit/pm": "^0.1.5",
-    "@prosekit/extensions": "^0.7.2"
+    "@prosekit/core": "^0.7.3",
+    "@prosekit/pm": "^0.1.6",
+    "@prosekit/extensions": "^0.7.3"
   },
   "devDependencies": {
     "tsup": "^8.1.0",