@prosekit/lit 0.0.3 → 0.0.5

package/dist/chunk-65QAWC7L.js

@@ -0,0 +1,236 @@
+import {
+  __decorateClass,
+  blockComponentStyles,
+  commandListContext
+} from "./chunk-J73E7P6J.js";
+
+// src/components/autocomplete-popover/context.ts
+import { createContext } from "@lit-labs/context";
+var commandPopoverContext = createContext(
+  "prosekit-autocomplete-popover-context"
+);
+
+// src/components/autocomplete-list/component.ts
+import { consume, provide } from "@lit-labs/context";
+import "@prosekit/core";
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/utils/command-score.ts
+import commandScoreModule from "@superhuman/command-score";
+var commandScore = commandScoreModule;
+
+// src/components/autocomplete-item/helpers.ts
+function isAutocompleteItem(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-item";
+}
+
+// src/components/autocomplete-list/controller.ts
+import { addKeymap } from "@prosekit/core";
+import "lit";
+var AutocompleteListController = class {
+  constructor(host, keymap) {
+    this.host = host;
+    this.keymap = keymap;
+    this.editor = null;
+    this.cleanup = null;
+    this.host.addController(this);
+  }
+  setEditor(editor) {
+    if (this.editor !== editor) {
+      this.editor = editor;
+      this.addExtension();
+    }
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+  }
+  addExtension() {
+    var _a;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+    if (!this.editor || !this.keymap) {
+      return;
+    }
+    const extension = addKeymap(this.keymap);
+    this.cleanup = this.editor.use(extension);
+  }
+};
+
+// src/components/autocomplete-list/component.ts
+var AutocompleteList = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    /** @hidden */
+    this.controller = new AutocompleteListController(this, {
+      ArrowUp: () => {
+        if (!this.active)
+          return false;
+        this.updateSelectedByChange(-1);
+        return true;
+      },
+      ArrowDown: () => {
+        if (!this.active)
+          return false;
+        this.updateSelectedByChange(1);
+        return true;
+      },
+      Escape: () => {
+        var _a, _b;
+        if (!this.active)
+          return false;
+        (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleDismiss) == null ? void 0 : _b.call(_a);
+        return true;
+      },
+      Enter: () => {
+        if (!this.active)
+          return false;
+        this.handleSelect(this.selectedItem);
+        return true;
+      }
+    });
+    this.lastMouseMoveTime = 0;
+    this.popoverContext = null;
+    this.context = {
+      scores: /* @__PURE__ */ new Map(),
+      selectedValue: "",
+      registerValue: (value) => this.registerValue(value)
+    };
+  }
+  get active() {
+    var _a, _b;
+    return (_b = (_a = this.popoverContext) == null ? void 0 : _a.active) != null ? _b : false;
+  }
+  firstUpdated() {
+    this.selectFirstItem();
+  }
+  get items() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isAutocompleteItem)) != null ? _c : [];
+  }
+  get availableItems() {
+    var _a, _b;
+    return (_b = (_a = this.items) == null ? void 0 : _a.filter((item) => !item.hidden)) != null ? _b : [];
+  }
+  get firstItem() {
+    var _a;
+    return (_a = this.availableItems[0]) != null ? _a : null;
+  }
+  get selectedItem() {
+    var _a;
+    return (_a = this.availableItems.find(
+      (item) => item.content === this.context.selectedValue
+    )) != null ? _a : null;
+  }
+  selectFirstItem() {
+    var _a, _b;
+    const selected = (_b = (_a = this.firstItem) == null ? void 0 : _a.content) != null ? _b : "";
+    this.updateValue(selected);
+  }
+  updateValue(selectedValue) {
+    if (this.context.selectedValue === selectedValue)
+      return;
+    this.context = { ...this.context, selectedValue };
+  }
+  registerValue(value) {
+    if (!this.context.scores.has(value)) {
+      this.context.scores.set(value, 0);
+      this.requestUpdate();
+    }
+    return () => {
+      this.context.scores.delete(value);
+    };
+  }
+  /** @hidden */
+  willUpdate(changedProperties) {
+    var _a, _b;
+    if (changedProperties.has("editor") && this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    const query2 = (_b = (_a = this.popoverContext) == null ? void 0 : _a.query) != null ? _b : "";
+    const scores = new Map(
+      this.items.map((item) => {
+        const content = item.content;
+        const score = commandScore(content, query2);
+        return [content, score];
+      })
+    );
+    this.context = { ...this.context, scores };
+  }
+  updateSelectedByChange(change) {
+    const items = this.availableItems;
+    if (items.length === 0) {
+      return;
+    }
+    const selectedItem = this.selectedItem;
+    const selectedIndex = selectedItem ? items.indexOf(selectedItem) : -1;
+    let nextIndex = selectedIndex + change;
+    if (nextIndex < 0) {
+      nextIndex = 0;
+    } else if (nextIndex >= items.length) {
+      nextIndex = items.length - 1;
+    }
+    if (selectedIndex !== nextIndex) {
+      this.updateValue(items[nextIndex].content);
+    }
+  }
+  handleMouseMove() {
+    this.lastMouseMoveTime = Date.now();
+  }
+  handleMouseOver(event) {
+    if (this.lastMouseMoveTime + 500 < Date.now()) {
+      return;
+    }
+    const target = event.target;
+    if (isAutocompleteItem(target)) {
+      this.updateValue(target.content);
+    }
+  }
+  handleClick(event) {
+    event.preventDefault();
+    const target = event.target;
+    const item = target == null ? void 0 : target.closest("prosekit-autocomplete-item");
+    if (item && isAutocompleteItem(item)) {
+      this.handleSelect(item);
+    }
+  }
+  handleMouseDown(event) {
+    event.preventDefault();
+  }
+  handleSelect(item) {
+    var _a, _b, _c;
+    (_b = (_a = this.popoverContext) == 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 */
+  render() {
+    return html`<div role="listbox" aria-label="Suggestions" @mousemove="${this.handleMouseMove.bind(this)}" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}" @mousedown="${this.handleMouseDown.bind(this)}"><slot></slot></div>`;
+  }
+};
+/** @hidden */
+AutocompleteList.styles = blockComponentStyles;
+__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);
+__decorateClass([
+  query("slot")
+], AutocompleteList.prototype, "defaultSlot", 2);
+AutocompleteList = __decorateClass([
+  customElement("prosekit-autocomplete-list")
+], AutocompleteList);
+
+export {
+  commandPopoverContext,
+  AutocompleteList
+};

package/dist/{chunk-6FOWUXQ2.js → chunk-J73E7P6J.js}

@@ -18,9 +18,16 @@ import { css } from "lit";
 var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:host ::before{box-sizing:inherit}`;
 
 // src/styles/block-component.styles.ts
-var blockComponentStyles = css2`${componentStyles}:host{display:block}`;
+var blockComponentStyles = css2`${componentStyles}:host{display:block}:host([hidden]){display:none}`;
+
+// src/components/autocomplete-list/context.ts
+import { createContext } from "@lit-labs/context";
+var commandListContext = createContext(
+  "prosekit-autocomplete-list-context"
+);
 
 export {
   __decorateClass,
-  blockComponentStyles
+  blockComponentStyles,
+  commandListContext
 };

package/dist/chunk-UDTISUHF.js

@@ -0,0 +1,69 @@
+import {
+  __decorateClass,
+  blockComponentStyles,
+  commandListContext
+} from "./chunk-J73E7P6J.js";
+
+// src/components/autocomplete-item/component.ts
+import { consume } from "@lit-labs/context";
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var AutocompleteItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.selected = false;
+  }
+  get content() {
+    const text = this.value || this.textContent || "";
+    return text.trim().toLowerCase();
+  }
+  willUpdate(changedProperties) {
+    var _a, _b;
+    const content = this.content;
+    this.selected = content === ((_a = this.listContext) == null ? void 0 : _a.selectedValue);
+    const score = ((_b = this.listContext) == null ? void 0 : _b.scores.get(content)) || 0;
+    this.inert = score <= 0;
+    this.hidden = score <= 0;
+    if (changedProperties.has("listContext") && this.listContext) {
+      this.listContext.registerValue(this.content);
+    }
+  }
+  updated(changedProperties) {
+    if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected")) {
+      this.scrollIntoView({ block: "nearest" });
+    }
+  }
+  /** @hidden */
+  render() {
+    if (this.hidden) {
+      return null;
+    }
+    return html`<div role="option" aria-selected="${this.selected}"><slot></slot></div>`;
+  }
+};
+/** @hidden */
+AutocompleteItem.styles = blockComponentStyles;
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "data-value" })
+], AutocompleteItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "data-selected" })
+], AutocompleteItem.prototype, "selected", 2);
+__decorateClass([
+  property({ attribute: false })
+], AutocompleteItem.prototype, "onSelect", 2);
+__decorateClass([
+  query("slot")
+], AutocompleteItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  consume({ context: commandListContext, subscribe: true }),
+  state({})
+], AutocompleteItem.prototype, "listContext", 2);
+AutocompleteItem = __decorateClass([
+  customElement("prosekit-autocomplete-item")
+], AutocompleteItem);
+
+export {
+  AutocompleteItem
+};

package/dist/context-19474449.d.ts

@@ -0,0 +1,7 @@
+type AutocompleteListContext = {
+    scores: Map<string, number>;
+    selectedValue: string;
+    registerValue: (value: string) => VoidFunction;
+};
+
+export { AutocompleteListContext as A };

package/dist/context-436a56d3.d.ts

@@ -0,0 +1,8 @@
+type AutocompletePopoverContext = {
+    active: boolean;
+    query: string;
+    handleDismiss: VoidFunction;
+    handleSubmit: VoidFunction;
+};
+
+export { AutocompletePopoverContext as A };

package/dist/prosekit-lit-components-autocomplete-empty.d.ts

@@ -0,0 +1,16 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { A as AutocompleteListContext } from './context-19474449.js';
+
+interface AutocompleteEmptyProps {
+}
+declare class AutocompleteEmpty extends LitElement implements AutocompleteEmptyProps {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    listContext?: AutocompleteListContext;
+    protected willUpdate(_changedProperties: PropertyValues<this>): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1> | null;
+}
+
+export { AutocompleteEmpty, AutocompleteEmptyProps };

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

@@ -0,0 +1,46 @@
+import {
+  __decorateClass,
+  blockComponentStyles,
+  commandListContext
+} from "./chunk-J73E7P6J.js";
+
+// src/components/autocomplete-empty/index.ts
+import { consume } from "@lit-labs/context";
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+var AutocompleteEmpty = class extends LitElement {
+  willUpdate(_changedProperties) {
+    var _a;
+    const scores = (_a = this.listContext) == null ? void 0 : _a.scores;
+    let hasMatch = false;
+    if (scores) {
+      for (const score of scores.values()) {
+        if (score > 0) {
+          hasMatch = true;
+          break;
+        }
+      }
+    }
+    this.hidden = hasMatch;
+    this.inert = hasMatch;
+  }
+  /** @hidden */
+  render() {
+    if (this.hidden) {
+      return null;
+    }
+    return html`<div role="option"><slot></slot></div>`;
+  }
+};
+/** @hidden */
+AutocompleteEmpty.styles = blockComponentStyles;
+__decorateClass([
+  consume({ context: commandListContext, subscribe: true }),
+  state()
+], AutocompleteEmpty.prototype, "listContext", 2);
+AutocompleteEmpty = __decorateClass([
+  customElement("prosekit-autocomplete-empty")
+], AutocompleteEmpty);
+export {
+  AutocompleteEmpty
+};

package/dist/prosekit-lit-components-autocomplete-item.d.ts

@@ -0,0 +1,31 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { A as AutocompleteListContext } from './context-19474449.js';
+
+interface AutocompleteItemProps {
+    value?: string;
+    onSelect: VoidFunction;
+}
+/**
+ * Command menu item. Becomes active on pointer enter or through keyboard
+ * navigation. Preferably pass a `value`, otherwise the value will be inferred
+ * from the rendered item's `textContent`.
+ */
+declare class AutocompleteItem extends LitElement implements Partial<AutocompleteItemProps> {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    value: string;
+    selected: boolean;
+    /** @hidden */
+    onSelect?: VoidFunction;
+    /** @hidden */
+    defaultSlot?: HTMLSlotElement;
+    listContext?: AutocompleteListContext;
+    get content(): string;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1> | null;
+}
+
+export { AutocompleteItem, AutocompleteItemProps };

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

@@ -0,0 +1,7 @@
+import {
+  AutocompleteItem
+} from "./chunk-UDTISUHF.js";
+import "./chunk-J73E7P6J.js";
+export {
+  AutocompleteItem
+};

package/dist/prosekit-lit-components-autocomplete-list.d.ts

@@ -0,0 +1,42 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { Editor } from '@prosekit/core';
+import { A as AutocompletePopoverContext } from './context-436a56d3.js';
+import { A as AutocompleteListContext } from './context-19474449.js';
+
+interface AutocompleteListProps {
+    editor: Editor;
+}
+declare class AutocompleteList extends LitElement implements Partial<AutocompleteListProps> {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    /** @hidden */
+    private controller;
+    private get active();
+    private lastMouseMoveTime;
+    editor?: Editor;
+    popoverContext: AutocompletePopoverContext | null;
+    context: AutocompleteListContext;
+    protected firstUpdated(): void;
+    private get items();
+    private get availableItems();
+    private get firstItem();
+    private get selectedItem();
+    selectFirstItem(): void;
+    private updateValue;
+    private registerValue;
+    /** @hidden */
+    defaultSlot?: HTMLSlotElement;
+    /** @hidden */
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    private updateSelectedByChange;
+    private handleMouseMove;
+    private handleMouseOver;
+    private handleClick;
+    private handleMouseDown;
+    private handleSelect;
+    /** @hidden */
+    render(): lit.TemplateResult<1>;
+}
+
+export { AutocompleteList, AutocompleteListProps };

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

@@ -0,0 +1,8 @@
+import {
+  AutocompleteList
+} from "./chunk-65QAWC7L.js";
+import "./chunk-UDTISUHF.js";
+import "./chunk-J73E7P6J.js";
+export {
+  AutocompleteList
+};

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

@@ -0,0 +1,46 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup } from 'lit';
+import { ComputePositionConfig } from '@floating-ui/dom';
+import { Editor } from '@prosekit/core';
+import { A as AutocompletePopoverContext } from './context-436a56d3.js';
+
+/**
+ * The `PopoverOptions` interface defines the options that can be passed to the
+ * `computePosition` function from Floating UI. These options are used to
+ * configure the positioning of the popover element relative to its reference
+ * element. For more information on the available options, please refer to the
+ * Floating UI documentation.
+ *
+ * https://floating-ui.com/docs/computeposition#options
+ */
+type PopoverOptions = ComputePositionConfig;
+
+interface AutocompletePopoverProps {
+    editor: Editor;
+    regex: RegExp;
+    popoverOptions?: PopoverOptions;
+}
+declare class AutocompletePopover extends LitElement implements Partial<AutocompletePopoverProps> {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    /** @hidden */
+    private controller;
+    editor?: Editor;
+    regex?: RegExp;
+    popoverOptions: PopoverOptions;
+    context: AutocompletePopoverContext;
+    /** @hidden */
+    onSelect?: VoidFunction;
+    private get list();
+    private updateContext;
+    /** @hidden */
+    defaultSlot?: HTMLSlotElement;
+    /** @hidden */
+    protected get active(): boolean;
+    /** @hidden */
+    willUpdate(): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1>;
+}
+
+export { AutocompletePopover, AutocompletePopoverProps, PopoverOptions };