@prosekit/lit 0.2.0 → 0.2.2

package/dist/_tsup-dts-rollup.d.ts

@@ -419,6 +419,9 @@ export declare class InlinePopover extends Popover implements Partial<InlinePopo
         editor: {
             attribute: false;
         };
+        available: {
+            attribute: false;
+        };
         reference: {
             attribute: false;
         };
@@ -437,6 +440,7 @@ export declare class InlinePopover extends Popover implements Partial<InlinePopo
         };
     };
     editor?: Editor;
+    available?: boolean;
     positioning?: PositioningOptions;
     /**
      * @hidden
@@ -454,6 +458,15 @@ export declare class InlinePopover extends Popover implements Partial<InlinePopo
 
 export declare type InlinePopoverProps = {
     editor: Editor;
+    /**
+     * Whether the popover is available to be shown.
+     *
+     * If `true`, the popover will be shown when the editor selection is not empty.
+     * If `false`, the popover will always be hidden.
+     *
+     * @default `true`
+     */
+    available?: boolean;
 } & PopoverProps;
 
 export declare function isAutocompleteItem(element?: Element | null): element is AutocompleteItem;
@@ -473,7 +486,13 @@ export declare class LightElement extends LitElement {
      * @hidden
      */
     constructor();
+    /**
+     * @hidden
+     */
     createRenderRoot(): this;
+    /**
+     * @hidden
+     */
     setHidden(hidden: boolean): void;
 }
 
@@ -755,7 +774,7 @@ declare const propNames_7: readonly [];
 export { propNames_7 as propNames_alias_16 }
 export { propNames_7 as propNames_alias_17 }
 
-export declare const propNames_alias_12: readonly ["editor", "open", "onOpenChange", "reference", "positioning"];
+export declare const propNames_alias_12: readonly ["editor", "available", "open", "onOpenChange", "reference", "positioning"];
 
 export declare const propNames_alias_5: readonly ["editor", "regex", "positioning"];
 
@@ -922,6 +941,9 @@ export declare function roundByDPR(value: number): number;
 
 export declare function setFloatingStyles(element: HTMLElement, options: PositioningOptions): void;
 
+/**
+ * @internal
+ */
 export declare function useDismissable(host: LitElement, { onEscapeKeyDown, onPointerDownOutside, onDismiss, getReference, }: {
     onEscapeKeyDown: (event: KeyboardEvent) => void;
     onPointerDownOutside: (event: Event) => void;
@@ -929,16 +951,34 @@ export declare function useDismissable(host: LitElement, { onEscapeKeyDown, onPo
     getReference?: () => ReferenceElement | null | undefined;
 }): void;
 
+/**
+ * @internal
+ */
 export declare function useEditorExtension(host: WithEditor<ReactiveControllerHost>, extension: Extension): void;
 
+/**
+ * @internal
+ */
 export declare function useEditorFocusChangeEvent(host: WithEditor<ReactiveControllerHost>, handler: FocusChangeHandler): void;
 
+/**
+ * @internal
+ */
 export declare function useEditorUpdateEvent(host: WithEditor<ReactiveControllerHost>, handler: UpdateHandler): void;
 
+/**
+ * @internal
+ */
 export declare function useEffect<T>(host: ReactiveControllerHost, getValue: () => T, onChange: (value: T) => void): void;
 
+/**
+ * @internal
+ */
 export declare function useInlinePopover(host: WithEditor<LitElement>, onReferenceChange: (reference: ReferenceElement | undefined) => void): () => ReferenceElement | undefined;
 
+/**
+ * @internal
+ */
 export declare function usePointerDownEvent(host: LitElement, handler: (event: PointerEvent) => void): void;
 
 export declare function usePopover(host: LitElement, getReference: () => ReferenceElement | null, getPositioning: () => PositioningOptions | null): void;

package/dist/{chunk-S32IZIQF.js → chunk-3AZDRLDR.js}

@@ -15,9 +15,15 @@ var LightElement = class extends LitElement {
   constructor() {
     super();
   }
+  /**
+   * @hidden
+   */
   createRenderRoot() {
     return this;
   }
+  /**
+   * @hidden
+   */
   setHidden(hidden) {
     if (this.hidden !== hidden) {
       this.hidden = hidden;

package/dist/{chunk-7RGGPFFK.js → chunk-3TPE2GKD.js}

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/combo-box-item/component.ts
 import { ContextConsumer } from "@lit/context";

package/dist/{chunk-MLUELLVA.js → chunk-I5EMQRE4.js}

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/autocomplete-item/component.ts
 import { ContextConsumer } from "@lit/context";

package/dist/{chunk-WWRKI6AU.js → chunk-JMZWTLTD.js}

@@ -7,7 +7,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/autocomplete-popover/context.ts
 import { createContext } from "@lit/context";

package/dist/{chunk-OZUEYWYU.js → chunk-YOZJWJGG.js}

@@ -1,7 +1,7 @@
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/popover/index.ts
 import "@floating-ui/dom";

package/dist/prosekit-lit-autocomplete-empty.js

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/autocomplete-empty/index.ts
 import { ContextConsumer } from "@lit/context";

package/dist/prosekit-lit-autocomplete-item.js

@@ -1,9 +1,9 @@
 import {
   AutocompleteItem,
   propNames
-} from "./chunk-MLUELLVA.js";
+} from "./chunk-I5EMQRE4.js";
 import "./chunk-5CI65R73.js";
-import "./chunk-S32IZIQF.js";
+import "./chunk-3AZDRLDR.js";
 export {
   AutocompleteItem,
   propNames

package/dist/prosekit-lit-autocomplete-list.js

@@ -1,11 +1,11 @@
 import {
   AutocompleteList,
   propNames
-} from "./chunk-WWRKI6AU.js";
-import "./chunk-MLUELLVA.js";
+} from "./chunk-JMZWTLTD.js";
+import "./chunk-I5EMQRE4.js";
 import "./chunk-5CI65R73.js";
 import "./chunk-GZRUCYLP.js";
-import "./chunk-S32IZIQF.js";
+import "./chunk-3AZDRLDR.js";
 export {
   AutocompleteList,
   propNames

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

@@ -1,15 +1,15 @@
 import {
   autocompletePopoverContext
-} from "./chunk-WWRKI6AU.js";
-import "./chunk-MLUELLVA.js";
+} from "./chunk-JMZWTLTD.js";
+import "./chunk-I5EMQRE4.js";
 import "./chunk-5CI65R73.js";
 import {
   Popover
-} from "./chunk-OZUEYWYU.js";
+} from "./chunk-YOZJWJGG.js";
 import "./chunk-GZRUCYLP.js";
 import {
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/autocomplete-popover/index.ts
 import { ContextProvider } from "@lit/context";
@@ -144,10 +144,11 @@ var AutocompletePopover = class extends Popover {
   }
   updateContext(query, active) {
     const context = this.context.value;
-    if (context.query === query && context.active === active) {
+    if (context.query !== query || context.active !== active) {
+      this.context.setValue({ ...context, query, active });
+    } else if (!active) {
       return;
     }
-    this.context.setValue({ ...context, query, active });
     this.requestUpdate();
     requestAnimationFrame(() => {
       var _a;

package/dist/prosekit-lit-combo-box-input.js

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/combo-box-input/index.ts
 import { ContextConsumer } from "@lit/context";

package/dist/prosekit-lit-combo-box-item.js

@@ -1,9 +1,9 @@
 import {
   ComboBoxItem,
   propNames
-} from "./chunk-7RGGPFFK.js";
+} from "./chunk-3TPE2GKD.js";
 import "./chunk-C4MW43I4.js";
-import "./chunk-S32IZIQF.js";
+import "./chunk-3AZDRLDR.js";
 export {
   ComboBoxItem,
   propNames

package/dist/prosekit-lit-combo-box-list.js

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/combo-box-list/component.ts
 import { ContextConsumer } from "@lit/context";

package/dist/prosekit-lit-combo-box.js

@@ -1,16 +1,16 @@
 import {
   Popover
-} from "./chunk-OZUEYWYU.js";
+} from "./chunk-YOZJWJGG.js";
 import {
   ListManager
 } from "./chunk-GZRUCYLP.js";
-import "./chunk-7RGGPFFK.js";
+import "./chunk-3TPE2GKD.js";
 import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
 import {
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/combo-box/index.ts
 import { ContextProvider } from "@lit/context";

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

@@ -1,10 +1,10 @@
 import {
   Popover,
   popoverPropsNames
-} from "./chunk-OZUEYWYU.js";
+} from "./chunk-YOZJWJGG.js";
 import {
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/inline-popover/index.ts
 import "@prosekit/core";
@@ -58,19 +58,7 @@ function useEditorUpdateEvent(host, 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
+// src/components/inline-popover/virtual-selection-element.ts
 import { isNodeSelection, isTextSelection } from "@prosekit/core";
 
 // src/utils/is-in-code-block.ts
@@ -79,21 +67,25 @@ function isInCodeBlock(selection) {
   return type.spec.code && type.isBlock;
 }
 
-// src/components/inline-popover/helpers.ts
+// src/components/inline-popover/virtual-selection-element.ts
 function getVirtualSelectionElement(view) {
   if (typeof window === "undefined" || view.isDestroyed) {
     return;
   }
   const selection = view.state.selection;
   if (!selection.empty && !isInCodeBlock(selection) && (isTextSelection(selection) || isNodeSelection(selection))) {
+    const decoration = getInlineDecoration(view);
+    if (decoration) {
+      return decoration;
+    }
     const range = getDomRange();
-    if (!range)
-      return;
-    return {
-      contextElement: view.dom,
-      getBoundingClientRect: () => range.getBoundingClientRect(),
-      getClientRects: () => range.getClientRects()
-    };
+    if (range) {
+      return {
+        contextElement: view.dom,
+        getBoundingClientRect: () => range.getBoundingClientRect(),
+        getClientRects: () => range.getClientRects()
+      };
+    }
   }
 }
 function getDomRange() {
@@ -107,23 +99,35 @@ function getDomRange() {
   }
   return range;
 }
+function getInlineDecoration(view) {
+  const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
+  if (match.length === 0) {
+    return;
+  }
+  if (match.length === 1) {
+    return match[0];
+  }
+  const items = Array.from(match);
+  return {
+    contextElement: items[0],
+    getBoundingClientRect: () => items[0].getBoundingClientRect(),
+    getClientRects: () => items.map((item) => item.getBoundingClientRect())
+  };
+}
 
 // src/components/inline-popover/use-inline-popover.ts
 function useInlinePopover(host, onReferenceChange) {
-  let interacting = false;
   let reference;
-  usePointerDownEvent(host, () => {
-    interacting = true;
-  });
+  let editorFocused = false;
+  const isPopoverFocused = () => {
+    return !editorFocused && host.contains(host.ownerDocument.activeElement);
+  };
   useEditorFocusChangeEvent(host, (focus) => {
-    if (focus) {
-      interacting = false;
-    }
+    editorFocused = focus;
   });
   useEditorUpdateEvent(host, (view) => {
-    if (interacting) {
+    if (isPopoverFocused())
       return;
-    }
     const ref = getVirtualSelectionElement(view);
     if (reference !== ref) {
       reference = ref;
@@ -136,13 +140,14 @@ function useInlinePopover(host, onReferenceChange) {
 }
 
 // src/components/inline-popover/index.ts
-var propNames = ["editor", ...popoverPropsNames];
+var propNames = ["editor", "available", ...popoverPropsNames];
 var InlinePopover = class extends Popover {
   /**
    * @hidden
    */
   constructor() {
     super();
+    this.available = true;
     this.positioning = {
       strategy: "fixed",
       placement: "top",
@@ -163,7 +168,7 @@ var InlinePopover = class extends Popover {
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-    this.open = !!this.reference;
+    this.open = !!(this.reference && this.available);
   }
   /**
    * @hidden
@@ -178,7 +183,8 @@ var InlinePopover = class extends Popover {
  */
 InlinePopover.properties = {
   ...Popover.properties,
-  editor: { attribute: false }
+  editor: { attribute: false },
+  available: { attribute: false }
 };
 defineCustomElement("prosekit-inline-popover", InlinePopover);
 export {

package/dist/prosekit-lit-popover.js

@@ -1,8 +1,8 @@
 import {
   Popover,
   popoverPropsNames
-} from "./chunk-OZUEYWYU.js";
-import "./chunk-S32IZIQF.js";
+} from "./chunk-YOZJWJGG.js";
+import "./chunk-3AZDRLDR.js";
 export {
   Popover,
   popoverPropsNames,

package/dist/prosekit-lit-resizable-handle.js

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/resizable-handle/component.ts
 import { ContextConsumer } from "@lit/context";

package/dist/prosekit-lit-resizable.js

@@ -4,7 +4,7 @@ import {
 import {
   LightElement,
   defineCustomElement
-} from "./chunk-S32IZIQF.js";
+} from "./chunk-3AZDRLDR.js";
 
 // src/components/resizable/component.ts
 import { ContextProvider } from "@lit/context";

package/package.json

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

package/src/index.ts

@@ -1 +0,0 @@
-export {}