@prosekit/lit 0.1.3 → 0.1.4

package/dist/chunk-S32IZIQF.js

@@ -0,0 +1,33 @@
+// src/utils/define-custom-element.ts
+function defineCustomElement(name, constructor, options) {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  customElements.define(name, constructor, options);
+}
+
+// src/components/block-element/index.ts
+import { LitElement } from "lit";
+var LightElement = class extends LitElement {
+  /**
+   * @hidden
+   */
+  constructor() {
+    super();
+  }
+  createRenderRoot() {
+    return this;
+  }
+  setHidden(hidden) {
+    if (this.hidden !== hidden) {
+      this.hidden = hidden;
+      const display = this.style.display;
+      this.style.display = hidden ? "none" : display === "none" ? "" : display;
+    }
+  }
+};
+
+export {
+  defineCustomElement,
+  LightElement
+};

package/dist/{chunk-66YTZIW6.js → chunk-TGJAVLMZ.js}

@@ -1,25 +1,24 @@
 import {
-  commandListContext
-} from "./chunk-6P3YKUWI.js";
+  autocompleteListContext
+} from "./chunk-5CI65R73.js";
 import {
   ListManager
-} from "./chunk-IDDQA3VV.js";
+} from "./chunk-PW3MTUZM.js";
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/autocomplete-popover/context.ts
 import { createContext } from "@lit/context";
-var commandPopoverContext = createContext(
+var autocompletePopoverContext = createContext(
   "prosekit-autocomplete-popover-context"
 );
 
 // src/components/autocomplete-list/component.ts
-import { consume, provide } from "@lit/context";
+import { ContextConsumer, ContextProvider } from "@lit/context";
 import "@prosekit/core";
 import "lit";
-import { customElement, property, state } from "lit/decorators.js";
 
 // src/utils/command-score.ts
 import commandScoreModule from "@superhuman/command-score";
@@ -87,41 +86,51 @@ var propNames = ["editor"];
 var AutocompleteList = class extends LightElement {
   constructor() {
     super(...arguments);
-    /** @hidden */
+    /**
+     * @hidden
+     */
     this.listManager = new ListManager({
       getItems: () => this.items,
-      getSelectedValue: () => this.context.selectedValue,
+      getSelectedValue: () => this.context.value.selectedValue,
       setSelectedValue: (value, reason) => this.updateValue(value, reason),
       getItemValue: (item) => item.content,
       queryClosestItem: queryClosestAutocompleteItem,
       getActive: () => this.active,
       onDismiss: () => {
         var _a, _b;
-        return (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleDismiss) == null ? void 0 : _b.call(_a);
+        return (_b = (_a = this.popoverContext.value) == null ? void 0 : _a.handleDismiss) == null ? void 0 : _b.call(_a);
       },
       onSelect: (item) => {
         var _a, _b, _c;
-        (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleSubmit) == null ? void 0 : _b.call(_a);
+        (_b = (_a = this.popoverContext.value) == null ? void 0 : _a.handleSubmit) == null ? void 0 : _b.call(_a);
         (_c = item == null ? void 0 : item.onSelect) == null ? void 0 : _c.call(item);
       }
     });
-    /** @hidden */
+    /**
+     * @hidden
+     */
     this.controller = new AutocompleteListController(this, {
       ArrowUp: () => this.listManager.handleArrowUp(),
       ArrowDown: () => this.listManager.handleArrowDown(),
       Escape: () => this.listManager.handleEscape(),
       Enter: () => this.listManager.handleEnter()
     });
-    this.popoverContext = null;
-    this.context = {
-      scores: /* @__PURE__ */ new Map(),
-      selectedValue: "",
-      selectedReason: "keyboard"
-    };
+    this.popoverContext = new ContextConsumer(this, {
+      context: autocompletePopoverContext,
+      subscribe: true
+    });
+    this.context = new ContextProvider(this, {
+      context: autocompleteListContext,
+      initialValue: {
+        scores: /* @__PURE__ */ new Map(),
+        selectedValue: "",
+        selectedReason: "keyboard"
+      }
+    });
   }
   get active() {
     var _a, _b;
-    return (_b = (_a = this.popoverContext) == null ? void 0 : _a.active) != null ? _b : false;
+    return (_b = (_a = this.popoverContext.value) == null ? void 0 : _a.active) != null ? _b : false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -148,18 +157,21 @@ var AutocompleteList = class extends LightElement {
     this.listManager.selectFirstItem();
   }
   updateValue(selectedValue, selectedReason) {
-    if (this.context.selectedValue === selectedValue) {
+    const context = this.context.value;
+    if (context.selectedValue === selectedValue) {
       return;
     }
-    this.context = { ...this.context, selectedValue, selectedReason };
+    this.context.setValue({ ...context, selectedValue, selectedReason });
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   willUpdate(changedProperties) {
     var _a, _b;
     if (changedProperties.has("editor") && this.editor) {
       this.controller.setEditor(this.editor);
     }
-    const query = (_b = (_a = this.popoverContext) == null ? void 0 : _a.query) != null ? _b : "";
+    const query = (_b = (_a = this.popoverContext.value) == null ? void 0 : _a.query) != null ? _b : "";
     const scores = new Map(
       this.items.map((item) => {
         const content = item.content;
@@ -167,26 +179,20 @@ var AutocompleteList = class extends LightElement {
         return [content, score];
       })
     );
-    this.context = { ...this.context, scores };
+    const context = this.context.value;
+    this.context.setValue({ ...context, scores });
   }
 };
-__decorateClass([
-  property({ attribute: false })
-], AutocompleteList.prototype, "editor", 2);
-__decorateClass([
-  consume({ context: commandPopoverContext, subscribe: true }),
-  state()
-], AutocompleteList.prototype, "popoverContext", 2);
-__decorateClass([
-  provide({ context: commandListContext }),
-  state()
-], AutocompleteList.prototype, "context", 2);
-AutocompleteList = __decorateClass([
-  customElement("prosekit-autocomplete-list")
-], AutocompleteList);
+/**
+ * @hidden
+ */
+AutocompleteList.properties = {
+  editor: { attribute: false }
+};
+defineCustomElement("prosekit-autocomplete-list", AutocompleteList);
 
 export {
-  commandPopoverContext,
+  autocompletePopoverContext,
   propNames,
   AutocompleteList
 };

package/dist/{chunk-7WLKD2U6.js → chunk-Z3PEQ6MW.js}

@@ -1,14 +1,17 @@
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/popover/index.ts
 import {
   autoUpdate,
   computePosition
 } from "@floating-ui/dom";
-import { customElement, property } from "lit/decorators.js";
+
+// src/utils/popover-api.ts
+var popoverAvailable = typeof HTMLElement !== "undefined" && HTMLElement.prototype.hasOwnProperty("popover");
+var boundary = popoverAvailable && typeof document !== "undefined" && document.body || void 0;
 
 // src/utils/round-by-dpr.ts
 function roundByDPR(value) {
@@ -17,17 +20,25 @@ function roundByDPR(value) {
 }
 
 // src/components/popover/default-popover-options.ts
-import { offset, shift, size } from "@floating-ui/dom";
+import {
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
 
 // src/components/popover/options.ts
 import "@floating-ui/dom";
 
 // src/components/popover/default-popover-options.ts
+var defaultDetectOverflowOptions = {
+  padding: 8,
+  boundary
+};
 var defaultPopoverOptions = {
   placement: "bottom",
   middleware: [
     offset({ mainAxis: 8, crossAxis: 8 }),
-    shift({ padding: 8 }),
+    shift({ ...defaultDetectOverflowOptions }),
     size({
       apply: ({ availableWidth, availableHeight, elements }) => {
         elements.floating.style.setProperty(
@@ -39,7 +50,7 @@ var defaultPopoverOptions = {
           `${Math.floor(availableHeight)}px`
         );
       },
-      padding: 8
+      ...defaultDetectOverflowOptions
     })
   ]
 };
@@ -53,11 +64,36 @@ var propNames = [
   "autoUpdateOptions"
 ];
 var Popover = class extends LightElement {
-  /** @hidden */
   constructor() {
-    super();
+    super(...arguments);
+    /**
+     * Controls the visibility of the popover element. When set to `true`, the
+     * popover is displayed and positioned relative to its reference element. When
+     * set to `false`, the popover is hidden and its positioning logic is
+     * deactivated.
+     */
     this.active = false;
+    /**
+     * Controls whether the popover position is automatically updated when the
+     * reference element changes position. When set to `true`, the popover
+     * position is updated automatically. When set to `false`, the popover
+     * position is only updated when the given properties are changed.
+     *
+     * @default false
+     */
     this.autoUpdate = false;
+    /**
+     * 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"
+     */
     this.dismiss = "on";
     this.handleDocumentMouseDown = (event) => {
       const path = event.composedPath();
@@ -73,7 +109,9 @@ var Popover = class extends LightElement {
       }
     };
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   connectedCallback() {
     super.connectedCallback();
     const clickEnabled = this.dismiss === "on" || this.dismiss === "click";
@@ -87,7 +125,9 @@ var Popover = class extends LightElement {
       handleKeyDown && document.removeEventListener("keydown", handleKeyDown);
     };
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   disconnectedCallback() {
     var _a, _b;
     super.disconnectedCallback();
@@ -96,13 +136,22 @@ var Popover = class extends LightElement {
     (_b = this.disposeEventListeners) == null ? void 0 : _b.call(this);
     this.disposeEventListeners = void 0;
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   updated(changedProperties) {
+    var _a;
     super.updated(changedProperties);
+    if (popoverAvailable) {
+      this.popover = "manual";
+      (_a = this.togglePopover) == null ? void 0 : _a.call(this, this.active);
+    }
     this.start();
     this.setHidden(!this.active);
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   start() {
     var _a;
     (_a = this.disposeAutoUpdate) == null ? void 0 : _a.call(this);
@@ -123,7 +172,9 @@ var Popover = class extends LightElement {
       void this.compute();
     }
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   async compute() {
     var _a, _b, _c;
     const reference = this.reference;
@@ -132,6 +183,7 @@ var Popover = class extends LightElement {
     if (!this.active)
       return;
     this.setHidden(false);
+    this.style.setProperty("margin", "0");
     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");
@@ -145,40 +197,28 @@ var Popover = class extends LightElement {
       `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`
     );
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   hide() {
     this.active = false;
   }
 };
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Popover.prototype, "active", 2);
-__decorateClass([
-  property({ attribute: false })
-], Popover.prototype, "reference", 2);
-__decorateClass([
-  property({ attribute: false })
-], Popover.prototype, "options", 2);
-__decorateClass([
-  property({
-    type: Boolean,
-    reflect: true
-  })
-], Popover.prototype, "autoUpdate", 2);
-__decorateClass([
-  property({ type: Object })
-], Popover.prototype, "autoUpdateOptions", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true
-  })
-], Popover.prototype, "dismiss", 2);
-Popover = __decorateClass([
-  customElement("prosekit-popover")
-], Popover);
+/**
+ * @hidden
+ */
+Popover.properties = {
+  active: { type: Boolean, reflect: true },
+  reference: { attribute: false },
+  options: { attribute: false },
+  autoUpdate: { type: Boolean, reflect: true },
+  autoUpdateOptions: { type: Object },
+  dismiss: { type: String, reflect: true }
+};
+defineCustomElement("prosekit-popover", Popover);
 
 export {
+  boundary,
   propNames,
   Popover
 };

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

@@ -1,24 +1,30 @@
 import {
-  commandListContext
-} from "./chunk-6P3YKUWI.js";
+  autocompleteListContext
+} from "./chunk-5CI65R73.js";
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/autocomplete-empty/index.ts
-import { consume } from "@lit/context";
+import { ContextConsumer } from "@lit/context";
 import "lit";
-import { customElement, state } from "lit/decorators.js";
 var propNames = [];
 var AutocompleteEmpty = class extends LightElement {
+  constructor() {
+    super(...arguments);
+    this.listContext = new ContextConsumer(this, {
+      context: autocompleteListContext,
+      subscribe: true
+    });
+  }
   connectedCallback() {
     super.connectedCallback();
     this.role = "option";
   }
   willUpdate(_changedProperties) {
     var _a;
-    const scores = (_a = this.listContext) == null ? void 0 : _a.scores;
+    const scores = (_a = this.listContext.value) == null ? void 0 : _a.scores;
     let hasMatch = false;
     if (scores) {
       for (const score of scores.values()) {
@@ -31,13 +37,7 @@ var AutocompleteEmpty = class extends LightElement {
     this.setHidden(hasMatch);
   }
 };
-__decorateClass([
-  consume({ context: commandListContext, subscribe: true }),
-  state()
-], AutocompleteEmpty.prototype, "listContext", 2);
-AutocompleteEmpty = __decorateClass([
-  customElement("prosekit-autocomplete-empty")
-], AutocompleteEmpty);
+defineCustomElement("prosekit-autocomplete-empty", AutocompleteEmpty);
 export {
   AutocompleteEmpty,
   propNames

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

@@ -1,9 +1,9 @@
 import {
   AutocompleteItem,
   propNames
-} from "./chunk-M6MY5WGM.js";
-import "./chunk-6P3YKUWI.js";
-import "./chunk-O5JP3B34.js";
+} from "./chunk-MLUELLVA.js";
+import "./chunk-5CI65R73.js";
+import "./chunk-S32IZIQF.js";
 export {
   AutocompleteItem,
   propNames

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

@@ -1,11 +1,11 @@
 import {
   AutocompleteList,
   propNames
-} from "./chunk-66YTZIW6.js";
-import "./chunk-M6MY5WGM.js";
-import "./chunk-6P3YKUWI.js";
-import "./chunk-IDDQA3VV.js";
-import "./chunk-O5JP3B34.js";
+} from "./chunk-TGJAVLMZ.js";
+import "./chunk-MLUELLVA.js";
+import "./chunk-5CI65R73.js";
+import "./chunk-PW3MTUZM.js";
+import "./chunk-S32IZIQF.js";
 export {
   AutocompleteList,
   propNames

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

@@ -1,20 +1,20 @@
 import {
-  commandPopoverContext
-} from "./chunk-66YTZIW6.js";
-import "./chunk-M6MY5WGM.js";
-import "./chunk-6P3YKUWI.js";
+  autocompletePopoverContext
+} from "./chunk-TGJAVLMZ.js";
+import "./chunk-MLUELLVA.js";
+import "./chunk-5CI65R73.js";
 import {
-  Popover
-} from "./chunk-7WLKD2U6.js";
-import "./chunk-IDDQA3VV.js";
+  Popover,
+  boundary
+} from "./chunk-Z3PEQ6MW.js";
+import "./chunk-PW3MTUZM.js";
 import {
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/autocomplete-popover/index.ts
-import { provide } from "@lit/context";
+import { ContextProvider } from "@lit/context";
 import "@prosekit/core";
-import { customElement, property, state } from "lit/decorators.js";
 
 // src/components/autocomplete-list/helpers.ts
 function isAutocompleteList(element) {
@@ -114,8 +114,8 @@ import {
   size
 } from "@floating-ui/dom";
 var defaultDetectOverflowOptions = {
-  // Make sure the popover is always at least 8px away from the boundary
-  padding: 8
+  padding: 8,
+  boundary
 };
 var defaultPopoverOptions = {
   // The main axis is the y axis, and we place the popover at the bottom of the
@@ -127,10 +127,10 @@ var defaultPopoverOptions = {
   middleware: [
     // Use the text caret as the reference point
     inline(),
-    offset(() => ({
+    offset({
       // Move down the popover by 4px
       mainAxis: 4
-    })),
+    }),
     // Flip the popover to the top if it's overflowing the viewport
     //
     // When `flipAlignment` is true, which is the default, ensure `flip() `is
@@ -170,40 +170,49 @@ var propNames = ["editor", "regex", "popoverOptions"];
 var AutocompletePopover = class extends Popover {
   constructor() {
     super(...arguments);
-    /** @hidden */
+    /**
+     * @hidden
+     */
     this.controller = new AutocompletePopoverController(
       this,
       this.updateContext.bind(this)
     );
     this.popoverOptions = defaultPopoverOptions;
-    this.context = {
-      active: false,
-      query: "",
-      handleDismiss: () => {
-        var _a, _b;
-        return (_b = (_a = this.controller).handleDismiss) == null ? void 0 : _b.call(_a);
-      },
-      handleSubmit: () => {
-        var _a, _b;
-        return (_b = (_a = this.controller).handleSubmit) == null ? void 0 : _b.call(_a);
+    this.context = new ContextProvider(this, {
+      context: autocompletePopoverContext,
+      initialValue: {
+        active: false,
+        query: "",
+        handleDismiss: () => {
+          var _a, _b;
+          return (_b = (_a = this.controller).handleDismiss) == null ? void 0 : _b.call(_a);
+        },
+        handleSubmit: () => {
+          var _a, _b;
+          return (_b = (_a = this.controller).handleSubmit) == null ? void 0 : _b.call(_a);
+        }
       }
-    };
+    });
   }
   get list() {
     const element = this.querySelector("prosekit-autocomplete-list");
     return isAutocompleteList(element) ? element : null;
   }
   updateContext(query, active) {
-    if (this.context.query === query && this.context.active === active) {
+    const context = this.context.value;
+    if (context.query === query && context.active === active) {
       return;
     }
-    this.context = { ...this.context, query, active };
+    this.context.setValue({ ...context, query, active });
+    this.requestUpdate();
     requestAnimationFrame(() => {
       var _a;
       (_a = this.list) == null ? void 0 : _a.selectFirstItem();
     });
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   willUpdate(changedProperties) {
     var _a, _b;
     super.willUpdate(changedProperties);
@@ -217,7 +226,9 @@ var AutocompletePopover = class extends Popover {
     this.reference = (_b = this.controller.reference) != null ? _b : void 0;
     this.options = this.popoverOptions;
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   hide() {
     var _a;
     super.hide();
@@ -227,25 +238,17 @@ var AutocompletePopover = class extends Popover {
     }
   }
 };
-__decorateClass([
-  property({ attribute: false })
-], AutocompletePopover.prototype, "editor", 2);
-__decorateClass([
-  property({ attribute: false })
-], AutocompletePopover.prototype, "regex", 2);
-__decorateClass([
-  property({ attribute: false })
-], AutocompletePopover.prototype, "popoverOptions", 2);
-__decorateClass([
-  provide({ context: commandPopoverContext }),
-  state()
-], AutocompletePopover.prototype, "context", 2);
-__decorateClass([
-  property({ attribute: false })
-], AutocompletePopover.prototype, "onSelect", 2);
-AutocompletePopover = __decorateClass([
-  customElement("prosekit-autocomplete-popover")
-], AutocompletePopover);
+/**
+ * @hidden
+ */
+AutocompletePopover.properties = {
+  ...Popover.properties,
+  editor: { attribute: false },
+  regex: { attribute: false },
+  popoverOptions: { attribute: false },
+  onSelect: { attribute: false }
+};
+defineCustomElement("prosekit-autocomplete-popover", AutocompletePopover);
 export {
   AutocompletePopover,
   propNames