@prosekit/lit 0.0.2 → 0.0.4

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

@@ -18,7 +18,7 @@ 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}`;
 
 export {
   __decorateClass,

package/dist/chunk-L6CSVKWR.js

@@ -0,0 +1,9 @@
+// src/internal/command/list-context.ts
+import { createContext } from "@lit-labs/context";
+var commandListContext = createContext(
+  "prosekit-command-list-context"
+);
+
+export {
+  commandListContext
+};

package/dist/chunk-WPC5TQP7.js

@@ -0,0 +1,21 @@
+// src/internal/command/popover-context.ts
+import { createContext } from "@lit-labs/context";
+var commandPopoverContext = createContext(
+  "prosekit-command-popover-context"
+);
+
+// src/internal/command/utils.ts
+function isCommandItem(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-command-item";
+}
+function isCommandList(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-command-list";
+}
+
+export {
+  commandPopoverContext,
+  isCommandItem,
+  isCommandList
+};

package/dist/list-context-2692a600.d.ts

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

package/dist/popover-context-d5266bd6.d.ts

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

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

@@ -0,0 +1,16 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { C as CommandListContext } from './list-context-2692a600.js';
+
+interface CommandEmptyProps {
+}
+declare class CommandEmpty extends LitElement implements CommandEmptyProps {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    listContext?: CommandListContext;
+    protected willUpdate(_changedProperties: PropertyValues<CommandEmpty>): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1> | null;
+}
+
+export { CommandEmpty, CommandEmptyProps };

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

@@ -0,0 +1,48 @@
+import {
+  commandListContext
+} from "./chunk-L6CSVKWR.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-FB3RHUS6.js";
+
+// src/internal/command/empty.ts
+import { consume } from "@lit-labs/context";
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+var CommandEmpty = 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 */
+CommandEmpty.styles = blockComponentStyles;
+__decorateClass([
+  consume({ context: commandListContext, subscribe: true }),
+  state()
+], CommandEmpty.prototype, "listContext", 2);
+CommandEmpty = __decorateClass([
+  customElement("prosekit-command-empty")
+], CommandEmpty);
+export {
+  CommandEmpty
+};

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

@@ -0,0 +1,30 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { C as CommandListContext } from './list-context-2692a600.js';
+
+interface CommandItemProps {
+    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 CommandItem extends LitElement implements Partial<CommandItemProps> {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    value: string;
+    selected: boolean;
+    /** @hidden */
+    onSelect?: VoidFunction;
+    /** @hidden */
+    defaultSlot?: HTMLSlotElement;
+    listContext?: CommandListContext;
+    get content(): string;
+    protected willUpdate(changedProperties: PropertyValues<CommandItem>): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1> | null;
+}
+
+export { CommandItem, CommandItemProps };

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

@@ -0,0 +1,65 @@
+import {
+  commandListContext
+} from "./chunk-L6CSVKWR.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-FB3RHUS6.js";
+
+// src/internal/command/item.ts
+import { consume } from "@lit-labs/context";
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var CommandItem = 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);
+    }
+  }
+  /** @hidden */
+  render() {
+    if (this.hidden) {
+      return null;
+    }
+    return html`<div role="option" aria-selected="${this.selected}"><slot></slot></div>`;
+  }
+};
+/** @hidden */
+CommandItem.styles = blockComponentStyles;
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "data-value" })
+], CommandItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "data-selected" })
+], CommandItem.prototype, "selected", 2);
+__decorateClass([
+  property({ attribute: false })
+], CommandItem.prototype, "onSelect", 2);
+__decorateClass([
+  query("slot")
+], CommandItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  consume({ context: commandListContext, subscribe: true }),
+  state({})
+], CommandItem.prototype, "listContext", 2);
+CommandItem = __decorateClass([
+  customElement("prosekit-command-item")
+], CommandItem);
+export {
+  CommandItem
+};

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

@@ -0,0 +1,39 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { Editor } from '@prosekit/core';
+import { C as CommandListContext } from './list-context-2692a600.js';
+import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
+
+interface CommandListProps {
+    editor: Editor;
+}
+declare class CommandList extends LitElement implements Partial<CommandListProps> {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    private controller;
+    private get active();
+    editor?: Editor;
+    popoverContext: CommandPopoverContext | null;
+    context: CommandListContext;
+    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<CommandList>): void;
+    private updateSelectedByChange;
+    private handleMouseOver;
+    private handleClick;
+    private handleMouseDown;
+    private handleSelect;
+    /** @hidden */
+    render(): lit.TemplateResult<1>;
+}
+
+export { CommandList, CommandListProps };

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

@@ -0,0 +1,218 @@
+import {
+  commandListContext
+} from "./chunk-L6CSVKWR.js";
+import {
+  commandPopoverContext,
+  isCommandItem
+} from "./chunk-WPC5TQP7.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-FB3RHUS6.js";
+
+// src/internal/command/list.ts
+import { consume, provide } from "@lit-labs/context";
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/internal/command-score.ts
+import commandScoreModule from "@superhuman/command-score";
+var commandScore = commandScoreModule;
+
+// src/internal/command/list-controller.ts
+import { addKeymap } from "@prosekit/core";
+var CommandListController = 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/internal/command/list.ts
+var CommandList = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.controller = new CommandListController(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.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(isCommandItem)) != 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);
+    }
+  }
+  handleMouseOver(event) {
+    const target = event.target;
+    if (isCommandItem(target)) {
+      this.updateValue(target.content);
+    }
+  }
+  handleClick(event) {
+    event.preventDefault();
+    const target = event.target;
+    const item = target == null ? void 0 : target.closest("prosekit-command-item");
+    if (item && isCommandItem(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" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}" @mousedown="${this.handleMouseDown.bind(this)}"><slot></slot></div>`;
+  }
+};
+/** @hidden */
+CommandList.styles = blockComponentStyles;
+__decorateClass([
+  property({ attribute: false })
+], CommandList.prototype, "editor", 2);
+__decorateClass([
+  consume({ context: commandPopoverContext, subscribe: true }),
+  state()
+], CommandList.prototype, "popoverContext", 2);
+__decorateClass([
+  provide({ context: commandListContext }),
+  state()
+], CommandList.prototype, "context", 2);
+__decorateClass([
+  query("slot")
+], CommandList.prototype, "defaultSlot", 2);
+CommandList = __decorateClass([
+  customElement("prosekit-command-list")
+], CommandList);
+export {
+  CommandList
+};

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

@@ -0,0 +1,51 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { ComputePositionConfig } from '@floating-ui/dom';
+import { Editor } from '@prosekit/core';
+import { C as CommandPopoverContext } from './popover-context-d5266bd6.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;
+
+type QueryBuilder = (match: RegExpMatchArray, matchAfter?: RegExpMatchArray | null) => string;
+
+interface CommandPopoverProps {
+    editor: Editor;
+    regex: RegExp;
+    regexAfter?: RegExp;
+    queryBuilder?: QueryBuilder;
+    popoverOptions?: PopoverOptions;
+}
+declare class CommandPopover extends LitElement implements Partial<CommandPopoverProps> {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    private controller;
+    editor?: Editor;
+    regex?: RegExp;
+    regexAfter?: RegExp;
+    queryBuilder: QueryBuilder;
+    popoverOptions: PopoverOptions;
+    context: CommandPopoverContext;
+    /** @hidden */
+    onSelect?: VoidFunction;
+    private get list();
+    private updateContext;
+    /** @hidden */
+    defaultSlot?: HTMLSlotElement;
+    /** @hidden */
+    protected get active(): boolean;
+    /** @hidden */
+    willUpdate(changedProperties: PropertyValues<CommandPopover>): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1>;
+}
+
+export { CommandPopover, CommandPopoverProps, PopoverOptions, QueryBuilder };