@prosekit/lit 0.1.8 → 0.2.0

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

@@ -1,6 +1,7 @@
 import {
-  Popover
-} from "./chunk-CUH6G34Q.js";
+  Popover,
+  popoverPropsNames
+} from "./chunk-OZUEYWYU.js";
 import {
   defineCustomElement
 } from "./chunk-S32IZIQF.js";
@@ -8,9 +9,66 @@ import {
 // src/components/inline-popover/index.ts
 import "@prosekit/core";
 
-// src/components/inline-popover/controller.ts
+// src/controllers/use-editor-focus-event.ts
+import {
+  defineFocusChangeHandler
+} from "@prosekit/core";
+
+// src/controllers/use-editor-extension.ts
+import "@prosekit/core";
+function useEditorExtension(host, extension) {
+  let cleanup;
+  let editor;
+  const update = () => {
+    cleanup == null ? void 0 : cleanup();
+    cleanup = editor == null ? void 0 : editor.use(extension);
+  };
+  const hostConnected = () => {
+    editor = host.editor;
+    update();
+  };
+  const hostUpdated = () => {
+    const newEditor = host.editor;
+    if (editor !== newEditor) {
+      editor = newEditor;
+      update();
+    }
+  };
+  const hostDisconnected = () => {
+    cleanup == null ? void 0 : cleanup();
+    cleanup = void 0;
+  };
+  host.addController({
+    hostConnected,
+    hostDisconnected,
+    hostUpdated
+  });
+}
+
+// src/controllers/use-editor-focus-event.ts
+function useEditorFocusChangeEvent(host, handler) {
+  const extension = defineFocusChangeHandler(handler);
+  useEditorExtension(host, extension);
+}
+
+// src/controllers/use-editor-update-event.ts
 import { defineUpdateHandler } from "@prosekit/core";
-import "lit";
+function useEditorUpdateEvent(host, handler) {
+  const extension = defineUpdateHandler(handler);
+  useEditorExtension(host, extension);
+}
+
+// src/controllers/use-pointer-down-event.ts
+function usePointerDownEvent(host, handler) {
+  host.addController({
+    hostConnected: () => {
+      host.addEventListener("pointerdown", handler);
+    },
+    hostDisconnected: () => {
+      host.removeEventListener("pointerdown", handler);
+    }
+  });
+}
 
 // src/components/inline-popover/helpers.ts
 import { isNodeSelection, isTextSelection } from "@prosekit/core";
@@ -28,7 +86,14 @@ function getVirtualSelectionElement(view) {
   }
   const selection = view.state.selection;
   if (!selection.empty && !isInCodeBlock(selection) && (isTextSelection(selection) || isNodeSelection(selection))) {
-    return getDomRange();
+    const range = getDomRange();
+    if (!range)
+      return;
+    return {
+      contextElement: view.dom,
+      getBoundingClientRect: () => range.getBoundingClientRect(),
+      getClientRects: () => range.getClientRects()
+    };
   }
 }
 function getDomRange() {
@@ -43,113 +108,69 @@ function getDomRange() {
   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();
+// src/components/inline-popover/use-inline-popover.ts
+function useInlinePopover(host, onReferenceChange) {
+  let interacting = false;
+  let reference;
+  usePointerDownEvent(host, () => {
+    interacting = true;
+  });
+  useEditorFocusChangeEvent(host, (focus) => {
+    if (focus) {
+      interacting = false;
     }
-  }
-  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) {
+  });
+  useEditorUpdateEvent(host, (view) => {
+    if (interacting) {
       return;
     }
-    const reference = getVirtualSelectionElement(editor.view);
-    if (this.reference !== reference) {
-      this.reference = reference;
-      this.host.requestUpdate();
+    const ref = getVirtualSelectionElement(view);
+    if (reference !== ref) {
+      reference = ref;
+      onReferenceChange(reference);
+      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 })
-  ]
-};
+  });
+  const getReference = () => reference;
+  return getReference;
+}
 
 // src/components/inline-popover/index.ts
-var propNames = ["editor", "popoverOptions"];
+var propNames = ["editor", ...popoverPropsNames];
 var InlinePopover = class extends Popover {
+  /**
+   * @hidden
+   */
   constructor() {
-    super(...arguments);
-    this.popoverOptions = defaultPopoverOptions;
-    this.dismiss = "escape";
-    /**
-     * @hidden
-     */
-    this.controller = new InlinePopoverController(this);
+    super();
+    this.positioning = {
+      strategy: "fixed",
+      placement: "top",
+      offset: 12,
+      flip: false,
+      hide: true,
+      shift: true,
+      overlap: true,
+      fitViewport: false,
+      inline: true
+    };
+    useInlinePopover(this, (reference) => {
+      this.reference = reference;
+    });
   }
   /**
    * @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;
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.open = !!this.reference;
   }
   /**
    * @hidden
    */
   hide() {
-    var _a;
     super.hide();
-    if ((_a = this.controller) == null ? void 0 : _a.reference) {
-      this.controller.reference = void 0;
-      this.reference = void 0;
-    }
+    this.reference = void 0;
   }
 };
 /**
@@ -157,8 +178,7 @@ var InlinePopover = class extends Popover {
  */
 InlinePopover.properties = {
   ...Popover.properties,
-  editor: { attribute: false },
-  popoverOptions: { attribute: false }
+  editor: { attribute: false }
 };
 defineCustomElement("prosekit-inline-popover", InlinePopover);
 export {

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

@@ -1,5 +1,6 @@
 export { AutoUpdateOptions } from './_tsup-dts-rollup';
-export { PopoverOptions_alias_2 as PopoverOptions } from './_tsup-dts-rollup';
+export { PositioningOptions_alias_2 as PositioningOptions } from './_tsup-dts-rollup';
+export { popoverPropsNames } 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

@@ -1,9 +1,10 @@
 import {
   Popover,
-  propNames
-} from "./chunk-CUH6G34Q.js";
+  popoverPropsNames
+} from "./chunk-OZUEYWYU.js";
 import "./chunk-S32IZIQF.js";
 export {
   Popover,
-  propNames
+  popoverPropsNames,
+  popoverPropsNames as propNames
 };

package/dist/prosekit-lit-resizable.js

@@ -17,9 +17,14 @@ var propNames = [
   "onSizeChangeEnd"
 ];
 var Resizable = class extends LightElement {
+  /**
+   * @hidden
+   */
   constructor() {
-    super(...arguments);
-    this.context = new ContextProvider(this, {
+    super();
+    this.startWidth = 0;
+    this.startHeight = 0;
+    new ContextProvider(this, {
       context: resizableContext,
       initialValue: {
         onResizeStart: () => this.handleResizeStart(),
@@ -27,8 +32,6 @@ var Resizable = class extends LightElement {
         onResizeEnd: () => this.handleResizeEnd()
       }
     });
-    this.startWidth = 0;
-    this.startHeight = 0;
   }
   handleResizeStart() {
     var _a, _b;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -95,20 +95,23 @@
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/dom": "^1.5.3",
     "@lit/context": "^1.1.0",
-    "@prosekit/core": "^0.2.2",
-    "@prosekit/extensions": "^0.2.2",
+    "@prosekit/core": "^0.2.4",
+    "@prosekit/extensions": "^0.2.4",
     "@prosekit/pm": "^0.1.1",
     "@superhuman/command-score": "^0.5.0",
-    "lit": "^3.1.0"
+    "@zag-js/dismissable": "^0.32.0",
+    "@zag-js/dom-query": "^0.32.0",
+    "@zag-js/utils": "^0.32.0",
+    "lit": "^3.1.1"
   },
   "devDependencies": {
     "@prosekit/dev": "*",
     "minify-literals": "^1.0.8",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^1.1.3"
+    "vitest": "^1.2.0"
   },
   "scripts": {
     "build:tsup": "tsup",

package/dist/chunk-CUH6G34Q.js

@@ -1,224 +0,0 @@
-import {
-  LightElement,
-  defineCustomElement
-} from "./chunk-S32IZIQF.js";
-
-// src/components/popover/index.ts
-import {
-  autoUpdate,
-  computePosition
-} from "@floating-ui/dom";
-
-// src/utils/popover-api.ts
-var popoverAvailable = typeof HTMLElement !== "undefined" && HTMLElement.prototype.hasOwnProperty("popover");
-var boundary = popoverAvailable && typeof document !== "undefined" && document.body || void 0;
-
-// src/utils/round-by-dpr.ts
-function roundByDPR(value) {
-  const dpr = window.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
-}
-
-// src/components/popover/default-popover-options.ts
-import {
-  offset,
-  shift,
-  size
-} from "@floating-ui/dom";
-
-// src/components/popover/options.ts
-import "@floating-ui/dom";
-
-// src/components/popover/default-popover-options.ts
-var defaultDetectOverflowOptions = {
-  padding: 8,
-  boundary
-};
-var defaultPopoverOptions = {
-  placement: "bottom",
-  middleware: [
-    offset({ mainAxis: 2, crossAxis: 0 }),
-    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/popover/index.ts
-var propNames = [
-  "active",
-  "reference",
-  "options",
-  "autoUpdate",
-  "autoUpdateOptions"
-];
-var Popover = class extends LightElement {
-  constructor() {
-    super(...arguments);
-    /**
-     * Controls the visibility of the popover element. When set to `true`, the
-     * popover is displayed and positioned relative to its reference element. When
-     * set to `false`, the popover is hidden and its positioning logic is
-     * deactivated.
-     */
-    this.active = false;
-    /**
-     * Controls whether the popover position is automatically updated when the
-     * reference element changes position. When set to `true`, the popover
-     * position is updated automatically. When set to `false`, the popover
-     * position is only updated when the given properties are changed.
-     *
-     * @default false
-     */
-    this.autoUpdate = false;
-    /**
-     * Controls whether the popover should be dismissed based on user interaction.
-     *
-     * Available options:
-     *
-     * - "off": The popover is not dismissed.
-     * - "on": The popover is dismissed when the user clicks outside of the popover or presses the escape key.
-     * - "click": The popover is dismissed when the user clicks outside of the popover.
-     * - "escape": The popover is dismissed when the user presses the escape key.
-     *
-     * @default "on"
-     */
-    this.dismiss = "on";
-    this.handleDocumentMouseDown = (event) => {
-      const path = event.composedPath();
-      if (!path.includes(this)) {
-        this.hide();
-      }
-    };
-    this.handleDocumentKeyDown = (event) => {
-      if (event.key === "Escape" && this.active) {
-        event.stopPropagation();
-        this.hide();
-        return;
-      }
-    };
-  }
-  /**
-   * @hidden
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    const clickEnabled = this.dismiss === "on" || this.dismiss === "click";
-    const escapeEnabled = this.dismiss === "on" || this.dismiss === "escape";
-    const handleMouseDown = clickEnabled ? this.handleDocumentMouseDown.bind(this) : null;
-    const handleKeyDown = escapeEnabled ? this.handleDocumentKeyDown.bind(this) : null;
-    handleMouseDown && document.addEventListener("mousedown", handleMouseDown);
-    handleKeyDown && document.addEventListener("keydown", handleKeyDown);
-    this.disposeEventListeners = () => {
-      handleMouseDown && document.removeEventListener("mousedown", handleMouseDown);
-      handleKeyDown && document.removeEventListener("keydown", handleKeyDown);
-    };
-  }
-  /**
-   * @hidden
-   */
-  disconnectedCallback() {
-    var _a, _b;
-    super.disconnectedCallback();
-    (_a = this.disposeAutoUpdate) == null ? void 0 : _a.call(this);
-    this.disposeAutoUpdate = void 0;
-    (_b = this.disposeEventListeners) == null ? void 0 : _b.call(this);
-    this.disposeEventListeners = void 0;
-  }
-  /**
-   * @hidden
-   */
-  updated(changedProperties) {
-    var _a;
-    super.updated(changedProperties);
-    if (popoverAvailable && this.isConnected) {
-      this.popover = "manual";
-      (_a = this.togglePopover) == null ? void 0 : _a.call(this, this.active);
-    }
-    this.start();
-    this.setHidden(!this.active);
-  }
-  /**
-   * @hidden
-   */
-  start() {
-    var _a;
-    (_a = this.disposeAutoUpdate) == null ? void 0 : _a.call(this);
-    this.disposeAutoUpdate = void 0;
-    const reference = this.reference;
-    if (!reference)
-      return;
-    if (!this.active)
-      return;
-    if (this.autoUpdate) {
-      this.disposeAutoUpdate = autoUpdate(
-        reference,
-        this,
-        () => void this.compute(),
-        this.autoUpdateOptions
-      );
-    } else {
-      void this.compute();
-    }
-  }
-  /**
-   * @hidden
-   */
-  async compute() {
-    var _a, _b, _c;
-    const reference = this.reference;
-    if (!reference)
-      return;
-    if (!this.active)
-      return;
-    this.setHidden(false);
-    this.style.setProperty("margin", "0");
-    this.style.setProperty("top", "0");
-    this.style.setProperty("left", "0");
-    this.style.setProperty("position", (_b = (_a = this.options) == null ? void 0 : _a.strategy) != null ? _b : "absolute");
-    const options = (_c = this.options) != null ? _c : defaultPopoverOptions;
-    const computed = await computePosition(reference, this, options);
-    const { x, y, strategy } = computed != null ? computed : { x: 0, y: 0, strategy: "absolute" };
-    this.style.setProperty("opacity", "1");
-    this.style.setProperty("position", strategy);
-    this.style.setProperty(
-      "transform",
-      `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`
-    );
-  }
-  /**
-   * @hidden
-   */
-  hide() {
-    this.active = false;
-  }
-};
-/**
- * @hidden
- */
-Popover.properties = {
-  active: { type: Boolean, reflect: true },
-  reference: { attribute: false },
-  options: { attribute: false },
-  autoUpdate: { type: Boolean, reflect: true },
-  autoUpdateOptions: { type: Object },
-  dismiss: { type: String, reflect: true }
-};
-defineCustomElement("prosekit-popover", Popover);
-
-export {
-  boundary,
-  propNames,
-  Popover
-};