@prosekit/web 0.8.0-beta.0 → 0.8.0-beta.2

package/dist/prosekit-web-autocomplete.js

@@ -1,228 +1,334 @@
-import { t as getStateWithDefaults } from "./get-default-state.js";
 import { t as useEditorExtension } from "./use-editor-extension.js";
 import { t as getSafeEditorView } from "./get-safe-editor-view.js";
-import { createComputed, createContext, createSignal, defineCustomElement, registerCustomElement, useAnimationFrame, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
-import { listboxProps, useListbox, useListboxEmpty, useListboxItem } from "@aria-ui/listbox/elements";
-import { listboxEvents, listboxItemEvents, listboxProps as listboxProps$1 } from "@aria-ui/listbox";
+import { createContext, createSignal, defineCustomElement, defineProps, onMount, registerCustomElement, useEffect, useEventListener } from "@aria-ui/core";
+import { SelectEvent, ValueChangeEvent, ValuesChangeEvent, defaultItemFilter, setupListboxEmpty, setupListboxItem, setupListboxRoot } from "@aria-ui/elements/listbox";
+import { OpenChangeEvent, OverlayPopupPropsDeclaration, OverlayPositionerPropsDeclaration, createOverlayStore, setupOverlayPopup, setupOverlayPositioner } from "@aria-ui/elements/overlay";
 import { defineDOMEventHandler, defineKeymap, withPriority } from "@prosekit/core";
-import { overlayPositionerEvents, overlayPositionerProps, useOverlayPositionerState } from "@aria-ui/overlay/elements";
-import { usePresence } from "@aria-ui/presence";
 import { AutocompleteRule, defineAutocomplete } from "@prosekit/extensions/autocomplete";
-//#region src/components/autocomplete/autocomplete-empty/setup.ts
+//#region src/components/autocomplete/autocomplete-empty.ts
+/** @internal */
+const AutocompleteEmptyPropsDeclaration = /* @__PURE__ */ defineProps({});
 /**
 * @internal
 */
-const useAutocompleteEmpty = useListboxEmpty;
-//#endregion
-//#region src/components/autocomplete/autocomplete-empty/types.ts
-/** @internal */
-const autocompleteEmptyProps = {};
-/** @internal */
-const autocompleteEmptyEvents = {};
-//#endregion
-//#region src/components/autocomplete/autocomplete-empty/element.gen.ts
-const AutocompleteEmptyElementBase = defineCustomElement({
-	props: autocompleteEmptyProps,
-	events: autocompleteEmptyEvents,
-	setup: useAutocompleteEmpty
-});
+function setupAutocompleteEmpty(host, props) {
+	setupListboxEmpty(host, props);
+}
+const AutocompleteEmptyElementBase = defineCustomElement(setupAutocompleteEmpty, AutocompleteEmptyPropsDeclaration);
+/**
+* @public
+*/
 var AutocompleteEmptyElement = class extends AutocompleteEmptyElementBase {};
-registerCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
+/** @internal */
+function registerAutocompleteEmptyElement() {
+	registerCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
+}
 //#endregion
-//#region src/components/autocomplete/context.ts
-const queryContext = createContext("prosekit/autocomplete-popover/query", "");
-const onSubmitContext = createContext("prosekit/autocomplete-popover/onSubmit", null);
-const openContext = createContext("prosekit/autocomplete-popover/open", false);
+//#region src/utils/prevent-default.ts
+function preventDefault(event) {
+	event.preventDefault();
+}
 //#endregion
-//#region src/components/autocomplete/autocomplete-item/setup.ts
+//#region src/components/autocomplete/autocomplete-item.ts
+/** @internal */
+const AutocompleteItemPropsDeclaration = /* @__PURE__ */ defineProps({
+	value: {
+		default: "",
+		attribute: "value",
+		type: "string"
+	},
+	disabled: {
+		default: false,
+		attribute: "disabled",
+		type: "boolean"
+	}
+});
 /**
 * @internal
 */
-function useAutocompleteItem(element, { state, emit }) {
-	useListboxItem(element, {
-		state,
-		emit
-	});
-	const open = openContext.consume(element);
-	useEffect(element, () => {
-		if (!state.value.peek() && open.get()) state.value.set(element.textContent ?? "");
-	});
-	useEventListener(element, "pointerdown", (event) => {
-		event.preventDefault();
-	});
+function setupAutocompleteItem(host, props) {
+	setupListboxItem(host, props);
+	useEventListener(host, "pointerdown", preventDefault);
+	useEventListener(host, "mousedown", preventDefault);
 }
-//#endregion
-//#region src/components/autocomplete/autocomplete-item/types.ts
-/** @internal */
-const autocompleteItemProps = { value: { default: "" } };
+const AutocompleteItemElementBase = defineCustomElement(setupAutocompleteItem, AutocompleteItemPropsDeclaration);
+/**
+* @public
+*/
+var AutocompleteItemElement = class extends AutocompleteItemElementBase {};
 /** @internal */
-const autocompleteItemEvents = listboxItemEvents;
+function registerAutocompleteItemElement() {
+	registerCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
+}
 //#endregion
-//#region src/components/autocomplete/autocomplete-item/element.gen.ts
-const AutocompleteItemElementBase = defineCustomElement({
-	props: autocompleteItemProps,
-	events: autocompleteItemEvents,
-	setup: useAutocompleteItem
-});
-var AutocompleteItemElement = class extends AutocompleteItemElementBase {};
-registerCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
+//#region src/utils/lazy-signal.ts
+function createLazySignal(getRemote, fallback) {
+	return {
+		get: () => {
+			const remote = getRemote();
+			return remote ? remote.get() : fallback;
+		},
+		set: (value) => {
+			const remote = getRemote();
+			if (remote) remote.set(value);
+		}
+	};
+}
+//#endregion
+//#region src/utils/use-no-focus.ts
+function useNoFocus(host) {
+	onMount(host, () => {
+		host.tabIndex = -1;
+	});
+}
 //#endregion
-//#region src/components/autocomplete/autocomplete-list/setup.ts
+//#region src/components/autocomplete/context.ts
 /**
 * @internal
 */
-function useAutocompleteList(element, { state, emit }) {
-	const open = openContext.consume(element);
-	const query = queryContext.consume(element);
-	const onSubmit = onSubmitContext.consume(element);
-	const keydownTarget = useKeyDownTarget(element, open, state.editor);
-	const listboxState = getStateWithDefaults({
-		filter: state.filter,
-		eventTarget: createSignal(keydownTarget)
-	}, listboxProps);
-	useEffect(element, () => {
-		element.addEventListener("valueChange", () => {
-			if (onSubmit) onSubmit.get()?.();
-		});
-	});
-	useListbox(element, {
-		state: listboxState,
-		emit
-	});
-	useEffect(element, () => {
-		listboxState.query.set(query.get());
-	});
-	useEffect(element, () => {
-		if (!open.get()) {
-			listboxState.value.set("");
-			query.set("");
-		}
-	});
-	useEffect(element, () => {
-		if (!open.get()) listboxState.autoFocus.set(false);
-		else {
-			let canceled = false;
-			requestAnimationFrame(() => {
-				if (canceled) return;
-				listboxState.autoFocus.set(true);
-			});
-			return () => {
-				canceled = true;
-			};
-		}
-	});
-	useEffect(element, () => {
-		element.tabIndex = -1;
-	});
+const autocompleteStoreContext = createContext("prosekit-autocomplete-store");
+//#endregion
+//#region src/components/autocomplete/autocomplete-popup.ts
+/** @internal */
+const AutocompletePopupPropsDeclaration = /* @__PURE__ */ defineProps(OverlayPopupPropsDeclaration);
+/** @internal */
+function setupAutocompletePopup(host, _props) {
+	const getStore = autocompleteStoreContext.consume(host);
+	const getOverlayStore = () => getStore()?.overlayStore;
+	setupOverlayPopup(host, getOverlayStore);
+	const query = createLazySignal(() => getStore()?.query, " ");
+	const eventTarget = createLazySignal(() => getStore()?.eventTarget, null);
+	const filter = createLazySignal(() => getStore()?.filter, defaultItemFilter);
+	const getDisabled = () => !getOverlayStore()?.getIsOpen?.();
+	setupListboxRoot(host, createPopupListboxProps(filter, query, eventTarget, {
+		get: getDisabled,
+		set: () => {}
+	}));
+	useNoFocus(host);
 }
-function useKeyDownTarget(element, open, editor) {
-	const keydownHandlers = [];
-	useEffect(element, () => {
-		const editorValue = editor.get();
-		if (!editorValue) return;
-		const extension = defineDOMEventHandler("keydown", (view, event) => {
-			if (view.composing || event.defaultPrevented || !open.get()) return false;
-			keydownHandlers.forEach((handler) => handler(event));
-			return event.defaultPrevented;
-		});
-		return editorValue.use(withPriority(extension, 4));
-	});
+function createPopupListboxProps(filter, query, eventTarget, disabled) {
 	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);
-			}
-		}
+		value: createSignal(""),
+		values: createSignal([]),
+		multiple: createSignal(false),
+		disabled,
+		orientation: createSignal("vertical"),
+		loop: createSignal(false),
+		autoHighlight: createSignal(true),
+		query,
+		eventTarget,
+		filter
 	};
 }
+const AutocompletePopupElementBase = defineCustomElement(setupAutocompletePopup, AutocompletePopupPropsDeclaration);
+/**
+* @public
+*/
+var AutocompletePopupElement = class extends AutocompletePopupElementBase {};
+/** @internal */
+function registerAutocompletePopupElement() {
+	registerCustomElement("prosekit-autocomplete-popup", AutocompletePopupElement);
+}
 //#endregion
-//#region src/components/autocomplete/autocomplete-list/types.ts
-const autocompleteListProps = {
-	filter: listboxProps$1.filter,
-	editor: { default: null }
-};
-const autocompleteListEvents = { ...listboxEvents };
-//#endregion
-//#region src/components/autocomplete/autocomplete-list/element.gen.ts
-const AutocompleteListElementBase = defineCustomElement({
-	props: autocompleteListProps,
-	events: autocompleteListEvents,
-	setup: useAutocompleteList
+//#region src/components/autocomplete/autocomplete-positioner.ts
+const defaultBoundary = typeof document !== "undefined" && document.querySelector("body") || "clippingAncestors";
+/** @internal */
+const AutocompletePositionerPropsDeclaration = /* @__PURE__ */ defineProps({
+	...OverlayPositionerPropsDeclaration,
+	placement: {
+		default: "bottom-start",
+		attribute: "placement",
+		type: "string"
+	},
+	offset: {
+		default: 4,
+		attribute: false,
+		type: "json"
+	},
+	inline: {
+		default: true,
+		attribute: "inline",
+		type: "boolean"
+	},
+	hoist: {
+		default: true,
+		attribute: "hoist",
+		type: "boolean"
+	},
+	fitViewport: {
+		default: true,
+		attribute: "fit-viewport",
+		type: "boolean"
+	},
+	boundary: {
+		default: defaultBoundary,
+		attribute: false,
+		type: "json"
+	},
+	overflowPadding: {
+		default: 8,
+		attribute: "overflow-padding",
+		type: "number"
+	}
 });
-var AutocompleteListElement = class extends AutocompleteListElementBase {};
-registerCustomElement("prosekit-autocomplete-list", AutocompleteListElement);
+/** @internal */
+function setupAutocompletePositioner(host, props) {
+	const getStore = autocompleteStoreContext.consume(host);
+	const getOverlayStore = () => getStore()?.overlayStore;
+	setupOverlayPositioner(host, props, getOverlayStore);
+}
+const AutocompletePositionerElementBase = defineCustomElement(setupAutocompletePositioner, AutocompletePositionerPropsDeclaration);
+/**
+* @public
+*/
+var AutocompletePositionerElement = class extends AutocompletePositionerElementBase {};
+/** @internal */
+function registerAutocompletePositionerElement() {
+	registerCustomElement("prosekit-autocomplete-positioner", AutocompletePositionerElement);
+}
 //#endregion
-//#region src/hooks/use-first-rendering.ts
-function useFirstRendering(host) {
-	const firstRendering = createSignal(true);
-	useEffect(host, () => {
-		requestAnimationFrame(() => {
-			firstRendering.set(false);
-		});
+//#region src/utils/event.ts
+function cloneKeyboardEvent(source) {
+	return new KeyboardEvent(source.type, {
+		code: source.code,
+		key: source.key,
+		location: source.location,
+		repeat: source.repeat,
+		altKey: source.altKey,
+		ctrlKey: source.ctrlKey,
+		metaKey: source.metaKey,
+		shiftKey: source.shiftKey,
+		view: source.view,
+		bubbles: false,
+		cancelable: true
 	});
-	return firstRendering;
 }
+var KeyboardEventTarget = class extends EventTarget {
+	dispatchEvent(event) {
+		const newEvent = cloneKeyboardEvent(event);
+		const result = super.dispatchEvent(newEvent);
+		if (newEvent.defaultPrevented) event.preventDefault();
+		return result;
+	}
+};
 //#endregion
-//#region src/components/autocomplete/autocomplete-popover/helpers.ts
+//#region src/components/autocomplete/helpers.ts
 function defaultQueryBuilder(match) {
 	return match[0].toLowerCase().replaceAll(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replaceAll(/\s\s+/g, " ").trim();
 }
 //#endregion
-//#region src/components/autocomplete/autocomplete-popover/setup.ts
+//#region src/components/autocomplete/autocomplete-root.ts
+/** @internal */
+const AutocompleteRootPropsDeclaration = /* @__PURE__ */ defineProps({
+	editor: {
+		default: null,
+		attribute: false,
+		type: "json"
+	},
+	regex: {
+		default: null,
+		attribute: false,
+		type: "json"
+	},
+	filter: {
+		default: defaultItemFilter,
+		attribute: false,
+		type: "json"
+	}
+});
+/**
+* @public
+*/
+var QueryChangeEvent = class extends Event {
+	constructor(query) {
+		super("queryChange", { bubbles: true });
+		this.detail = query;
+	}
+};
 /**
 * @internal
 */
-function useAutocompletePopover(host, { state, emit }) {
-	const { editor, regex, ...overlayState } = state;
-	const reference = createSignal(null);
+function setupAutocompleteRoot(host, props) {
+	const getEditor = props.editor.get;
+	const reference = createSignal(void 0);
+	const open = createSignal(false);
 	const query = createSignal("");
-	const onDismiss = createSignal(null);
-	const onSubmit = createSignal(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, reference, query, onDismiss, onSubmit);
-	useOverlayPositionerState(host, overlayState, { reference });
-	useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
-	usePresence(host, presence);
-	const firstRendering = useFirstRendering(host);
+	const keyboardTarget = new KeyboardEventTarget();
+	const eventTarget = createSignal(keyboardTarget);
+	const handlers = {};
+	const overlayStore = createOverlayStore(open.get, open.set, () => false, () => false, (event) => host.dispatchEvent(event));
 	useEffect(host, () => {
-		const queryValue = query.get();
-		if (!firstRendering.peek()) emit("queryChange", queryValue);
+		overlayStore.setAnchorElement(reference.get());
 	});
-	useAnimationFrame(host, () => {
-		const presenceValue = presence.get();
-		return () => {
-			emit("openChange", presenceValue);
-		};
+	const autocompleteStore = {
+		overlayStore,
+		query,
+		eventTarget,
+		filter: props.filter
+	};
+	autocompleteStoreContext.provide(host, autocompleteStore);
+	useEventListener(host, "valueChange", () => {
+		handlers.submit?.();
+	});
+	useKeyboardBridge(host, getEditor, open.get, keyboardTarget);
+	useEscapeKeydown(host, getEditor, () => {
+		if (!open.get() || !handlers.dismiss) return false;
+		handlers.dismiss();
+		return true;
 	});
+	const setQuery = (next) => {
+		if (query.get() === next) return;
+		query.set(next);
+		host.dispatchEvent(new QueryChangeEvent(next));
+	};
+	useAutocompleteExtension(host, getEditor, props.regex.get, {
+		reference,
+		handlers,
+		setQuery,
+		requestOpenChange: (open) => overlayStore.requestOpenChange(open)
+	});
+}
+const EVENT_KEYS = [
+	"ArrowDown",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowLeft",
+	"Home",
+	"End",
+	"Enter"
+];
+function useKeyboardBridge(host, getEditor, getOpen, target) {
+	useEditorExtension(host, getEditor, withPriority(defineDOMEventHandler("keydown", (view, event) => {
+		if (view.composing || event.defaultPrevented || !getOpen() || !EVENT_KEYS.includes(event.key)) return false;
+		target.dispatchEvent(event);
+		return event.defaultPrevented;
+	}), 4));
 }
-function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
+function useAutocompleteExtension(host, getEditor, getRegex, deps) {
 	useEffect(host, () => {
-		const editorValue = editor.get();
-		const regexValue = regex.get();
-		if (!editorValue || !regexValue) return;
-		const extension = defineAutocomplete(createAutocompleteRule(editorValue, regexValue, reference, query, onDismiss, onSubmit));
-		return editorValue.use(extension);
+		const editor = getEditor();
+		const regex = getRegex();
+		if (!editor || !regex) return;
+		const extension = defineAutocomplete(createAutocompleteRule(editor, regex, deps));
+		return editor.use(extension);
 	});
 }
-function createAutocompleteRule(editor, regex, reference, query, onDismiss, onSubmit) {
+function createAutocompleteRule(editor, regex, deps) {
+	const { reference, handlers, setQuery, requestOpenChange } = deps;
 	const handleEnter = (options) => {
 		const span = getSafeEditorView(editor)?.dom.querySelector(".prosekit-autocomplete-match");
 		if (span) reference.set(span);
-		query.set(defaultQueryBuilder(options.match));
-		onDismiss.set(options.ignoreMatch);
-		onSubmit.set(options.deleteMatch);
+		handlers.submit = options.deleteMatch;
+		handlers.dismiss = options.ignoreMatch;
+		setQuery(defaultQueryBuilder(options.match));
+		requestOpenChange(true);
 	};
 	const handleLeave = () => {
-		reference.set(null);
-		query.set("");
+		reference.set(void 0);
+		setQuery("");
+		handlers.submit = void 0;
+		handlers.dismiss = void 0;
+		requestOpenChange(false);
 	};
 	return new AutocompleteRule({
 		regex,
@@ -230,50 +336,19 @@ function createAutocompleteRule(editor, regex, reference, query, onDismiss, onSu
 		onLeave: handleLeave
 	});
 }
-function createKeymapHandler(handler, enabled) {
-	return () => {
-		if (!enabled.get()) return false;
-		const fn = handler.peek();
-		if (!fn) return false;
-		fn();
-		return true;
-	};
-}
-function useEscapeKeydown(host, editor, handler) {
-	useEditorExtension(host, editor, withPriority(defineKeymap({ Escape: handler }), 4));
+function useEscapeKeydown(host, getEditor, handler) {
+	useEditorExtension(host, getEditor, withPriority(defineKeymap({ Escape: handler }), 4));
 }
-//#endregion
-//#region src/components/autocomplete/autocomplete-popover/types.ts
-const defaultBoundary = typeof document !== "undefined" && document.querySelector("body") || "clippingAncestors";
-/** @internal */
-const autocompletePopoverProps = {
-	...overlayPositionerProps,
-	editor: { default: null },
-	regex: { default: null },
-	placement: { default: "bottom-start" },
-	offset: { default: 4 },
-	inline: { default: true },
-	hoist: { default: true },
-	fitViewport: { default: true },
-	boundary: { default: defaultBoundary },
-	overflowPadding: { default: 8 }
-};
+const AutocompleteRootElementBase = defineCustomElement(setupAutocompleteRoot, AutocompleteRootPropsDeclaration);
+/**
+* @public
+*/
+var AutocompleteRootElement = class extends AutocompleteRootElementBase {};
 /** @internal */
-const autocompletePopoverEvents = {
-	...overlayPositionerEvents,
-	openChange: {},
-	queryChange: {}
-};
-//#endregion
-//#region src/components/autocomplete/autocomplete-popover/element.gen.ts
-const AutocompletePopoverElementBase = defineCustomElement({
-	props: autocompletePopoverProps,
-	events: autocompletePopoverEvents,
-	setup: useAutocompletePopover
-});
-var AutocompletePopoverElement = class extends AutocompletePopoverElementBase {};
-registerCustomElement("prosekit-autocomplete-popover", AutocompletePopoverElement);
+function registerAutocompleteRootElement() {
+	registerCustomElement("prosekit-autocomplete-root", AutocompleteRootElement);
+}
 //#endregion
-export { AutocompleteEmptyElement, AutocompleteItemElement, AutocompleteListElement, AutocompletePopoverElement, autocompleteEmptyEvents, autocompleteEmptyProps, autocompleteItemEvents, autocompleteItemProps, autocompleteListEvents, autocompleteListProps, autocompletePopoverEvents, autocompletePopoverProps, useAutocompleteEmpty, useAutocompleteItem, useAutocompleteList, useAutocompletePopover };
+export { AutocompleteEmptyElement, AutocompleteEmptyPropsDeclaration, AutocompleteItemElement, AutocompleteItemPropsDeclaration, AutocompletePopupElement, AutocompletePopupPropsDeclaration, AutocompletePositionerElement, AutocompletePositionerPropsDeclaration, AutocompleteRootElement, AutocompleteRootPropsDeclaration, OpenChangeEvent, QueryChangeEvent, SelectEvent, ValueChangeEvent, ValuesChangeEvent, registerAutocompleteEmptyElement, registerAutocompleteItemElement, registerAutocompletePopupElement, registerAutocompletePositionerElement, registerAutocompleteRootElement, setupAutocompleteEmpty, setupAutocompleteItem, setupAutocompletePopup, setupAutocompletePositioner, setupAutocompleteRoot };
 
 //# sourceMappingURL=prosekit-web-autocomplete.js.map