@prosekit/lit 0.0.9 → 0.0.10

package/dist/index-f7e15683.d.ts

@@ -0,0 +1,66 @@
+import { VirtualElement, AutoUpdateOptions } from '@floating-ui/dom';
+import { CSSResultGroup } from 'lit';
+import { L as LightBlockElement } from './index-2645d161.js';
+import { P as PopoverOptions } from './options-7235df55.js';
+
+interface PopoverProps {
+    active: boolean;
+    reference?: Element | VirtualElement;
+    options?: PopoverOptions;
+    autoUpdate?: boolean;
+    autoUpdateOptions?: AutoUpdateOptions;
+}
+/**
+ * A custom element that displays a popover anchored to a reference element.
+ */
+declare class Popover extends LightBlockElement implements Partial<PopoverProps> {
+    /** @hidden */
+    constructor();
+    /** @hidden */
+    static styles: CSSResultGroup;
+    /**
+     * Controls the visibility of the popover element. When set to `true`, the popover is displayed and positioned
+     * relative to its reference element. When set to `false`, the popover is hidden and its positioning logic is
+     * deactivated.
+     */
+    active: boolean;
+    /**
+     * The element that the popover is anchored to. This can be either a DOM element or an object that implements the
+     * virtual element interface from Floating UI.
+     */
+    reference?: Element | VirtualElement;
+    /**
+     * The options that are 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.
+     */
+    options?: PopoverOptions;
+    /**
+     * Controls whether the popover position is automatically updated when the reference element changes position. When
+     * set to `true`, the popover position is updated automatically. When set to `false`, the popover position is only
+     * updated when the given properties are changed.
+     *
+     * @default false
+     */
+    autoUpdate: boolean;
+    /**
+     * The options that are passed to the `autoUpdate` function from Floating UI. These options are used to configure the
+     * automatic update behavior of the popover position. For more information on the available options, please refer to
+     * the Floating UI documentation. This property is only used when the `autoUpdate` property is set to `true`.
+     */
+    autoUpdateOptions?: AutoUpdateOptions;
+    /** @hidden */
+    private cleanupAutoUpdate?;
+    /** @hidden */
+    disconnectedCallback(): void;
+    /** @hidden */
+    protected updated(): void;
+    /** @hidden */
+    private start;
+    /** @hidden */
+    private compute;
+    /** @hidden */
+    private cleanup;
+}
+
+export { Popover as P };

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

@@ -0,0 +1,14 @@
+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-components-autocomplete-empty.js

@@ -1,8 +1,10 @@
 import {
-  __decorateClass,
-  blockComponentStyles,
   commandListContext
-} from "./chunk-J73E7P6J.js";
+} from "./chunk-DYEHERSG.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-3UDA5JEW.js";
 
 // src/components/autocomplete-empty/index.ts
 import { consume } from "@lit-labs/context";

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

@@ -1,8 +1,9 @@
 import {
   AutocompleteItem,
   propNames
-} from "./chunk-37EPOFI5.js";
-import "./chunk-J73E7P6J.js";
+} from "./chunk-AWQAU2JR.js";
+import "./chunk-DYEHERSG.js";
+import "./chunk-3UDA5JEW.js";
 export {
   AutocompleteItem,
   propNames

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

@@ -12,17 +12,15 @@ declare class AutocompleteList extends LitElement implements Partial<Autocomplet
     /** @hidden */
     static styles: CSSResultGroup;
     /** @hidden */
+    private listManager;
+    /** @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;
@@ -30,12 +28,6 @@ declare class AutocompleteList extends LitElement implements Partial<Autocomplet
     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>;
 }

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

@@ -1,9 +1,11 @@
 import {
   AutocompleteList,
   propNames
-} from "./chunk-HPMQEYGA.js";
-import "./chunk-37EPOFI5.js";
-import "./chunk-J73E7P6J.js";
+} from "./chunk-KGZID7N7.js";
+import "./chunk-AWQAU2JR.js";
+import "./chunk-DYEHERSG.js";
+import "./chunk-PCXKL6TA.js";
+import "./chunk-3UDA5JEW.js";
 export {
   AutocompleteList,
   propNames

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

@@ -1,19 +1,9 @@
 import * as lit from 'lit';
 import { LitElement, CSSResultGroup } from 'lit';
-import { ComputePositionConfig } from '@floating-ui/dom';
+import { P as PopoverOptions } from './options-7235df55.js';
 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;
+import '@floating-ui/dom';
 
 declare const propNames: readonly ["editor", "regex", "popoverOptions"];
 interface AutocompletePopoverProps {

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,19 @@
+import { Editor } from '@prosekit/core';
+import { P as Popover } from './index-f7e15683.js';
+import '@floating-ui/dom';
+import 'lit';
+import './index-2645d161.js';
+import './options-7235df55.js';
+
+declare const propNames: readonly ["editor"];
+interface CodeBlockPopoverProps {
+    editor: Editor;
+}
+declare class CodeBlockPopover extends Popover implements Partial<CodeBlockPopoverProps> {
+    editor?: Editor;
+    /** @hidden */
+    private controller;
+    protected updated(): void;
+}
+
+export { CodeBlockPopover, CodeBlockPopoverProps, propNames };

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({ plugins: [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,22 @@
+import * as lit_html from 'lit-html';
+import { L as LightBlockElement } from './index-2645d161.js';
+import { C as ComboBoxContext } from './index-c461623f.js';
+import 'lit';
+import '@prosekit/core';
+
+declare const propNames: readonly ["placeholder"];
+type ComboBoxInputProps = {
+    placeholder?: string;
+};
+declare class ComboBoxInput extends LightBlockElement {
+    placeholder: string;
+    comboBoxContext: ComboBoxContext | null;
+    private visible;
+    private handleKeydown;
+    private handleInput;
+    protected firstUpdated(): void;
+    /** @hidden */
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { ComboBoxInput, ComboBoxInputProps, propNames };

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,4 @@
+export { a as ComboBoxItem, b as ComboBoxItemProps, p as propNames } from './index-c461623f.js';
+import '@prosekit/core';
+import 'lit';
+import './index-2645d161.js';

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