@prosekit/lit 0.0.3 → 0.0.5

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

@@ -0,0 +1,359 @@
+import {
+  commandPopoverContext
+} from "./chunk-65QAWC7L.js";
+import "./chunk-UDTISUHF.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);
+
+// 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";
+
+// src/components/autocomplete-list/helpers.ts
+function isAutocompleteList(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-list";
+}
+
+// src/components/autocomplete-popover/controller.ts
+import "@prosekit/core";
+import {
+  AutocompleteRule,
+  addAutocomplete
+} from "@prosekit/extensions/autocomplete";
+import "lit";
+
+// src/components/autocomplete-popover/helpers.ts
+function defaultQueryBuilder(match) {
+  return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
+}
+
+// src/components/autocomplete-popover/controller.ts
+var AutocompletePopoverController = class {
+  constructor(host, onChange) {
+    this.host = host;
+    this.onChange = onChange;
+    this.reference = null;
+    this.editor = null;
+    this.regex = null;
+    this.cleanup = null;
+    this.handleDismiss = null;
+    this.handleSubmit = null;
+    this.host.addController(this);
+  }
+  setEditor(editor) {
+    if (this.editor !== editor) {
+      this.editor = editor;
+      this.addExtension();
+      this.host.requestUpdate();
+    }
+  }
+  setRegex(regex) {
+    if (this.regex !== regex) {
+      this.regex = regex;
+      this.addExtension();
+      this.host.requestUpdate();
+    }
+  }
+  addExtension() {
+    var _a;
+    const regex = this.regex;
+    const editor = this.editor;
+    if (!regex || !editor) {
+      return;
+    }
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+    const handleEnter = (options) => {
+      const span = editor.view.dom.querySelector(
+        ".prosemirror-prediction-match"
+      );
+      if (span) {
+        this.reference = span;
+      }
+      const query3 = defaultQueryBuilder(options.match);
+      this.onChange(query3 != null ? query3 : "", !!this.reference);
+      this.handleDismiss = options.ignoreMatch;
+      this.handleSubmit = options.deleteMatch;
+      setTimeout(() => {
+        this.host.requestUpdate();
+      }, 0);
+    };
+    const handleLeave = () => {
+      this.reference = null;
+      this.host.requestUpdate();
+      this.onChange("", false);
+      this.handleDismiss = null;
+      this.handleSubmit = null;
+    };
+    const rule = new AutocompleteRule({
+      regex,
+      onEnter: handleEnter,
+      onLeave: handleLeave
+    });
+    const extension = addAutocomplete(rule);
+    this.cleanup = editor.use(extension);
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+  }
+};
+
+// src/components/autocomplete-popover/default-popover-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/components/autocomplete-popover/index.ts
+var AutocompletePopover = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    /** @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);
+      }
+    };
+  }
+  get list() {
+    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) {
+      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() {
+    if (this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    if (this.regex) {
+      this.controller.setRegex(this.regex);
+    }
+  }
+  /** @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 */
+AutocompletePopover.styles = blockComponentStyles;
+__decorateClass([
+  property2({ attribute: false })
+], AutocompletePopover.prototype, "editor", 2);
+__decorateClass([
+  property2({ attribute: false })
+], AutocompletePopover.prototype, "regex", 2);
+__decorateClass([
+  property2({ attribute: false })
+], AutocompletePopover.prototype, "popoverOptions", 2);
+__decorateClass([
+  provide({ context: commandPopoverContext }),
+  state2()
+], AutocompletePopover.prototype, "context", 2);
+__decorateClass([
+  property2({ attribute: false })
+], AutocompletePopover.prototype, "onSelect", 2);
+__decorateClass([
+  query2("slot")
+], AutocompletePopover.prototype, "defaultSlot", 2);
+AutocompletePopover = __decorateClass([
+  customElement2("prosekit-autocomplete-popover")
+], AutocompletePopover);
+export {
+  AutocompletePopover
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,36 +30,38 @@
       "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/autocomplete-empty": {
+      "types": "./dist/prosekit-lit-components-autocomplete-empty.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-empty.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-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/autocomplete-item": {
+      "types": "./dist/prosekit-lit-components-autocomplete-item.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-item.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-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/autocomplete-list": {
+      "types": "./dist/prosekit-lit-components-autocomplete-list.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-list.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-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/autocomplete-popover": {
+      "types": "./dist/prosekit-lit-components-autocomplete-popover.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-popover.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-popover.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.4.4",
+    "@floating-ui/dom": "^1.4.5",
+    "@lit-labs/context": "^0.3.3",
     "@lit/reactive-element": "^1.6.2",
-    "@prosekit/core": "^0.0.3",
-    "@prosekit/extensions": "^0.0.3",
+    "@prosekit/core": "^0.0.4",
+    "@prosekit/extensions": "^0.0.4",
     "@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"
@@ -82,17 +84,17 @@
       ".": [
         "./dist/prosekit-lit.d.ts"
       ],
-      "elements/menu": [
-        "./dist/prosekit-lit-elements-menu.d.ts"
+      "components/autocomplete-empty": [
+        "./dist/prosekit-lit-components-autocomplete-empty.d.ts"
       ],
-      "elements/menu-item": [
-        "./dist/prosekit-lit-elements-menu-item.d.ts"
+      "components/autocomplete-item": [
+        "./dist/prosekit-lit-components-autocomplete-item.d.ts"
       ],
-      "elements/popover": [
-        "./dist/prosekit-lit-elements-popover.d.ts"
+      "components/autocomplete-list": [
+        "./dist/prosekit-lit-components-autocomplete-list.d.ts"
       ],
-      "elements/popover-suggestion": [
-        "./dist/prosekit-lit-elements-popover-suggestion.d.ts"
+      "components/autocomplete-popover": [
+        "./dist/prosekit-lit-components-autocomplete-popover.d.ts"
       ]
     }
   }

package/src/index.ts

@@ -1,5 +1 @@
-/**
- * @module @prosekit/lit
- */
-
 export {}

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 };