@prosekit/lit 0.0.0-next-20230627094841

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

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

@@ -0,0 +1,213 @@
+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
+};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@prosekit/lit",
+  "type": "module",
+  "version": "0.0.0-next-20230627094841",
+  "private": false,
+  "author": {
+    "name": "ocavue",
+    "email": "ocavue@gmail.com"
+  },
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/ocavue",
+  "homepage": "https://github.com/ocavue/prosekit#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ocavue/prosekit.git",
+    "directory": "packages/lit"
+  },
+  "bugs": {
+    "url": "https://github.com/ocavue/prosekit/issues"
+  },
+  "keywords": [
+    "ProseMirror"
+  ],
+  "sideEffects": true,
+  "main": "./dist/prosekit-lit.js",
+  "module": "./dist/prosekit-lit.js",
+  "exports": {
+    ".": {
+      "types": "./dist/prosekit-lit.d.ts",
+      "import": "./dist/prosekit-lit.js",
+      "default": "./dist/prosekit-lit.js"
+    },
+    "./elements/menu": {
+      "types": "./dist/prosekit-lit-elements-menu.d.ts",
+      "import": "./dist/prosekit-lit-elements-menu.js",
+      "default": "./dist/prosekit-lit-elements-menu.js"
+    },
+    "./elements/menu-item": {
+      "types": "./dist/prosekit-lit-elements-menu-item.d.ts",
+      "import": "./dist/prosekit-lit-elements-menu-item.js",
+      "default": "./dist/prosekit-lit-elements-menu-item.js"
+    },
+    "./elements/popover": {
+      "types": "./dist/prosekit-lit-elements-popover.d.ts",
+      "import": "./dist/prosekit-lit-elements-popover.js",
+      "default": "./dist/prosekit-lit-elements-popover.js"
+    },
+    "./elements/popover-suggestion": {
+      "types": "./dist/prosekit-lit-elements-popover-suggestion.d.ts",
+      "import": "./dist/prosekit-lit-elements-popover-suggestion.js",
+      "default": "./dist/prosekit-lit-elements-popover-suggestion.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@floating-ui/dom": "^1.4.2",
+    "@lit/reactive-element": "^2.0.0-pre.0",
+    "@prosekit/core": "0.0.0-next-20230627094841",
+    "@prosekit/extension-suggestion": "0.0.0-next-20230627094841",
+    "@prosekit/pm": "0.0.0-next-20230627094841",
+    "lit": "^3.0.0-pre.0",
+    "lit-element": "^4.0.0-pre.0",
+    "lit-html": "^3.0.0-pre.0"
+  },
+  "devDependencies": {
+    "minify-literals": "^1.0.5",
+    "tsup": "^7.1.0",
+    "typescript": "^5.1.3",
+    "vitest": "^0.32.2",
+    "vue": "^3.3.4",
+    "@prosekit/dev": "0.0.0"
+  },
+  "scripts": {
+    "build:tsup": "tsup",
+    "build:tsc": "tsc -b tsconfig.json"
+  },
+  "types": "./dist/prosekit-lit.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @module @prosekit/lit
+ */
+
+export {}