@prosekit/web 0.3.18 → 0.4.0

package/dist/chunk-ZGQ225UP.js

@@ -0,0 +1,17 @@
+// src/utils/get-default-state.ts
+import {
+  createSignal
+} from "@aria-ui/core";
+function getStateWithDefaults(state, props) {
+  const merged = { ...state };
+  for (const key of Object.keys(props)) {
+    if (!merged[key]) {
+      merged[key] = createSignal(props[key].default);
+    }
+  }
+  return merged;
+}
+
+export {
+  getStateWithDefaults
+};

package/dist/prosekit-web-autocomplete.d.ts

@@ -1,12 +1,20 @@
 export { AutocompleteEmptyElement } from './_tsup-dts-rollup';
-export { defaultAutocompleteEmptyProps } from './_tsup-dts-rollup';
+export { autocompleteEmptyEvents } from './_tsup-dts-rollup';
+export { autocompleteEmptyProps } from './_tsup-dts-rollup';
+export { AutocompleteEmptyEvents } from './_tsup-dts-rollup';
 export { AutocompleteEmptyProps } from './_tsup-dts-rollup';
 export { AutocompleteItemElement } from './_tsup-dts-rollup';
-export { defaultAutocompleteItemProps } from './_tsup-dts-rollup';
+export { autocompleteItemEvents } from './_tsup-dts-rollup';
+export { autocompleteItemProps } from './_tsup-dts-rollup';
+export { AutocompleteItemEvents } from './_tsup-dts-rollup';
 export { AutocompleteItemProps } from './_tsup-dts-rollup';
 export { AutocompleteListElement } from './_tsup-dts-rollup';
-export { defaultAutocompleteListProps } from './_tsup-dts-rollup';
+export { autocompleteListEvents } from './_tsup-dts-rollup';
+export { autocompleteListProps } from './_tsup-dts-rollup';
+export { AutocompleteListEvents } from './_tsup-dts-rollup';
 export { AutocompleteListProps } from './_tsup-dts-rollup';
 export { AutocompletePopoverElement } from './_tsup-dts-rollup';
-export { defaultAutocompletePopoverProps } from './_tsup-dts-rollup';
+export { autocompletePopoverEvents } from './_tsup-dts-rollup';
+export { autocompletePopoverProps } from './_tsup-dts-rollup';
+export { AutocompletePopoverEvents } from './_tsup-dts-rollup';
 export { AutocompletePopoverProps } from './_tsup-dts-rollup';

package/dist/prosekit-web-autocomplete.js

@@ -1,41 +1,38 @@
+import {
+  getStateWithDefaults
+} from "./chunk-ZGQ225UP.js";
 import {
   useEditorExtension
 } from "./chunk-MZSYOTZT.js";
-import {
-  defineCustomElement
-} from "./chunk-LCDA7GFP.js";
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
-import { ElementBuilder } from "@aria-ui/core";
+import { defineCustomElement, registerCustomElement } from "@aria-ui/core";
 
-// src/components/autocomplete/autocomplete-empty/props.ts
-var defaultAutocompleteEmptyProps = {};
+// src/components/autocomplete/autocomplete-empty/setup.ts
+import { useListboxEmpty } from "@aria-ui/listbox/elements";
+var useAutocompleteEmpty = useListboxEmpty;
 
-// src/components/autocomplete/autocomplete-empty/state.ts
-import { useListboxEmpty } from "@aria-ui/listbox";
-function useAutocompleteEmpty(element) {
-  useListboxEmpty(element);
-}
+// src/components/autocomplete/autocomplete-empty/types.ts
+var autocompleteEmptyProps = {};
+var autocompleteEmptyEvents = {};
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
-var AutocompleteEmptyElement = class extends ElementBuilder(useAutocompleteEmpty, defaultAutocompleteEmptyProps) {
+var AutocompleteEmptyElement = class extends defineCustomElement({
+  props: autocompleteEmptyProps,
+  events: autocompleteEmptyEvents,
+  setup: useAutocompleteEmpty
+}) {
 };
-defineCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
+registerCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
 
 // src/components/autocomplete/autocomplete-item/element.gen.ts
-import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
+import { defineCustomElement as defineCustomElement2, registerCustomElement as registerCustomElement2 } from "@aria-ui/core";
 
-// src/components/autocomplete/autocomplete-item/props.ts
-var defaultAutocompleteItemProps = {
-  value: "",
-  onSelect: null
-};
-
-// src/components/autocomplete/autocomplete-item/state.ts
+// src/components/autocomplete/autocomplete-item/setup.ts
 import {
   useEffect
 } from "@aria-ui/core";
-import { useListboxItem } from "@aria-ui/listbox";
+import { useListboxItem } from "@aria-ui/listbox/elements";
 
 // src/components/autocomplete/context.ts
 import { createContext } from "@aria-ui/core";
@@ -52,9 +49,9 @@ var openContext = createContext(
   false
 );
 
-// src/components/autocomplete/autocomplete-item/state.ts
-function useAutocompleteItem(element, state) {
-  useListboxItem(element, state);
+// src/components/autocomplete/autocomplete-item/setup.ts
+function useAutocompleteItem(element, { state, emit }) {
+  useListboxItem(element, { state, emit });
   const open = openContext.consume(element);
   useEffect(element, () => {
     var _a;
@@ -64,57 +61,59 @@ function useAutocompleteItem(element, state) {
   });
 }
 
+// src/components/autocomplete/autocomplete-item/types.ts
+import { listboxItemEvents } from "@aria-ui/listbox";
+var autocompleteItemProps = {
+  value: {
+    default: ""
+  }
+};
+var autocompleteItemEvents = listboxItemEvents;
+
 // src/components/autocomplete/autocomplete-item/element.gen.ts
-var AutocompleteItemElement = class extends ElementBuilder2(useAutocompleteItem, defaultAutocompleteItemProps) {
+var AutocompleteItemElement = class extends defineCustomElement2({
+  props: autocompleteItemProps,
+  events: autocompleteItemEvents,
+  setup: useAutocompleteItem
+}) {
 };
-defineCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
+registerCustomElement2("prosekit-autocomplete-item", AutocompleteItemElement);
 
 // src/components/autocomplete/autocomplete-list/element.gen.ts
-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 = {
-  filter: defaultFilter,
-  editor: null
-};
+import { defineCustomElement as defineCustomElement3, registerCustomElement as registerCustomElement3 } from "@aria-ui/core";
 
-// src/components/autocomplete/autocomplete-list/state.ts
+// src/components/autocomplete/autocomplete-list/setup.ts
 import {
-  mapSignals,
+  createSignal,
   useEffect as useEffect2
 } from "@aria-ui/core";
 import {
-  defaultListboxProps as defaultListboxProps2,
+  listboxProps,
   useListbox
-} from "@aria-ui/listbox";
+} from "@aria-ui/listbox/elements";
 import {
   Priority,
   defineDOMEventHandler,
   withPriority
 } from "@prosekit/core";
-import omit from "just-omit";
-function useAutocompleteList(element, state) {
+function useAutocompleteList(element, { state, emit }) {
   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;
-    if (value) {
-      (_a = onSubmit.peek()) == null ? void 0 : _a();
-    }
-  };
-  const listboxState = {
-    ...mapSignals({
-      ...omit(defaultListboxProps2, ["filter"]),
-      onKeydownHandlerAdd,
-      onValueChange
-    }),
-    filter: state.filter
-  };
-  useListbox(element, listboxState);
+  const keydownTarget = useKeyDownTarget(element, open, state.editor);
+  const listboxState = getStateWithDefaults(
+    { filter: state.filter, eventTarget: createSignal(keydownTarget) },
+    listboxProps
+  );
+  useEffect2(element, () => {
+    element.addEventListener("valueChange", () => {
+      var _a;
+      if (onSubmit) {
+        (_a = onSubmit.get()) == null ? void 0 : _a();
+      }
+    });
+  });
+  useListbox(element, { state: listboxState, emit });
   useEffect2(element, () => {
     listboxState.query.set(query.get());
   });
@@ -142,9 +141,8 @@ function useAutocompleteList(element, state) {
     element.tabIndex = -1;
   });
 }
-function useKeyboardHandler(element, open, editor) {
-  let keydownHandler = null;
-  let disposeKeydownHandler;
+function useKeyDownTarget(element, open, editor) {
+  const keydownHandlers = [];
   useEffect2(element, () => {
     const editorValue = editor.get();
     if (!editorValue) {
@@ -156,62 +154,61 @@ function useKeyboardHandler(element, open, editor) {
         if (view.composing || event.defaultPrevented || !open.get()) {
           return false;
         }
-        keydownHandler == null ? void 0 : keydownHandler(event);
+        keydownHandlers.forEach((handler) => handler(event));
         return event.defaultPrevented;
       }
     );
-    disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
-    disposeKeydownHandler = editorValue.use(
-      withPriority(extension, Priority.highest)
-    );
+    return editorValue.use(withPriority(extension, Priority.highest));
   });
-  return (keydownHandlerValue) => {
-    keydownHandler = keydownHandlerValue;
-    return () => {
-      disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
-      disposeKeydownHandler = void 0;
-    };
+  return {
+    addEventListener: (type, listener) => {
+      if (type === "keydown") {
+        keydownHandlers.push(listener);
+      }
+    },
+    removeEventListener: (type, listener) => {
+      if (type === "keydown") {
+        const index = keydownHandlers.indexOf(listener);
+        if (index !== -1) {
+          keydownHandlers.splice(index, 1);
+        }
+      }
+    }
   };
 }
 
+// src/components/autocomplete/autocomplete-list/types.ts
+import {
+  listboxEvents,
+  listboxProps as listboxProps2
+} from "@aria-ui/listbox";
+var autocompleteListProps = {
+  filter: listboxProps2.filter,
+  editor: { default: null }
+};
+var autocompleteListEvents = listboxEvents;
+
 // src/components/autocomplete/autocomplete-list/element.gen.ts
-var AutocompleteListElement = class extends ElementBuilder3(useAutocompleteList, defaultAutocompleteListProps) {
+var AutocompleteListElement = class extends defineCustomElement3({
+  props: autocompleteListProps,
+  events: autocompleteListEvents,
+  setup: useAutocompleteList
+}) {
 };
-defineCustomElement("prosekit-autocomplete-list", AutocompleteListElement);
+registerCustomElement3("prosekit-autocomplete-list", AutocompleteListElement);
 
 // src/components/autocomplete/autocomplete-popover/element.gen.ts
-import { ElementBuilder as ElementBuilder4 } from "@aria-ui/core";
+import { defineCustomElement as defineCustomElement4, registerCustomElement as registerCustomElement4 } 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({
-  ...defaultOverlayPositionerProps,
-  editor: null,
-  regex: null,
-  onQueryChange: null,
-  onOpenChange: null,
-  placement: "bottom-start",
-  offset: 4,
-  inline: true,
-  hoist: true,
-  fitViewport: true,
-  boundary: defaultBoundary,
-  overflowPadding: 8
-});
-
-// src/components/autocomplete/autocomplete-popover/state.ts
+// src/components/autocomplete/autocomplete-popover/setup.ts
 import {
   createComputed,
-  createSignal as createSignal2,
+  createSignal as createSignal3,
   useAnimationFrame,
   useAttribute,
   useEffect as useEffect4
 } from "@aria-ui/core";
-import { useOverlayPositionerState } from "@aria-ui/overlay";
+import { useOverlayPositionerState } from "@aria-ui/overlay/elements";
 import { usePresence } from "@aria-ui/presence";
 import {
   Priority as Priority2,
@@ -225,11 +222,11 @@ import {
 
 // src/hooks/use-first-rendering.ts
 import {
-  createSignal,
+  createSignal as createSignal2,
   useEffect as useEffect3
 } from "@aria-ui/core";
 function useFirstRendering(host) {
-  const firstRendering = createSignal(true);
+  const firstRendering = createSignal2(true);
   useEffect3(host, () => {
     requestAnimationFrame(() => {
       firstRendering.set(false);
@@ -243,13 +240,13 @@ function defaultQueryBuilder(match) {
   return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
 }
 
-// src/components/autocomplete/autocomplete-popover/state.ts
-function useAutocompletePopover(host, state) {
+// src/components/autocomplete/autocomplete-popover/setup.ts
+function useAutocompletePopover(host, { state }) {
   const { editor, regex, ...overlayState } = state;
-  const reference = createSignal2(null);
-  const query = createSignal2("");
-  const onDismiss = createSignal2(null);
-  const onSubmit = createSignal2(null);
+  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);
@@ -318,8 +315,6 @@ function createAutocompleteRule(editor, regex, reference, query, onDismiss, onSu
   const handleLeave = () => {
     reference.set(null);
     query.set("");
-    onDismiss.set(null);
-    onSubmit.set(null);
   };
   return new AutocompleteRule({
     regex,
@@ -344,17 +339,48 @@ function useEscapeKeydown(host, editor, handler) {
   return useEditorExtension(host, editor, extension);
 }
 
+// src/components/autocomplete/autocomplete-popover/types.ts
+import {
+  overlayPositionerEvents,
+  overlayPositionerProps
+} from "@aria-ui/overlay/elements";
+var body = typeof document !== "undefined" && document.querySelector("body");
+var defaultBoundary = body || "clippingAncestors";
+var autocompletePopoverProps = {
+  ...overlayPositionerProps,
+  editor: { default: null },
+  regex: { default: null },
+  onQueryChange: { default: null },
+  onOpenChange: { default: null },
+  placement: { default: "bottom-start" },
+  offset: { default: 4 },
+  inline: { default: true },
+  hoist: { default: true },
+  fitViewport: { default: true },
+  boundary: { default: defaultBoundary },
+  overflowPadding: { default: 8 }
+};
+var autocompletePopoverEvents = overlayPositionerEvents;
+
 // src/components/autocomplete/autocomplete-popover/element.gen.ts
-var AutocompletePopoverElement = class extends ElementBuilder4(useAutocompletePopover, defaultAutocompletePopoverProps) {
+var AutocompletePopoverElement = class extends defineCustomElement4({
+  props: autocompletePopoverProps,
+  events: autocompletePopoverEvents,
+  setup: useAutocompletePopover
+}) {
 };
-defineCustomElement("prosekit-autocomplete-popover", AutocompletePopoverElement);
+registerCustomElement4("prosekit-autocomplete-popover", AutocompletePopoverElement);
 export {
   AutocompleteEmptyElement,
   AutocompleteItemElement,
   AutocompleteListElement,
   AutocompletePopoverElement,
-  defaultAutocompleteEmptyProps,
-  defaultAutocompleteItemProps,
-  defaultAutocompleteListProps,
-  defaultAutocompletePopoverProps
+  autocompleteEmptyEvents,
+  autocompleteEmptyProps,
+  autocompleteItemEvents,
+  autocompleteItemProps,
+  autocompleteListEvents,
+  autocompleteListProps,
+  autocompletePopoverEvents,
+  autocompletePopoverProps
 };

package/dist/prosekit-web-block-handle.d.ts

@@ -1,15 +1,15 @@
-export { BlockDragHandleElement } from './_tsup-dts-rollup';
-export { defaultBlockDragHandleProps } from './_tsup-dts-rollup';
-export { BlockDragHandleProps } from './_tsup-dts-rollup';
 export { BlockHandleAddElement } from './_tsup-dts-rollup';
-export { defaultBlockHandleAddProps } from './_tsup-dts-rollup';
+export { blockHandleAddEvents } from './_tsup-dts-rollup';
+export { blockHandleAddProps } from './_tsup-dts-rollup';
+export { BlockHandleAddEvents } from './_tsup-dts-rollup';
 export { BlockHandleAddProps } from './_tsup-dts-rollup';
 export { BlockHandleDraggableElement } from './_tsup-dts-rollup';
-export { defaultBlockHandleDraggableProps } from './_tsup-dts-rollup';
+export { blockHandleDraggableEvents } from './_tsup-dts-rollup';
+export { blockHandleDraggableProps } from './_tsup-dts-rollup';
+export { BlockHandleDraggableEvents } from './_tsup-dts-rollup';
 export { BlockHandleDraggableProps } from './_tsup-dts-rollup';
 export { BlockHandlePopoverElement } from './_tsup-dts-rollup';
-export { defaultBlockHandlePopoverProps } from './_tsup-dts-rollup';
+export { blockHandlePopoverEvents } from './_tsup-dts-rollup';
+export { blockHandlePopoverProps } from './_tsup-dts-rollup';
+export { BlockHandlePopoverEvents } from './_tsup-dts-rollup';
 export { BlockHandlePopoverProps } from './_tsup-dts-rollup';
-export { BlockPopoverElement } from './_tsup-dts-rollup';
-export { defaultBlockPopoverProps } from './_tsup-dts-rollup';
-export { BlockPopoverProps } from './_tsup-dts-rollup';