@prosekit/web 0.0.0

package/dist/prosekit-web-inline-popover.js

@@ -0,0 +1,161 @@
+import {
+  useEditorExtension
+} from "./chunk-VJEVDINM.js";
+import {
+  defineCustomElement,
+  defineProperties
+} from "./chunk-LJ7LCZM7.js";
+
+// src/components/inline-popover/inline-popover/element.gen.ts
+import { BaseElement } from "@aria-ui/core";
+
+// src/components/inline-popover/inline-popover/props.ts
+import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
+var defaultInlinePopoverProps = Object.freeze({
+  ...defaultOverlayPositionerProps,
+  editor: null,
+  open: true,
+  onOpenChange: null,
+  placement: "top",
+  offset: 12,
+  flip: true,
+  hide: true,
+  overlap: true,
+  inline: true,
+  hoist: true
+});
+
+// src/components/inline-popover/inline-popover/state.ts
+import {
+  assignProps,
+  createComputed,
+  createSignal,
+  mapSignals,
+  useAttribute,
+  useEffect
+} from "@aria-ui/core";
+import { useOverlayPositionerState } from "@aria-ui/overlay";
+import { usePresence } from "@aria-ui/presence";
+
+// src/hooks/use-editor-focus-event.ts
+import {
+  defineFocusChangeHandler
+} from "@prosekit/core";
+function useEditorFocusChangeEvent(host, editor, handler) {
+  const extension = defineFocusChangeHandler(handler);
+  useEditorExtension(host, editor, extension);
+}
+
+// src/hooks/use-editor-update-event.ts
+import { defineUpdateHandler } from "@prosekit/core";
+function useEditorUpdateEvent(host, editor, handler) {
+  const extension = defineUpdateHandler(handler);
+  useEditorExtension(host, editor, extension);
+}
+
+// src/components/inline-popover/inline-popover/virtual-selection-element.ts
+import { isNodeSelection, isTextSelection } from "@prosekit/core";
+
+// src/utils/is-in-code-block.ts
+function isInCodeBlock(selection) {
+  const type = selection.$from.parent.type;
+  return type.spec.code && type.isBlock;
+}
+
+// src/components/inline-popover/inline-popover/virtual-selection-element.ts
+function getVirtualSelectionElement(view) {
+  if (typeof window === "undefined" || view.isDestroyed) {
+    return null;
+  }
+  const selection = view.state.selection;
+  if (!selection.empty && !isInCodeBlock(selection) && (isTextSelection(selection) || isNodeSelection(selection))) {
+    const decoration = getInlineDecoration(view);
+    if (decoration) {
+      return decoration;
+    }
+    const range = getDomRange();
+    if (range) {
+      return {
+        contextElement: view.dom,
+        getBoundingClientRect: () => range.getBoundingClientRect(),
+        getClientRects: () => range.getClientRects()
+      };
+    }
+  }
+  return null;
+}
+function getDomRange() {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed) {
+    return;
+  }
+  const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
+  if (!range) {
+    return;
+  }
+  return range;
+}
+function getInlineDecoration(view) {
+  const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
+  if (match.length === 0) {
+    return;
+  }
+  if (match.length === 1) {
+    return match[0];
+  }
+  const items = Array.from(match);
+  return {
+    contextElement: items[0],
+    getBoundingClientRect: () => items[0].getBoundingClientRect(),
+    getClientRects: () => items.map((item) => item.getBoundingClientRect())
+  };
+}
+
+// src/components/inline-popover/inline-popover/state.ts
+function useInlinePopover(host, props) {
+  const state = mapSignals(assignProps(defaultInlinePopoverProps, props));
+  useInlinePopoverState(host, state);
+  return state;
+}
+function useInlinePopoverState(host, state) {
+  const { editor, open, onOpenChange, ...overlayState } = state;
+  const reference = useInlinePopoverReference(host, editor);
+  useOverlayPositionerState(host, overlayState, { reference });
+  const presence = createComputed(() => !!reference.value && open.value);
+  useAttribute(host, "data-state", () => presence.value ? "open" : "closed");
+  usePresence(host, presence);
+  useEffect(host, () => {
+    var _a;
+    const presenceValue = presence.value;
+    (_a = onOpenChange.peek()) == null ? void 0 : _a(presenceValue);
+  });
+}
+function useInlinePopoverReference(host, editor) {
+  const reference = createSignal(null);
+  let editorFocused = false;
+  useEditorFocusChangeEvent(host, editor, (focus) => {
+    editorFocused = focus;
+  });
+  useEditorUpdateEvent(host, editor, (view) => {
+    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
+    if (isPopoverFocused) {
+      return;
+    }
+    reference.value = getVirtualSelectionElement(view);
+  });
+  return reference;
+}
+
+// src/components/inline-popover/inline-popover/element.gen.ts
+var InlinePopoverElement = class extends BaseElement {
+  constructor() {
+    super();
+    this._s = useInlinePopover(this);
+  }
+};
+defineProperties(InlinePopoverElement, defaultInlinePopoverProps);
+defineCustomElement("prosekit-inline-popover", InlinePopoverElement);
+export {
+  InlinePopoverElement,
+  defaultInlinePopoverProps
+};

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

@@ -0,0 +1,9 @@
+export { PopoverContentElement } from './_tsup-dts-rollup';
+export { defaultPopoverContentProps } from './_tsup-dts-rollup';
+export { PopoverContentProps } from './_tsup-dts-rollup';
+export { PopoverRootElement } from './_tsup-dts-rollup';
+export { defaultPopoverRootProps } from './_tsup-dts-rollup';
+export { PopoverRootProps } from './_tsup-dts-rollup';
+export { PopoverTriggerElement } from './_tsup-dts-rollup';
+export { defaultPopoverTriggerProps } from './_tsup-dts-rollup';
+export { PopoverTriggerProps } from './_tsup-dts-rollup';

package/dist/prosekit-web-popover.js

@@ -0,0 +1,79 @@
+import {
+  defineCustomElement,
+  defineProperties
+} from "./chunk-LJ7LCZM7.js";
+
+// src/components/popover/popover-content/element.gen.ts
+import { BaseElement } from "@aria-ui/core";
+
+// src/components/popover/popover-content/props.ts
+import {
+  defaultPopoverContentProps
+} from "@aria-ui/popover";
+
+// src/components/popover/popover-content/state.ts
+import { usePopoverContent } from "@aria-ui/popover";
+
+// src/components/popover/popover-content/element.gen.ts
+var PopoverContentElement = class extends BaseElement {
+  constructor() {
+    super();
+    this._s = usePopoverContent(this);
+  }
+};
+defineProperties(PopoverContentElement, defaultPopoverContentProps);
+defineCustomElement("prosekit-popover-content", PopoverContentElement);
+
+// src/components/popover/popover-root/element.gen.ts
+import { BaseElement as BaseElement2 } from "@aria-ui/core";
+
+// src/components/popover/popover-root/props.ts
+import {
+  defaultPopoverRootProps
+} from "@aria-ui/popover";
+
+// src/components/popover/popover-root/state.ts
+import { usePopoverRoot } from "@aria-ui/popover";
+
+// src/components/popover/popover-root/element.gen.ts
+var PopoverRootElement = class extends BaseElement2 {
+  constructor() {
+    super();
+    this._s = usePopoverRoot(this);
+  }
+};
+defineProperties(PopoverRootElement, defaultPopoverRootProps);
+defineCustomElement("prosekit-popover-root", PopoverRootElement);
+
+// src/components/popover/popover-trigger/element.gen.ts
+import { BaseElement as BaseElement3 } from "@aria-ui/core";
+
+// src/components/popover/popover-trigger/props.ts
+import {
+  defaultPopoverTriggerProps
+} from "@aria-ui/popover";
+
+// src/components/popover/popover-trigger/state.ts
+import { usePopoverTrigger as _usePopoverTrigger } from "@aria-ui/popover";
+function usePopoverTrigger(host) {
+  _usePopoverTrigger(host);
+  return {};
+}
+
+// src/components/popover/popover-trigger/element.gen.ts
+var PopoverTriggerElement = class extends BaseElement3 {
+  constructor() {
+    super();
+    this._s = usePopoverTrigger(this);
+  }
+};
+defineProperties(PopoverTriggerElement, defaultPopoverTriggerProps);
+defineCustomElement("prosekit-popover-trigger", PopoverTriggerElement);
+export {
+  PopoverContentElement,
+  PopoverRootElement,
+  PopoverTriggerElement,
+  defaultPopoverContentProps,
+  defaultPopoverRootProps,
+  defaultPopoverTriggerProps
+};

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

@@ -0,0 +1,6 @@
+export { ResizableHandleElement } from './_tsup-dts-rollup';
+export { defaultResizableHandleProps } from './_tsup-dts-rollup';
+export { ResizableHandleProps } from './_tsup-dts-rollup';
+export { ResizableRootElement } from './_tsup-dts-rollup';
+export { defaultResizableRootProps } from './_tsup-dts-rollup';
+export { ResizableRootProps } from './_tsup-dts-rollup';

package/dist/prosekit-web-resizable.js

@@ -0,0 +1,286 @@
+import {
+  defineCustomElement,
+  defineProperties
+} from "./chunk-LJ7LCZM7.js";
+
+// src/components/resizable/resizable-handle/element.gen.ts
+import { BaseElement } from "@aria-ui/core";
+
+// src/components/resizable/resizable-handle/props.ts
+var defaultResizableHandleProps = {
+  position: "bottom-right"
+};
+
+// src/components/resizable/resizable-handle/state.ts
+import {
+  assignProps,
+  createSignal,
+  mapSignals,
+  useEffect
+} from "@aria-ui/core";
+import { getWindow } from "@zag-js/dom-query";
+
+// src/components/resizable/context.ts
+import { createContext } from "@aria-ui/core";
+var onResizeContext = createContext(
+  "prosekit/resizable/onResize",
+  null
+);
+var onResizeStartContext = createContext(
+  "prosekit/resizable/onResizeStart",
+  null
+);
+var onResizeEndContext = createContext(
+  "prosekit/resizable/onResizeEnd",
+  null
+);
+
+// src/utils/is-finite-positive-number.ts
+function isFinitePositiveNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+
+// src/components/resizable/resizable-handle/calc-resize.ts
+function calcResize(position, w, h, dx, dy, aspectRatio) {
+  aspectRatio = aspectRatio ? aspectRatio : w / h;
+  aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1;
+  switch (position) {
+    case "bottom-right":
+      return calcBottomRightResize(w, h, dx, dy, aspectRatio);
+    case "bottom-left":
+      return calcBottomLeftResize(w, h, dx, dy, aspectRatio);
+    case "top-right":
+      return calcTopRightResize(w, h, dx, dy, aspectRatio);
+    case "top-left":
+      return calcTopLeftResize(w, h, dx, dy, aspectRatio);
+    case "top":
+      return calcTopResize(w, h, dx, dy, aspectRatio);
+    case "right":
+      return calcRightResize(w, h, dx, dy, aspectRatio);
+    case "bottom":
+      return calcBottomResize(w, h, dx, dy, aspectRatio);
+    case "left":
+      return calcLeftResize(w, h, dx, dy, aspectRatio);
+    default:
+      throw new RangeError(`Invalid position: ${position}`);
+  }
+}
+var calcBottomRightResize = (w, h, dx, dy, r) => {
+  w += dx;
+  h += dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcBottomLeftResize = (w, h, dx, dy, r) => {
+  w -= dx;
+  h += dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcTopRightResize = (w, h, dx, dy, r) => {
+  w += dx;
+  h -= dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcTopLeftResize = (w, h, dx, dy, r) => {
+  w -= dx;
+  h -= dy;
+  const sum = w + h;
+  h = sum / (r + 1);
+  w = sum - h;
+  return [w, h];
+};
+var calcTopResize = (w, h, dx, dy, r) => {
+  h -= dy;
+  w = h * r;
+  return [w, h];
+};
+var calcRightResize = (w, h, dx, dy, r) => {
+  w += dx;
+  h = w / r;
+  return [w, h];
+};
+var calcBottomResize = (w, h, dx, dy, r) => {
+  h += dy;
+  w = h * r;
+  return [w, h];
+};
+var calcLeftResize = (w, h, dx, dy, r) => {
+  w -= dx;
+  h = w / r;
+  return [w, h];
+};
+
+// src/components/resizable/resizable-handle/state.ts
+function useResizableHandle(host, props) {
+  const state = mapSignals(assignProps(defaultResizableHandleProps, props));
+  const onResize = onResizeContext.consume(host);
+  const onResizeStart = onResizeStartContext.consume(host);
+  const onResizeEnd = onResizeEndContext.consume(host);
+  useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd });
+  return state;
+}
+function useResizableHandleState(host, state, context) {
+  let startX = 0;
+  let startY = 0;
+  let width = 0;
+  let height = 0;
+  let aspectRatio = 1;
+  const pointerPressing = createSignal(false);
+  const handlePointerDown = (event) => {
+    var _a, _b;
+    event.preventDefault();
+    pointerPressing.value = true;
+    startX = event.x;
+    startY = event.y;
+    const size = (_b = (_a = context.onResizeStart).value) == null ? void 0 : _b.call(_a);
+    if (size) {
+      ;
+      [width, height, aspectRatio] = size;
+    }
+  };
+  const handlePointerMove = (event) => {
+    var _a, _b;
+    event.preventDefault();
+    const dx = event.x - startX;
+    const dy = event.y - startY;
+    const [w, h] = calcResize(
+      state.position.peek(),
+      width,
+      height,
+      dx,
+      dy,
+      aspectRatio
+    );
+    (_b = (_a = context.onResize).value) == null ? void 0 : _b.call(_a, w, h);
+  };
+  const handlePointerUp = (event) => {
+    var _a, _b;
+    event.preventDefault();
+    pointerPressing.value = false;
+    (_b = (_a = context.onResizeEnd).value) == null ? void 0 : _b.call(_a);
+  };
+  useEffect(host, () => {
+    host.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      host.removeEventListener("pointerdown", handlePointerDown);
+    };
+  });
+  useEffect(host, () => {
+    if (!pointerPressing.value) {
+      return;
+    }
+    const win = getWindow(host);
+    win.addEventListener("pointermove", handlePointerMove);
+    win.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      win.removeEventListener("pointermove", handlePointerMove);
+      win.removeEventListener("pointerup", handlePointerUp);
+    };
+  });
+}
+
+// src/components/resizable/resizable-handle/element.gen.ts
+var ResizableHandleElement = class extends BaseElement {
+  constructor() {
+    super();
+    this._s = useResizableHandle(this);
+  }
+};
+defineProperties(ResizableHandleElement, defaultResizableHandleProps);
+defineCustomElement("prosekit-resizable-handle", ResizableHandleElement);
+
+// src/components/resizable/resizable-root/element.gen.ts
+import { BaseElement as BaseElement2 } from "@aria-ui/core";
+
+// src/components/resizable/resizable-root/props.ts
+var defaultResizableRootProps = {
+  width: null,
+  height: null,
+  aspectRatio: null,
+  onSizeChangeStart: null,
+  onSizeChange: null,
+  onSizeChangeEnd: null
+};
+
+// src/components/resizable/resizable-root/state.ts
+import {
+  assignProps as assignProps2,
+  createSignal as createSignal2,
+  mapSignals as mapSignals2,
+  useEffect as useEffect2
+} from "@aria-ui/core";
+function useResizableRoot(host, props) {
+  const state = mapSignals2(assignProps2(defaultResizableRootProps, props));
+  useResizableRootState(host, state);
+  return state;
+}
+function useResizableRootState(host, state) {
+  const onResizeStart = () => {
+    var _a, _b;
+    const { width, height } = host.getBoundingClientRect();
+    let aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
+    if (!isFinitePositiveNumber(aspectRatio)) {
+      aspectRatio = 0;
+    }
+    (_b = state.onSizeChangeStart.peek()) == null ? void 0 : _b({ width, height });
+    return [width, height, aspectRatio];
+  };
+  const onResize = (width, height) => {
+    var _a;
+    (_a = state.onSizeChange.peek()) == null ? void 0 : _a({ width, height });
+    state.width.value = width;
+    state.height.value = height;
+  };
+  const onResizeEnd = () => {
+    var _a;
+    const { width, height } = host.getBoundingClientRect();
+    (_a = state.onSizeChangeEnd.peek()) == null ? void 0 : _a({ width, height });
+  };
+  onResizeStartContext.provide(host, createSignal2(onResizeStart));
+  onResizeContext.provide(host, createSignal2(onResize));
+  onResizeEndContext.provide(host, createSignal2(onResizeEnd));
+  useEffect2(host, () => {
+    updateResizableRootStyles(
+      host,
+      state.width.value,
+      state.height.value,
+      state.aspectRatio.value
+    );
+  });
+}
+function updateResizableRootStyles(host, width, height, aspectRatio) {
+  host.style.width = isFinitePositiveNumber(width) ? `${width}px` : "";
+  host.style.height = isFinitePositiveNumber(height) ? `${height}px` : "";
+  if (isFinitePositiveNumber(aspectRatio)) {
+    host.style.aspectRatio = `${aspectRatio}`;
+    if (width && width > 0 && aspectRatio >= 1) {
+      host.style.height = "auto";
+    } else if (height && height > 0 && aspectRatio <= 1) {
+      host.style.width = "auto";
+    }
+  }
+}
+
+// src/components/resizable/resizable-root/element.gen.ts
+var ResizableRootElement = class extends BaseElement2 {
+  constructor() {
+    super();
+    this._s = useResizableRoot(this);
+  }
+};
+defineProperties(ResizableRootElement, defaultResizableRootProps);
+defineCustomElement("prosekit-resizable-root", ResizableRootElement);
+export {
+  ResizableHandleElement,
+  ResizableRootElement,
+  defaultResizableHandleProps,
+  defaultResizableRootProps
+};

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

@@ -0,0 +1,9 @@
+export { TooltipContentElement } from './_tsup-dts-rollup';
+export { defaultTooltipContentProps } from './_tsup-dts-rollup';
+export { TooltipContentProps } from './_tsup-dts-rollup';
+export { TooltipRootElement } from './_tsup-dts-rollup';
+export { defaultTooltipRootProps } from './_tsup-dts-rollup';
+export { TooltipRootProps } from './_tsup-dts-rollup';
+export { TooltipTriggerElement } from './_tsup-dts-rollup';
+export { defaultTooltipTriggerProps } from './_tsup-dts-rollup';
+export { TooltipTriggerProps } from './_tsup-dts-rollup';

package/dist/prosekit-web-tooltip.js

@@ -0,0 +1,73 @@
+import {
+  defineCustomElement,
+  defineProperties
+} from "./chunk-LJ7LCZM7.js";
+
+// src/components/tooltip/tooltip-content/element.gen.ts
+import { BaseElement } from "@aria-ui/core";
+
+// src/components/tooltip/tooltip-content/props.ts
+import { defaultTooltipContentProps } from "@aria-ui/tooltip";
+
+// src/components/tooltip/tooltip-content/state.ts
+import { useTooltipContent } from "@aria-ui/tooltip";
+
+// src/components/tooltip/tooltip-content/element.gen.ts
+var TooltipContentElement = class extends BaseElement {
+  constructor() {
+    super();
+    this._s = useTooltipContent(this);
+  }
+};
+defineProperties(TooltipContentElement, defaultTooltipContentProps);
+defineCustomElement("prosekit-tooltip-content", TooltipContentElement);
+
+// src/components/tooltip/tooltip-root/element.gen.ts
+import { BaseElement as BaseElement2 } from "@aria-ui/core";
+
+// src/components/tooltip/tooltip-root/props.ts
+import { defaultTooltipRootProps } from "@aria-ui/tooltip";
+
+// src/components/tooltip/tooltip-root/state.ts
+import { useTooltipRoot } from "@aria-ui/tooltip";
+
+// src/components/tooltip/tooltip-root/element.gen.ts
+var TooltipRootElement = class extends BaseElement2 {
+  constructor() {
+    super();
+    this._s = useTooltipRoot(this);
+  }
+};
+defineProperties(TooltipRootElement, defaultTooltipRootProps);
+defineCustomElement("prosekit-tooltip-root", TooltipRootElement);
+
+// src/components/tooltip/tooltip-trigger/element.gen.ts
+import { BaseElement as BaseElement3 } from "@aria-ui/core";
+
+// src/components/tooltip/tooltip-trigger/props.ts
+var defaultTooltipTriggerProps = {};
+
+// src/components/tooltip/tooltip-trigger/state.ts
+import { useTooltipTrigger as _useTooltipTrigger } from "@aria-ui/tooltip";
+function useTooltipTrigger(host) {
+  _useTooltipTrigger(host);
+  return {};
+}
+
+// src/components/tooltip/tooltip-trigger/element.gen.ts
+var TooltipTriggerElement = class extends BaseElement3 {
+  constructor() {
+    super();
+    this._s = useTooltipTrigger(this);
+  }
+};
+defineProperties(TooltipTriggerElement, defaultTooltipTriggerProps);
+defineCustomElement("prosekit-tooltip-trigger", TooltipTriggerElement);
+export {
+  TooltipContentElement,
+  TooltipRootElement,
+  TooltipTriggerElement,
+  defaultTooltipContentProps,
+  defaultTooltipRootProps,
+  defaultTooltipTriggerProps
+};

package/dist/prosekit-web.d.ts

@@ -0,0 +1 @@
+export {};