@prosekit/web 0.0.0

package/dist/chunk-VJEVDINM.js

@@ -0,0 +1,14 @@
+// src/hooks/use-editor-extension.ts
+import {
+  useEffect
+} from "@aria-ui/core";
+function useEditorExtension(host, editor, extension) {
+  useEffect(host, () => {
+    var _a;
+    return (_a = editor.value) == null ? void 0 : _a.use(extension);
+  });
+}
+
+export {
+  useEditorExtension
+};

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

@@ -0,0 +1,12 @@
+export { AutocompleteEmptyElement } from './_tsup-dts-rollup';
+export { defaultAutocompleteEmptyProps } from './_tsup-dts-rollup';
+export { AutocompleteEmptyProps } from './_tsup-dts-rollup';
+export { AutocompleteItemElement } from './_tsup-dts-rollup';
+export { defaultAutocompleteItemProps } from './_tsup-dts-rollup';
+export { AutocompleteItemProps } from './_tsup-dts-rollup';
+export { AutocompleteListElement } from './_tsup-dts-rollup';
+export { defaultAutocompleteListProps } from './_tsup-dts-rollup';
+export { AutocompleteListProps } from './_tsup-dts-rollup';
+export { AutocompletePopoverElement } from './_tsup-dts-rollup';
+export { defaultAutocompletePopoverProps } from './_tsup-dts-rollup';
+export { AutocompletePopoverProps } from './_tsup-dts-rollup';

package/dist/prosekit-web-autocomplete.js

@@ -0,0 +1,354 @@
+import {
+  defineCustomElement,
+  defineProperties
+} from "./chunk-LJ7LCZM7.js";
+
+// src/components/autocomplete/autocomplete-empty/element.gen.ts
+import { BaseElement } 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) {
+  useListboxEmpty(element);
+  return {};
+}
+
+// src/components/autocomplete/autocomplete-empty/element.gen.ts
+var AutocompleteEmptyElement = class extends BaseElement {
+  constructor() {
+    super();
+    this._s = useAutocompleteEmpty(this);
+  }
+};
+defineProperties(AutocompleteEmptyElement, defaultAutocompleteEmptyProps);
+defineCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
+
+// src/components/autocomplete/autocomplete-item/element.gen.ts
+import { BaseElement as BaseElement2 } from "@aria-ui/core";
+
+// src/components/autocomplete/autocomplete-item/props.ts
+var defaultAutocompleteItemProps = {
+  value: "",
+  onSelect: null
+};
+
+// src/components/autocomplete/autocomplete-item/state.ts
+import {
+  useEffect
+} from "@aria-ui/core";
+import { useListboxItem } from "@aria-ui/listbox";
+
+// 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/state.ts
+function useAutocompleteItem(element, props) {
+  const { onSelect, value } = useListboxItem(element, props);
+  const open = openContext.consume(element);
+  useEffect(element, () => {
+    var _a;
+    if (!value.peek() && open.value) {
+      value.value = (_a = element.textContent) != null ? _a : "";
+    }
+  });
+  return { onSelect, value };
+}
+
+// src/components/autocomplete/autocomplete-item/element.gen.ts
+var AutocompleteItemElement = class extends BaseElement2 {
+  constructor() {
+    super();
+    this._s = useAutocompleteItem(this);
+  }
+};
+defineProperties(AutocompleteItemElement, defaultAutocompleteItemProps);
+defineCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
+
+// src/components/autocomplete/autocomplete-list/element.gen.ts
+import { BaseElement as BaseElement3 } from "@aria-ui/core";
+
+// src/components/autocomplete/autocomplete-list/props.ts
+var defaultAutocompleteListProps = {
+  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 {
+  Priority,
+  defineDOMEventHandler,
+  withPriority
+} from "@prosekit/core";
+function useAutocompleteList(element, props) {
+  const state = mapSignals(assignProps(defaultAutocompleteListProps, props));
+  const open = openContext.consume(element);
+  const query = queryContext.consume(element);
+  const onSubmit = onSubmitContext.consume(element);
+  const onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor);
+  const {
+    query: listboxQuery,
+    value: listboxValue,
+    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);
+      }
+    }
+  });
+  useEffect2(element, () => {
+    listboxQuery.value = query.value;
+  });
+  useEffect2(element, () => {
+    if (!open.value) {
+      listboxValue.value = "";
+    }
+  });
+  useEffect2(element, () => {
+    if (!open.value) {
+      autoFocus.value = false;
+    } else {
+      query.value;
+      let canceled = false;
+      requestAnimationFrame(() => {
+        if (canceled)
+          return;
+        autoFocus.value = true;
+        setTimeout(() => {
+          if (canceled)
+            return;
+          autoFocus.value = false;
+        }, 40);
+      });
+      return () => {
+        canceled = true;
+      };
+    }
+  });
+  return state;
+}
+function useKeyboardHandler(element, open, editor) {
+  const keydownHandler = createSignal(
+    null
+  );
+  let disposeKeydownHandler = null;
+  useEffect2(element, () => {
+    const editorValue = editor.value;
+    const keydownHandlerValue = keydownHandler.value;
+    if (!editorValue || !keydownHandlerValue) {
+      return;
+    }
+    const extension = defineDOMEventHandler(
+      "keydown",
+      (view, event) => {
+        if (view.composing || event.defaultPrevented || !open.value) {
+          return false;
+        }
+        keydownHandlerValue(event);
+        return event.defaultPrevented;
+      }
+    );
+    disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
+    disposeKeydownHandler = editorValue.use(
+      withPriority(extension, Priority.highest)
+    );
+  });
+  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 BaseElement3 {
+  constructor() {
+    super();
+    this._s = useAutocompleteList(this);
+  }
+};
+defineProperties(AutocompleteListElement, defaultAutocompleteListProps);
+defineCustomElement("prosekit-autocomplete-list", AutocompleteListElement);
+
+// src/components/autocomplete/autocomplete-popover/element.gen.ts
+import { BaseElement as BaseElement4 } 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,
+  placement: "bottom-start",
+  offset: 4,
+  inline: true,
+  hoist: true,
+  fitViewport: true,
+  boundary: defaultBoundary,
+  overflowPadding: 8
+});
+
+// src/components/autocomplete/autocomplete-popover/state.ts
+import {
+  assignProps as assignProps2,
+  createComputed,
+  createSignal as createSignal2,
+  mapSignals as mapSignals2,
+  useEffect as useEffect3
+} from "@aria-ui/core";
+import { useOverlayPositionerState } from "@aria-ui/overlay";
+import { usePresence } from "@aria-ui/presence";
+import {
+  AutocompleteRule,
+  defineAutocomplete
+} from "@prosekit/extensions/autocomplete";
+
+// src/components/autocomplete/autocomplete-popover/helpers.ts
+function defaultQueryBuilder(match) {
+  return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
+}
+
+// src/components/autocomplete/autocomplete-popover/state.ts
+function useAutocompletePopover(host, props) {
+  const state = mapSignals2(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 presence = createComputed(() => !!reference.value);
+  queryContext.provide(host, query);
+  onSubmitContext.provide(host, onSubmit);
+  openContext.provide(host, presence);
+  useEscapeKeydown(host, createKeymapHandler(onDismiss, presence));
+  useAutocompleteExtension(
+    host,
+    editor,
+    regex,
+    reference,
+    query,
+    onDismiss,
+    onSubmit
+  );
+  useOverlayPositionerState(host, overlayState, { reference });
+  usePresence(host, presence);
+}
+function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
+  useEffect3(host, () => {
+    const editorValue = editor.value;
+    const regexValue = regex.value;
+    if (!editorValue || !regexValue) {
+      return;
+    }
+    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({
+    regex,
+    onEnter: handleEnter,
+    onLeave: handleLeave
+  });
+  const 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;
+  };
+}
+function useEscapeKeydown(host, handler) {
+  useEffect3(host, () => {
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      if (handler()) {
+        event.preventDefault();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  });
+}
+
+// src/components/autocomplete/autocomplete-popover/element.gen.ts
+var AutocompletePopoverElement = class extends BaseElement4 {
+  constructor() {
+    super();
+    this._s = useAutocompletePopover(this);
+  }
+};
+defineProperties(AutocompletePopoverElement, defaultAutocompletePopoverProps);
+defineCustomElement("prosekit-autocomplete-popover", AutocompletePopoverElement);
+export {
+  AutocompleteEmptyElement,
+  AutocompleteItemElement,
+  AutocompleteListElement,
+  AutocompletePopoverElement,
+  defaultAutocompleteEmptyProps,
+  defaultAutocompleteItemProps,
+  defaultAutocompleteListProps,
+  defaultAutocompletePopoverProps
+};

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

@@ -0,0 +1,6 @@
+export { BlockDragHandleElement } from './_tsup-dts-rollup';
+export { defaultBlockDragHandleProps } from './_tsup-dts-rollup';
+export { BlockDragHandleProps } from './_tsup-dts-rollup';
+export { BlockPopoverElement } from './_tsup-dts-rollup';
+export { defaultBlockPopoverProps } from './_tsup-dts-rollup';
+export { BlockPopoverProps } from './_tsup-dts-rollup';

package/dist/prosekit-web-block-handle.js

@@ -0,0 +1,242 @@
+import {
+  useEditorExtension
+} from "./chunk-VJEVDINM.js";
+import {
+  defineCustomElement,
+  defineProperties
+} from "./chunk-LJ7LCZM7.js";
+
+// src/components/block-handle/block-drag-handle/element.gen.ts
+import { BaseElement } from "@aria-ui/core";
+
+// src/components/block-handle/block-drag-handle/props.ts
+var defaultBlockDragHandleProps = Object.freeze({
+  editor: null
+});
+
+// src/components/block-handle/block-drag-handle/state.ts
+import {
+  assignProps,
+  mapSignals,
+  useEffect,
+  useEventListener
+} from "@aria-ui/core";
+import { Fragment, Slice } from "@prosekit/pm/model";
+import { NodeSelection } from "@prosekit/pm/state";
+
+// src/components/block-handle/context.ts
+import { createContext } from "@aria-ui/core";
+var blockPopoverContext = createContext(
+  "prosekit-block-popover-context",
+  {
+    pos: null,
+    node: null,
+    element: null
+  }
+);
+
+// src/components/block-handle/block-drag-handle/state.ts
+function useBlockDragHandle(host, props) {
+  const context = blockPopoverContext.consume(host);
+  const state = mapSignals(assignProps(defaultBlockDragHandleProps, props));
+  useEffect(host, () => {
+    host.draggable = true;
+  });
+  useEventListener(host, "pointerdown", () => {
+    var _a, _b;
+    const { pos } = (_a = context.value) != null ? _a : {};
+    const { view } = (_b = state.editor.value) != null ? _b : {};
+    if (pos == null || view == null) {
+      return;
+    }
+    view.dispatch(
+      view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
+    );
+    requestAnimationFrame(() => {
+      view.focus();
+    });
+  });
+  useEventListener(host, "dragstart", (event) => {
+    var _a, _b;
+    const { pos, element, node } = (_a = context.value) != null ? _a : {};
+    const { view } = (_b = state.editor.value) != null ? _b : {};
+    if (pos == null || !element || !node || !view || !event.dataTransfer) {
+      return;
+    }
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData("text/html", element.outerHTML);
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.setDragImage(element, 0, 0);
+    view.dragging = {
+      slice: new Slice(Fragment.from(node), 0, 0),
+      move: true
+    };
+  });
+  return state;
+}
+
+// src/components/block-handle/block-drag-handle/element.gen.ts
+var BlockDragHandleElement = class extends BaseElement {
+  constructor() {
+    super();
+    this._s = useBlockDragHandle(this);
+  }
+};
+defineProperties(BlockDragHandleElement, defaultBlockDragHandleProps);
+defineCustomElement("prosekit-block-drag-handle", BlockDragHandleElement);
+
+// src/components/block-handle/block-popover/element.gen.ts
+import { BaseElement as BaseElement2 } from "@aria-ui/core";
+
+// src/components/block-handle/block-popover/props.ts
+import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
+var defaultBlockPopoverProps = Object.freeze({
+  ...defaultOverlayPositionerProps,
+  editor: null,
+  placement: "left-start",
+  offset: 4
+});
+
+// src/components/block-handle/block-popover/state.ts
+import {
+  assignProps as assignProps2,
+  createComputed,
+  createSignal,
+  mapSignals as mapSignals2,
+  useAttribute,
+  useEffect as useEffect2
+} from "@aria-ui/core";
+import { useOverlayPositionerState } from "@aria-ui/overlay";
+import { usePresence } from "@aria-ui/presence";
+
+// src/components/block-handle/block-popover/pointer-move.ts
+import { defineDOMEventHandler, union } from "@prosekit/core";
+
+// src/utils/throttle.ts
+function throttle(callback, wait) {
+  let lastTime = 0;
+  return (...args) => {
+    const now = Date.now();
+    if (now - lastTime >= wait) {
+      callback(...args);
+      lastTime = now;
+    }
+  };
+}
+
+// src/components/block-handle/block-popover/pointer-move.ts
+function defineElementHoverHandler(handler) {
+  const handlePointerEvent = (view, event) => {
+    var _a;
+    const rect = view.dom.getBoundingClientRect();
+    const pos = (_a = view.posAtCoords({
+      top: event.clientY,
+      // Use the center of the editor
+      left: rect.left + rect.width / 2
+    })) == null ? void 0 : _a.inside;
+    if (pos == null || pos < 0) {
+      handler(null, null, null, null);
+      return;
+    }
+    const $pos = view.state.doc.resolve(pos);
+    const node = view.state.doc.nodeAt(pos);
+    const element = view.nodeDOM(pos);
+    if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
+      const ancestorPos = $pos.before($pos.depth);
+      const node2 = view.state.doc.nodeAt(ancestorPos);
+      const element2 = view.nodeDOM(ancestorPos);
+      if (!element2) {
+        handler(null, null, null, null);
+        return;
+      }
+      const reference = {
+        contextElement: element2,
+        // Get the bounding client rect of the parent node, including its
+        // margins.
+        getBoundingClientRect: () => {
+          const rect2 = element2.getBoundingClientRect();
+          const style = window.getComputedStyle(element2);
+          const marginTop = Number.parseInt(style.marginTop, 10) || 0;
+          const marginRight = Number.parseInt(style.marginRight, 10) || 0;
+          const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
+          const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
+          return {
+            top: rect2.top - marginTop,
+            right: rect2.right + marginRight,
+            bottom: rect2.bottom + marginBottom,
+            left: rect2.left - marginLeft,
+            width: rect2.width + marginLeft + marginRight,
+            height: rect2.height + marginTop + marginBottom,
+            x: rect2.x - marginLeft,
+            y: rect2.y - marginTop
+          };
+        }
+      };
+      handler(reference, element2, node2, ancestorPos);
+      return;
+    }
+    handler(element, element, node, pos);
+  };
+  return union([
+    defineDOMEventHandler("pointermove", throttle(handlePointerEvent, 200)),
+    defineDOMEventHandler("pointerout", handlePointerEvent),
+    defineDOMEventHandler("keypress", () => handler(null, null, null, null))
+  ]);
+}
+
+// src/components/block-handle/block-popover/state.ts
+function useBlockPopover(host, props) {
+  const state = mapSignals2(assignProps2(defaultBlockPopoverProps, props));
+  const { editor, ...overlayState } = state;
+  const reference = createSignal(null);
+  useOverlayPositionerState(host, overlayState, { reference });
+  const context = createSignal({
+    pos: null,
+    node: null,
+    element: null
+  });
+  blockPopoverContext.provide(host, context);
+  const open = createSignal(false);
+  useEffect2(host, () => {
+    open.value = !!context.value.element;
+  });
+  useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
+    reference.value = referenceValue;
+    context.value = { element, node, pos };
+  });
+  const presence = createComputed(() => !!reference.value);
+  useAttribute(host, "data-state", () => presence.value ? "open" : "closed");
+  usePresence(host, presence);
+  return state;
+}
+function useHoverExtension(host, editor, handler) {
+  let prevElement = null;
+  let prevPos = null;
+  const extension = defineElementHoverHandler(
+    (reference, element, node, pos) => {
+      if (prevElement === element && prevPos === pos) {
+        return;
+      }
+      prevElement = element;
+      prevPos = pos;
+      handler(reference, element, node, pos);
+    }
+  );
+  useEditorExtension(host, editor, extension);
+}
+
+// src/components/block-handle/block-popover/element.gen.ts
+var BlockPopoverElement = class extends BaseElement2 {
+  constructor() {
+    super();
+    this._s = useBlockPopover(this);
+  }
+};
+defineProperties(BlockPopoverElement, defaultBlockPopoverProps);
+defineCustomElement("prosekit-block-popover", BlockPopoverElement);
+export {
+  BlockDragHandleElement,
+  BlockPopoverElement,
+  defaultBlockDragHandleProps,
+  defaultBlockPopoverProps
+};

package/dist/prosekit-web-inline-popover.d.ts

@@ -0,0 +1,3 @@
+export { InlinePopoverElement } from './_tsup-dts-rollup';
+export { defaultInlinePopoverProps } from './_tsup-dts-rollup';
+export { InlinePopoverProps } from './_tsup-dts-rollup';