@prosekit/web 0.1.1 → 0.1.3

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

@@ -658,6 +658,8 @@ export declare function useEditorFocusChangeEvent(host: ConnectableElement, edit
  */
 export declare function useEditorUpdateEvent(host: ConnectableElement, editor: ReadonlySignal<Editor | null>, handler: UpdateHandler): void;
 
+export declare function useFirstRendering(host: ConnectableElement): ReadonlySignal<boolean>;
+
 export declare function useInlinePopover(host: ConnectableElement, props?: Partial<InlinePopoverProps>): SignalState<Readonly<InlinePopoverProps>>;
 
 export { usePopoverContent }

package/dist/prosekit-web-autocomplete.js

@@ -94,7 +94,6 @@ var defaultAutocompleteListProps = {
 import {
   assignProps,
   createSignal,
-  mapSignals,
   useEffect as useEffect2
 } from "@aria-ui/core";
 import { useListbox } from "@aria-ui/listbox";
@@ -104,24 +103,27 @@ import {
   withPriority
 } from "@prosekit/core";
 function useAutocompleteList(element, props) {
-  const state = mapSignals(assignProps(defaultAutocompleteListProps, 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, state.editor);
+  const onKeydownHandlerAdd = useKeyboardHandler(element, open, editor);
+  const onValueChange = (value) => {
+    var _a;
+    if (value) {
+      (_a = onSubmit.peek()) == null ? void 0 : _a();
+    }
+  };
   const {
     query: listboxQuery,
     value: listboxValue,
+    filter,
     autoFocus
   } = useListbox(element, {
     onKeydownHandlerAdd,
-    // This function will be called before `onSubmit()`.
-    onValueChange: (value) => {
-      var _a;
-      if (value) {
-        (_a = onSubmit.value) == null ? void 0 : _a.call(onSubmit);
-      }
-    }
+    onValueChange,
+    filter: fullProps.filter
   });
   useEffect2(element, () => {
     listboxQuery.value = query.value;
@@ -129,6 +131,7 @@ function useAutocompleteList(element, props) {
   useEffect2(element, () => {
     if (!open.value) {
       listboxValue.value = "";
+      query.value = "";
     }
   });
   useEffect2(element, () => {
@@ -152,7 +155,7 @@ function useAutocompleteList(element, props) {
       };
     }
   });
-  return state;
+  return { editor, filter };
 }
 function useKeyboardHandler(element, open, editor) {
   const keydownHandler = createSignal(
@@ -225,9 +228,9 @@ var defaultAutocompletePopoverProps = Object.freeze({
 import {
   assignProps as assignProps2,
   createComputed,
-  createSignal as createSignal2,
-  mapSignals as mapSignals2,
-  useEffect as useEffect3
+  createSignal as createSignal3,
+  mapSignals,
+  useEffect as useEffect4
 } from "@aria-ui/core";
 import { useOverlayPositionerState } from "@aria-ui/overlay";
 import { usePresence } from "@aria-ui/presence";
@@ -236,6 +239,21 @@ import {
   defineAutocomplete
 } from "@prosekit/extensions/autocomplete";
 
+// src/hooks/use-first-rendering.ts
+import {
+  createSignal as createSignal2,
+  useEffect as useEffect3
+} from "@aria-ui/core";
+function useFirstRendering(host) {
+  const firstRendering = createSignal2(true);
+  useEffect3(host, () => {
+    requestAnimationFrame(() => {
+      firstRendering.value = false;
+    });
+  });
+  return firstRendering;
+}
+
 // src/components/autocomplete/autocomplete-popover/helpers.ts
 function defaultQueryBuilder(match) {
   return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
@@ -243,16 +261,16 @@ function defaultQueryBuilder(match) {
 
 // src/components/autocomplete/autocomplete-popover/state.ts
 function useAutocompletePopover(host, props) {
-  const state = mapSignals2(assignProps2(defaultAutocompletePopoverProps, props));
+  const state = mapSignals(assignProps2(defaultAutocompletePopoverProps, props));
   useAutocompletePopoverState(host, state);
   return state;
 }
 function useAutocompletePopoverState(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.value);
   queryContext.provide(host, query);
   onSubmitContext.provide(host, onSubmit);
@@ -269,21 +287,22 @@ function useAutocompletePopoverState(host, state) {
   );
   useOverlayPositionerState(host, overlayState, { reference });
   usePresence(host, presence);
-  useEffect3(host, () => {
+  const firstRendering = useFirstRendering(host);
+  useEffect4(host, () => {
     var _a;
     const queryValue = query.value;
-    if (presence.peek()) {
+    if (!firstRendering.peek()) {
       (_a = state.onQueryChange.peek()) == null ? void 0 : _a(queryValue);
     }
   });
-  useEffect3(host, () => {
+  useEffect4(host, () => {
     var _a;
     const presenceValue = presence.value;
     (_a = state.onOpenChange.peek()) == null ? void 0 : _a(presenceValue);
   });
 }
 function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
-  useEffect3(host, () => {
+  useEffect4(host, () => {
     const editorValue = editor.value;
     const regexValue = regex.value;
     if (!editorValue || !regexValue) {
@@ -336,7 +355,7 @@ function createKeymapHandler(handler, enabled) {
   };
 }
 function useEscapeKeydown(host, handler) {
-  useEffect3(host, () => {
+  useEffect4(host, () => {
     const handleKeyDown = (event) => {
       if (event.key !== "Escape") {
         return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -74,15 +74,15 @@
     "@aria-ui/tooltip": "^0.0.13",
     "@floating-ui/dom": "^1.6.3",
     "@prosekit/core": "^0.4.0",
-    "@prosekit/extensions": "^0.4.2",
+    "@prosekit/extensions": "^0.4.6",
     "@prosekit/pm": "^0.1.2",
-    "@zag-js/dom-query": "^0.47.0"
+    "@zag-js/dom-query": "^0.48.0"
   },
   "devDependencies": {
     "@prosekit/dev": "*",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
-    "vitest": "^1.5.0"
+    "vitest": "^1.5.2"
   },
   "scripts": {
     "build:tsup": "tsup",