@prosekit/lit 0.0.0-next-20230627094841

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

@@ -0,0 +1,169 @@
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-43BFWKM2.js";
+
+// src/elements/menu.ts
+import { ProseKitError, addKeymap } from "@prosekit/core";
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/utils/is-menu-item.ts
+function isMenuItem(element) {
+  var _a, _b;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes(
+    (_b = element == null ? void 0 : element.getAttribute("role")) != null ? _b : ""
+  );
+}
+
+// src/utils/visibility.ts
+function isVisibleElement(element) {
+  return !element.hidden;
+}
+
+// src/elements/menu.ts
+var Menu = class extends LitElement {
+  /** @hidden */
+  constructor() {
+    super();
+    /** @hidden */
+    this.cleanup = [];
+  }
+  /** @hidden */
+  firstUpdated() {
+    if (!this.editor) {
+      throw new ProseKitError("Property editor is required");
+    }
+    const extension = addKeymap({
+      ArrowUp: () => this.handleArrowUp(),
+      ArrowDown: () => this.handleArrowDown(),
+      Escape: () => this.handleEscape(),
+      Enter: () => this.handleEnter()
+    });
+    this.cleanup.push(this.editor.use(extension));
+  }
+  updated(_changedProperties) {
+    this.ensureFocusedItem();
+  }
+  /** @hidden */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup.forEach((fn) => fn());
+  }
+  ensureFocusedItem() {
+    const items = this.queryVisibleMenuItems();
+    if (this.focusedItem && items.includes(this.focusedItem)) {
+      return;
+    }
+    this.focusItem(items[0]);
+  }
+  /** @hidden */
+  handleArrowUp() {
+    const items = this.queryVisibleMenuItems();
+    let prevIndex = this.focusedItem ? items.indexOf(this.focusedItem) : 0;
+    if (prevIndex === -1) {
+      prevIndex = 0;
+    }
+    const nextIndex = (prevIndex + items.length - 1) % items.length;
+    this.focusItem(items[nextIndex]);
+    return true;
+  }
+  /** @hidden */
+  handleArrowDown() {
+    const items = this.queryVisibleMenuItems();
+    const prevIndex = this.focusedItem ? items.indexOf(this.focusedItem) : -1;
+    const nextIndex = (prevIndex + items.length + 1) % items.length;
+    this.focusItem(items[nextIndex]);
+    return true;
+  }
+  /** @hidden */
+  handleEscape() {
+    const event = new CustomEvent("menu-dismiss", {
+      bubbles: true,
+      composed: false
+    });
+    this.dispatchEvent(event);
+    this.blurItem();
+    return true;
+  }
+  /** @hidden */
+  handleMouseOver(event) {
+    const target = event.target;
+    if (isMenuItem(target) && isVisibleElement(target)) {
+      this.focusItem(target);
+    }
+    return true;
+  }
+  /** @hidden */
+  handleEnter() {
+    if (this.focusedItem) {
+      this.handleSelect(this.focusedItem);
+      return true;
+    }
+    return false;
+  }
+  /** @hidden */
+  handleClick(event) {
+    const target = event.target;
+    if (isMenuItem(target) && isVisibleElement(target)) {
+      this.handleSelect(target);
+    }
+  }
+  /** @hidden */
+  handleSelect(menuItem) {
+    var _a;
+    (_a = menuItem.onSelect) == null ? void 0 : _a.call(menuItem);
+    const event = new CustomEvent("menu-select", {
+      bubbles: true,
+      composed: false
+    });
+    this.dispatchEvent(event);
+    this.blurItem();
+  }
+  /** @hidden */
+  focusItem(item) {
+    this.blurItem();
+    if (!item) {
+      return;
+    }
+    item.focused = true;
+    this.focusedItem = item;
+  }
+  /** @hidden */
+  blurItem() {
+    if (this.focusedItem) {
+      this.focusedItem.focused = false;
+      this.focusedItem = void 0;
+    }
+  }
+  /** @hidden */
+  queryAllMenuItems() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isMenuItem)) != null ? _c : [];
+  }
+  /** @hidden */
+  queryVisibleMenuItems() {
+    return this.queryAllMenuItems().filter(isVisibleElement);
+  }
+  /** @hidden */
+  render() {
+    return html`<div role="menu" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}"><slot></slot></div>`;
+  }
+};
+/** @hidden */
+Menu.styles = blockComponentStyles;
+__decorateClass([
+  property({ attribute: false })
+], Menu.prototype, "editor", 2);
+__decorateClass([
+  state()
+], Menu.prototype, "focusedItem", 2);
+__decorateClass([
+  query("slot")
+], Menu.prototype, "defaultSlot", 2);
+Menu = __decorateClass([
+  customElement("prosekit-menu")
+], Menu);
+export {
+  Menu
+};

package/dist/prosekit-lit-elements-picker.js

@@ -0,0 +1,11 @@
+import {
+  Picker,
+  defaultPopoverOptions
+} from "./chunk-NMFTOM6J.js";
+import "./chunk-Y34HGIIF.js";
+import "./chunk-JFOZX34E.js";
+import "./chunk-43BFWKM2.js";
+export {
+  Picker,
+  defaultPopoverOptions
+};

package/dist/prosekit-lit-elements-popover-slash.js

@@ -0,0 +1,211 @@
+import {
+  popoverSuggestionContext
+} from "./chunk-TFM6CTEO.js";
+import "./chunk-VYMBIH4T.js";
+import {
+  blockComponentStyles
+} from "./chunk-XEV4EE3R.js";
+import {
+  __decorateClass
+} from "./chunk-S65R2BUY.js";
+
+// src/elements/popover-slash.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// src/elements/popover-abs.ts
+import { provide } from "@lit-labs/context";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+
+// src/controllers/suggestion-controller.ts
+import { ProseKitError } from "@prosekit/core";
+import { addSuggestion } from "@prosekit/extension-suggestion";
+var SuggestionController = class {
+  constructor(host, editor, rules, onContext) {
+    this.host = host;
+    this.editor = editor;
+    this.rules = rules;
+    this.onContext = onContext;
+    this.connected = false;
+    this.reference = null;
+    this.removeExtension = null;
+    if (!editor) {
+      throw new ProseKitError("Missing 'editor' property");
+    }
+    if (!rules) {
+      throw new ProseKitError("Missing 'rules' property");
+    }
+    this.host.addController(this);
+  }
+  hostUpdated() {
+    var _a;
+    if (this.connected)
+      return;
+    this.connected = true;
+    const editor = this.editor;
+    if (!editor) {
+      throw new ProseKitError("Missing 'editor' property");
+    }
+    if (!this.rules) {
+      throw new ProseKitError("Missing 'rules' property");
+    }
+    const extension = addSuggestion({
+      rules: this.rules,
+      onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
+        var _a2, _b;
+        const span = editor.view.dom.querySelector(
+          ".prosemirror-prediction-match"
+        );
+        if (span) {
+          this.reference = span;
+        }
+        const matchText = match[0] + ((_a2 = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a2 : "");
+        (_b = this.onContext) == null ? void 0 : _b.call(this, {
+          active: true,
+          query: matchText,
+          onDismiss: () => {
+            dismiss();
+          },
+          onSubmit: () => {
+            deleteMatch();
+          }
+        });
+      },
+      onDeactivate: () => {
+        var _a2;
+        this.reference = null;
+        (_a2 = this.onContext) == null ? void 0 : _a2.call(this, {
+          active: false
+        });
+      }
+    });
+    (_a = this.removeExtension) == null ? void 0 : _a.call(this);
+    this.removeExtension = editor.use(extension);
+  }
+  hostDisconnected() {
+    var _a;
+    this.connected = false;
+    (_a = this.removeExtension) == null ? void 0 : _a.call(this);
+    this.removeExtension = null;
+  }
+};
+
+// src/elements/popover-abs.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
+  // boundary: document.body,
+};
+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()
+  ]
+};
+var PopoverAbstract = class extends LitElement {
+  /** @hidden */
+  constructor() {
+    super();
+    this.popoverOptions = defaultPopoverOptions;
+    this.context = { active: false };
+  }
+  /** @hidden */
+  firstUpdated() {
+    setTimeout(() => {
+      this.controller = new SuggestionController(
+        this,
+        this.editor,
+        this.rules,
+        (context) => {
+          var _a;
+          (_a = this.onContext) == null ? void 0 : _a.call(this, context);
+          this.context = context;
+        }
+      );
+    });
+  }
+  /** @hidden */
+  get active() {
+    var _a;
+    return !!((_a = this.controller) == null ? void 0 : _a.reference);
+  }
+};
+/** @hidden */
+PopoverAbstract.styles = blockComponentStyles;
+__decorateClass([
+  property({ attribute: false })
+], PopoverAbstract.prototype, "editor", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverAbstract.prototype, "popoverOptions", 2);
+__decorateClass([
+  provide({ context: popoverSuggestionContext }),
+  state()
+], PopoverAbstract.prototype, "context", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverAbstract.prototype, "onContext", 2);
+__decorateClass([
+  state()
+], PopoverAbstract.prototype, "controller", 2);
+
+// src/elements/popover-slash.ts
+var PopoverSlash = class extends PopoverAbstract {
+  constructor() {
+    super(...arguments);
+    this.rules = [
+      {
+        match: /\/.*$/iu,
+        matchAfter: /^\S*/
+      }
+    ];
+  }
+  /** @hidden */
+  render() {
+    var _a, _b;
+    return html`<prosekit-popover .active="${this.active}" .reference="${(_b = (_a = this.controller) == null ? void 0 : _a.reference) != null ? _b : void 0}" .options="${this.popoverOptions}"><slot @menu-dismiss="${() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = this.context) == null ? void 0 : _a2.onDismiss) == null ? void 0 : _b2.call(_a2);
+    }}" @menu-select="${() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = this.context) == null ? void 0 : _a2.onSubmit) == null ? void 0 : _b2.call(_a2);
+    }}"></slot></prosekit-popover>`;
+  }
+};
+PopoverSlash = __decorateClass([
+  customElement("prosekit-popover-slash")
+], PopoverSlash);
+export {
+  PopoverSlash
+};

package/dist/prosekit-lit-elements-popover-suggestion-consumer.js

@@ -0,0 +1,36 @@
+import {
+  popoverSuggestionContext
+} from "./chunk-TFM6CTEO.js";
+import "./chunk-VYMBIH4T.js";
+import "./chunk-XEV4EE3R.js";
+import {
+  __decorateClass
+} from "./chunk-S65R2BUY.js";
+
+// src/elements/popover-suggestion-consumer.ts
+import { consume } from "@lit-labs/context";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var PopoverSuggestionConsumer = class extends LitElement {
+  updated() {
+    var _a;
+    if (this.contextA) {
+      (_a = this.onContext) == null ? void 0 : _a.call(this, this.contextA);
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  consume({ context: popoverSuggestionContext, subscribe: true })
+], PopoverSuggestionConsumer.prototype, "contextA", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverSuggestionConsumer.prototype, "onContext", 2);
+PopoverSuggestionConsumer = __decorateClass([
+  customElement("prosekit-popover-suggestion-consumer")
+], PopoverSuggestionConsumer);
+export {
+  PopoverSuggestionConsumer
+};

package/dist/prosekit-lit-elements-popover-suggestion.js

@@ -0,0 +1,218 @@
+import "./chunk-7C2I5DWH.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-43BFWKM2.js";
+
+// src/elements/popover-suggestion/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/elements/popover-suggestion/popover-suggestion.ts
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/utils/is-menu.ts
+function isMenu(element) {
+  var _a, _b;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-menu" || ["menu"].includes((_b = element == null ? void 0 : element.getAttribute("role")) != null ? _b : "");
+}
+
+// src/elements/popover-suggestion/controller.ts
+import { ProseKitError } from "@prosekit/core";
+import { addSuggestion } from "@prosekit/extension-suggestion";
+var PopoverSuggestionController = class {
+  constructor(host, editor, rules, onContext) {
+    this.host = host;
+    this.editor = editor;
+    this.rules = rules;
+    this.onContext = onContext;
+    this.connected = false;
+    this.reference = null;
+    this.removeExtension = null;
+    if (!editor) {
+      throw new ProseKitError("Missing 'editor' property");
+    }
+    if (!rules) {
+      throw new ProseKitError("Missing 'rules' property");
+    }
+    this.host.addController(this);
+  }
+  hostUpdated() {
+    var _a;
+    if (this.connected)
+      return;
+    this.connected = true;
+    const editor = this.editor;
+    if (!editor) {
+      throw new ProseKitError("Missing 'editor' property");
+    }
+    if (!this.rules) {
+      throw new ProseKitError("Missing 'rules' property");
+    }
+    const extension = addSuggestion({
+      rules: this.rules,
+      onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
+        var _a2, _b;
+        const span = editor.view.dom.querySelector(
+          ".prosemirror-prediction-match"
+        );
+        if (span) {
+          this.reference = span;
+        }
+        const matchText = match[0] + ((_a2 = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a2 : "");
+        (_b = this.onContext) == null ? void 0 : _b.call(this, {
+          active: true,
+          query: matchText,
+          onDismiss: () => {
+            dismiss();
+          },
+          onSubmit: () => {
+            deleteMatch();
+          }
+        });
+      },
+      onDeactivate: () => {
+        this.reference = null;
+        setTimeout(() => {
+          var _a2;
+          (_a2 = this.onContext) == null ? void 0 : _a2.call(this, {
+            active: false
+          });
+        });
+      }
+    });
+    (_a = this.removeExtension) == null ? void 0 : _a.call(this);
+    this.removeExtension = editor.use(extension);
+  }
+  hostDisconnected() {
+    var _a;
+    this.connected = false;
+    (_a = this.removeExtension) == null ? void 0 : _a.call(this);
+    this.removeExtension = null;
+  }
+};
+
+// src/elements/popover-suggestion/popover-suggestion.ts
+var PopoverSuggestion = class extends LitElement {
+  /** @hidden */
+  constructor() {
+    super();
+    this.popoverOptions = defaultPopoverOptions;
+    this.context = { active: false };
+  }
+  /** @hidden */
+  firstUpdated() {
+    setTimeout(() => {
+      this.controller = new PopoverSuggestionController(
+        this,
+        this.editor,
+        this.rules,
+        (context) => {
+          var _a;
+          (_a = this.onContext) == null ? void 0 : _a.call(this, context);
+          this.context = context;
+          requestAnimationFrame(() => {
+            var _a2, _b;
+            (_b = (_a2 = this.queryMenu()) == null ? void 0 : _a2.ensureFocusedItem) == null ? void 0 : _b.call(_a2);
+          });
+        }
+      );
+    });
+  }
+  /** @hidden */
+  get active() {
+    var _a;
+    return !!((_a = this.controller) == null ? void 0 : _a.reference);
+  }
+  /** @hidden */
+  queryMenu() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isMenu)) != null ? _c : null;
+  }
+  /** @hidden */
+  render() {
+    var _a, _b;
+    return html`<prosekit-popover .active="${this.active}" .reference="${(_b = (_a = this.controller) == null ? void 0 : _a.reference) != null ? _b : void 0}" .options="${this.popoverOptions}"><slot @menu-dismiss="${() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = this.context) == null ? void 0 : _a2.onDismiss) == null ? void 0 : _b2.call(_a2);
+    }}" @menu-select="${() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = this.context) == null ? void 0 : _a2.onSubmit) == null ? void 0 : _b2.call(_a2);
+    }}"></slot></prosekit-popover>`;
+  }
+};
+/** @hidden */
+PopoverSuggestion.styles = blockComponentStyles;
+__decorateClass([
+  property({ attribute: false })
+], PopoverSuggestion.prototype, "editor", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverSuggestion.prototype, "popoverOptions", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverSuggestion.prototype, "rules", 2);
+__decorateClass([
+  state()
+], PopoverSuggestion.prototype, "context", 2);
+__decorateClass([
+  property({ attribute: false })
+], PopoverSuggestion.prototype, "onContext", 2);
+__decorateClass([
+  state()
+], PopoverSuggestion.prototype, "controller", 2);
+__decorateClass([
+  query("slot")
+], PopoverSuggestion.prototype, "defaultSlot", 2);
+PopoverSuggestion = __decorateClass([
+  customElement("prosekit-popover-suggestion")
+], PopoverSuggestion);
+export {
+  PopoverSuggestion,
+  defaultPopoverOptions
+};

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

@@ -0,0 +1,7 @@
+import {
+  Popover
+} from "./chunk-7C2I5DWH.js";
+import "./chunk-43BFWKM2.js";
+export {
+  Popover
+};