@prosekit/web 0.5.7 → 0.5.9

package/dist/prosekit-web-autocomplete.js

@@ -1,386 +1,280 @@
-import {
-  getStateWithDefaults
-} from "./chunk-ZGQ225UP.js";
-import {
-  useEditorExtension
-} from "./chunk-WTW6FOH3.js";
-
-// src/components/autocomplete/autocomplete-empty/element.gen.ts
-import { defineCustomElement, registerCustomElement } from "@aria-ui/core";
-
-// src/components/autocomplete/autocomplete-empty/setup.ts
-import { useListboxEmpty } from "@aria-ui/listbox/elements";
-var useAutocompleteEmpty = useListboxEmpty;
+import { getStateWithDefaults } from "./get-default-state-CIEy7xrl.js";
+import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { createComputed, createContext, createSignal, defineCustomElement, registerCustomElement, useAnimationFrame, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
+import { listboxProps, useListbox, useListboxEmpty as useAutocompleteEmpty, useListboxItem } from "@aria-ui/listbox/elements";
+import { listboxEvents, listboxItemEvents, listboxProps as listboxProps$1 } from "@aria-ui/listbox";
+import { Priority, 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";
 
-// src/components/autocomplete/autocomplete-empty/types.ts
-var autocompleteEmptyProps = {};
-var autocompleteEmptyEvents = {};
+//#region src/components/autocomplete/autocomplete-empty/types.ts
+/** @internal */
+const autocompleteEmptyProps = {};
+/** @internal */
+const autocompleteEmptyEvents = {};
 
-// src/components/autocomplete/autocomplete-empty/element.gen.ts
-var AutocompleteEmptyElement = class extends defineCustomElement({
-  props: autocompleteEmptyProps,
-  events: autocompleteEmptyEvents,
-  setup: useAutocompleteEmpty
-}) {
-};
+//#endregion
+//#region src/components/autocomplete/autocomplete-empty/element.gen.ts
+const AutocompleteEmptyElementBase = defineCustomElement({
+	props: autocompleteEmptyProps,
+	events: autocompleteEmptyEvents,
+	setup: useAutocompleteEmpty
+});
+var AutocompleteEmptyElement = class extends AutocompleteEmptyElementBase {};
 registerCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
 
-// src/components/autocomplete/autocomplete-item/element.gen.ts
-import { defineCustomElement as defineCustomElement2, registerCustomElement as registerCustomElement2 } from "@aria-ui/core";
+//#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);
 
-// src/components/autocomplete/autocomplete-item/setup.ts
-import {
-  useEffect
-} from "@aria-ui/core";
-import { useListboxItem } from "@aria-ui/listbox/elements";
-
-// src/components/autocomplete/context.ts
-import { createContext } from "@aria-ui/core";
-var queryContext = createContext(
-  "prosekit/autocomplete-popover/query",
-  ""
-);
-var onSubmitContext = createContext(
-  "prosekit/autocomplete-popover/onSubmit",
-  null
-);
-var openContext = createContext(
-  "prosekit/autocomplete-popover/open",
-  false
-);
-
-// src/components/autocomplete/autocomplete-item/setup.ts
+//#endregion
+//#region src/components/autocomplete/autocomplete-item/setup.ts
 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 ?? "");
-    }
-  });
+	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();
+	});
 }
 
-// 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 defineCustomElement2({
-  props: autocompleteItemProps,
-  events: autocompleteItemEvents,
-  setup: useAutocompleteItem
-}) {
-};
-registerCustomElement2("prosekit-autocomplete-item", AutocompleteItemElement);
+//#endregion
+//#region src/components/autocomplete/autocomplete-item/types.ts
+/** @internal */
+const autocompleteItemProps = { value: { default: "" } };
+/** @internal */
+const autocompleteItemEvents = listboxItemEvents;
 
-// src/components/autocomplete/autocomplete-list/element.gen.ts
-import { defineCustomElement as defineCustomElement3, registerCustomElement as registerCustomElement3 } from "@aria-ui/core";
+//#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);
 
-// src/components/autocomplete/autocomplete-list/setup.ts
-import {
-  createSignal,
-  useEffect as useEffect2
-} from "@aria-ui/core";
-import {
-  listboxProps,
-  useListbox
-} from "@aria-ui/listbox/elements";
-import {
-  defineDOMEventHandler,
-  Priority,
-  withPriority
-} from "@prosekit/core";
+//#endregion
+//#region src/components/autocomplete/autocomplete-list/setup.ts
 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
-  );
-  useEffect2(element, () => {
-    element.addEventListener("valueChange", () => {
-      if (onSubmit) {
-        onSubmit.get()?.();
-      }
-    });
-  });
-  useListbox(element, { state: listboxState, emit });
-  useEffect2(element, () => {
-    listboxState.query.set(query.get());
-  });
-  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, () => {
-    element.tabIndex = -1;
-  });
+	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;
+	});
 }
 function useKeyDownTarget(element, open, editor) {
-  const keydownHandlers = [];
-  useEffect2(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, Priority.highest));
-  });
-  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);
-        }
-      }
-    }
-  };
+	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, Priority.highest));
+	});
+	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 defineCustomElement3({
-  props: autocompleteListProps,
-  events: autocompleteListEvents,
-  setup: useAutocompleteList
-}) {
+//#endregion
+//#region src/components/autocomplete/autocomplete-list/types.ts
+const autocompleteListProps = {
+	filter: listboxProps$1.filter,
+	editor: { default: null }
 };
-registerCustomElement3("prosekit-autocomplete-list", AutocompleteListElement);
-
-// src/components/autocomplete/autocomplete-popover/element.gen.ts
-import { defineCustomElement as defineCustomElement4, registerCustomElement as registerCustomElement4 } from "@aria-ui/core";
+const autocompleteListEvents = { ...listboxEvents };
 
-// src/components/autocomplete/autocomplete-popover/setup.ts
-import {
-  createComputed,
-  createSignal as createSignal3,
-  useAnimationFrame,
-  useAttribute,
-  useEffect as useEffect4
-} from "@aria-ui/core";
-import { useOverlayPositionerState } from "@aria-ui/overlay/elements";
-import { usePresence } from "@aria-ui/presence";
-import {
-  defineKeymap,
-  Priority as Priority2,
-  withPriority as withPriority2
-} from "@prosekit/core";
-import {
-  AutocompleteRule,
-  defineAutocomplete
-} from "@prosekit/extensions/autocomplete";
+//#endregion
+//#region src/components/autocomplete/autocomplete-list/element.gen.ts
+const AutocompleteListElementBase = defineCustomElement({
+	props: autocompleteListProps,
+	events: autocompleteListEvents,
+	setup: useAutocompleteList
+});
+var AutocompleteListElement = class extends AutocompleteListElementBase {};
+registerCustomElement("prosekit-autocomplete-list", AutocompleteListElement);
 
-// src/hooks/use-first-rendering.ts
-import {
-  createSignal as createSignal2,
-  useEffect as useEffect3
-} from "@aria-ui/core";
+//#endregion
+//#region src/hooks/use-first-rendering.ts
 function useFirstRendering(host) {
-  const firstRendering = createSignal2(true);
-  useEffect3(host, () => {
-    requestAnimationFrame(() => {
-      firstRendering.set(false);
-    });
-  });
-  return firstRendering;
+	const firstRendering = createSignal(true);
+	useEffect(host, () => {
+		requestAnimationFrame(() => {
+			firstRendering.set(false);
+		});
+	});
+	return firstRendering;
 }
 
-// src/components/autocomplete/autocomplete-popover/helpers.ts
+//#endregion
+//#region src/components/autocomplete/autocomplete-popover/helpers.ts
 function defaultQueryBuilder(match) {
-  return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
+	return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
 }
 
-// src/components/autocomplete/autocomplete-popover/setup.ts
-function useAutocompletePopover(host, {
-  state,
-  emit
-}) {
-  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,
-    reference,
-    query,
-    onDismiss,
-    onSubmit
-  );
-  useOverlayPositionerState(host, overlayState, { reference });
-  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
-  usePresence(host, presence);
-  const firstRendering = useFirstRendering(host);
-  useEffect4(host, () => {
-    const queryValue = query.get();
-    if (!firstRendering.peek()) {
-      emit("queryChange", queryValue);
-    }
-  });
-  useAnimationFrame(host, () => {
-    const presenceValue = presence.get();
-    return () => {
-      emit("openChange", presenceValue);
-    };
-  });
+//#endregion
+//#region src/components/autocomplete/autocomplete-popover/setup.ts
+function useAutocompletePopover(host, { state, emit }) {
+	const { editor, regex,...overlayState } = state;
+	const reference = createSignal(null);
+	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);
+	useEffect(host, () => {
+		const queryValue = query.get();
+		if (!firstRendering.peek()) emit("queryChange", queryValue);
+	});
+	useAnimationFrame(host, () => {
+		const presenceValue = presence.get();
+		return () => {
+			emit("openChange", presenceValue);
+		};
+	});
 }
 function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
-  useEffect4(host, () => {
-    const editorValue = editor.get();
-    const regexValue = regex.get();
-    if (!editorValue || !regexValue) {
-      return;
-    }
-    const rule = createAutocompleteRule(
-      editorValue,
-      regexValue,
-      reference,
-      query,
-      onDismiss,
-      onSubmit
-    );
-    const extension = defineAutocomplete(rule);
-    return editorValue.use(extension);
-  });
+	useEffect(host, () => {
+		const editorValue = editor.get();
+		const regexValue = regex.get();
+		if (!editorValue || !regexValue) return;
+		const rule = createAutocompleteRule(editorValue, regexValue, reference, query, onDismiss, onSubmit);
+		const extension = defineAutocomplete(rule);
+		return editorValue.use(extension);
+	});
 }
 function createAutocompleteRule(editor, regex, reference, query, onDismiss, onSubmit) {
-  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("");
-  };
-  return new AutocompleteRule({
-    regex,
-    onEnter: handleEnter,
-    onLeave: handleLeave
-  });
+	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("");
+	};
+	return new AutocompleteRule({
+		regex,
+		onEnter: handleEnter,
+		onLeave: handleLeave
+	});
 }
 function createKeymapHandler(handler, enabled) {
-  return () => {
-    if (!enabled.get()) {
-      return false;
-    }
-    const fn = handler.peek();
-    if (!fn) return false;
-    fn();
-    return true;
-  };
+	return () => {
+		if (!enabled.get()) return false;
+		const fn = handler.peek();
+		if (!fn) return false;
+		fn();
+		return true;
+	};
 }
 function useEscapeKeydown(host, editor, handler) {
-  const keymap = { Escape: handler };
-  const extension = withPriority2(defineKeymap(keymap), Priority2.highest);
-  return useEditorExtension(host, editor, extension);
+	const keymap = { Escape: handler };
+	const extension = withPriority(defineKeymap(keymap), Priority.highest);
+	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 },
-  placement: { default: "bottom-start" },
-  offset: { default: 4 },
-  inline: { default: true },
-  hoist: { default: true },
-  fitViewport: { default: true },
-  boundary: { default: defaultBoundary },
-  overflowPadding: { default: 8 }
+//#endregion
+//#region src/components/autocomplete/autocomplete-popover/types.ts
+const body = typeof document !== "undefined" && document.querySelector("body");
+const defaultBoundary = 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 }
 };
-var autocompletePopoverEvents = {
-  ...overlayPositionerEvents,
-  openChange: {},
-  queryChange: {}
+/** @internal */
+const autocompletePopoverEvents = {
+	...overlayPositionerEvents,
+	openChange: {},
+	queryChange: {}
 };
 
-// src/components/autocomplete/autocomplete-popover/element.gen.ts
-var AutocompletePopoverElement = class extends defineCustomElement4({
-  props: autocompletePopoverProps,
-  events: autocompletePopoverEvents,
-  setup: useAutocompletePopover
-}) {
-};
-registerCustomElement4("prosekit-autocomplete-popover", AutocompletePopoverElement);
-export {
-  AutocompleteEmptyElement,
-  AutocompleteItemElement,
-  AutocompleteListElement,
-  AutocompletePopoverElement,
-  autocompleteEmptyEvents,
-  autocompleteEmptyProps,
-  autocompleteItemEvents,
-  autocompleteItemProps,
-  autocompleteListEvents,
-  autocompleteListProps,
-  autocompletePopoverEvents,
-  autocompletePopoverProps
-};
+//#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);
+
+//#endregion
+export { AutocompleteEmptyElement, AutocompleteItemElement, AutocompleteListElement, AutocompletePopoverElement, autocompleteEmptyEvents, autocompleteEmptyProps, autocompleteItemEvents, autocompleteItemProps, autocompleteListEvents, autocompleteListProps, autocompletePopoverEvents, autocompletePopoverProps };