@prosekit/lit 0.1.7 → 0.1.9

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

@@ -229,6 +229,11 @@ export declare const blockComponentStyles: CSSResult;
  */
 export declare const boundary: HTMLElement | undefined;
 
+export declare function calcResize(position: 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right', w: number, h: number, dx: number, dy: number, aspectRatio: number | null | undefined): [w: number, h: number];
+
+/**
+ * @internal
+ */
 export declare class ComboBox extends Popover {
     /**
      * @hidden
@@ -284,6 +289,9 @@ export declare const comboBoxContext: {
     __context__: ComboBoxContext;
 };
 
+/**
+ * @internal
+ */
 export declare class ComboBoxInput extends LightElement {
     /**
      * @hidden
@@ -308,10 +316,16 @@ export declare class ComboBoxInput extends LightElement {
     render(): TemplateResult<1>;
 }
 
+/**
+ * @internal
+ */
 export declare interface ComboBoxInputProps {
     placeholder?: string;
 }
 
+/**
+ * @internal
+ */
 declare class ComboBoxItem extends LightElement {
     /**
      * @hidden
@@ -341,12 +355,18 @@ declare class ComboBoxItem extends LightElement {
 export { ComboBoxItem }
 export { ComboBoxItem as ComboBoxItem_alias_1 }
 
+/**
+ * @internal
+ */
 declare type ComboBoxItemProps = {
     onSelect?: VoidFunction;
 };
 export { ComboBoxItemProps }
 export { ComboBoxItemProps as ComboBoxItemProps_alias_1 }
 
+/**
+ * @internal
+ */
 declare class ComboBoxList extends LightElement {
     private comboBoxContext;
     connectedCallback(): void;
@@ -354,12 +374,18 @@ declare class ComboBoxList extends LightElement {
 export { ComboBoxList }
 export { ComboBoxList as ComboBoxList_alias_1 }
 
+/**
+ * @internal
+ */
 declare type ComboBoxListProps = {
     lang?: string;
 };
 export { ComboBoxListProps }
 export { ComboBoxListProps as ComboBoxListProps_alias_1 }
 
+/**
+ * @internal
+ */
 export declare interface ComboBoxProps extends PopoverProps {
     onDismiss?: VoidFunction;
 }
@@ -452,8 +478,8 @@ export declare class InlinePopoverController implements ReactiveController {
     private editor?;
     private cleanupExtension?;
     private cleanupEventListener?;
-    private mouseHovering;
-    constructor(host: ReactiveControllerHost);
+    private interacting;
+    constructor(host: LitElement);
     setEditor(editor: Editor): void;
     hostConnected(): void;
     hostDisconnected(): void;
@@ -474,6 +500,8 @@ export declare function isComboBoxItem(element?: Element | null): element is Com
 
 export declare function isComboBoxList(element?: Element | null): element is ComboBoxList;
 
+export declare function isFinitePositiveNumber(value: unknown): value is number;
+
 export declare function isInCodeBlock(selection: Selection_2): boolean | undefined;
 
 export declare class LightElement extends LitElement {
@@ -669,6 +697,9 @@ export declare interface PopoverProps {
     autoUpdateOptions?: AutoUpdateOptions;
 }
 
+/**
+ * @internal
+ */
 export declare const propNames: readonly [];
 
 declare const propNames_2: readonly ["value", "onSelect"];
@@ -679,28 +710,198 @@ declare const propNames_3: readonly ["editor"];
 export { propNames_3 as propNames_alias_3 }
 export { propNames_3 as propNames_alias_4 }
 
+/**
+ * @internal
+ */
 declare const propNames_4: readonly ["onSelect"];
 export { propNames_4 as propNames_alias_8 }
 export { propNames_4 as propNames_alias_9 }
 
+/**
+ * @internal
+ */
 declare const propNames_5: never[];
 export { propNames_5 as propNames_alias_10 }
 export { propNames_5 as propNames_alias_11 }
 
+/**
+ * @internal
+ */
+declare const propNames_6: readonly ["width", "height", "aspectRatio", "onSizeChangeStart", "onSizeChange", "onSizeChangeEnd"];
+export { propNames_6 as propNames_alias_14 }
+export { propNames_6 as propNames_alias_15 }
+
+/**
+ * @internal
+ */
+declare const propNames_7: readonly [];
+export { propNames_7 as propNames_alias_16 }
+export { propNames_7 as propNames_alias_17 }
+
 export declare const propNames_alias_12: readonly ["editor", "popoverOptions"];
 
 export declare const propNames_alias_13: readonly ["active", "reference", "options", "autoUpdate", "autoUpdateOptions"];
 
 export declare const propNames_alias_5: readonly ["editor", "regex", "popoverOptions"];
 
+/**
+ * @internal
+ */
 export declare const propNames_alias_6: readonly ["onDismiss"];
 
+/**
+ * @internal
+ */
 export declare const propNames_alias_7: readonly ["placeholder"];
 
 export declare function queryClosestAutocompleteItem(element?: Element | null): AutocompleteItem | null;
 
 export declare function queryClosestComboBoxItem(element?: Element | null): ComboBoxItem | null;
 
+/**
+ * @public
+ */
+declare class Resizable extends LightElement implements Partial<ResizableProps> {
+    /**
+     * @hidden
+     */
+    static properties: {
+        width: {
+            attribute: false;
+        };
+        height: {
+            attribute: false;
+        };
+        aspectRatio: {
+            attribute: false;
+        };
+        onResize: {
+            attribute: false;
+        };
+        onResizeEnd: {
+            attribute: false;
+        };
+        resizing: {
+            attribute: string;
+            type: BooleanConstructor;
+            reflect: true;
+        };
+    };
+    /**
+     * @hidden
+     */
+    constructor();
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    resizing?: boolean;
+    onSizeChangeStart?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    onSizeChange?: (size: {
+        width: number;
+        height: number;
+    }) => void | {
+        width?: number | string;
+        height?: number | string;
+    };
+    onSizeChangeEnd?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    private startWidth;
+    private startHeight;
+    private handleResizeStart;
+    private handleResize;
+    private handleResizeEnd;
+    private updateStyle;
+    /**
+     * @hidden
+     */
+    connectedCallback(): void;
+    /**
+     * @hidden
+     */
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+export { Resizable }
+export { Resizable as Resizable_alias_1 }
+
+/**
+ * @internal
+ */
+export declare interface ResizableContext {
+    onResizeStart: () => readonly [
+    width: number,
+    height: number,
+    aspectRatio: number
+    ];
+    onResize: (width: number, height: number) => void;
+    onResizeEnd: () => void;
+}
+
+/**
+ * @internal
+ */
+export declare const resizableContext: {
+    __context__: ResizableContext;
+};
+
+/**
+ * @public
+ */
+declare class ResizableHandle extends LightElement implements Partial<ResizableHandleProps> {
+    private context;
+    /**
+     * @hidden
+     */
+    static properties: {
+        position: {
+            attribute: false;
+        };
+    };
+    position?: ResizableHandleProps['position'];
+    connectedCallback(): void;
+}
+export { ResizableHandle }
+export { ResizableHandle as ResizableHandle_alias_1 }
+
+/**
+ * @internal
+ */
+declare type ResizableHandleProps = {
+    position: 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+};
+export { ResizableHandleProps }
+export { ResizableHandleProps as ResizableHandleProps_alias_1 }
+
+/**
+ * @public
+ */
+declare interface ResizableProps {
+    width?: string | number;
+    height?: string | number;
+    aspectRatio?: number;
+    onSizeChangeStart?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    onSizeChange?: (size: {
+        width: number;
+        height: number;
+    }) => void | {
+        width?: number | string;
+        height?: number | string;
+    };
+    onSizeChangeEnd?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+}
+export { ResizableProps }
+export { ResizableProps as ResizableProps_alias_1 }
+
 /** Rounds a value to the nearest device pixel ratio. */
 export declare function roundByDPR(value: number): number;
 

package/dist/chunk-WEUGKLVB.js

@@ -0,0 +1,9 @@
+// src/components/resizable/context.ts
+import { createContext } from "@lit/context";
+var resizableContext = createContext(
+  "prosekit-resizable-context"
+);
+
+export {
+  resizableContext
+};

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

@@ -10,7 +10,7 @@ import "@prosekit/core";
 
 // src/components/inline-popover/controller.ts
 import { defineUpdateHandler } from "@prosekit/core";
-import "lit";
+import { trackDismissableElement } from "@zag-js/dismissable";
 
 // src/components/inline-popover/helpers.ts
 import { isNodeSelection, isTextSelection } from "@prosekit/core";
@@ -47,7 +47,7 @@ function getDomRange() {
 var InlinePopoverController = class {
   constructor(host) {
     this.host = host;
-    this.mouseHovering = false;
+    this.interacting = false;
     this.host.addController(this);
   }
   setEditor(editor) {
@@ -59,19 +59,21 @@ var InlinePopoverController = class {
   }
   hostConnected() {
     var _a;
-    const handleMouseDown = () => {
-      this.mouseHovering = true;
+    const handlePointerDown = () => {
+      this.interacting = true;
     };
-    const handleMouseUp = () => {
-      this.mouseHovering = false;
-      this.update();
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    document.addEventListener("mouseup", handleMouseUp);
+    this.host.addEventListener("pointerdown", handlePointerDown);
+    const cleanupDismissable = trackDismissableElement(this.host, {
+      defer: true,
+      pointerBlocking: false,
+      onDismiss: () => {
+        this.interacting = false;
+      }
+    });
     (_a = this.cleanupEventListener) == null ? void 0 : _a.call(this);
     this.cleanupEventListener = () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("mouseup", handleMouseUp);
+      this.host.removeEventListener("pointerdown", handlePointerDown);
+      cleanupDismissable();
     };
   }
   hostDisconnected() {
@@ -83,7 +85,7 @@ var InlinePopoverController = class {
   }
   update() {
     const editor = this.editor;
-    if (!editor || this.mouseHovering) {
+    if (!editor || this.interacting) {
       return;
     }
     const reference = getVirtualSelectionElement(editor.view);

package/dist/prosekit-lit-resizable-handle.d.ts

@@ -0,0 +1,3 @@
+export { ResizableHandle_alias_1 as ResizableHandle } from './_tsup-dts-rollup';
+export { ResizableHandleProps_alias_1 as ResizableHandleProps } from './_tsup-dts-rollup';
+export { propNames_alias_17 as propNames } from './_tsup-dts-rollup';

package/dist/prosekit-lit-resizable-handle.js

@@ -0,0 +1,159 @@
+import {
+  resizableContext
+} from "./chunk-WEUGKLVB.js";
+import {
+  LightElement,
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
+
+// src/components/resizable-handle/component.ts
+import { ContextConsumer } from "@lit/context";
+
+// src/utils/is-finite-positive-number.ts
+function isFinitePositiveNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+
+// src/components/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-handle/component.ts
+var propNames = [];
+var ResizableHandle = class extends LightElement {
+  constructor() {
+    super(...arguments);
+    this.context = new ContextConsumer(this, {
+      context: resizableContext
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    let startX = 0;
+    let startY = 0;
+    let width = 0;
+    let height = 0;
+    let aspectRatio = 1;
+    const handlePointerMove = (event) => {
+      var _a;
+      event.preventDefault();
+      const dx = event.x - startX;
+      const dy = event.y - startY;
+      const [w, h] = calcResize(
+        this.position || "bottom-right",
+        width,
+        height,
+        dx,
+        dy,
+        aspectRatio
+      );
+      (_a = this.context.value) == null ? void 0 : _a.onResize(w, h);
+    };
+    const handlePointerDown = (event) => {
+      var _a;
+      event.preventDefault();
+      startX = event.x;
+      startY = event.y;
+      const size = (_a = this.context.value) == null ? void 0 : _a.onResizeStart();
+      if (size) {
+        ;
+        [width, height, aspectRatio] = size;
+      }
+      this.ownerDocument.addEventListener("pointermove", handlePointerMove);
+      this.ownerDocument.addEventListener("pointerup", handlePointerUp);
+    };
+    const handlePointerUp = (event) => {
+      var _a;
+      event.preventDefault();
+      (_a = this.context.value) == null ? void 0 : _a.onResizeEnd();
+      this.ownerDocument.removeEventListener("pointermove", handlePointerMove);
+      this.ownerDocument.removeEventListener("pointerup", handlePointerUp);
+    };
+    this.addEventListener("pointerdown", handlePointerDown);
+  }
+};
+/**
+ * @hidden
+ */
+ResizableHandle.properties = {
+  position: { attribute: false }
+};
+defineCustomElement("prosekit-resizable-handle", ResizableHandle);
+export {
+  ResizableHandle,
+  propNames
+};

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

@@ -0,0 +1,3 @@
+export { Resizable_alias_1 as Resizable } from './_tsup-dts-rollup';
+export { propNames_alias_15 as propNames } from './_tsup-dts-rollup';
+export { ResizableProps_alias_1 as ResizableProps } from './_tsup-dts-rollup';

package/dist/prosekit-lit-resizable.js

@@ -0,0 +1,110 @@
+import {
+  resizableContext
+} from "./chunk-WEUGKLVB.js";
+import {
+  LightElement,
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
+
+// src/components/resizable/component.ts
+import { ContextProvider } from "@lit/context";
+var propNames = [
+  "width",
+  "height",
+  "aspectRatio",
+  "onSizeChangeStart",
+  "onSizeChange",
+  "onSizeChangeEnd"
+];
+var Resizable = class extends LightElement {
+  /**
+   * @hidden
+   */
+  constructor() {
+    super();
+    this.startWidth = 0;
+    this.startHeight = 0;
+    new ContextProvider(this, {
+      context: resizableContext,
+      initialValue: {
+        onResizeStart: () => this.handleResizeStart(),
+        onResize: (w, h) => this.handleResize(w, h),
+        onResizeEnd: () => this.handleResizeEnd()
+      }
+    });
+  }
+  handleResizeStart() {
+    var _a, _b;
+    const { width, height } = this.getBoundingClientRect();
+    this.startWidth = width;
+    this.startHeight = height;
+    (_a = this.onSizeChangeStart) == null ? void 0 : _a.call(this, { width, height });
+    this.resizing = true;
+    return [width, height, (_b = this.aspectRatio) != null ? _b : width / height];
+  }
+  handleResize(width, height) {
+    var _a, _b, _c;
+    const output = (_a = this.onSizeChange) == null ? void 0 : _a.call(this, { width, height });
+    this.width = (_b = output == null ? void 0 : output.width) != null ? _b : width;
+    this.height = (_c = output == null ? void 0 : output.height) != null ? _c : height;
+  }
+  handleResizeEnd() {
+    var _a;
+    const { width, height } = this.getBoundingClientRect();
+    this.resizing = false;
+    (_a = this.onSizeChangeEnd) == null ? void 0 : _a.call(this, { width, height });
+  }
+  updateStyle() {
+    const w = this.width;
+    const h = this.height;
+    const r = this.aspectRatio;
+    if (w != null && w !== "" && Number.isFinite(w)) {
+      this.style.width = typeof w === "number" ? `${w}px` : w;
+    } else {
+      this.style.width = "";
+    }
+    if (h != null && h !== "" && Number.isFinite(h)) {
+      this.style.height = typeof h === "number" ? `${h}px` : h;
+    } else {
+      this.style.height = "";
+    }
+    if (r && Number.isFinite(r)) {
+      this.style.aspectRatio = `${r}`;
+      if (this.style.width && this.startWidth >= this.startHeight && r >= 1) {
+        this.style.height = "auto";
+      } else if (this.style.height && this.startWidth <= this.startHeight && r <= 1) {
+        this.style.width = "auto";
+      }
+    }
+  }
+  /**
+   * @hidden
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateStyle();
+  }
+  /**
+   * @hidden
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateStyle();
+  }
+};
+/**
+ * @hidden
+ */
+Resizable.properties = {
+  width: { attribute: false },
+  height: { attribute: false },
+  aspectRatio: { attribute: false },
+  onResize: { attribute: false },
+  onResizeEnd: { attribute: false },
+  resizing: { attribute: "data-resizing", type: Boolean, reflect: true }
+};
+defineCustomElement("prosekit-resizable", Resizable);
+export {
+  Resizable,
+  propNames
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -79,26 +79,37 @@
       "types": "./dist/prosekit-lit-popover.d.ts",
       "import": "./dist/prosekit-lit-popover.js",
       "default": "./dist/prosekit-lit-popover.js"
+    },
+    "./resizable": {
+      "types": "./dist/prosekit-lit-resizable.d.ts",
+      "import": "./dist/prosekit-lit-resizable.js",
+      "default": "./dist/prosekit-lit-resizable.js"
+    },
+    "./resizable-handle": {
+      "types": "./dist/prosekit-lit-resizable-handle.d.ts",
+      "import": "./dist/prosekit-lit-resizable-handle.js",
+      "default": "./dist/prosekit-lit-resizable-handle.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
+    "@floating-ui/dom": "^1.5.4",
     "@lit/context": "^1.1.0",
-    "@prosekit/core": "^0.2.2",
-    "@prosekit/extensions": "^0.2.1",
+    "@prosekit/core": "^0.2.4",
+    "@prosekit/extensions": "^0.2.3",
     "@prosekit/pm": "^0.1.1",
     "@superhuman/command-score": "^0.5.0",
-    "lit": "^3.1.0"
+    "@zag-js/dismissable": "^0.32.0",
+    "lit": "^3.1.1"
   },
   "devDependencies": {
     "@prosekit/dev": "*",
     "minify-literals": "^1.0.8",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^1.1.1"
+    "vitest": "^1.1.3"
   },
   "scripts": {
     "build:tsup": "tsup",
@@ -139,6 +150,12 @@
       ],
       "popover": [
         "./dist/prosekit-lit-popover.d.ts"
+      ],
+      "resizable": [
+        "./dist/prosekit-lit-resizable.d.ts"
+      ],
+      "resizable-handle": [
+        "./dist/prosekit-lit-resizable-handle.d.ts"
       ]
     }
   }