@prosekit/lit 0.0.22 → 0.0.23

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

@@ -3,6 +3,7 @@ import { CommandArgs } from '@prosekit/core';
 import { ComputePositionConfig } from '@floating-ui/dom';
 import { CSSResult } from 'lit';
 import { Editor } from '@prosekit/core';
+import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { ExtensionTyping } from '@prosekit/core';
 import { Keymap } from '@prosekit/core';
@@ -255,8 +256,13 @@ export declare const default_alias_1: UserProjectConfigExport;
  */
 export declare const defaultPopoverOptions: PopoverOptions;
 
+/**
+ * Default popover options.
+ */
 export declare const defaultPopoverOptions_alias_1: PopoverOptions;
 
+export declare const defaultPopoverOptions_alias_2: PopoverOptions;
+
 export declare function defaultQueryBuilder(match: RegExpExecArray): string;
 
 /**
@@ -272,6 +278,40 @@ export declare function defineCodeBlockSelect(options: {
     onDismiss: () => void;
 }): Extension<ExtensionTyping<string, string, CommandArgs>>;
 
+export declare function getVirtualSelectionElement(view: EditorView): Range | undefined;
+
+export declare class InlinePopover extends Popover implements Partial<InlinePopoverProps> {
+    /** @hidden */
+    private controller;
+    editor?: Editor;
+    popoverOptions: PopoverOptions;
+    constructor();
+    /** @hidden */
+    willUpdate(): void;
+    /** @hidden */
+    hide(): void;
+}
+
+export declare class InlinePopoverController implements ReactiveController {
+    private host;
+    reference?: VirtualElement;
+    private editor?;
+    private cleanupExtension?;
+    private cleanupEventListener?;
+    private mouseHovering;
+    constructor(host: ReactiveControllerHost);
+    setEditor(editor: Editor): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private update;
+    private defineExtension;
+}
+
+export declare interface InlinePopoverProps {
+    editor: Editor;
+    popoverOptions?: PopoverOptions;
+}
+
 export declare function isAutocompleteItem(element?: Element | null): element is AutocompleteItem;
 
 export declare function isAutocompleteList(element?: Element | null): element is AutocompleteList;
@@ -361,6 +401,19 @@ export declare class Popover extends LightElement implements Partial<PopoverProp
      * the Floating UI documentation. This property is only used when the `autoUpdate` property is set to `true`.
      */
     autoUpdateOptions?: AutoUpdateOptions;
+    /**
+     * Controls whether the popover should be dismissed based on user interaction.
+     *
+     * Available options:
+     *
+     * - "off": The popover is not dismissed.
+     * - "on": The popover is dismissed when the user clicks outside of the popover or presses the escape key.
+     * - "click": The popover is dismissed when the user clicks outside of the popover.
+     * - "escape": The popover is dismissed when the user presses the escape key.
+     *
+     * @default "on"
+     */
+    dismiss: string;
     /** @hidden */
     private disposeAutoUpdate?;
     /** @hidden */
@@ -394,6 +447,7 @@ declare type PopoverOptions = ComputePositionConfig;
 export { PopoverOptions }
 export { PopoverOptions as PopoverOptions_alias_1 }
 export { PopoverOptions as PopoverOptions_alias_2 }
+export { PopoverOptions as PopoverOptions_alias_3 }
 
 export declare interface PopoverProps {
     active: boolean;
@@ -421,7 +475,9 @@ declare const propNames_5: never[];
 export { propNames_5 as propNames_alias_11 }
 export { propNames_5 as propNames_alias_12 }
 
-export declare const propNames_alias_13: readonly ["active", "reference", "options", "autoUpdate", "autoUpdateOptions"];
+export declare const propNames_alias_13: readonly ["editor", "popoverOptions"];
+
+export declare const propNames_alias_14: readonly ["active", "reference", "options", "autoUpdate", "autoUpdateOptions"];
 
 export declare const propNames_alias_5: readonly ["editor", "regex", "popoverOptions"];
 

package/dist/{chunk-P336E72L.js → chunk-HNKGDXIJ.js}

@@ -17,7 +17,7 @@ function roundByDPR(value) {
 }
 
 // src/components/popover/default-popover-options.ts
-import { offset, shift } from "@floating-ui/dom";
+import { offset, shift, size } from "@floating-ui/dom";
 
 // src/components/popover/options.ts
 import "@floating-ui/dom";
@@ -25,7 +25,23 @@ import "@floating-ui/dom";
 // src/components/popover/default-popover-options.ts
 var defaultPopoverOptions = {
   placement: "bottom",
-  middleware: [offset(4), shift({ padding: 8 })]
+  middleware: [
+    offset({ mainAxis: 8, crossAxis: 8 }),
+    shift({ padding: 8 }),
+    size({
+      apply: ({ availableWidth, availableHeight, elements }) => {
+        elements.floating.style.setProperty(
+          "--prosekit-popover-available-width",
+          `${Math.floor(availableWidth)}px`
+        );
+        elements.floating.style.setProperty(
+          "--prosekit-popover-available-height",
+          `${Math.floor(availableHeight)}px`
+        );
+      },
+      padding: 8
+    })
+  ]
 };
 
 // src/components/popover/index.ts
@@ -42,6 +58,7 @@ var Popover = class extends LightElement {
     super();
     this.active = false;
     this.autoUpdate = false;
+    this.dismiss = "on";
     this.handleDocumentMouseDown = (event) => {
       const path = event.composedPath();
       if (!path.includes(this)) {
@@ -59,13 +76,15 @@ var Popover = class extends LightElement {
   /** @hidden */
   connectedCallback() {
     super.connectedCallback();
-    const handleMouseDown = this.handleDocumentMouseDown.bind(this);
-    const handleKeyDown = this.handleDocumentKeyDown.bind(this);
-    document.addEventListener("mousedown", handleMouseDown);
-    document.addEventListener("keydown", handleKeyDown);
+    const clickEnabled = this.dismiss === "on" || this.dismiss === "click";
+    const escapeEnabled = this.dismiss === "on" || this.dismiss === "escape";
+    const handleMouseDown = clickEnabled ? this.handleDocumentMouseDown.bind(this) : null;
+    const handleKeyDown = escapeEnabled ? this.handleDocumentKeyDown.bind(this) : null;
+    handleMouseDown && document.addEventListener("mousedown", handleMouseDown);
+    handleKeyDown && document.addEventListener("keydown", handleKeyDown);
     this.disposeEventListeners = () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("keydown", handleKeyDown);
+      handleMouseDown && document.removeEventListener("mousedown", handleMouseDown);
+      handleKeyDown && document.removeEventListener("keydown", handleKeyDown);
     };
   }
   /** @hidden */
@@ -112,14 +131,18 @@ var Popover = class extends LightElement {
     if (!this.active)
       return;
     this.setHidden(false);
-    this.style.position = (_b = (_a = this.options) == null ? void 0 : _a.strategy) != null ? _b : "absolute";
+    this.style.setProperty("top", "0");
+    this.style.setProperty("left", "0");
+    this.style.setProperty("position", (_b = (_a = this.options) == null ? void 0 : _a.strategy) != null ? _b : "absolute");
     const options = (_c = this.options) != null ? _c : defaultPopoverOptions;
     const computed = await computePosition(reference, this, options);
     const { x, y, strategy } = computed != null ? computed : { x: 0, y: 0, strategy: "absolute" };
-    this.style.top = "0";
-    this.style.left = "0";
-    this.style.position = strategy;
-    this.style.transform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
+    this.style.setProperty("opacity", "1");
+    this.style.setProperty("position", strategy);
+    this.style.setProperty(
+      "transform",
+      `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`
+    );
   }
   /** @hidden */
   hide() {
@@ -144,6 +167,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Object })
 ], Popover.prototype, "autoUpdateOptions", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true
+  })
+], Popover.prototype, "dismiss", 2);
 Popover = __decorateClass([
   customElement("prosekit-popover")
 ], Popover);

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

@@ -6,7 +6,7 @@ import "./chunk-6P3YKUWI.js";
 import "./chunk-PCXKL6TA.js";
 import {
   Popover
-} from "./chunk-P336E72L.js";
+} from "./chunk-HNKGDXIJ.js";
 import {
   __decorateClass
 } from "./chunk-ZN7DMIEB.js";
@@ -123,24 +123,14 @@ var defaultDetectOverflowOptions = {
 var defaultPopoverOptions = {
   placement: "bottom-end",
   middleware: [
+    // Use the text caret as the reference point
+    inline(),
     offset(({ rects }) => ({
       // Put the popover at the bottom right corner
       alignmentAxis: -rects.floating.width,
       // Move down the popover by 4px
       mainAxis: 4
     })),
-    size({
-      apply: ({ availableHeight, elements }) => {
-        const style = {
-          // Minimum acceptable height is 100px.
-          // `flip` will then take over.
-          maxHeight: `${Math.max(100, availableHeight)}px`,
-          overflowY: "auto"
-        };
-        Object.assign(elements.floating.style, style);
-      },
-      ...defaultDetectOverflowOptions
-    }),
     // Flip the popover to the top if it's overflowing the viewport
     flip({
       fallbackStrategy: "initialPlacement",
@@ -148,11 +138,22 @@ var defaultPopoverOptions = {
       crossAxis: false,
       ...defaultDetectOverflowOptions
     }),
-    shift({
+    size({
+      apply: ({ availableWidth, availableHeight, elements }) => {
+        elements.floating.style.setProperty(
+          "--prosekit-popover-available-width",
+          `${Math.floor(availableWidth)}px`
+        );
+        elements.floating.style.setProperty(
+          "--prosekit-popover-available-height",
+          `${Math.floor(availableHeight)}px`
+        );
+      },
       ...defaultDetectOverflowOptions
     }),
-    // Use the text caret as the reference point
-    inline()
+    shift({
+      ...defaultDetectOverflowOptions
+    })
   ]
 };
 

package/dist/prosekit-lit-code-block-popover.js

@@ -1,6 +1,6 @@
 import {
   Popover
-} from "./chunk-P336E72L.js";
+} from "./chunk-HNKGDXIJ.js";
 import {
   __decorateClass
 } from "./chunk-ZN7DMIEB.js";

package/dist/prosekit-lit-combo-box.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-PCXKL6TA.js";
 import {
   Popover
-} from "./chunk-P336E72L.js";
+} from "./chunk-HNKGDXIJ.js";
 import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";

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

@@ -0,0 +1,4 @@
+export { PopoverOptions_alias_1 as PopoverOptions } from './_tsup-dts-rollup';
+export { propNames_alias_13 as propNames } from './_tsup-dts-rollup';
+export { InlinePopoverProps } from './_tsup-dts-rollup';
+export { InlinePopover } from './_tsup-dts-rollup';

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

@@ -0,0 +1,155 @@
+import {
+  Popover
+} from "./chunk-HNKGDXIJ.js";
+import {
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
+
+// src/components/inline-popover/index.ts
+import "@prosekit/core";
+import { customElement, property } from "lit/decorators.js";
+
+// src/components/inline-popover/controller.ts
+import { defineEventHandler } from "@prosekit/core";
+import "lit";
+
+// src/components/inline-popover/helpers.ts
+import { isTextSelection } from "@prosekit/core";
+function getVirtualSelectionElement(view) {
+  if (typeof window === "undefined" || view.isDestroyed) {
+    return;
+  }
+  const selection = view.state.selection;
+  if (selection.empty && !isTextSelection(selection)) {
+    return;
+  }
+  return getDomRange();
+}
+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;
+}
+
+// src/components/inline-popover/controller.ts
+var InlinePopoverController = class {
+  constructor(host) {
+    this.host = host;
+    this.mouseHovering = false;
+    this.host.addController(this);
+  }
+  setEditor(editor) {
+    if (this.editor !== editor) {
+      this.editor = editor;
+      this.defineExtension();
+      this.host.requestUpdate();
+    }
+  }
+  hostConnected() {
+    var _a;
+    const handleMouseDown = () => {
+      this.mouseHovering = true;
+    };
+    const handleMouseUp = () => {
+      this.mouseHovering = false;
+      this.update();
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    (_a = this.cleanupEventListener) == null ? void 0 : _a.call(this);
+    this.cleanupEventListener = () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }
+  hostDisconnected() {
+    var _a, _b;
+    (_a = this.cleanupExtension) == null ? void 0 : _a.call(this);
+    this.cleanupExtension = void 0;
+    (_b = this.cleanupEventListener) == null ? void 0 : _b.call(this);
+    this.cleanupEventListener = void 0;
+  }
+  update() {
+    const editor = this.editor;
+    if (!editor || this.mouseHovering) {
+      return;
+    }
+    const reference = getVirtualSelectionElement(editor.view);
+    if (this.reference !== reference) {
+      this.reference = reference;
+      this.host.requestUpdate();
+    }
+  }
+  defineExtension() {
+    var _a;
+    const editor = this.editor;
+    if (!editor) {
+      return;
+    }
+    const extension = defineEventHandler({ update: () => this.update() });
+    (_a = this.cleanupExtension) == null ? void 0 : _a.call(this);
+    this.cleanupExtension = editor.use(extension);
+  }
+};
+
+// src/components/inline-popover/default-popover-options.ts
+import { inline, offset, shift } from "@floating-ui/dom";
+var defaultPopoverOptions = {
+  placement: "top",
+  strategy: "absolute",
+  middleware: [
+    inline(),
+    offset(8),
+    shift({ mainAxis: true, crossAxis: true, padding: 8 })
+  ]
+};
+
+// src/components/inline-popover/index.ts
+var propNames = ["editor", "popoverOptions"];
+var InlinePopover = class extends Popover {
+  constructor() {
+    super();
+    /** @hidden */
+    this.controller = new InlinePopoverController(this);
+    this.popoverOptions = defaultPopoverOptions;
+    this.dismiss = "escape";
+  }
+  /** @hidden */
+  willUpdate() {
+    var _a, _b;
+    if (this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    this.active = !!((_a = this.controller) == null ? void 0 : _a.reference);
+    this.reference = (_b = this.controller.reference) != null ? _b : void 0;
+    this.options = this.popoverOptions;
+  }
+  /** @hidden */
+  hide() {
+    var _a;
+    super.hide();
+    if ((_a = this.controller) == null ? void 0 : _a.reference) {
+      this.controller.reference = void 0;
+      this.reference = void 0;
+    }
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], InlinePopover.prototype, "editor", 2);
+__decorateClass([
+  property({ attribute: false })
+], InlinePopover.prototype, "popoverOptions", 2);
+InlinePopover = __decorateClass([
+  customElement("prosekit-inline-popover")
+], InlinePopover);
+export {
+  InlinePopover,
+  propNames
+};

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

@@ -1,5 +1,5 @@
 export { AutoUpdateOptions } from './_tsup-dts-rollup';
-export { PopoverOptions_alias_1 as PopoverOptions } from './_tsup-dts-rollup';
-export { propNames_alias_13 as propNames } from './_tsup-dts-rollup';
+export { PopoverOptions_alias_2 as PopoverOptions } from './_tsup-dts-rollup';
+export { propNames_alias_14 as propNames } from './_tsup-dts-rollup';
 export { PopoverProps } from './_tsup-dts-rollup';
 export { Popover } from './_tsup-dts-rollup';

package/dist/prosekit-lit-popover.js

@@ -1,7 +1,7 @@
 import {
   Popover,
   propNames
-} from "./chunk-P336E72L.js";
+} from "./chunk-HNKGDXIJ.js";
 import "./chunk-ZN7DMIEB.js";
 export {
   Popover,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -75,6 +75,11 @@
       "import": "./dist/prosekit-lit-combo-box-list.js",
       "default": "./dist/prosekit-lit-combo-box-list.js"
     },
+    "./inline-popover": {
+      "types": "./dist/prosekit-lit-inline-popover.d.ts",
+      "import": "./dist/prosekit-lit-inline-popover.js",
+      "default": "./dist/prosekit-lit-inline-popover.js"
+    },
     "./popover": {
       "types": "./dist/prosekit-lit-popover.d.ts",
       "import": "./dist/prosekit-lit-popover.js",
@@ -87,8 +92,8 @@
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
     "@lit/context": "^1.0.1",
-    "@prosekit/core": "^0.0.18",
-    "@prosekit/extensions": "^0.0.20",
+    "@prosekit/core": "^0.0.19",
+    "@prosekit/extensions": "^0.0.21",
     "@prosekit/pm": "^0.0.7",
     "@superhuman/command-score": "^0.5.0",
     "lit": "^3.0.2"
@@ -138,6 +143,9 @@
       "combo-box-list": [
         "./dist/prosekit-lit-combo-box-list.d.ts"
       ],
+      "inline-popover": [
+        "./dist/prosekit-lit-inline-popover.d.ts"
+      ],
       "popover": [
         "./dist/prosekit-lit-popover.d.ts"
       ]