@prosekit/lit 0.1.3 → 0.1.5

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-WWRKI6AU.js";
+import "./chunk-MLUELLVA.js";
+import "./chunk-5CI65R73.js";
 import {
-  Popover
-} from "./chunk-7WLKD2U6.js";
-import "./chunk-IDDQA3VV.js";
+  Popover,
+  boundary
+} from "./chunk-I2VPMW75.js";
+import "./chunk-GZRUCYLP.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

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

@@ -3,38 +3,52 @@ import {
 } from "./chunk-C4MW43I4.js";
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/combo-box-input/index.ts
-import { consume } from "@lit/context";
+import { ContextConsumer } from "@lit/context";
 import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
 var propNames = ["placeholder"];
 var ComboBoxInput = class extends LightElement {
   constructor() {
     super(...arguments);
     this.placeholder = "";
-    this.comboBoxContext = null;
+    this.comboBoxContext = new ContextConsumer(this, {
+      context: comboBoxContext,
+      subscribe: true
+    });
     this.visible = false;
   }
   handleKeydown(event) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (event.code === "ArrowUp") {
-      (_b = (_a = this.comboBoxContext) == null ? void 0 : _a.listManager) == null ? void 0 : _b.handleArrowUp();
-    } else if (event.code === "ArrowDown") {
-      (_d = (_c = this.comboBoxContext) == null ? void 0 : _c.listManager) == null ? void 0 : _d.handleArrowDown();
-    } else if (event.code === "Escape") {
-      (_f = (_e = this.comboBoxContext) == null ? void 0 : _e.listManager) == null ? void 0 : _f.handleEscape();
-    } else if (event.code === "Enter") {
-      (_h = (_g = this.comboBoxContext) == null ? void 0 : _g.listManager) == null ? void 0 : _h.handleEnter();
+    switch (event.code) {
+      case "ArrowUp":
+        (_b = (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager) == null ? void 0 : _b.handleArrowUp();
+        event.preventDefault();
+        return;
+      case "ArrowDown":
+        (_d = (_c = this.comboBoxContext.value) == null ? void 0 : _c.listManager) == null ? void 0 : _d.handleArrowDown();
+        event.preventDefault();
+        return;
+      case "Escape":
+        (_f = (_e = this.comboBoxContext.value) == null ? void 0 : _e.listManager) == null ? void 0 : _f.handleEscape();
+        event.preventDefault();
+        return;
+      case "Enter":
+        (_h = (_g = this.comboBoxContext.value) == null ? void 0 : _g.listManager) == null ? void 0 : _h.handleEnter();
+        event.preventDefault();
+        return;
     }
   }
   handleInput(event) {
     var _a, _b, _c;
     const value = (_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) != null ? _b : "";
-    (_c = this.comboBoxContext) == null ? void 0 : _c.setInputValue(value);
+    (_c = this.comboBoxContext.value) == null ? void 0 : _c.setInputValue(value);
   }
+  /**
+   * @hidden
+   */
   firstUpdated() {
     const resizeObserver = new ResizeObserver((entries) => {
       const visible = entries.some(
@@ -50,22 +64,21 @@ var ComboBoxInput = class extends LightElement {
     });
     resizeObserver.observe(this);
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   render() {
     var _a, _b;
-    return html`<input placeholder="${this.placeholder}" @keydown="${(event) => this.handleKeydown(event)}" @input="${(event) => this.handleInput(event)}" value="${(_b = (_a = this.comboBoxContext) == null ? void 0 : _a.inputValue) != null ? _b : ""}">`;
+    return html`<input placeholder="${this.placeholder}" @keydown="${(event) => this.handleKeydown(event)}" @input="${(event) => this.handleInput(event)}" .value="${(_b = (_a = this.comboBoxContext.value) == null ? void 0 : _a.inputValue) != null ? _b : ""}">`;
   }
 };
-__decorateClass([
-  property({ attribute: true })
-], ComboBoxInput.prototype, "placeholder", 2);
-__decorateClass([
-  consume({ context: comboBoxContext, subscribe: true }),
-  state()
-], ComboBoxInput.prototype, "comboBoxContext", 2);
-ComboBoxInput = __decorateClass([
-  customElement("prosekit-combo-box-input")
-], ComboBoxInput);
+/**
+ * @hidden
+ */
+ComboBoxInput.properties = {
+  placeholder: { attribute: true }
+};
+defineCustomElement("prosekit-combo-box-input", ComboBoxInput);
 export {
   ComboBoxInput,
   propNames

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

@@ -1,9 +1,9 @@
 import {
   ComboBoxItem,
   propNames
-} from "./chunk-55G7TJI3.js";
+} from "./chunk-7RGGPFFK.js";
 import "./chunk-C4MW43I4.js";
-import "./chunk-O5JP3B34.js";
+import "./chunk-S32IZIQF.js";
 export {
   ComboBoxItem,
   propNames

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

@@ -3,45 +3,41 @@ import {
 } from "./chunk-C4MW43I4.js";
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/combo-box-list/component.ts
-import { consume } from "@lit/context";
-import { customElement, state } from "lit/decorators.js";
+import { ContextConsumer } from "@lit/context";
 var propNames = [];
 var ComboBoxList = class extends LightElement {
   constructor() {
     super(...arguments);
-    this.comboBoxContext = null;
+    this.comboBoxContext = new ContextConsumer(this, {
+      context: comboBoxContext,
+      subscribe: true
+    });
   }
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("mousemove", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseMove(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleMouseMove(event);
     });
     this.addEventListener("mouseover", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseOver(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleMouseOver(event);
     });
     this.addEventListener("mousedown", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseDown(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleMouseDown(event);
     });
     this.addEventListener("click", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleClick(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleClick(event);
     });
   }
 };
-__decorateClass([
-  consume({ context: comboBoxContext, subscribe: true }),
-  state()
-], ComboBoxList.prototype, "comboBoxContext", 2);
-ComboBoxList = __decorateClass([
-  customElement("prosekit-combo-box-list")
-], ComboBoxList);
+defineCustomElement("prosekit-combo-box-list", ComboBoxList);
 export {
   ComboBoxList,
   propNames

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

@@ -1,20 +1,19 @@
 import {
   Popover
-} from "./chunk-7WLKD2U6.js";
+} from "./chunk-I2VPMW75.js";
 import {
   ListManager
-} from "./chunk-IDDQA3VV.js";
-import "./chunk-55G7TJI3.js";
+} from "./chunk-GZRUCYLP.js";
+import "./chunk-7RGGPFFK.js";
 import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
 import {
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/combo-box/index.ts
-import { provide } from "@lit/context";
-import { customElement, property, state } from "lit/decorators.js";
+import { ContextProvider } from "@lit/context";
 
 // src/components/combo-box-item/helpers.ts
 function isComboBoxItem(element) {
@@ -46,10 +45,10 @@ var ComboBox = class extends Popover {
       },
       getSelectedValue: () => {
         var _a;
-        return ((_a = this.context.selectedValue) != null ? _a : "").trim();
+        return ((_a = this.getContext().selectedValue) != null ? _a : "").trim();
       },
-      setSelectedValue: (value) => {
-        return this.context.setSelectedValue(value);
+      setSelectedValue: (value, reason) => {
+        return this.setSelectedValue(value, reason);
       },
       getItemValue: (item) => {
         var _a;
@@ -60,50 +59,67 @@ var ComboBox = class extends Popover {
         return true;
       },
       onDismiss: () => {
-        var _a;
-        (_a = this.onDismiss) == null ? void 0 : _a.call(this);
+        this.hide();
       },
       onSelect: (item) => {
-        var _a, _b;
-        this.context.setSelectedValue("");
-        this.context.setInputValue("");
+        var _a;
+        this.setSelectedValue("", "keyboard");
         (_a = item == null ? void 0 : item.onSelect) == null ? void 0 : _a.call(item);
-        (_b = this.onDismiss) == null ? void 0 : _b.call(this);
+        this.hide();
+      }
+    });
+    this.context = new ContextProvider(this, {
+      context: comboBoxContext,
+      initialValue: {
+        inputValue: "",
+        setInputValue: (inputValue) => {
+          this.setInputValue(inputValue);
+        },
+        selectedValue: "",
+        selectedReason: "keyboard",
+        listManager: this.listManager
       }
     });
-    this.context = {
-      inputValue: "",
-      setInputValue: (inputValue) => {
-        if (this.context.inputValue === inputValue) {
-          return;
-        }
-        this.context = { ...this.context, inputValue };
-      },
-      selectedValue: "",
-      setSelectedValue: (selectedValue) => {
-        if (this.context.selectedValue === selectedValue) {
-          return;
-        }
-        this.context = { ...this.context, selectedValue };
-      },
-      listManager: this.listManager
-    };
+  }
+  /**
+   * @hidden
+   */
+  hide() {
+    var _a;
+    super.hide();
+    this.setInputValue("");
+    (_a = this.onDismiss) == null ? void 0 : _a.call(this);
+  }
+  getContext() {
+    return this.context.value;
+  }
+  setInputValue(inputValue) {
+    const context = this.context.value;
+    if (context.inputValue === inputValue) {
+      return;
+    }
+    this.context.setValue({ ...context, inputValue });
+  }
+  setSelectedValue(selectedValue, selectedReason) {
+    const context = this.context.value;
+    if (context.selectedValue === selectedValue) {
+      return;
+    }
+    this.context.setValue({ ...context, selectedValue, selectedReason });
   }
   get items() {
-    const items = this.querySelectorAll("\u220Fprosekit-combo-box-item");
+    const items = this.querySelectorAll("prosekit-combo-box-item");
     return Array.from(items).filter(isComboBoxItem);
   }
 };
-__decorateClass([
-  property({ attribute: false })
-], ComboBox.prototype, "onDismiss", 2);
-__decorateClass([
-  provide({ context: comboBoxContext }),
-  state()
-], ComboBox.prototype, "context", 2);
-ComboBox = __decorateClass([
-  customElement("prosekit-combo-box")
-], ComboBox);
+/**
+ * @hidden
+ */
+ComboBox.properties = {
+  ...Popover.properties,
+  onDismiss: { attribute: false }
+};
+defineCustomElement("prosekit-combo-box", ComboBox);
 export {
   ComboBox,
   propNames

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

@@ -1,13 +1,12 @@
 import {
   Popover
-} from "./chunk-7WLKD2U6.js";
+} from "./chunk-I2VPMW75.js";
 import {
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/inline-popover/index.ts
 import "@prosekit/core";
-import { customElement, property } from "lit/decorators.js";
 
 // src/components/inline-popover/controller.ts
 import { defineUpdateHandler } from "@prosekit/core";
@@ -113,13 +112,17 @@ var defaultPopoverOptions = {
 var propNames = ["editor", "popoverOptions"];
 var InlinePopover = class extends Popover {
   constructor() {
-    super();
-    /** @hidden */
-    this.controller = new InlinePopoverController(this);
+    super(...arguments);
     this.popoverOptions = defaultPopoverOptions;
     this.dismiss = "escape";
+    /**
+     * @hidden
+     */
+    this.controller = new InlinePopoverController(this);
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   willUpdate() {
     var _a, _b;
     if (this.editor) {
@@ -129,7 +132,9 @@ var InlinePopover = class extends Popover {
     this.reference = (_b = this.controller.reference) != null ? _b : void 0;
     this.options = this.popoverOptions;
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   hide() {
     var _a;
     super.hide();
@@ -139,15 +144,15 @@ var InlinePopover = class extends Popover {
     }
   }
 };
-__decorateClass([
-  property({ attribute: false })
-], InlinePopover.prototype, "editor", 2);
-__decorateClass([
-  property({ attribute: false })
-], InlinePopover.prototype, "popoverOptions", 2);
-InlinePopover = __decorateClass([
-  customElement("prosekit-inline-popover")
-], InlinePopover);
+/**
+ * @hidden
+ */
+InlinePopover.properties = {
+  ...Popover.properties,
+  editor: { attribute: false },
+  popoverOptions: { attribute: false }
+};
+defineCustomElement("prosekit-inline-popover", InlinePopover);
 export {
   InlinePopover,
   propNames

package/dist/prosekit-lit-popover.js

@@ -1,8 +1,8 @@
 import {
   Popover,
   propNames
-} from "./chunk-7WLKD2U6.js";
-import "./chunk-O5JP3B34.js";
+} from "./chunk-I2VPMW75.js";
+import "./chunk-S32IZIQF.js";
 export {
   Popover,
   propNames

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -87,19 +87,19 @@
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
     "@lit/context": "^1.1.0",
-    "@prosekit/core": "^0.1.0",
-    "@prosekit/extensions": "^0.1.0",
-    "@prosekit/pm": "^0.1.0",
+    "@prosekit/core": "^0.1.9",
+    "@prosekit/extensions": "^0.1.6",
+    "@prosekit/pm": "^0.1.1",
     "@superhuman/command-score": "^0.5.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "minify-literals": "^1.0.7",
+    "minify-literals": "^1.0.8",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.2",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.9"
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.4",
+    "vue": "^3.3.12"
   },
   "scripts": {
     "build:tsup": "tsup",

package/dist/chunk-55G7TJI3.js

@@ -1,48 +0,0 @@
-import {
-  comboBoxContext
-} from "./chunk-C4MW43I4.js";
-import {
-  LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
-
-// src/components/combo-box-item/component.ts
-import { consume } from "@lit/context";
-import { customElement, property, state } from "lit/decorators.js";
-var propNames = [];
-var ComboBoxItem = class extends LightElement {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-  }
-  updated() {
-    var _a, _b, _c, _d;
-    const content = ((_a = this.textContent) != null ? _a : "").trim();
-    const query = ((_c = (_b = this.comboBoxContext) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
-    const match = content.toLowerCase().includes(query.toLowerCase());
-    this.selected = match && content === ((_d = this.comboBoxContext) == null ? void 0 : _d.selectedValue);
-    this.ariaSelected = String(this.selected);
-    this.setHidden(!match);
-  }
-};
-__decorateClass([
-  property({ attribute: false })
-], ComboBoxItem.prototype, "editor", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "data-selected" })
-], ComboBoxItem.prototype, "selected", 2);
-__decorateClass([
-  consume({ context: comboBoxContext, subscribe: true }),
-  state({})
-], ComboBoxItem.prototype, "comboBoxContext", 2);
-__decorateClass([
-  property({ attribute: false })
-], ComboBoxItem.prototype, "onSelect", 2);
-ComboBoxItem = __decorateClass([
-  customElement("prosekit-combo-box-item")
-], ComboBoxItem);
-
-export {
-  propNames,
-  ComboBoxItem
-};