@prosekit/lit 0.0.0-next-20230627094841 → 0.0.1

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

@@ -1,211 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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-popover2.js

@@ -1,119 +0,0 @@
-import {
-  blockComponentStyles
-} from "./chunk-XEV4EE3R.js";
-import {
-  __decorateClass
-} from "./chunk-S65R2BUY.js";
-
-// src/elements/popover2.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 Popover2 = 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 */
-Popover2.styles = blockComponentStyles;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Popover2.prototype, "active", 2);
-__decorateClass([
-  query(".floating")
-], Popover2.prototype, "floating", 2);
-__decorateClass([
-  property()
-], Popover2.prototype, "reference", 2);
-__decorateClass([
-  property()
-], Popover2.prototype, "options", 2);
-__decorateClass([
-  property({
-    type: Boolean,
-    reflect: true
-  })
-], Popover2.prototype, "autoUpdate", 2);
-__decorateClass([
-  property({ type: Object })
-], Popover2.prototype, "autoUpdateOptions", 2);
-__decorateClass([
-  state()
-], Popover2.prototype, "computed", 2);
-Popover2 = __decorateClass([
-  customElement("prosekit-popover2")
-], Popover2);
-function roundByDPR(value) {
-  const dpr = window.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-export {
-  Popover2
-};

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

@@ -1,213 +0,0 @@
-import {
-  createVisibilityFilter
-} from "./chunk-6EHMW3VI.js";
-import "./chunk-WUZ77NLF.js";
-import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-43BFWKM2.js";
-
-// src/elements/slash-popover/slash-popover.ts
-import { LitElement as LitElement2, html as html2 } from "lit";
-import { customElement as customElement2, property as property2 } from "lit/decorators.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 : "");
-          const menu = this.queryMenu();
-          if (menu)
-            menu.query = matchText;
-          this.handleDismiss = () => {
-            dismiss();
-          };
-          this.handleSubmit = () => {
-            deleteMatch();
-          };
-        },
-        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) {
-      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.
-          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/slash-popover/slash-popover.ts
-var SlashPopover = class extends LitElement2 {
-  constructor() {
-    super(...arguments);
-    this.popoverOptions = defaultPopoverOptions;
-  }
-  render() {
-    const rules = [
-      {
-        match: /\/.*$/iu,
-        matchAfter: /^\S*/
-      }
-    ];
-    return html2`<prosekit-picker .popoverOptions="${this.popoverOptions}" .editor="${this.editor}" .rules="${rules}"><slot></slot></prosekit-picker>`;
-  }
-};
-SlashPopover.styles = blockComponentStyles;
-__decorateClass([
-  property2()
-], SlashPopover.prototype, "editor", 2);
-__decorateClass([
-  property2({ type: Object })
-], SlashPopover.prototype, "popoverOptions", 2);
-SlashPopover = __decorateClass([
-  customElement2("prosekit-slash-popover")
-], SlashPopover);
-export {
-  SlashPopover
-};