@prosekit/web 0.1.9 → 0.2.0

package/dist/prosekit-web-block-handle.js

@@ -1,12 +1,12 @@
 import {
   useEditorExtension
-} from "./chunk-VJEVDINM.js";
+} from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
-} from "./chunk-LCDA7GFP.js";
+} from "./chunk-Y2CJYXR5.js";
 
 // src/components/block-handle/block-drag-handle/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/block-handle/block-drag-handle/props.ts
 var defaultBlockDragHandleProps = Object.freeze({
@@ -15,8 +15,6 @@ var defaultBlockDragHandleProps = Object.freeze({
 
 // src/components/block-handle/block-drag-handle/state.ts
 import {
-  assignProps,
-  mapSignals,
   useEffect,
   useEventListener
 } from "@aria-ui/core";
@@ -35,52 +33,35 @@ var blockPopoverContext = createContext(
 );
 
 // src/components/block-handle/block-drag-handle/state.ts
-function useBlockDragHandle(host, props) {
-  const context = blockPopoverContext.consume(host);
-  const state = mapSignals(assignProps(defaultBlockDragHandleProps, props));
+function useBlockDragHandle(host, state) {
+  let context = blockPopoverContext.consume(host);
   useEffect(host, () => {
-    host.draggable = true;
-  });
-  useEventListener(host, "pointerdown", () => {
+    host.draggable = !0;
+  }), useEventListener(host, "pointerdown", () => {
     var _a, _b;
-    const { pos } = (_a = context.value) != null ? _a : {};
-    const { view } = (_b = state.editor.value) != null ? _b : {};
-    if (pos == null || view == null) {
-      return;
-    }
-    view.dispatch(
+    let { pos } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
+    pos == null || view == null || (view.dispatch(
       view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
-    );
-    requestAnimationFrame(() => {
+    ), requestAnimationFrame(() => {
       view.focus();
-    });
-  });
-  useEventListener(host, "dragstart", (event) => {
+    }));
+  }), useEventListener(host, "dragstart", (event) => {
     var _a, _b;
-    const { pos, element, node } = (_a = context.value) != null ? _a : {};
-    const { view } = (_b = state.editor.value) != null ? _b : {};
-    if (pos == null || !element || !node || !view || !event.dataTransfer) {
-      return;
-    }
-    event.dataTransfer.clearData();
-    event.dataTransfer.setData("text/html", element.outerHTML);
-    event.dataTransfer.effectAllowed = "copyMove";
-    event.dataTransfer.setDragImage(element, 0, 0);
-    view.dragging = {
+    let { pos, element, node } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
+    pos == null || !element || !node || !view || !event.dataTransfer || (event.dataTransfer.clearData(), event.dataTransfer.setData("text/html", element.outerHTML), event.dataTransfer.effectAllowed = "copyMove", event.dataTransfer.setDragImage(element, 0, 0), view.dragging = {
       slice: new Slice(Fragment.from(node), 0, 0),
-      move: true
-    };
+      move: !0
+    });
   });
-  return state;
 }
 
 // src/components/block-handle/block-drag-handle/element.gen.ts
-var BlockDragHandleElement = class extends ElementMixin(useBlockDragHandle, defaultBlockDragHandleProps) {
+var BlockDragHandleElement = class extends ElementBuilder(useBlockDragHandle, defaultBlockDragHandleProps) {
 };
 defineCustomElement("prosekit-block-drag-handle", BlockDragHandleElement);
 
 // src/components/block-handle/block-popover/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/block-handle/block-popover/props.ts
 import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
@@ -93,10 +74,8 @@ var defaultBlockPopoverProps = Object.freeze({
 
 // src/components/block-handle/block-popover/state.ts
 import {
-  assignProps as assignProps2,
   createComputed,
   createSignal,
-  mapSignals as mapSignals2,
   useAttribute,
   useEffect as useEffect2
 } from "@aria-ui/core";
@@ -110,20 +89,16 @@ import { defineDOMEventHandler, union } from "@prosekit/core";
 function throttle(callback, wait) {
   let lastTime = 0;
   return (...args) => {
-    const now = Date.now();
-    if (now - lastTime >= wait) {
-      callback(...args);
-      lastTime = now;
-    }
+    let now = Date.now();
+    now - lastTime >= wait && (callback(...args), lastTime = now);
   };
 }
 
 // src/components/block-handle/block-popover/pointer-move.ts
 function defineElementHoverHandler(handler) {
-  const handlePointerEvent = (view, event) => {
+  let handlePointerEvent = (view, event) => {
     var _a;
-    const rect = view.dom.getBoundingClientRect();
-    const pos = (_a = view.posAtCoords({
+    let rect = view.dom.getBoundingClientRect(), pos = (_a = view.posAtCoords({
       top: event.clientY,
       // Use the center of the editor
       left: rect.left + rect.width / 2
@@ -132,28 +107,19 @@ function defineElementHoverHandler(handler) {
       handler(null, null, null, null);
       return;
     }
-    const $pos = view.state.doc.resolve(pos);
-    const node = view.state.doc.nodeAt(pos);
-    const element = view.nodeDOM(pos);
+    let $pos = view.state.doc.resolve(pos), node = view.state.doc.nodeAt(pos), element = view.nodeDOM(pos);
     if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
-      const ancestorPos = $pos.before($pos.depth);
-      const node2 = view.state.doc.nodeAt(ancestorPos);
-      const element2 = view.nodeDOM(ancestorPos);
+      let ancestorPos = $pos.before($pos.depth), node2 = view.state.doc.nodeAt(ancestorPos), element2 = view.nodeDOM(ancestorPos);
       if (!element2) {
         handler(null, null, null, null);
         return;
       }
-      const reference = {
+      handler({
         contextElement: element2,
         // Get the bounding client rect of the parent node, including its
         // margins.
         getBoundingClientRect: () => {
-          const rect2 = element2.getBoundingClientRect();
-          const style = window.getComputedStyle(element2);
-          const marginTop = Number.parseInt(style.marginTop, 10) || 0;
-          const marginRight = Number.parseInt(style.marginRight, 10) || 0;
-          const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
-          const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
+          let rect2 = element2.getBoundingClientRect(), style = window.getComputedStyle(element2), marginTop = Number.parseInt(style.marginTop, 10) || 0, marginRight = Number.parseInt(style.marginRight, 10) || 0, marginBottom = Number.parseInt(style.marginBottom, 10) || 0, marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
           return {
             top: rect2.top - marginTop,
             right: rect2.right + marginRight,
@@ -165,8 +131,7 @@ function defineElementHoverHandler(handler) {
             y: rect2.y - marginTop
           };
         }
-      };
-      handler(reference, element2, node2, ancestorPos);
+      }, element2, node2, ancestorPos);
       return;
     }
     handler(element, element, node, pos);
@@ -179,48 +144,35 @@ function defineElementHoverHandler(handler) {
 }
 
 // src/components/block-handle/block-popover/state.ts
-function useBlockPopover(host, props) {
-  const state = mapSignals2(assignProps2(defaultBlockPopoverProps, props));
-  const { editor, ...overlayState } = state;
-  const reference = createSignal(null);
+function useBlockPopover(host, state) {
+  let { editor, ...overlayState } = state, reference = createSignal(null);
   useOverlayPositionerState(host, overlayState, { reference });
-  const context = createSignal({
+  let context = createSignal({
     pos: null,
     node: null,
     element: null
   });
   blockPopoverContext.provide(host, context);
-  const open = createSignal(false);
+  let open = createSignal(!1);
   useEffect2(host, () => {
-    open.value = !!context.value.element;
+    open.set(!!context.get().element);
+  }), useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
+    reference.set(referenceValue), context.set({ element, node, pos });
   });
-  useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
-    reference.value = referenceValue;
-    context.value = { element, node, pos };
-  });
-  const presence = createComputed(() => !!reference.value);
-  useAttribute(host, "data-state", () => presence.value ? "open" : "closed");
-  usePresence(host, presence);
-  return state;
+  let presence = createComputed(() => !!reference.get());
+  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed"), usePresence(host, presence);
 }
 function useHoverExtension(host, editor, handler) {
-  let prevElement = null;
-  let prevPos = null;
-  const extension = defineElementHoverHandler(
+  let prevElement = null, prevPos = null, extension = defineElementHoverHandler(
     (reference, element, node, pos) => {
-      if (prevElement === element && prevPos === pos) {
-        return;
-      }
-      prevElement = element;
-      prevPos = pos;
-      handler(reference, element, node, pos);
+      prevElement === element && prevPos === pos || (prevElement = element, prevPos = pos, handler(reference, element, node, pos));
     }
   );
   useEditorExtension(host, editor, extension);
 }
 
 // src/components/block-handle/block-popover/element.gen.ts
-var BlockPopoverElement = class extends ElementMixin2(useBlockPopover, defaultBlockPopoverProps) {
+var BlockPopoverElement = class extends ElementBuilder2(useBlockPopover, defaultBlockPopoverProps) {
 };
 defineCustomElement("prosekit-block-popover", BlockPopoverElement);
 export {

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

@@ -1,39 +1,38 @@
 import {
   useEditorExtension
-} from "./chunk-VJEVDINM.js";
+} from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
-} from "./chunk-LCDA7GFP.js";
+} from "./chunk-Y2CJYXR5.js";
 
 // src/components/inline-popover/inline-popover/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/inline-popover/inline-popover/props.ts
 import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
 var defaultInlinePopoverProps = Object.freeze({
   ...defaultOverlayPositionerProps,
   editor: null,
-  open: true,
+  defaultOpen: !0,
+  open: !1,
   onOpenChange: null,
   placement: "top",
   offset: 12,
-  shift: true,
-  flip: true,
-  hide: true,
-  overlap: true,
-  inline: true,
+  shift: !0,
+  flip: !0,
+  hide: !0,
+  overlap: !0,
+  inline: !0,
   overflowPadding: 8,
   // Don't need boundary when hoist is true.
-  hoist: true,
+  hoist: !0,
   boundary: []
 });
 
 // src/components/inline-popover/inline-popover/state.ts
 import {
-  assignProps,
   createComputed,
   createSignal,
-  mapSignals,
   useAttribute,
   useEffect
 } from "@aria-ui/core";
@@ -45,14 +44,14 @@ import {
   defineFocusChangeHandler
 } from "@prosekit/core";
 function useEditorFocusChangeEvent(host, editor, handler) {
-  const extension = defineFocusChangeHandler(handler);
+  let extension = defineFocusChangeHandler(handler);
   useEditorExtension(host, editor, extension);
 }
 
 // src/hooks/use-editor-update-event.ts
 import { defineUpdateHandler } from "@prosekit/core";
 function useEditorUpdateEvent(host, editor, handler) {
-  const extension = defineUpdateHandler(handler);
+  let extension = defineUpdateHandler(handler);
   useEditorExtension(host, editor, extension);
 }
 
@@ -61,52 +60,44 @@ import { isTextSelection } from "@prosekit/core";
 
 // src/utils/is-in-code-block.ts
 function isInCodeBlock(selection) {
-  const type = selection.$from.parent.type;
+  let type = selection.$from.parent.type;
   return type.spec.code && type.isBlock;
 }
 
 // src/components/inline-popover/inline-popover/virtual-selection-element.ts
 function getVirtualSelectionElement(view) {
-  if (typeof window === "undefined" || view.isDestroyed) {
+  if (typeof window == "undefined" || view.isDestroyed)
     return null;
-  }
-  const selection = view.state.selection;
+  let selection = view.state.selection;
   if (!selection.empty && !isInCodeBlock(selection) && isTextSelection(selection)) {
-    const decoration = getInlineDecoration(view);
-    if (decoration) {
+    let decoration = getInlineDecoration(view);
+    if (decoration)
       return decoration;
-    }
-    const range = getDomRange();
-    if (range) {
+    let range = getDomRange();
+    if (range)
       return {
         contextElement: view.dom,
         getBoundingClientRect: () => range.getBoundingClientRect(),
         getClientRects: () => range.getClientRects()
       };
-    }
   }
   return null;
 }
 function getDomRange() {
-  const selection = window.getSelection();
-  if (!selection || selection.isCollapsed) {
-    return;
-  }
-  const range = typeof selection.rangeCount === "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
-  if (!range) {
+  let selection = window.getSelection();
+  if (!selection || selection.isCollapsed)
     return;
-  }
-  return range;
+  let range = typeof selection.rangeCount == "number" && selection.rangeCount > 0 && selection.getRangeAt(0);
+  if (range)
+    return range;
 }
 function getInlineDecoration(view) {
-  const match = view.dom.querySelectorAll(".prosekit-virtual-selection");
-  if (match.length === 0) {
+  let match = view.dom.querySelectorAll(".prosekit-virtual-selection");
+  if (match.length === 0)
     return;
-  }
-  if (match.length === 1) {
+  if (match.length === 1)
     return match[0];
-  }
-  const items = Array.from(match);
+  let items = Array.from(match);
   return {
     contextElement: items[0],
     getBoundingClientRect: () => items[0].getBoundingClientRect(),
@@ -115,42 +106,27 @@ function getInlineDecoration(view) {
 }
 
 // src/components/inline-popover/inline-popover/state.ts
-function useInlinePopover(host, props) {
-  const state = mapSignals(assignProps(defaultInlinePopoverProps, props));
-  useInlinePopoverState(host, state);
-  return state;
-}
-function useInlinePopoverState(host, state) {
-  const { editor, open, onOpenChange, ...overlayState } = state;
-  const reference = useInlinePopoverReference(host, editor);
-  useOverlayPositionerState(host, overlayState, { reference });
-  const presence = createComputed(() => !!reference.value && open.value);
-  useAttribute(host, "data-state", () => presence.value ? "open" : "closed");
-  usePresence(host, presence);
+function useInlinePopover(host, state) {
+  let { editor, defaultOpen, open, onOpenChange, ...overlayState } = state, reference = useInlinePopoverReference(host, editor), hasReference = createComputed(() => !!reference.get());
   useEffect(host, () => {
-    var _a;
-    const presenceValue = presence.value;
-    (_a = onOpenChange.peek()) == null ? void 0 : _a(presenceValue);
-  });
+    let hasReferenceValue = hasReference.get(), onOpenChangeValue = onOpenChange.peek(), defaultOpenValue = defaultOpen.peek(), openValue = open.peek();
+    onOpenChangeValue && (defaultOpenValue || openValue) && onOpenChangeValue(hasReferenceValue);
+  }), useEffect(host, () => {
+    let hasReferenceValue = hasReference.get(), defaultOpenValue = defaultOpen.peek();
+    hasReferenceValue && defaultOpenValue ? open.set(!0) : hasReferenceValue || open.set(!1);
+  }), useOverlayPositionerState(host, overlayState, { reference }), useAttribute(host, "data-state", () => open.get() ? "open" : "closed"), usePresence(host, open);
 }
 function useInlinePopoverReference(host, editor) {
-  const reference = createSignal(null);
-  let editorFocused = false;
-  useEditorFocusChangeEvent(host, editor, (focus) => {
+  let reference = createSignal(null), editorFocused = !1;
+  return useEditorFocusChangeEvent(host, editor, (focus) => {
     editorFocused = focus;
-  });
-  useEditorUpdateEvent(host, editor, (view) => {
-    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement);
-    if (isPopoverFocused) {
-      return;
-    }
-    reference.value = getVirtualSelectionElement(view);
-  });
-  return reference;
+  }), useEditorUpdateEvent(host, editor, (view) => {
+    !editorFocused && host.contains(host.ownerDocument.activeElement) || reference.set(getVirtualSelectionElement(view));
+  }), reference;
 }
 
 // src/components/inline-popover/inline-popover/element.gen.ts
-var InlinePopoverElement = class extends ElementMixin(useInlinePopover, defaultInlinePopoverProps) {
+var InlinePopoverElement = class extends ElementBuilder(useInlinePopover, defaultInlinePopoverProps) {
 };
 defineCustomElement("prosekit-inline-popover", InlinePopoverElement);
 export {

package/dist/prosekit-web-popover.js

@@ -1,9 +1,9 @@
 import {
   defineCustomElement
-} from "./chunk-LCDA7GFP.js";
+} from "./chunk-Y2CJYXR5.js";
 
 // src/components/popover/popover-content/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/popover/popover-content/props.ts
 import {
@@ -14,12 +14,12 @@ import {
 import { usePopoverContent } from "@aria-ui/popover";
 
 // src/components/popover/popover-content/element.gen.ts
-var PopoverContentElement = class extends ElementMixin(usePopoverContent, defaultPopoverContentProps) {
+var PopoverContentElement = class extends ElementBuilder(usePopoverContent, defaultPopoverContentProps) {
 };
 defineCustomElement("prosekit-popover-content", PopoverContentElement);
 
 // src/components/popover/popover-root/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/popover/popover-root/props.ts
 import {
@@ -30,12 +30,12 @@ import {
 import { usePopoverRoot } from "@aria-ui/popover";
 
 // src/components/popover/popover-root/element.gen.ts
-var PopoverRootElement = class extends ElementMixin2(usePopoverRoot, defaultPopoverRootProps) {
+var PopoverRootElement = class extends ElementBuilder2(usePopoverRoot, defaultPopoverRootProps) {
 };
 defineCustomElement("prosekit-popover-root", PopoverRootElement);
 
 // src/components/popover/popover-trigger/element.gen.ts
-import { ElementMixin as ElementMixin3 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
 
 // src/components/popover/popover-trigger/props.ts
 import {
@@ -46,7 +46,7 @@ import {
 import { usePopoverTrigger } from "@aria-ui/popover";
 
 // src/components/popover/popover-trigger/element.gen.ts
-var PopoverTriggerElement = class extends ElementMixin3(usePopoverTrigger, defaultPopoverTriggerProps) {
+var PopoverTriggerElement = class extends ElementBuilder3(usePopoverTrigger, defaultPopoverTriggerProps) {
 };
 defineCustomElement("prosekit-popover-trigger", PopoverTriggerElement);
 export {