@prosekit/lit 0.0.9 → 0.0.11

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

@@ -1,137 +1,21 @@
 import {
   commandPopoverContext
-} from "./chunk-HPMQEYGA.js";
-import "./chunk-37EPOFI5.js";
+} from "./chunk-KGZID7N7.js";
+import "./chunk-AWQAU2JR.js";
+import "./chunk-DYEHERSG.js";
+import "./chunk-PCXKL6TA.js";
+import "./chunk-G5KPDHDH.js";
+import "./chunk-TRZW33VF.js";
 import {
   __decorateClass,
   blockComponentStyles
-} from "./chunk-J73E7P6J.js";
-
-// src/components/popover/index.ts
-import {
-  autoUpdate,
-  computePosition
-} from "@floating-ui/dom";
-import {
-  LitElement,
-  html
-} from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-// src/utils/round-by-dpr.ts
-function roundByDPR(value) {
-  const dpr = window.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-
-// src/components/popover/options.ts
-import "@floating-ui/dom";
-
-// src/components/popover/index.ts
-var Popover = class extends LitElement {
-  /** @hidden */
-  constructor() {
-    super();
-    this.active = false;
-    this.autoUpdate = false;
-  }
-  /** @hidden */
-  disconnectedCallback() {
-    this.cleanup();
-  }
-  /** @hidden */
-  updated(changed) {
-    if (!changed.has("computed")) {
-      this.start();
-    }
-  }
-  /** @hidden */
-  start() {
-    this.cleanup();
-    const reference = this.reference;
-    const floating = this.floating;
-    if (!reference)
-      return;
-    if (this.autoUpdate) {
-      this.cleanupAutoUpdate = autoUpdate(
-        reference,
-        floating,
-        () => void this.compute(),
-        this.autoUpdateOptions
-      );
-    } else {
-      void this.compute();
-    }
-  }
-  /** @hidden */
-  async compute() {
-    const reference = this.reference;
-    const floating = this.floating;
-    if (!reference)
-      return;
-    const options = this.options;
-    this.computed = await computePosition(reference, floating, options);
-  }
-  /** @hidden */
-  cleanup() {
-    var _a;
-    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
-    this.cleanupAutoUpdate = void 0;
-  }
-  /** @hidden */
-  render() {
-    var _a;
-    const { x, y, strategy } = (_a = this.computed) != null ? _a : {
-      x: 0,
-      y: 0,
-      strategy: "absolute"
-    };
-    const style = {
-      top: "0",
-      left: "0",
-      position: strategy,
-      transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
-      display: this.active ? void 0 : "none"
-    };
-    return html`<div class="floating" style="${styleMap(style)}"><slot></slot></div>`;
-  }
-};
-/** @hidden */
-Popover.styles = blockComponentStyles;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Popover.prototype, "active", 2);
-__decorateClass([
-  query(".floating")
-], Popover.prototype, "floating", 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([
-  state()
-], Popover.prototype, "computed", 2);
-Popover = __decorateClass([
-  customElement("prosekit-popover")
-], Popover);
+} from "./chunk-3UDA5JEW.js";
 
 // src/components/autocomplete-popover/index.ts
 import { provide } from "@lit-labs/context";
 import "@prosekit/core";
-import { html as html2, LitElement as LitElement2 } from "lit";
-import { customElement as customElement2, property as property2, query as query2, state as state2 } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 
 // src/components/autocomplete-list/helpers.ts
 function isAutocompleteList(element) {
@@ -195,8 +79,8 @@ var AutocompletePopoverController = class {
       if (span) {
         this.reference = span;
       }
-      const query3 = defaultQueryBuilder(options.match);
-      this.onChange(query3 != null ? query3 : "", !!this.reference);
+      const query2 = defaultQueryBuilder(options.match);
+      this.onChange(query2 != null ? query2 : "", !!this.reference);
       this.handleDismiss = options.ignoreMatch;
       this.handleSubmit = options.deleteMatch;
       setTimeout(() => {
@@ -275,7 +159,7 @@ var defaultPopoverOptions = {
 
 // src/components/autocomplete-popover/index.ts
 var propNames = ["editor", "regex", "popoverOptions"];
-var AutocompletePopover = class extends LitElement2 {
+var AutocompletePopover = class extends LitElement {
   constructor() {
     super(...arguments);
     /** @hidden */
@@ -301,11 +185,11 @@ var AutocompletePopover = class extends LitElement2 {
     var _a, _b, _c;
     return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isAutocompleteList)) != null ? _c : null;
   }
-  updateContext(query3, active) {
-    if (this.context.query === query3 && this.context.active === active) {
+  updateContext(query2, active) {
+    if (this.context.query === query2 && this.context.active === active) {
       return;
     }
-    this.context = { ...this.context, query: query3, active };
+    this.context = { ...this.context, query: query2, active };
     requestAnimationFrame(() => {
       var _a;
       (_a = this.list) == null ? void 0 : _a.selectFirstItem();
@@ -328,32 +212,32 @@ var AutocompletePopover = class extends LitElement2 {
   /** @hidden */
   render() {
     var _a;
-    return html2`<prosekit-popover .active="${this.active}" .reference="${(_a = this.controller.reference) != null ? _a : void 0}" .options="${this.popoverOptions}"><slot></slot></prosekit-popover>`;
+    return html`<prosekit-popover .active="${this.active}" .reference="${(_a = this.controller.reference) != null ? _a : void 0}" .options="${this.popoverOptions}"><slot></slot></prosekit-popover>`;
   }
 };
 /** @hidden */
 AutocompletePopover.styles = blockComponentStyles;
 __decorateClass([
-  property2({ attribute: false })
+  property({ attribute: false })
 ], AutocompletePopover.prototype, "editor", 2);
 __decorateClass([
-  property2({ attribute: false })
+  property({ attribute: false })
 ], AutocompletePopover.prototype, "regex", 2);
 __decorateClass([
-  property2({ attribute: false })
+  property({ attribute: false })
 ], AutocompletePopover.prototype, "popoverOptions", 2);
 __decorateClass([
   provide({ context: commandPopoverContext }),
-  state2()
+  state()
 ], AutocompletePopover.prototype, "context", 2);
 __decorateClass([
-  property2({ attribute: false })
+  property({ attribute: false })
 ], AutocompletePopover.prototype, "onSelect", 2);
 __decorateClass([
-  query2("slot")
+  query("slot")
 ], AutocompletePopover.prototype, "defaultSlot", 2);
 AutocompletePopover = __decorateClass([
-  customElement2("prosekit-autocomplete-popover")
+  customElement("prosekit-autocomplete-popover")
 ], AutocompletePopover);
 export {
   AutocompletePopover,

package/dist/prosekit-lit-components-code-block-popover.d.ts

@@ -0,0 +1,3 @@
+export { propNames_alias_6 as propNames } from './_tsup-dts-rollup';
+export { CodeBlockPopoverProps } from './_tsup-dts-rollup';
+export { CodeBlockPopover } from './_tsup-dts-rollup';

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

@@ -0,0 +1,141 @@
+import {
+  Popover
+} from "./chunk-G5KPDHDH.js";
+import "./chunk-TRZW33VF.js";
+import {
+  __decorateClass
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/code-block-popover/index.ts
+import { offset } from "@floating-ui/dom";
+import { customElement, property } from "lit/decorators.js";
+
+// src/components/code-block-popover/controller.ts
+import "@prosekit/core";
+import "lit";
+
+// src/components/code-block-popover/code-block-select.ts
+import { addPlugin } from "@prosekit/core";
+import { ProseMirrorPlugin } from "@prosekit/pm/state";
+function addCodeBlockSelect(options) {
+  let prevState = null;
+  const plugin = new ProseMirrorPlugin({
+    view: () => {
+      return {
+        update: (view) => {
+          const currState = getState(view);
+          if ((prevState == null ? void 0 : prevState.pos) !== (currState == null ? void 0 : currState.pos) || (prevState == null ? void 0 : prevState.dom) !== (currState == null ? void 0 : currState.dom)) {
+            if (currState) {
+              options.onSelect(currState);
+            } else {
+              options.onDismiss();
+            }
+          }
+          prevState = currState;
+        }
+      };
+    }
+  });
+  return addPlugin(plugin);
+}
+function getState(view) {
+  const { $from, $to } = view.state.selection;
+  if ($from.sameParent($to)) {
+    const node = $from.parent;
+    if (isCodeBlock(node)) {
+      const pos = $from.before();
+      const dom = view.nodeDOM(pos);
+      if (dom) {
+        return { pos, node, dom };
+      }
+    }
+  }
+  return null;
+}
+function isCodeBlock(node) {
+  return node.type.spec.code && node.isTextblock;
+}
+
+// src/components/code-block-popover/controller.ts
+var CodeBlockPopoverController = class {
+  constructor(host) {
+    this.host = host;
+    this.reference = null;
+    this.editor = null;
+    this.cleanup = null;
+    this.host.addController(this);
+  }
+  setEditor(editor) {
+    if (this.editor !== editor) {
+      this.editor = editor;
+      this.addExtension();
+      this.host.requestUpdate();
+    }
+  }
+  addExtension() {
+    var _a;
+    const editor = this.editor;
+    if (!editor)
+      return;
+    const extension = addCodeBlockSelect({
+      onSelect: ({ dom }) => {
+        if (this.reference !== dom) {
+          this.reference = dom;
+          this.host.requestUpdate();
+        }
+      },
+      onDismiss: () => {
+        if (this.reference !== null) {
+          this.reference = null;
+          this.host.requestUpdate();
+        }
+      }
+    });
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = editor.use(extension);
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+  }
+};
+
+// src/components/code-block-popover/index.ts
+var propNames = ["editor"];
+var CodeBlockPopover = class extends Popover {
+  constructor() {
+    super(...arguments);
+    /** @hidden */
+    this.controller = new CodeBlockPopoverController(this);
+  }
+  updated() {
+    var _a, _b;
+    if (this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    this.reference = (_b = (_a = this.controller) == null ? void 0 : _a.reference) != null ? _b : void 0;
+    this.active = !!this.reference;
+    this.options = popoverOptions;
+    super.updated();
+  }
+};
+__decorateClass([
+  property({ attribute: false, type: Object })
+], CodeBlockPopover.prototype, "editor", 2);
+CodeBlockPopover = __decorateClass([
+  customElement("prosekit-code-block-popover")
+], CodeBlockPopover);
+var popoverOptions = {
+  placement: "top-start",
+  strategy: "absolute",
+  middleware: [
+    offset((options) => {
+      return -options.rects.floating.height;
+    })
+  ]
+};
+export {
+  CodeBlockPopover,
+  propNames
+};

package/dist/prosekit-lit-components-combo-box-input.d.ts

@@ -0,0 +1,3 @@
+export { propNames_alias_8 as propNames } from './_tsup-dts-rollup';
+export { ComboBoxInputProps } from './_tsup-dts-rollup';
+export { ComboBoxInput } from './_tsup-dts-rollup';

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

@@ -0,0 +1,74 @@
+import {
+  comboBoxContext
+} from "./chunk-HMV7TD6T.js";
+import {
+  LightBlockElement
+} from "./chunk-TRZW33VF.js";
+import {
+  __decorateClass
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/combo-box-input/index.ts
+import { consume } from "@lit-labs/context";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit-html";
+var propNames = ["placeholder"];
+var ComboBoxInput = class extends LightBlockElement {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.comboBoxContext = null;
+    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();
+    }
+  }
+  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);
+  }
+  firstUpdated() {
+    const resizeObserver = new ResizeObserver((entries) => {
+      const visible = entries.some(
+        (entry) => entry.contentRect.width > 0 && entry.contentRect.width > 0
+      );
+      if (this.visible !== visible && visible) {
+        setTimeout(() => {
+          var _a;
+          return (_a = this.querySelector("input")) == null ? void 0 : _a.focus();
+        }, 0);
+      }
+      this.visible = visible;
+    });
+    resizeObserver.observe(this);
+  }
+  /** @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 : ""}">`;
+  }
+};
+__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);
+export {
+  ComboBoxInput,
+  propNames
+};

package/dist/prosekit-lit-components-combo-box-item.d.ts

@@ -0,0 +1,3 @@
+export { ComboBoxItem_alias_1 as ComboBoxItem } from './_tsup-dts-rollup';
+export { ComboBoxItemProps_alias_1 as ComboBoxItemProps } from './_tsup-dts-rollup';
+export { propNames_alias_10 as propNames } from './_tsup-dts-rollup';

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

@@ -0,0 +1,11 @@
+import {
+  ComboBoxItem,
+  propNames
+} from "./chunk-BMDOOASL.js";
+import "./chunk-HMV7TD6T.js";
+import "./chunk-TRZW33VF.js";
+import "./chunk-3UDA5JEW.js";
+export {
+  ComboBoxItem,
+  propNames
+};

package/dist/prosekit-lit-components-combo-box-list.d.ts

@@ -0,0 +1,3 @@
+export { ComboBoxList_alias_1 as ComboBoxList } from './_tsup-dts-rollup';
+export { ComboBoxListProps_alias_1 as ComboBoxListProps } from './_tsup-dts-rollup';
+export { propNames_alias_12 as propNames } from './_tsup-dts-rollup';

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

@@ -0,0 +1,50 @@
+import {
+  comboBoxContext
+} from "./chunk-HMV7TD6T.js";
+import {
+  LightBlockElement
+} from "./chunk-TRZW33VF.js";
+import {
+  __decorateClass
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/combo-box-list/component.ts
+import { consume } from "@lit-labs/context";
+import { customElement, state } from "lit/decorators.js";
+var propNames = [];
+var ComboBoxList = class extends LightBlockElement {
+  constructor() {
+    super(...arguments);
+    this.comboBoxContext = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mousemove", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseMove(event);
+    });
+    this.addEventListener("mouseover", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseOver(event);
+    });
+    this.addEventListener("mousedown", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseDown(event);
+    });
+    this.addEventListener("click", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == 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);
+export {
+  ComboBoxList,
+  propNames
+};

package/dist/prosekit-lit-components-combo-box.d.ts

@@ -0,0 +1,3 @@
+export { propNames_alias_7 as propNames } from './_tsup-dts-rollup';
+export { ComboBoxProps } from './_tsup-dts-rollup';
+export { ComboBox } from './_tsup-dts-rollup';

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

@@ -0,0 +1,111 @@
+import "./chunk-BMDOOASL.js";
+import {
+  ListManager
+} from "./chunk-PCXKL6TA.js";
+import {
+  Popover
+} from "./chunk-G5KPDHDH.js";
+import {
+  comboBoxContext
+} from "./chunk-HMV7TD6T.js";
+import "./chunk-TRZW33VF.js";
+import {
+  __decorateClass
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/combo-box/index.ts
+import { provide } from "@lit-labs/context";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/components/combo-box-item/helpers.ts
+function isComboBoxItem(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-combo-box-item";
+}
+function queryClosestComboBoxItem(element) {
+  if (!element) {
+    return null;
+  }
+  if (isComboBoxItem(element)) {
+    return element;
+  }
+  const item = element.closest("prosekit-combo-box-item");
+  if (isComboBoxItem(item)) {
+    return item;
+  }
+  return null;
+}
+
+// src/components/combo-box/index.ts
+var propNames = ["onDismiss"];
+var ComboBox = class extends Popover {
+  constructor() {
+    super(...arguments);
+    this.listManager = new ListManager({
+      getItems: () => {
+        return this.items;
+      },
+      getSelectedValue: () => {
+        var _a;
+        return ((_a = this.context.selectedValue) != null ? _a : "").trim();
+      },
+      setSelectedValue: (value) => {
+        return this.context.setSelectedValue(value);
+      },
+      getItemValue: (item) => {
+        var _a;
+        return ((_a = item.textContent) != null ? _a : "").trim();
+      },
+      queryClosestItem: queryClosestComboBoxItem,
+      getActive: () => {
+        return true;
+      },
+      onDismiss: () => {
+        var _a;
+        (_a = this.onDismiss) == null ? void 0 : _a.call(this);
+      },
+      onSelect: (item) => {
+        var _a, _b;
+        this.context.setSelectedValue("");
+        this.context.setInputValue("");
+        (_a = item == null ? void 0 : item.onSelect) == null ? void 0 : _a.call(item);
+        (_b = this.onDismiss) == null ? void 0 : _b.call(this);
+      }
+    });
+    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
+    };
+  }
+  get items() {
+    const items = this.querySelectorAll("\u220Fprosekit-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);
+export {
+  ComboBox,
+  propNames
+};

package/dist/prosekit-lit.d.ts

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