@prosekit/web 0.1.9 → 0.2.0

package/dist/_tsup-dts-rollup.d.ts

@@ -29,6 +29,7 @@ import { UpdateHandler } from '@prosekit/core';
 import { usePopoverContent } from '@aria-ui/popover';
 import { usePopoverRoot } from '@aria-ui/popover';
 import { usePopoverTrigger } from '@aria-ui/popover';
+import { useTooltipContent } from '@aria-ui/tooltip';
 import { useTooltipRoot } from '@aria-ui/tooltip';
 import { useTooltipTrigger } from '@aria-ui/tooltip';
 import type { VirtualElement } from '@floating-ui/dom';
@@ -320,7 +321,8 @@ export { defaultBlockPopoverProps as defaultBlockPopoverProps_alias_1 }
 
 declare const defaultInlinePopoverProps: Readonly<{
     editor: null;
-    open: true;
+    defaultOpen: true;
+    open: false;
     onOpenChange: null;
     placement: "top";
     offset: 12;
@@ -434,16 +436,27 @@ declare interface InlinePopoverProps extends Omit<OverlayPositionerProps, 'place
      * @default null
      */
     editor: Editor | null;
+    /**
+     * Whether the popover is open by default when some inline content is
+     * selected.
+     *
+     * When `defaultOpen` is true, the popover will open or close based on the
+     * inline selection. When `defaultOpen` is false, the popover will never be
+     * opened unless the `open` prop is true.
+     *
+     * @default true
+     */
+    defaultOpen: boolean;
     /**
      * Whether the popover is open.
      *
      * Notice that the popover will be always hidden if the inline selection is empty.
      *
-     * @default `true`
+     * @default false
      */
     open: boolean;
     /**
-     * A callback that is called when the popover's open state changes.
+     * Event handler called when the open state changed caused by user interaction (i.e. select or unselect inline content).
      *
      * @default null
      */
@@ -486,6 +499,8 @@ export declare function isFinitePositiveNumber(value: unknown): value is number;
 
 export declare function isInCodeBlock(selection: Selection_2): boolean | undefined;
 
+export declare function omit<T extends Record<string, unknown>, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
+
 /**
  * @internal
  */
@@ -656,17 +671,17 @@ declare const TooltipTriggerElement_base: {
 export { TooltipTriggerProps }
 export { TooltipTriggerProps as TooltipTriggerProps_alias_1 }
 
-export declare function useAutocompleteEmpty(element: ConnectableElement, _props?: Partial<AutocompleteEmptyProps>): SignalState<AutocompleteEmptyProps>;
+export declare function useAutocompleteEmpty(element: ConnectableElement): void;
 
-export declare function useAutocompleteItem(element: ConnectableElement, props?: Partial<AutocompleteItemProps>): SignalState<AutocompleteItemProps>;
+export declare function useAutocompleteItem(element: ConnectableElement, state: SignalState<AutocompleteItemProps>): void;
 
-export declare function useAutocompleteList(element: ConnectableElement, props?: Partial<AutocompleteListProps>): SignalState<AutocompleteListProps>;
+export declare function useAutocompleteList(element: ConnectableElement, state: SignalState<AutocompleteListProps>): void;
 
-export declare function useAutocompletePopover(host: ConnectableElement, props?: Partial<AutocompletePopoverProps>): SignalState<Readonly<AutocompletePopoverProps>>;
+export declare function useAutocompletePopover(host: ConnectableElement, state: SignalState<AutocompletePopoverProps>): void;
 
-export declare function useBlockDragHandle(host: ConnectableElement, props?: Partial<BlockDragHandleProps>): SignalState<BlockDragHandleProps>;
+export declare function useBlockDragHandle(host: ConnectableElement, state: SignalState<BlockDragHandleProps>): void;
 
-export declare function useBlockPopover(host: ConnectableElement, props?: Partial<BlockPopoverProps>): SignalState<BlockPopoverProps>;
+export declare function useBlockPopover(host: ConnectableElement, state: SignalState<BlockPopoverProps>): void;
 
 export declare function useEditorExtension(host: ConnectableElement, editor: ReadonlySignal<Editor | null>, extension: Extension): void;
 
@@ -682,7 +697,7 @@ export declare function useEditorUpdateEvent(host: ConnectableElement, editor: R
 
 export declare function useFirstRendering(host: ConnectableElement): ReadonlySignal<boolean>;
 
-export declare function useInlinePopover(host: ConnectableElement, props?: Partial<InlinePopoverProps>): SignalState<Readonly<InlinePopoverProps>>;
+export declare function useInlinePopover(host: ConnectableElement, state: SignalState<InlinePopoverProps>): void;
 
 export { usePopoverContent }
 
@@ -690,11 +705,11 @@ export { usePopoverRoot }
 
 export { usePopoverTrigger }
 
-export declare function useResizableHandle(host: ConnectableElement, props?: Partial<ResizableHandleProps>): SignalState<Readonly<ResizableHandleProps>>;
+export declare function useResizableHandle(host: ConnectableElement, state: SignalState<ResizableHandleProps>): void;
 
-export declare function useResizableRoot(host: ConnectableElement, props?: Partial<ResizableRootProps>): SignalState<Readonly<ResizableRootProps>>;
+export declare function useResizableRoot(host: ConnectableElement, state: SignalState<ResizableRootProps>): void;
 
-export declare function useTooltipContent(element: ConnectableElement, props?: Partial<TooltipContentProps>): SignalState<TooltipContentProps>;
+export { useTooltipContent }
 
 export { useTooltipRoot }
 

package/dist/{chunk-VJEVDINM.js → chunk-MZSYOTZT.js}

@@ -5,7 +5,7 @@ import {
 function useEditorExtension(host, editor, extension) {
   useEffect(host, () => {
     var _a;
-    return (_a = editor.value) == null ? void 0 : _a.use(extension);
+    return (_a = editor.get()) == null ? void 0 : _a.use(extension);
   });
 }
 

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

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

package/dist/prosekit-web-autocomplete.js

@@ -1,30 +1,29 @@
 import {
   useEditorExtension
-} from "./chunk-VJEVDINM.js";
+} from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
-} from "./chunk-LCDA7GFP.js";
+} from "./chunk-Y2CJYXR5.js";
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-empty/props.ts
 var defaultAutocompleteEmptyProps = {};
 
 // src/components/autocomplete/autocomplete-empty/state.ts
 import { useListboxEmpty } from "@aria-ui/listbox";
-function useAutocompleteEmpty(element, _props) {
+function useAutocompleteEmpty(element) {
   useListboxEmpty(element);
-  return {};
 }
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
-var AutocompleteEmptyElement = class extends ElementMixin(useAutocompleteEmpty, defaultAutocompleteEmptyProps) {
+var AutocompleteEmptyElement = class extends ElementBuilder(useAutocompleteEmpty, defaultAutocompleteEmptyProps) {
 };
 defineCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
 
 // src/components/autocomplete/autocomplete-item/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-item/props.ts
 var defaultAutocompleteItemProps = {
@@ -43,157 +42,125 @@ import { createContext } from "@aria-ui/core";
 var queryContext = createContext(
   "prosekit/autocomplete-popover/query",
   ""
-);
-var onSubmitContext = createContext(
+), onSubmitContext = createContext(
   "prosekit/autocomplete-popover/onSubmit",
   null
-);
-var openContext = createContext(
+), openContext = createContext(
   "prosekit/autocomplete-popover/open",
-  false
+  !1
 );
 
 // src/components/autocomplete/autocomplete-item/state.ts
-function useAutocompleteItem(element, props) {
-  const { onSelect, value } = useListboxItem(element, props);
-  const open = openContext.consume(element);
+function useAutocompleteItem(element, state) {
+  useListboxItem(element, state);
+  let open = openContext.consume(element);
   useEffect(element, () => {
     var _a;
-    if (!value.peek() && open.value) {
-      value.value = (_a = element.textContent) != null ? _a : "";
-    }
+    !state.value.peek() && open.get() && state.value.set((_a = element.textContent) != null ? _a : "");
   });
-  return { onSelect, value };
 }
 
 // src/components/autocomplete/autocomplete-item/element.gen.ts
-var AutocompleteItemElement = class extends ElementMixin2(useAutocompleteItem, defaultAutocompleteItemProps) {
+var AutocompleteItemElement = class extends ElementBuilder2(useAutocompleteItem, defaultAutocompleteItemProps) {
 };
 defineCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
 
 // src/components/autocomplete/autocomplete-list/element.gen.ts
-import { ElementMixin as ElementMixin3 } from "@aria-ui/core";
+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;
-var defaultAutocompleteListProps = {
+var defaultFilter = defaultListboxProps.filter, defaultAutocompleteListProps = {
   filter: defaultFilter,
   editor: null
 };
 
 // src/components/autocomplete/autocomplete-list/state.ts
 import {
-  assignProps,
   createSignal,
+  mapSignals,
   useEffect as useEffect2
 } from "@aria-ui/core";
-import { useListbox } from "@aria-ui/listbox";
+import {
+  defaultListboxProps as defaultListboxProps2,
+  useListbox
+} from "@aria-ui/listbox";
 import {
   Priority,
   defineDOMEventHandler,
   withPriority
 } from "@prosekit/core";
-function useAutocompleteList(element, props) {
-  const fullProps = assignProps(defaultAutocompleteListProps, props);
-  const editor = createSignal(fullProps.editor);
-  const open = openContext.consume(element);
-  const query = queryContext.consume(element);
-  const onSubmit = onSubmitContext.consume(element);
-  const onKeydownHandlerAdd = useKeyboardHandler(element, open, editor);
-  const onValueChange = (value) => {
+
+// src/utils/omit.ts
+function omit(object, keys) {
+  return Object.fromEntries(
+    Object.entries(object).filter(([key]) => !keys.includes(key))
+  );
+}
+
+// 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) => {
     var _a;
-    if (value) {
-      (_a = onSubmit.peek()) == null ? void 0 : _a();
-    }
+    value && ((_a = onSubmit.peek()) == null || _a());
+  }, listboxState = {
+    ...mapSignals({
+      ...omit(defaultListboxProps2, ["filter"]),
+      onKeydownHandlerAdd,
+      onValueChange
+    }),
+    filter: state.filter
   };
-  const {
-    query: listboxQuery,
-    value: listboxValue,
-    filter,
-    autoFocus
-  } = useListbox(element, {
-    onKeydownHandlerAdd,
-    onValueChange,
-    filter: fullProps.filter
-  });
-  useEffect2(element, () => {
-    listboxQuery.value = query.value;
-  });
-  useEffect2(element, () => {
-    if (!open.value) {
-      listboxValue.value = "";
-      query.value = "";
-    }
-  });
-  useEffect2(element, () => {
-    if (!open.value) {
-      autoFocus.value = false;
-    } else {
-      let canceled = false;
-      requestAnimationFrame(() => {
-        if (canceled)
-          return;
-        autoFocus.value = true;
-      });
-      return () => {
-        canceled = true;
+  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, () => {
+  }), useEffect2(element, () => {
     element.tabIndex = -1;
   });
-  return { editor, filter };
 }
 function useKeyboardHandler(element, open, editor) {
-  const keydownHandler = createSignal(
+  let keydownHandler = createSignal(
     null
-  );
-  let disposeKeydownHandler = null;
-  useEffect2(element, () => {
-    const editorValue = editor.value;
-    const keydownHandlerValue = keydownHandler.value;
-    if (!editorValue || !keydownHandlerValue) {
+  ), disposeKeydownHandler = null;
+  return useEffect2(element, () => {
+    let editorValue = editor.get(), keydownHandlerValue = keydownHandler.get();
+    if (!editorValue || !keydownHandlerValue)
       return;
-    }
-    const extension = defineDOMEventHandler(
+    let extension = defineDOMEventHandler(
       "keydown",
-      (view, event) => {
-        if (view.composing || event.defaultPrevented || !open.value) {
-          return false;
-        }
-        keydownHandlerValue(event);
-        return event.defaultPrevented;
-      }
+      (view, event) => view.composing || event.defaultPrevented || !open.get() ? !1 : (keydownHandlerValue(event), event.defaultPrevented)
     );
-    disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
-    disposeKeydownHandler = editorValue.use(
+    disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = editorValue.use(
       withPriority(extension, Priority.highest)
     );
+  }), (keydownHandlerValue) => (keydownHandler.set(keydownHandlerValue), () => {
+    disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = null;
   });
-  return (keydownHandlerValue) => {
-    keydownHandler.value = keydownHandlerValue;
-    return () => {
-      disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
-      disposeKeydownHandler = null;
-    };
-  };
 }
 
 // src/components/autocomplete/autocomplete-list/element.gen.ts
-var AutocompleteListElement = class extends ElementMixin3(useAutocompleteList, defaultAutocompleteListProps) {
+var AutocompleteListElement = class extends ElementBuilder3(useAutocompleteList, defaultAutocompleteListProps) {
 };
 defineCustomElement("prosekit-autocomplete-list", AutocompleteListElement);
 
 // src/components/autocomplete/autocomplete-popover/element.gen.ts
-import { ElementMixin as ElementMixin4 } from "@aria-ui/core";
+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");
-var defaultBoundary = body || "clippingAncestors";
-var defaultAutocompletePopoverProps = Object.freeze({
+var body = typeof document != "undefined" && document.querySelector("body"), defaultBoundary = body || "clippingAncestors", defaultAutocompletePopoverProps = Object.freeze({
   ...defaultOverlayPositionerProps,
   editor: null,
   regex: null,
@@ -201,19 +168,17 @@ var defaultAutocompletePopoverProps = Object.freeze({
   onOpenChange: null,
   placement: "bottom-start",
   offset: 4,
-  inline: true,
-  hoist: true,
-  fitViewport: true,
+  inline: !0,
+  hoist: !0,
+  fitViewport: !0,
   boundary: defaultBoundary,
   overflowPadding: 8
 });
 
 // src/components/autocomplete/autocomplete-popover/state.ts
 import {
-  assignProps as assignProps2,
   createComputed,
   createSignal as createSignal3,
-  mapSignals,
   useAnimationFrame,
   useEffect as useEffect4
 } from "@aria-ui/core";
@@ -235,13 +200,12 @@ import {
   useEffect as useEffect3
 } from "@aria-ui/core";
 function useFirstRendering(host) {
-  const firstRendering = createSignal2(true);
-  useEffect3(host, () => {
+  let firstRendering = createSignal2(!0);
+  return useEffect3(host, () => {
     requestAnimationFrame(() => {
-      firstRendering.value = false;
+      firstRendering.set(!1);
     });
-  });
-  return firstRendering;
+  }), firstRendering;
 }
 
 // src/components/autocomplete/autocomplete-popover/helpers.ts
@@ -250,23 +214,9 @@ function defaultQueryBuilder(match) {
 }
 
 // src/components/autocomplete/autocomplete-popover/state.ts
-function useAutocompletePopover(host, props) {
-  const state = mapSignals(assignProps2(defaultAutocompletePopoverProps, props));
-  useAutocompletePopoverState(host, state);
-  return state;
-}
-function useAutocompletePopoverState(host, state) {
-  const { editor, regex, ...overlayState } = state;
-  const reference = createSignal3(null);
-  const query = createSignal3("");
-  const onDismiss = createSignal3(null);
-  const onSubmit = createSignal3(null);
-  const presence = createComputed(() => !!reference.value);
-  queryContext.provide(host, query);
-  onSubmitContext.provide(host, onSubmit);
-  openContext.provide(host, presence);
-  useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence));
-  useAutocompleteExtension(
+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(
     host,
     editor,
     regex,
@@ -274,89 +224,62 @@ function useAutocompletePopoverState(host, state) {
     query,
     onDismiss,
     onSubmit
-  );
-  useOverlayPositionerState(host, overlayState, { reference });
-  usePresence(host, presence);
-  const firstRendering = useFirstRendering(host);
+  ), useOverlayPositionerState(host, overlayState, { reference }), usePresence(host, presence);
+  let firstRendering = useFirstRendering(host);
   useEffect4(host, () => {
     var _a;
-    const queryValue = query.value;
-    if (!firstRendering.peek()) {
-      (_a = state.onQueryChange.peek()) == null ? void 0 : _a(queryValue);
-    }
-  });
-  useAnimationFrame(host, () => {
-    const presenceValue = presence.value;
-    const onOpenChangeValue = state.onOpenChange.peek();
-    if (!onOpenChangeValue) {
-      return;
-    }
-    return () => {
-      onOpenChangeValue(presenceValue);
-    };
+    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);
+      };
   });
 }
 function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
   useEffect4(host, () => {
-    const editorValue = editor.value;
-    const regexValue = regex.value;
-    if (!editorValue || !regexValue) {
-      return;
-    }
-    return addAutocompleteExtension(
-      editorValue,
-      regexValue,
-      reference,
-      query,
-      onDismiss,
-      onSubmit
-    );
+    let editorValue = editor.get(), regexValue = regex.get();
+    if (!(!editorValue || !regexValue))
+      return addAutocompleteExtension(
+        editorValue,
+        regexValue,
+        reference,
+        query,
+        onDismiss,
+        onSubmit
+      );
   });
 }
 function addAutocompleteExtension(editor, regex, reference, query, onDismiss, onSubmit) {
-  const handleEnter = (options) => {
-    const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
-    if (span) {
-      reference.value = span;
-    }
-    query.value = defaultQueryBuilder(options.match);
-    onDismiss.value = options.ignoreMatch;
-    onSubmit.value = options.deleteMatch;
-  };
-  const handleLeave = () => {
-    reference.value = null;
-    query.value = "";
-    onDismiss.value = null;
-    onSubmit.value = null;
-  };
-  const rule = new AutocompleteRule({
+  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({
     regex,
     onEnter: handleEnter,
     onLeave: handleLeave
-  });
-  const extension = defineAutocomplete(rule);
+  }), extension = defineAutocomplete(rule);
   return editor.use(extension);
 }
 function createKeymapHandler(handler, enabled) {
   return () => {
-    if (!enabled.value) {
-      return false;
-    }
-    const fn = handler.peek();
-    if (!fn)
-      return false;
-    fn();
-    return true;
+    if (!enabled.get())
+      return !1;
+    let fn = handler.peek();
+    return fn ? (fn(), !0) : !1;
   };
 }
 function useEscapeKeydown(host, editor, handler) {
-  const keymap = { Escape: handler };
-  const extension = withPriority2(defineKeymap(keymap), Priority2.highest);
+  let extension = withPriority2(defineKeymap({ Escape: handler }), Priority2.highest);
   return useEditorExtension(host, editor, extension);
 }
 
 // src/components/autocomplete/autocomplete-popover/element.gen.ts
-var AutocompletePopoverElement = class extends ElementMixin4(useAutocompletePopover, defaultAutocompletePopoverProps) {
+var AutocompletePopoverElement = class extends ElementBuilder4(useAutocompletePopover, defaultAutocompletePopoverProps) {
 };
 defineCustomElement("prosekit-autocomplete-popover", AutocompletePopoverElement);
 export {