@prosekit/lit 0.0.0-next-20230709094459 → 0.0.0-next-20231120040948

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

@@ -0,0 +1,252 @@
+import {
+  commandPopoverContext
+} from "./chunk-XBNMYITV.js";
+import "./chunk-GWGDLLFN.js";
+import "./chunk-6P3YKUWI.js";
+import {
+  Popover
+} from "./chunk-7WLKD2U6.js";
+import "./chunk-PCXKL6TA.js";
+import {
+  __decorateClass
+} from "./chunk-O5JP3B34.js";
+
+// src/components/autocomplete-popover/index.ts
+import { provide } from "@lit/context";
+import "@prosekit/core";
+import { customElement, property, state } 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,
+  defineAutocomplete
+} 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.defineExtension();
+      this.host.requestUpdate();
+    }
+  }
+  setRegex(regex) {
+    if (this.regex !== regex) {
+      this.regex = regex;
+      this.defineExtension();
+      this.host.requestUpdate();
+    }
+  }
+  defineExtension() {
+    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 query = defaultQueryBuilder(options.match);
+      this.onChange(query != null ? query : "", !!this.reference);
+      this.handleDismiss = options.ignoreMatch;
+      this.handleSubmit = options.deleteMatch;
+    };
+    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 = defineAutocomplete(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 = {
+  // The main axis is the y axis, and we place the popover at the bottom of the
+  // reference element.
+  //
+  // The cross axis is the x axis, and we place the popover at the start of the
+  // reference element. The reference element and the popover are left-aligned.
+  placement: "bottom-start",
+  middleware: [
+    // Use the text caret as the reference point
+    inline(),
+    offset(() => ({
+      // Move down the popover by 4px
+      mainAxis: 4
+    })),
+    // Flip the popover to the top if it's overflowing the viewport
+    //
+    // When `flipAlignment` is true, which is the default, ensure `flip() `is
+    // placed before `shift()` in your middleware array.
+    //
+    // https://floating-ui.com/docs/flip#flipalignment
+    flip({
+      // Flip the popover to the top if necessary.
+      mainAxis: true,
+      // We don't want to flip the popover to the left or right, since `shift()`
+      // will handle this.
+      crossAxis: false,
+      ...defaultDetectOverflowOptions
+    }),
+    // We need to place `shift()` after `flip()`. See https://floating-ui.com/docs/flip#flipalignment
+    shift({
+      ...defaultDetectOverflowOptions
+    }),
+    size({
+      apply: ({ availableWidth, availableHeight, elements }) => {
+        elements.floating.style.setProperty(
+          "max-width",
+          `${Math.floor(availableWidth)}px`
+        );
+        elements.floating.style.setProperty(
+          "max-height",
+          `${Math.floor(availableHeight)}px`
+        );
+      },
+      ...defaultDetectOverflowOptions
+    })
+  ]
+};
+
+// src/components/autocomplete-popover/index.ts
+var propNames = ["editor", "regex", "popoverOptions"];
+var AutocompletePopover = class extends Popover {
+  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() {
+    const element = this.querySelector("prosekit-autocomplete-list");
+    return isAutocompleteList(element) ? element : null;
+  }
+  updateContext(query, active) {
+    if (this.context.query === query && this.context.active === active) {
+      return;
+    }
+    this.context = { ...this.context, query, active };
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.list) == null ? void 0 : _a.selectFirstItem();
+    });
+  }
+  /** @hidden */
+  willUpdate(changedProperties) {
+    var _a, _b;
+    super.willUpdate(changedProperties);
+    if (this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    if (this.regex) {
+      this.controller.setRegex(this.regex);
+    }
+    this.active = !!((_a = this.controller) == null ? void 0 : _a.reference);
+    this.reference = (_b = this.controller.reference) != null ? _b : void 0;
+    this.options = this.popoverOptions;
+  }
+  /** @hidden */
+  hide() {
+    var _a;
+    super.hide();
+    if ((_a = this.controller) == null ? void 0 : _a.reference) {
+      this.controller.reference = null;
+      this.reference = void 0;
+    }
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], AutocompletePopover.prototype, "editor", 2);
+__decorateClass([
+  property({ attribute: false })
+], AutocompletePopover.prototype, "regex", 2);
+__decorateClass([
+  property({ attribute: false })
+], AutocompletePopover.prototype, "popoverOptions", 2);
+__decorateClass([
+  provide({ context: commandPopoverContext }),
+  state()
+], AutocompletePopover.prototype, "context", 2);
+__decorateClass([
+  property({ attribute: false })
+], AutocompletePopover.prototype, "onSelect", 2);
+AutocompletePopover = __decorateClass([
+  customElement("prosekit-autocomplete-popover")
+], AutocompletePopover);
+export {
+  AutocompletePopover,
+  propNames
+};

package/dist/prosekit-lit-combo-box-input.d.ts

@@ -0,0 +1,3 @@
+export { propNames_alias_7 as propNames } from './_tsup-dts-rollup';
+export { ComboBoxInputProps } from './_tsup-dts-rollup';
+export { ComboBoxInput } from './_tsup-dts-rollup';

package/dist/prosekit-lit-combo-box-input.js

@@ -0,0 +1,72 @@
+import {
+  comboBoxContext
+} from "./chunk-C4MW43I4.js";
+import {
+  LightElement,
+  __decorateClass
+} from "./chunk-O5JP3B34.js";
+
+// src/components/combo-box-input/index.ts
+import { consume } from "@lit/context";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var propNames = ["placeholder"];
+var ComboBoxInput = class extends LightElement {
+  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-combo-box-item.d.ts

@@ -0,0 +1,3 @@
+export { ComboBoxItem_alias_1 as ComboBoxItem } from './_tsup-dts-rollup';
+export { ComboBoxItemProps_alias_1 as ComboBoxItemProps } from './_tsup-dts-rollup';
+export { propNames_alias_9 as propNames } from './_tsup-dts-rollup';

package/dist/prosekit-lit-combo-box-item.js

@@ -0,0 +1,10 @@
+import {
+  ComboBoxItem,
+  propNames
+} from "./chunk-55G7TJI3.js";
+import "./chunk-C4MW43I4.js";
+import "./chunk-O5JP3B34.js";
+export {
+  ComboBoxItem,
+  propNames
+};

package/dist/prosekit-lit-combo-box-list.d.ts

@@ -0,0 +1,3 @@
+export { ComboBoxList_alias_1 as ComboBoxList } from './_tsup-dts-rollup';
+export { ComboBoxListProps_alias_1 as ComboBoxListProps } from './_tsup-dts-rollup';
+export { propNames_alias_11 as propNames } from './_tsup-dts-rollup';

package/dist/prosekit-lit-combo-box-list.js

@@ -0,0 +1,48 @@
+import {
+  comboBoxContext
+} from "./chunk-C4MW43I4.js";
+import {
+  LightElement,
+  __decorateClass
+} from "./chunk-O5JP3B34.js";
+
+// src/components/combo-box-list/component.ts
+import { consume } from "@lit/context";
+import { customElement, state } from "lit/decorators.js";
+var propNames = [];
+var ComboBoxList = class extends LightElement {
+  constructor() {
+    super(...arguments);
+    this.comboBoxContext = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mousemove", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseMove(event);
+    });
+    this.addEventListener("mouseover", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseOver(event);
+    });
+    this.addEventListener("mousedown", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseDown(event);
+    });
+    this.addEventListener("click", (event) => {
+      var _a;
+      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleClick(event);
+    });
+  }
+};
+__decorateClass([
+  consume({ context: comboBoxContext, subscribe: true }),
+  state()
+], ComboBoxList.prototype, "comboBoxContext", 2);
+ComboBoxList = __decorateClass([
+  customElement("prosekit-combo-box-list")
+], ComboBoxList);
+export {
+  ComboBoxList,
+  propNames
+};

package/dist/prosekit-lit-combo-box.d.ts

@@ -0,0 +1,3 @@
+export { propNames_alias_6 as propNames } from './_tsup-dts-rollup';
+export { ComboBoxProps } from './_tsup-dts-rollup';
+export { ComboBox } from './_tsup-dts-rollup';

package/dist/prosekit-lit-combo-box.js

@@ -0,0 +1,110 @@
+import {
+  Popover
+} from "./chunk-7WLKD2U6.js";
+import {
+  ListManager
+} from "./chunk-PCXKL6TA.js";
+import "./chunk-55G7TJI3.js";
+import {
+  comboBoxContext
+} from "./chunk-C4MW43I4.js";
+import {
+  __decorateClass
+} from "./chunk-O5JP3B34.js";
+
+// src/components/combo-box/index.ts
+import { provide } from "@lit/context";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/components/combo-box-item/helpers.ts
+function isComboBoxItem(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-combo-box-item";
+}
+function queryClosestComboBoxItem(element) {
+  if (!element) {
+    return null;
+  }
+  if (isComboBoxItem(element)) {
+    return element;
+  }
+  const item = element.closest("prosekit-combo-box-item");
+  if (isComboBoxItem(item)) {
+    return item;
+  }
+  return null;
+}
+
+// src/components/combo-box/index.ts
+var propNames = ["onDismiss"];
+var ComboBox = class extends Popover {
+  constructor() {
+    super(...arguments);
+    this.listManager = new ListManager({
+      getItems: () => {
+        return this.items;
+      },
+      getSelectedValue: () => {
+        var _a;
+        return ((_a = this.context.selectedValue) != null ? _a : "").trim();
+      },
+      setSelectedValue: (value) => {
+        return this.context.setSelectedValue(value);
+      },
+      getItemValue: (item) => {
+        var _a;
+        return ((_a = item.textContent) != null ? _a : "").trim();
+      },
+      queryClosestItem: queryClosestComboBoxItem,
+      getActive: () => {
+        return true;
+      },
+      onDismiss: () => {
+        var _a;
+        (_a = this.onDismiss) == null ? void 0 : _a.call(this);
+      },
+      onSelect: (item) => {
+        var _a, _b;
+        this.context.setSelectedValue("");
+        this.context.setInputValue("");
+        (_a = item == null ? void 0 : item.onSelect) == null ? void 0 : _a.call(item);
+        (_b = this.onDismiss) == null ? void 0 : _b.call(this);
+      }
+    });
+    this.context = {
+      inputValue: "",
+      setInputValue: (inputValue) => {
+        if (this.context.inputValue === inputValue) {
+          return;
+        }
+        this.context = { ...this.context, inputValue };
+      },
+      selectedValue: "",
+      setSelectedValue: (selectedValue) => {
+        if (this.context.selectedValue === selectedValue) {
+          return;
+        }
+        this.context = { ...this.context, selectedValue };
+      },
+      listManager: this.listManager
+    };
+  }
+  get items() {
+    const items = this.querySelectorAll("\u220Fprosekit-combo-box-item");
+    return Array.from(items).filter(isComboBoxItem);
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], ComboBox.prototype, "onDismiss", 2);
+__decorateClass([
+  provide({ context: comboBoxContext }),
+  state()
+], ComboBox.prototype, "context", 2);
+ComboBox = __decorateClass([
+  customElement("prosekit-combo-box")
+], ComboBox);
+export {
+  ComboBox,
+  propNames
+};

package/dist/prosekit-lit-inline-popover.d.ts

@@ -0,0 +1,4 @@
+export { PopoverOptions_alias_1 as PopoverOptions } from './_tsup-dts-rollup';
+export { propNames_alias_12 as propNames } from './_tsup-dts-rollup';
+export { InlinePopoverProps } from './_tsup-dts-rollup';
+export { InlinePopover } from './_tsup-dts-rollup';

package/dist/prosekit-lit-inline-popover.js

@@ -0,0 +1,154 @@
+import {
+  Popover
+} from "./chunk-7WLKD2U6.js";
+import {
+  __decorateClass
+} from "./chunk-O5JP3B34.js";
+
+// src/components/inline-popover/index.ts
+import "@prosekit/core";
+import { customElement, property } from "lit/decorators.js";
+
+// src/components/inline-popover/controller.ts
+import { defineUpdateHandler } from "@prosekit/core";
+import "lit";
+
+// src/components/inline-popover/helpers.ts
+import { isNodeSelection, isTextSelection } from "@prosekit/core";
+function getVirtualSelectionElement(view) {
+  if (typeof window === "undefined" || view.isDestroyed) {
+    return;
+  }
+  const selection = view.state.selection;
+  if (!selection.empty && (isTextSelection(selection) || isNodeSelection(selection))) {
+    return getDomRange();
+  }
+}
+function getDomRange() {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed) {
+    return;
+  }
+  const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
+  if (!range) {
+    return;
+  }
+  return range;
+}
+
+// src/components/inline-popover/controller.ts
+var InlinePopoverController = class {
+  constructor(host) {
+    this.host = host;
+    this.mouseHovering = false;
+    this.host.addController(this);
+  }
+  setEditor(editor) {
+    if (this.editor !== editor) {
+      this.editor = editor;
+      this.defineExtension();
+      this.host.requestUpdate();
+    }
+  }
+  hostConnected() {
+    var _a;
+    const handleMouseDown = () => {
+      this.mouseHovering = true;
+    };
+    const handleMouseUp = () => {
+      this.mouseHovering = false;
+      this.update();
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    (_a = this.cleanupEventListener) == null ? void 0 : _a.call(this);
+    this.cleanupEventListener = () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }
+  hostDisconnected() {
+    var _a, _b;
+    (_a = this.cleanupExtension) == null ? void 0 : _a.call(this);
+    this.cleanupExtension = void 0;
+    (_b = this.cleanupEventListener) == null ? void 0 : _b.call(this);
+    this.cleanupEventListener = void 0;
+  }
+  update() {
+    const editor = this.editor;
+    if (!editor || this.mouseHovering) {
+      return;
+    }
+    const reference = getVirtualSelectionElement(editor.view);
+    if (this.reference !== reference) {
+      this.reference = reference;
+      this.host.requestUpdate();
+    }
+  }
+  defineExtension() {
+    var _a;
+    const editor = this.editor;
+    if (!editor) {
+      return;
+    }
+    const extension = defineUpdateHandler(() => this.update());
+    (_a = this.cleanupExtension) == null ? void 0 : _a.call(this);
+    this.cleanupExtension = editor.use(extension);
+  }
+};
+
+// src/components/inline-popover/default-popover-options.ts
+import { inline, offset, shift } from "@floating-ui/dom";
+var defaultPopoverOptions = {
+  placement: "top",
+  strategy: "absolute",
+  middleware: [
+    inline(),
+    offset(8),
+    shift({ mainAxis: true, crossAxis: true, padding: 8 })
+  ]
+};
+
+// src/components/inline-popover/index.ts
+var propNames = ["editor", "popoverOptions"];
+var InlinePopover = class extends Popover {
+  constructor() {
+    super();
+    /** @hidden */
+    this.controller = new InlinePopoverController(this);
+    this.popoverOptions = defaultPopoverOptions;
+    this.dismiss = "escape";
+  }
+  /** @hidden */
+  willUpdate() {
+    var _a, _b;
+    if (this.editor) {
+      this.controller.setEditor(this.editor);
+    }
+    this.active = !!((_a = this.controller) == null ? void 0 : _a.reference);
+    this.reference = (_b = this.controller.reference) != null ? _b : void 0;
+    this.options = this.popoverOptions;
+  }
+  /** @hidden */
+  hide() {
+    var _a;
+    super.hide();
+    if ((_a = this.controller) == null ? void 0 : _a.reference) {
+      this.controller.reference = void 0;
+      this.reference = void 0;
+    }
+  }
+};
+__decorateClass([
+  property({ attribute: false })
+], InlinePopover.prototype, "editor", 2);
+__decorateClass([
+  property({ attribute: false })
+], InlinePopover.prototype, "popoverOptions", 2);
+InlinePopover = __decorateClass([
+  customElement("prosekit-inline-popover")
+], InlinePopover);
+export {
+  InlinePopover,
+  propNames
+};

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

@@ -0,0 +1,5 @@
+export { AutoUpdateOptions } from './_tsup-dts-rollup';
+export { PopoverOptions_alias_2 as PopoverOptions } from './_tsup-dts-rollup';
+export { propNames_alias_13 as propNames } from './_tsup-dts-rollup';
+export { PopoverProps } from './_tsup-dts-rollup';
+export { Popover } from './_tsup-dts-rollup';

package/dist/prosekit-lit-popover.js

@@ -0,0 +1,9 @@
+import {
+  Popover,
+  propNames
+} from "./chunk-7WLKD2U6.js";
+import "./chunk-O5JP3B34.js";
+export {
+  Popover,
+  propNames
+};

package/dist/prosekit-lit.d.ts

@@ -1,2 +1 @@
-
-export { }
+export {};