@prosekit/lit 0.0.2 → 0.0.4

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

@@ -0,0 +1,363 @@
+import {
+  commandPopoverContext,
+  isCommandList
+} from "./chunk-WPC5TQP7.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-FB3RHUS6.js";
+
+// src/internal/popover/popover.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/internal/popover/popover.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);
+
+// src/internal/command/popover.ts
+import { provide } from "@lit-labs/context";
+import { LitElement as LitElement2, html as html2 } from "lit";
+import { customElement as customElement2, property as property2, query as query2, state as state2 } from "lit/decorators.js";
+
+// src/internal/command/popover-controller.ts
+import { addSuggestion } from "@prosekit/extensions/suggestion";
+var CommandPopoverController = class {
+  constructor(host, onChange) {
+    this.host = host;
+    this.onChange = onChange;
+    this.reference = null;
+    this.editor = null;
+    this.rules = [];
+    this.cleanup = null;
+    this.queryBuilder = null;
+    this.handleDismiss = null;
+    this.handleSubmit = null;
+    this.host.addController(this);
+  }
+  setEditor(editor) {
+    if (this.editor !== editor) {
+      this.editor = editor;
+      this.host.requestUpdate();
+      this.addExtension();
+    }
+  }
+  setRules(rules) {
+    if (this.rules.length !== rules.length || this.rules.some((r, i) => r !== rules[i])) {
+      this.rules = rules;
+      this.host.requestUpdate();
+      this.addExtension();
+    }
+  }
+  setQueryBuilder(queryBuilder) {
+    if (this.queryBuilder !== queryBuilder) {
+      this.queryBuilder = queryBuilder;
+      this.host.requestUpdate();
+      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.rules || this.rules.length === 0) {
+      return;
+    }
+    const editor = this.editor;
+    const extension = addSuggestion({
+      rules: this.rules,
+      onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
+        var _a2;
+        const span = editor.view.dom.querySelector(
+          ".prosemirror-prediction-match"
+        );
+        if (span) {
+          this.reference = span;
+        }
+        const query3 = (_a2 = this.queryBuilder) == null ? void 0 : _a2.call(this, match, matchAfter);
+        this.onChange(query3 != null ? query3 : "", !!this.reference);
+        this.handleDismiss = dismiss;
+        this.handleSubmit = deleteMatch;
+        setTimeout(() => {
+          this.host.requestUpdate();
+        }, 0);
+      },
+      onDeactivate: () => {
+        this.reference = null;
+        this.host.requestUpdate();
+        this.onChange("", false);
+        this.handleDismiss = null;
+        this.handleSubmit = null;
+      }
+    });
+    this.cleanup = editor.use(extension);
+  }
+};
+
+// src/internal/command/popover-default-options.ts
+import {
+  flip,
+  inline,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+var defaultDetectOverflowOptions = {
+  // Make sure the popover is always at least 8px away from the boundary
+  padding: 8
+};
+var defaultPopoverOptions = {
+  placement: "bottom-end",
+  middleware: [
+    offset(({ rects }) => ({
+      // Put the popover at the bottom right corner
+      alignmentAxis: -rects.floating.width,
+      // Move down the popover by 4px
+      mainAxis: 4
+    })),
+    size({
+      apply: ({ availableHeight, elements }) => {
+        const style = {
+          // Minimum acceptable height is 100px.
+          // `flip` will then take over.
+          maxHeight: `${Math.max(100, availableHeight)}px`,
+          overflowY: "auto"
+        };
+        Object.assign(elements.floating.style, style);
+      },
+      ...defaultDetectOverflowOptions
+    }),
+    // Flip the popover to the top if it's overflowing the viewport
+    flip({
+      fallbackStrategy: "initialPlacement",
+      fallbackAxisSideDirection: "start",
+      crossAxis: false,
+      ...defaultDetectOverflowOptions
+    }),
+    shift({
+      ...defaultDetectOverflowOptions
+    }),
+    // Use the text caret as the reference point
+    inline()
+  ]
+};
+
+// src/internal/command/query-builder.ts
+var defaultQueryBuilder = (match, matchAfter) => {
+  var _a;
+  const query3 = match[0] + ((_a = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a : "");
+  return query3.toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
+};
+
+// src/internal/command/popover.ts
+var CommandPopover = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.controller = new CommandPopoverController(
+      this,
+      this.updateContext.bind(this)
+    );
+    this.queryBuilder = defaultQueryBuilder;
+    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);
+      }
+    };
+  }
+  get list() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isCommandList)) != null ? _c : null;
+  }
+  updateContext(query3, active) {
+    if (this.context.query === query3 && this.context.active === active) {
+      return;
+    }
+    this.context = { ...this.context, query: query3, active };
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.list) == null ? void 0 : _a.selectFirstItem();
+    });
+  }
+  /** @hidden */
+  get active() {
+    var _a;
+    return !!((_a = this.controller) == null ? void 0 : _a.reference);
+  }
+  /** @hidden */
+  willUpdate(changedProperties) {
+    if (changedProperties.has("editor") && this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    if (changedProperties.has("regex") || changedProperties.has("regexAfter")) {
+      const regex = this.regex;
+      const regexAfter = this.regexAfter;
+      if (regex) {
+        const rule = {
+          match: regex,
+          matchAfter: regexAfter != null ? regexAfter : void 0
+        };
+        this.controller.setRules([rule]);
+      }
+    }
+    if (changedProperties.has("queryBuilder") && this.queryBuilder) {
+      this.controller.setQueryBuilder(this.queryBuilder);
+    }
+  }
+  /** @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>`;
+  }
+};
+/** @hidden */
+CommandPopover.styles = blockComponentStyles;
+__decorateClass([
+  property2({ attribute: false })
+], CommandPopover.prototype, "editor", 2);
+__decorateClass([
+  property2({ attribute: false })
+], CommandPopover.prototype, "regex", 2);
+__decorateClass([
+  property2({ attribute: false })
+], CommandPopover.prototype, "regexAfter", 2);
+__decorateClass([
+  property2({ attribute: false })
+], CommandPopover.prototype, "queryBuilder", 2);
+__decorateClass([
+  property2({ attribute: false })
+], CommandPopover.prototype, "popoverOptions", 2);
+__decorateClass([
+  provide({ context: commandPopoverContext }),
+  state2()
+], CommandPopover.prototype, "context", 2);
+__decorateClass([
+  property2({ attribute: false })
+], CommandPopover.prototype, "onSelect", 2);
+__decorateClass([
+  query2("slot")
+], CommandPopover.prototype, "defaultSlot", 2);
+CommandPopover = __decorateClass([
+  customElement2("prosekit-command-popover")
+], CommandPopover);
+export {
+  CommandPopover
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,25 +30,25 @@
       "import": "./dist/prosekit-lit.js",
       "default": "./dist/prosekit-lit.js"
     },
-    "./elements/menu": {
-      "types": "./dist/prosekit-lit-elements-menu.d.ts",
-      "import": "./dist/prosekit-lit-elements-menu.js",
-      "default": "./dist/prosekit-lit-elements-menu.js"
+    "./components/command-empty": {
+      "types": "./dist/prosekit-lit-components-command-empty.d.ts",
+      "import": "./dist/prosekit-lit-components-command-empty.js",
+      "default": "./dist/prosekit-lit-components-command-empty.js"
     },
-    "./elements/menu-item": {
-      "types": "./dist/prosekit-lit-elements-menu-item.d.ts",
-      "import": "./dist/prosekit-lit-elements-menu-item.js",
-      "default": "./dist/prosekit-lit-elements-menu-item.js"
+    "./components/command-item": {
+      "types": "./dist/prosekit-lit-components-command-item.d.ts",
+      "import": "./dist/prosekit-lit-components-command-item.js",
+      "default": "./dist/prosekit-lit-components-command-item.js"
     },
-    "./elements/popover": {
-      "types": "./dist/prosekit-lit-elements-popover.d.ts",
-      "import": "./dist/prosekit-lit-elements-popover.js",
-      "default": "./dist/prosekit-lit-elements-popover.js"
+    "./components/command-list": {
+      "types": "./dist/prosekit-lit-components-command-list.d.ts",
+      "import": "./dist/prosekit-lit-components-command-list.js",
+      "default": "./dist/prosekit-lit-components-command-list.js"
     },
-    "./elements/popover-suggestion": {
-      "types": "./dist/prosekit-lit-elements-popover-suggestion.d.ts",
-      "import": "./dist/prosekit-lit-elements-popover-suggestion.js",
-      "default": "./dist/prosekit-lit-elements-popover-suggestion.js"
+    "./components/command-popover": {
+      "types": "./dist/prosekit-lit-components-command-popover.d.ts",
+      "import": "./dist/prosekit-lit-components-command-popover.js",
+      "default": "./dist/prosekit-lit-components-command-popover.js"
     }
   },
   "files": [
@@ -56,10 +56,12 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.4.4",
+    "@lit-labs/context": "^0.3.3",
     "@lit/reactive-element": "^1.6.2",
-    "@prosekit/core": "^0.0.2",
-    "@prosekit/extensions": "^0.0.2",
-    "@prosekit/pm": "^0.0.2",
+    "@prosekit/core": "^0.0.3",
+    "@prosekit/extensions": "^0.0.3",
+    "@prosekit/pm": "^0.0.3",
+    "@superhuman/command-score": "^0.5.0",
     "lit": "^2.7.6",
     "lit-element": "^3.3.2",
     "lit-html": "^2.7.5"
@@ -76,5 +78,24 @@
     "build:tsup": "tsup",
     "build:tsc": "tsc -b tsconfig.json"
   },
-  "types": "./dist/prosekit-lit.d.ts"
+  "types": "./dist/prosekit-lit.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/prosekit-lit.d.ts"
+      ],
+      "components/command-empty": [
+        "./dist/prosekit-lit-components-command-empty.d.ts"
+      ],
+      "components/command-item": [
+        "./dist/prosekit-lit-components-command-item.d.ts"
+      ],
+      "components/command-list": [
+        "./dist/prosekit-lit-components-command-list.d.ts"
+      ],
+      "components/command-popover": [
+        "./dist/prosekit-lit-components-command-popover.d.ts"
+      ]
+    }
+  }
 }

package/dist/chunk-WHIPWT4H.js

@@ -1,122 +0,0 @@
-import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-6FOWUXQ2.js";
-
-// src/elements/popover/popover.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/elements/popover/popover.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()
-], Popover.prototype, "reference", 2);
-__decorateClass([
-  property()
-], 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);
-
-export {
-  Popover
-};

package/dist/options-7235df55.d.ts

@@ -1,14 +0,0 @@
-import { ComputePositionConfig } from '@floating-ui/dom';
-
-/**
- * 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;
-
-export { PopoverOptions as P };

package/dist/prosekit-lit-elements-menu-item.d.ts

@@ -1,16 +0,0 @@
-import * as lit from 'lit';
-import { LitElement, CSSResultGroup } from 'lit';
-
-declare class MenuItem extends LitElement {
-    /** @hidden */
-    constructor();
-    /** @hidden */
-    static styles: CSSResultGroup;
-    focused: boolean;
-    hidden: boolean;
-    onSelect?: VoidFunction;
-    /** @hidden */
-    render(): lit.TemplateResult<1>;
-}
-
-export { MenuItem };

package/dist/prosekit-lit-elements-menu-item.js

@@ -1,37 +0,0 @@
-import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-6FOWUXQ2.js";
-
-// src/elements/menu-item.ts
-import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var MenuItem = class extends LitElement {
-  /** @hidden */
-  constructor() {
-    super();
-    this.focused = false;
-    this.hidden = false;
-  }
-  /** @hidden */
-  render() {
-    return html`<div role="menuitem"><slot></slot></div>`;
-  }
-};
-/** @hidden */
-MenuItem.styles = blockComponentStyles;
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "data-focused" })
-], MenuItem.prototype, "focused", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "data-hidden" })
-], MenuItem.prototype, "hidden", 2);
-__decorateClass([
-  property({ attribute: false })
-], MenuItem.prototype, "onSelect", 2);
-MenuItem = __decorateClass([
-  customElement("prosekit-menu-item")
-], MenuItem);
-export {
-  MenuItem
-};

package/dist/prosekit-lit-elements-menu.d.ts

@@ -1,50 +0,0 @@
-import * as lit from 'lit';
-import { LitElement, CSSResultGroup, PropertyValueMap } from 'lit';
-import { Editor } from '@prosekit/core';
-import { MenuItem } from './prosekit-lit-elements-menu-item.js';
-
-declare class Menu extends LitElement {
-    /** @hidden */
-    constructor();
-    /** @hidden */
-    static styles: CSSResultGroup;
-    editor?: Editor;
-    /** @hidden */
-    focusedItem?: MenuItem;
-    /** @hidden */
-    defaultSlot?: HTMLSlotElement;
-    /** @hidden */
-    private cleanup;
-    /** @hidden */
-    protected firstUpdated(): void;
-    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    /** @hidden */
-    disconnectedCallback(): void;
-    ensureFocusedItem(): void;
-    /** @hidden */
-    private handleArrowUp;
-    /** @hidden */
-    private handleArrowDown;
-    /** @hidden */
-    private handleEscape;
-    /** @hidden */
-    private handleMouseOver;
-    /** @hidden */
-    private handleEnter;
-    /** @hidden */
-    private handleClick;
-    /** @hidden */
-    private handleSelect;
-    /** @hidden */
-    private focusItem;
-    /** @hidden */
-    private blurItem;
-    /** @hidden */
-    private queryAllMenuItems;
-    /** @hidden */
-    private queryVisibleMenuItems;
-    /** @hidden */
-    render(): lit.TemplateResult<1>;
-}
-
-export { Menu };