@prosekit/lit 0.0.0-next-20230627094841

package/dist/chunk-NMFTOM6J.js

@@ -0,0 +1,189 @@
+import {
+  createVisibilityFilter
+} from "./chunk-Y34HGIIF.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-43BFWKM2.js";
+
+// src/elements/picker/picker.ts
+import {
+  flip,
+  inline,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { ProseKitError } from "@prosekit/core";
+import { addSuggestion } from "@prosekit/extension-suggestion";
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+
+// src/elements/menu/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/picker/picker.ts
+var Picker = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.popoverOptions = defaultPopoverOptions;
+  }
+  render() {
+    return html`<prosekit-popover .active="${this.active}" .reference="${this.reference}" .options="${this.popoverOptions}"><slot @menu-dismiss="${() => {
+      var _a;
+      return (_a = this.handleDismiss) == null ? void 0 : _a.call(this);
+    }}" @menu-select="${() => {
+      var _a;
+      return (_a = this.handleSubmit) == null ? void 0 : _a.call(this);
+    }}"></slot></prosekit-popover>`;
+  }
+  firstUpdated(_changedProperties) {
+    setTimeout(() => {
+      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 _a;
+          if (!this.editor)
+            return;
+          const editor2 = this.editor;
+          const span = editor2.view.dom.querySelector(
+            ".prosemirror-prediction-match"
+          );
+          if (span) {
+            this.reference = span;
+          }
+          const matchText = match[0] + ((_a = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a : "");
+          console.log("matchText:", matchText);
+          const menu = this.queryMenu();
+          console.log("menu:", menu);
+          if (menu)
+            menu.query = matchText;
+          this.handleDismiss = () => {
+            console.log("this.handleDismiss");
+            dismiss();
+          };
+          this.handleSubmit = () => {
+            console.log("this.handleSubmit");
+            deleteMatch();
+          };
+        },
+        onDeactivate: () => {
+          console.log("onDeactivate");
+          this.reference = void 0;
+        }
+      });
+      this.removeExtension = editor.use(extension);
+    }, 0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.reference = void 0;
+    if (this.removeExtension) {
+      this.removeExtension();
+      this.removeExtension = void 0;
+    }
+  }
+  updated() {
+    const menu = this.queryMenu();
+    if (menu) {
+      console.log("set active to ", this.active);
+      menu.active = this.active;
+    }
+  }
+  get active() {
+    return !!this.reference;
+  }
+  queryMenu({
+    visible = null
+  } = {}) {
+    var _a, _b, _c, _d;
+    const menus = (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isMenu)) == null ? void 0 : _c.filter(createVisibilityFilter(visible));
+    return (_d = menus == null ? void 0 : menus[0]) != null ? _d : null;
+  }
+};
+Picker.styles = blockComponentStyles;
+__decorateClass([
+  property()
+], Picker.prototype, "editor", 2);
+__decorateClass([
+  property()
+], Picker.prototype, "rules", 2);
+__decorateClass([
+  property({ type: Object })
+], Picker.prototype, "popoverOptions", 2);
+__decorateClass([
+  state()
+], Picker.prototype, "reference", 2);
+__decorateClass([
+  state()
+], Picker.prototype, "removeExtension", 2);
+__decorateClass([
+  state()
+], Picker.prototype, "handleDismiss", 2);
+__decorateClass([
+  state()
+], Picker.prototype, "handleSubmit", 2);
+__decorateClass([
+  query("slot")
+], Picker.prototype, "defaultSlot", 2);
+__decorateClass([
+  query("popover")
+], Picker.prototype, "popover", 2);
+Picker = __decorateClass([
+  customElement("prosekit-picker")
+], Picker);
+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.....v2
+          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()
+  ]
+};
+
+export {
+  Picker,
+  defaultPopoverOptions
+};

package/dist/chunk-S65R2BUY.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+export {
+  __decorateClass
+};

package/dist/chunk-TFM6CTEO.js

@@ -0,0 +1,9 @@
+// src/contexts/popover-suggestion-context.ts
+import { createContext } from "@lit-labs/context";
+var popoverSuggestionContext = createContext(
+  "PROSEKIT_POPOVER_SUGGESTION"
+);
+
+export {
+  popoverSuggestionContext
+};

package/dist/chunk-VYMBIH4T.js

@@ -0,0 +1,120 @@
+import {
+  blockComponentStyles
+} from "./chunk-XEV4EE3R.js";
+import {
+  __decorateClass
+} from "./chunk-S65R2BUY.js";
+
+// src/elements/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";
+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);
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+
+export {
+  Popover
+};

package/dist/chunk-WUZ77NLF.js

@@ -0,0 +1,108 @@
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-43BFWKM2.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";
+var Popover = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.reference = null;
+    this.autoUpdate = false;
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  updated(changed) {
+    if (!changed.has("computed")) {
+      this.start();
+    }
+  }
+  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();
+    }
+  }
+  async compute() {
+    const reference = this.reference;
+    const floating = this.floating;
+    if (!reference)
+      return;
+    const options = this.options;
+    this.computed = await computePosition(reference, floating, options);
+  }
+  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>`;
+  }
+  cleanup() {
+    var _a;
+    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
+    this.cleanupAutoUpdate = void 0;
+  }
+};
+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({ type: Object })
+], 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);
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+
+export {
+  Popover
+};

package/dist/chunk-XEV4EE3R.js

@@ -0,0 +1,13 @@
+// src/styles/block-component.styles.ts
+import { css as css2 } from "lit";
+
+// src/styles/component.styles.ts
+import { css } from "lit";
+var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:host ::before{box-sizing:inherit}`;
+
+// src/styles/block-component.styles.ts
+var blockComponentStyles = css2`${componentStyles}:host{display:block}`;
+
+export {
+  blockComponentStyles
+};

package/dist/chunk-Y34HGIIF.js

@@ -0,0 +1,20 @@
+// src/utils/visibility.ts
+function isVisibleElement(element) {
+  return !element.hidden;
+}
+function isHiddenElement(element) {
+  return element.hidden;
+}
+function createVisibilityFilter(visible) {
+  if (visible === true)
+    return isVisibleElement;
+  if (visible === false)
+    return isHiddenElement;
+  return () => true;
+}
+
+export {
+  isVisibleElement,
+  isHiddenElement,
+  createVisibilityFilter
+};

package/dist/chunk-YS57RXAX.js

@@ -0,0 +1,124 @@
+import {
+  blockComponentStyles
+} from "./chunk-XEV4EE3R.js";
+import {
+  __decorateClass
+} from "./chunk-S65R2BUY.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/prosekit-lit-elements-menu-item.js

@@ -0,0 +1,37 @@
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-43BFWKM2.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
+};