@prosekit/web 0.3.13 → 0.3.14

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

@@ -179,6 +179,9 @@ declare const BlockDragHandleElement_base: {
     prototype: HTMLElement;
 };
 
+/**
+ * @deprecated Use `BlockHandleDraggableProps` instead.
+ */
 declare interface BlockDragHandleProps {
     /**
      * The ProseKit editor instance.
@@ -190,14 +193,67 @@ declare interface BlockDragHandleProps {
 export { BlockDragHandleProps }
 export { BlockDragHandleProps as BlockDragHandleProps_alias_1 }
 
+declare class BlockHandleAddElement extends BlockHandleAddElement_base {
+}
+export { BlockHandleAddElement }
+export { BlockHandleAddElement as BlockHandleAddElement_alias_1 }
+
+declare const BlockHandleAddElement_base: {
+    new (): BaseElement & BlockHandleAddProps;
+    prototype: HTMLElement;
+};
+
+declare interface BlockHandleAddProps {
+    /**
+     * The ProseKit editor instance.
+     *
+     * @default null
+     */
+    editor: Editor | null;
+}
+export { BlockHandleAddProps }
+export { BlockHandleAddProps as BlockHandleAddProps_alias_1 }
+
+declare class BlockHandleDraggableElement extends BlockHandleDraggableElement_base {
+}
+export { BlockHandleDraggableElement }
+export { BlockHandleDraggableElement as BlockHandleDraggableElement_alias_1 }
+
+declare const BlockHandleDraggableElement_base: {
+    new (): BaseElement & BlockHandleDraggableProps;
+    prototype: HTMLElement;
+};
+
+declare interface BlockHandleDraggableProps {
+    /**
+     * The ProseKit editor instance.
+     *
+     * @default null
+     */
+    editor: Editor | null;
+}
+export { BlockHandleDraggableProps }
+export { BlockHandleDraggableProps as BlockHandleDraggableProps_alias_1 }
+
+declare class BlockHandlePopoverElement extends BlockHandlePopoverElement_base {
+}
+export { BlockHandlePopoverElement }
+export { BlockHandlePopoverElement as BlockHandlePopoverElement_alias_1 }
+
+declare const BlockHandlePopoverElement_base: {
+    new (): BaseElement & BlockHandlePopoverProps;
+    prototype: HTMLElement;
+};
+
+declare interface BlockHandlePopoverProps extends BlockPopoverProps {
+}
+export { BlockHandlePopoverProps }
+export { BlockHandlePopoverProps as BlockHandlePopoverProps_alias_1 }
+
 /**
  * @internal
  */
-export declare interface BlockPopoverContext {
-    pos: number | null;
-    node: ProseMirrorNode | null;
-    element: HTMLElement | null;
-}
+export declare type BlockPopoverContext = HoverState | null;
 
 /**
  * @internal
@@ -298,6 +354,43 @@ declare const defaultBlockDragHandleProps: Readonly<{
 export { defaultBlockDragHandleProps }
 export { defaultBlockDragHandleProps as defaultBlockDragHandleProps_alias_1 }
 
+declare const defaultBlockHandleAddProps: Readonly<{
+    editor: null;
+}>;
+export { defaultBlockHandleAddProps }
+export { defaultBlockHandleAddProps as defaultBlockHandleAddProps_alias_1 }
+
+declare const defaultBlockHandleDraggableProps: Readonly<{
+    editor: null;
+}>;
+export { defaultBlockHandleDraggableProps }
+export { defaultBlockHandleDraggableProps as defaultBlockHandleDraggableProps_alias_1 }
+
+declare const defaultBlockHandlePopoverProps: Readonly<{
+    editor: null;
+    placement: "left-start";
+    offset: 4;
+    strategy: "absolute";
+    autoUpdate: true;
+    hoist: false;
+    transform: false;
+    flip: false;
+    shift: false;
+    overlap: false;
+    fitViewport: false;
+    sameWidth: false;
+    sameHeight: false;
+    inline: false;
+    hide: false;
+    boundary: "clippingAncestors";
+    rootBoundary: "viewport";
+    overflowPadding: 0;
+    elementContext: "floating";
+    altBoundary: true;
+}>;
+export { defaultBlockHandlePopoverProps }
+export { defaultBlockHandlePopoverProps as defaultBlockHandlePopoverProps_alias_1 }
+
 declare const defaultBlockPopoverProps: Readonly<{
     editor: null;
     placement: "left-start";
@@ -527,7 +620,7 @@ export declare function defineCustomElement(name: string, constructor: CustomEle
 
 export declare function defineElementHoverHandler(handler: ElementHoverHandler): Union<readonly [Extension<ExtensionTyping<any, any, any>>, Extension<ExtensionTyping<any, any, any>>, Extension<ExtensionTyping<any, any, any>>]>;
 
-export declare type ElementHoverHandler = (reference: VirtualElement | null, element: HTMLElement | null, node: ProseMirrorNode | null, pos: number | null) => void;
+export declare type ElementHoverHandler = (reference: VirtualElement | null, hoverState: HoverState | null) => void;
 
 export declare function getHoveringCell(view: EditorView, event: MouseEvent): HoveringCellInfo | undefined;
 
@@ -541,6 +634,15 @@ export declare interface HoveringCellInfo {
     colFirstCellPos: number;
 }
 
+/**
+ * @internal
+ */
+export declare interface HoverState {
+    element: HTMLElement;
+    node: ProseMirrorNode;
+    pos: number;
+}
+
 declare class InlinePopoverElement extends InlinePopoverElement_base {
 }
 export { InlinePopoverElement }
@@ -969,8 +1071,20 @@ export declare function useAutocompleteList(element: ConnectableElement, state:
 
 export declare function useAutocompletePopover(host: ConnectableElement, state: SignalState<AutocompletePopoverProps>): void;
 
+/**
+ * @deprecated Use `useBlockHandleDraggable` instead.
+ */
 export declare function useBlockDragHandle(host: ConnectableElement, state: SignalState<BlockDragHandleProps>): void;
 
+export declare function useBlockHandleAdd(host: ConnectableElement, state: SignalState<BlockHandleAddProps>): void;
+
+export declare function useBlockHandleDraggable(host: ConnectableElement, state: SignalState<BlockHandleDraggableProps>): void;
+
+export declare function useBlockHandlePopover(host: ConnectableElement, state: SignalState<BlockHandlePopoverProps>): void;
+
+/**
+ * @deprecated Use `useBlockHandlePopover` instead.
+ */
 export declare function useBlockPopover(host: ConnectableElement, state: SignalState<BlockPopoverProps>): void;
 
 export declare function useEditorExtension(host: ConnectableElement, editor: ReadonlySignal<Editor | null>, extension: Extension): void;

package/dist/prosekit-web-autocomplete.js

@@ -82,7 +82,6 @@ var defaultAutocompleteListProps = {
 
 // src/components/autocomplete/autocomplete-list/state.ts
 import {
-  createSignal,
   mapSignals,
   useEffect as useEffect2
 } from "@aria-ui/core";
@@ -144,14 +143,11 @@ function useAutocompleteList(element, state) {
   });
 }
 function useKeyboardHandler(element, open, editor) {
-  const keydownHandler = createSignal(
-    null
-  );
+  let keydownHandler = null;
   let disposeKeydownHandler;
   useEffect2(element, () => {
     const editorValue = editor.get();
-    const keydownHandlerValue = keydownHandler.get();
-    if (!editorValue || !keydownHandlerValue) {
+    if (!editorValue) {
       return;
     }
     const extension = defineDOMEventHandler(
@@ -160,7 +156,7 @@ function useKeyboardHandler(element, open, editor) {
         if (view.composing || event.defaultPrevented || !open.get()) {
           return false;
         }
-        keydownHandlerValue(event);
+        keydownHandler == null ? void 0 : keydownHandler(event);
         return event.defaultPrevented;
       }
     );
@@ -170,7 +166,7 @@ function useKeyboardHandler(element, open, editor) {
     );
   });
   return (keydownHandlerValue) => {
-    keydownHandler.set(keydownHandlerValue);
+    keydownHandler = keydownHandlerValue;
     return () => {
       disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
       disposeKeydownHandler = void 0;
@@ -210,7 +206,7 @@ var defaultAutocompletePopoverProps = Object.freeze({
 // src/components/autocomplete/autocomplete-popover/state.ts
 import {
   createComputed,
-  createSignal as createSignal3,
+  createSignal as createSignal2,
   useAnimationFrame,
   useAttribute,
   useEffect as useEffect4
@@ -229,11 +225,11 @@ import {
 
 // src/hooks/use-first-rendering.ts
 import {
-  createSignal as createSignal2,
+  createSignal,
   useEffect as useEffect3
 } from "@aria-ui/core";
 function useFirstRendering(host) {
-  const firstRendering = createSignal2(true);
+  const firstRendering = createSignal(true);
   useEffect3(host, () => {
     requestAnimationFrame(() => {
       firstRendering.set(false);
@@ -250,10 +246,10 @@ function defaultQueryBuilder(match) {
 // src/components/autocomplete/autocomplete-popover/state.ts
 function useAutocompletePopover(host, state) {
   const { editor, regex, ...overlayState } = state;
-  const reference = createSignal3(null);
-  const query = createSignal3("");
-  const onDismiss = createSignal3(null);
-  const onSubmit = createSignal3(null);
+  const reference = createSignal2(null);
+  const query = createSignal2("");
+  const onDismiss = createSignal2(null);
+  const onSubmit = createSignal2(null);
   const presence = createComputed(() => !!reference.get());
   queryContext.provide(host, query);
   onSubmitContext.provide(host, onSubmit);
@@ -297,7 +293,7 @@ function useAutocompleteExtension(host, editor, regex, reference, query, onDismi
     if (!editorValue || !regexValue) {
       return;
     }
-    return addAutocompleteExtension(
+    const rule = createAutocompleteRule(
       editorValue,
       regexValue,
       reference,
@@ -305,9 +301,11 @@ function useAutocompleteExtension(host, editor, regex, reference, query, onDismi
       onDismiss,
       onSubmit
     );
+    const extension = defineAutocomplete(rule);
+    return editorValue.use(extension);
   });
 }
-function addAutocompleteExtension(editor, regex, reference, query, onDismiss, onSubmit) {
+function createAutocompleteRule(editor, regex, reference, query, onDismiss, onSubmit) {
   const handleEnter = (options) => {
     const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
     if (span) {
@@ -323,13 +321,11 @@ function addAutocompleteExtension(editor, regex, reference, query, onDismiss, on
     onDismiss.set(null);
     onSubmit.set(null);
   };
-  const rule = new AutocompleteRule({
+  return new AutocompleteRule({
     regex,
     onEnter: handleEnter,
     onLeave: handleLeave
   });
-  const extension = defineAutocomplete(rule);
-  return editor.use(extension);
 }
 function createKeymapHandler(handler, enabled) {
   return () => {

package/dist/prosekit-web-block-handle.d.ts

@@ -1,6 +1,15 @@
 export { BlockDragHandleElement } from './_tsup-dts-rollup';
 export { defaultBlockDragHandleProps } from './_tsup-dts-rollup';
 export { BlockDragHandleProps } from './_tsup-dts-rollup';
+export { BlockHandleAddElement } from './_tsup-dts-rollup';
+export { defaultBlockHandleAddProps } from './_tsup-dts-rollup';
+export { BlockHandleAddProps } from './_tsup-dts-rollup';
+export { BlockHandleDraggableElement } from './_tsup-dts-rollup';
+export { defaultBlockHandleDraggableProps } from './_tsup-dts-rollup';
+export { BlockHandleDraggableProps } from './_tsup-dts-rollup';
+export { BlockHandlePopoverElement } from './_tsup-dts-rollup';
+export { defaultBlockHandlePopoverProps } from './_tsup-dts-rollup';
+export { BlockHandlePopoverProps } from './_tsup-dts-rollup';
 export { BlockPopoverElement } from './_tsup-dts-rollup';
 export { defaultBlockPopoverProps } from './_tsup-dts-rollup';
 export { BlockPopoverProps } from './_tsup-dts-rollup';

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

@@ -15,6 +15,8 @@ var defaultBlockDragHandleProps = Object.freeze({
 
 // src/components/block-handle/block-drag-handle/state.ts
 import {
+  createSignal,
+  useAttribute,
   useEffect,
   useEventListener
 } from "@aria-ui/core";
@@ -25,11 +27,7 @@ import { NodeSelection } from "@prosekit/pm/state";
 import { createContext } from "@aria-ui/core";
 var blockPopoverContext = createContext(
   "prosekit-block-popover-context",
-  {
-    pos: null,
-    node: null,
-    element: null
-  }
+  null
 );
 
 // src/components/block-handle/block-drag-handle/state.ts
@@ -38,10 +36,15 @@ function useBlockDragHandle(host, state) {
   useEffect(host, () => {
     host.draggable = true;
   });
+  usePointerDownHandler(host, context, state.editor);
+  useDraggingPreview(host, context, state.editor);
+  useDataDraggingAttribute(host);
+}
+function usePointerDownHandler(host, context, editor) {
   useEventListener(host, "pointerdown", () => {
     var _a, _b;
     const { pos } = (_a = context.get()) != null ? _a : {};
-    const { view } = (_b = state.editor.get()) != null ? _b : {};
+    const { view } = (_b = editor.get()) != null ? _b : {};
     if (pos == null || view == null) {
       return;
     }
@@ -52,13 +55,16 @@ function useBlockDragHandle(host, state) {
       view.focus();
     });
   });
+}
+function useDraggingPreview(host, context, editor) {
   useEventListener(host, "dragstart", (event) => {
-    var _a, _b;
-    const { pos, element, node } = (_a = context.get()) != null ? _a : {};
-    const { view } = (_b = state.editor.get()) != null ? _b : {};
-    if (pos == null || !element || !node || !view || !event.dataTransfer) {
+    var _a;
+    const hoverState = context.get();
+    const { view } = (_a = editor.get()) != null ? _a : {};
+    if (!hoverState || !view || !event.dataTransfer) {
       return;
     }
+    const { element, node } = hoverState;
     event.dataTransfer.clearData();
     event.dataTransfer.setData("text/html", element.outerHTML);
     event.dataTransfer.effectAllowed = "copyMove";
@@ -69,15 +75,82 @@ function useBlockDragHandle(host, state) {
     };
   });
 }
+function useDataDraggingAttribute(host) {
+  const dragging = useDragging(host);
+  useAttribute(host, "data-dragging", () => dragging.get() ? "" : void 0);
+}
+function useDragging(host) {
+  const dragging = createSignal(false);
+  useEventListener(host, "dragstart", () => {
+    dragging.set(true);
+  });
+  useEventListener(host, "dragend", () => {
+    dragging.set(false);
+  });
+  return dragging;
+}
 
 // src/components/block-handle/block-drag-handle/element.gen.ts
 var BlockDragHandleElement = class extends ElementBuilder(useBlockDragHandle, defaultBlockDragHandleProps) {
 };
 defineCustomElement("prosekit-block-drag-handle", BlockDragHandleElement);
 
-// src/components/block-handle/block-popover/element.gen.ts
+// src/components/block-handle/block-handle-add/element.gen.ts
 import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
+// src/components/block-handle/block-handle-add/props.ts
+var defaultBlockHandleAddProps = Object.freeze({
+  editor: null
+});
+
+// src/components/block-handle/block-handle-add/state.ts
+import {
+  useEventListener as useEventListener2
+} from "@aria-ui/core";
+import { insertDefaultBlock } from "@prosekit/core";
+function useBlockHandleAdd(host, state) {
+  const context = blockPopoverContext.consume(host);
+  useEventListener2(host, "pointerdown", (event) => {
+    event.preventDefault();
+    const editor = state.editor.get();
+    const hoverState = context.get();
+    if (!editor || !hoverState) {
+      return;
+    }
+    const { node, pos } = hoverState;
+    editor.exec(insertDefaultBlock({ pos: pos + node.nodeSize }));
+    editor.focus();
+    context.set(null);
+  });
+}
+
+// src/components/block-handle/block-handle-add/element.gen.ts
+var BlockHandleAddElement = class extends ElementBuilder2(useBlockHandleAdd, defaultBlockHandleAddProps) {
+};
+defineCustomElement("prosekit-block-handle-add", BlockHandleAddElement);
+
+// src/components/block-handle/block-handle-draggable/element.gen.ts
+import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
+
+// src/components/block-handle/block-handle-draggable/props.ts
+var defaultBlockHandleDraggableProps = Object.freeze({
+  editor: null
+});
+
+// src/components/block-handle/block-handle-draggable/state.ts
+import "@aria-ui/core";
+function useBlockHandleDraggable(host, state) {
+  useBlockDragHandle(host, state);
+}
+
+// src/components/block-handle/block-handle-draggable/element.gen.ts
+var BlockHandleDraggableElement = class extends ElementBuilder3(useBlockHandleDraggable, defaultBlockHandleDraggableProps) {
+};
+defineCustomElement("prosekit-block-handle-draggable", BlockHandleDraggableElement);
+
+// src/components/block-handle/block-handle-popover/element.gen.ts
+import { ElementBuilder as ElementBuilder4 } from "@aria-ui/core";
+
 // src/components/block-handle/block-popover/props.ts
 import {
   defaultOverlayPositionerProps
@@ -89,11 +162,18 @@ var defaultBlockPopoverProps = Object.freeze({
   offset: 4
 });
 
+// src/components/block-handle/block-handle-popover/props.ts
+var defaultBlockHandlePopoverProps = Object.freeze({
+  ...defaultBlockPopoverProps
+});
+
+// src/components/block-handle/block-handle-popover/state.ts
+import "@aria-ui/core";
+
 // src/components/block-handle/block-popover/state.ts
 import {
-  createComputed,
-  createSignal,
-  useAttribute,
+  createSignal as createSignal2,
+  useAttribute as useAttribute2,
   useEffect as useEffect2
 } from "@aria-ui/core";
 import { useOverlayPositionerState } from "@aria-ui/overlay";
@@ -125,7 +205,7 @@ function defineElementHoverHandler(handler) {
       left: rect.left + rect.width / 2
     })) == null ? void 0 : _a.inside;
     if (pos == null || pos < 0) {
-      handler(null, null, null, null);
+      handler(null, null);
       return;
     }
     const $pos = view.state.doc.resolve(pos);
@@ -135,8 +215,8 @@ function defineElementHoverHandler(handler) {
       const ancestorPos = $pos.before($pos.depth);
       const node2 = view.state.doc.nodeAt(ancestorPos);
       const element2 = view.nodeDOM(ancestorPos);
-      if (!element2) {
-        handler(null, null, null, null);
+      if (!element2 || !node2) {
+        handler(null, null);
         return;
       }
       const reference = {
@@ -162,64 +242,78 @@ function defineElementHoverHandler(handler) {
           };
         }
       };
-      handler(reference, element2, node2, ancestorPos);
+      handler(reference, { element: element2, node: node2, pos: ancestorPos });
       return;
     }
-    handler(element, element, node, pos);
+    handler(element, element && node && { element, node, pos });
   };
   return union(
     defineDOMEventHandler("pointermove", throttle(handlePointerEvent, 200)),
     defineDOMEventHandler("pointerout", handlePointerEvent),
-    defineDOMEventHandler("keypress", () => handler(null, null, null, null))
+    defineDOMEventHandler("keypress", () => handler(null, null))
   );
 }
 
 // src/components/block-handle/block-popover/state.ts
 function useBlockPopover(host, state) {
   const { editor, ...overlayState } = state;
-  const reference = createSignal(null);
+  const reference = createSignal2(null);
   useOverlayPositionerState(host, overlayState, { reference });
-  const context = createSignal({
-    pos: null,
-    node: null,
-    element: null
-  });
+  const context = createSignal2(null);
   blockPopoverContext.provide(host, context);
-  const open = createSignal(false);
+  const open = createSignal2(false);
   useEffect2(host, () => {
-    open.set(!!context.get().element);
+    var _a;
+    open.set(!!((_a = context.get()) == null ? void 0 : _a.element));
   });
-  useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
+  useHoverExtension(host, editor, (referenceValue, hoverState) => {
     reference.set(referenceValue);
-    context.set({ element, node, pos });
+    context.set(hoverState);
   });
-  const presence = createComputed(() => !!reference.get());
-  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
-  usePresence(host, presence);
+  useAttribute2(host, "data-state", () => open.get() ? "open" : "closed");
+  usePresence(host, open);
 }
 function useHoverExtension(host, editor, handler) {
-  let prevElement = null;
-  let prevPos = null;
-  const extension = defineElementHoverHandler(
-    (reference, element, node, pos) => {
-      if (prevElement === element && prevPos === pos) {
-        return;
-      }
-      prevElement = element;
-      prevPos = pos;
-      handler(reference, element, node, pos);
+  let prevHoverState = null;
+  const extension = defineElementHoverHandler((reference, hoverState) => {
+    if (isHoverStateEqual(prevHoverState, hoverState)) {
+      return;
     }
-  );
+    prevHoverState = hoverState;
+    handler(reference, hoverState);
+  });
   useEditorExtension(host, editor, extension);
 }
+function isHoverStateEqual(a, b) {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return a.element === b.element && a.pos === b.pos && a.node.eq(b.node);
+}
+
+// src/components/block-handle/block-handle-popover/state.ts
+function useBlockHandlePopover(host, state) {
+  useBlockPopover(host, state);
+}
+
+// src/components/block-handle/block-handle-popover/element.gen.ts
+var BlockHandlePopoverElement = class extends ElementBuilder4(useBlockHandlePopover, defaultBlockHandlePopoverProps) {
+};
+defineCustomElement("prosekit-block-handle-popover", BlockHandlePopoverElement);
 
 // src/components/block-handle/block-popover/element.gen.ts
-var BlockPopoverElement = class extends ElementBuilder2(useBlockPopover, defaultBlockPopoverProps) {
+import { ElementBuilder as ElementBuilder5 } from "@aria-ui/core";
+var BlockPopoverElement = class extends ElementBuilder5(useBlockPopover, defaultBlockPopoverProps) {
 };
 defineCustomElement("prosekit-block-popover", BlockPopoverElement);
 export {
   BlockDragHandleElement,
+  BlockHandleAddElement,
+  BlockHandleDraggableElement,
+  BlockHandlePopoverElement,
   BlockPopoverElement,
   defaultBlockDragHandleProps,
+  defaultBlockHandleAddProps,
+  defaultBlockHandleDraggableProps,
+  defaultBlockHandlePopoverProps,
   defaultBlockPopoverProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -82,9 +82,9 @@
     "@zag-js/dom-query": "^0.65.1",
     "just-omit": "^2.2.0",
     "prosemirror-tables": "^1.5.0",
-    "@prosekit/core": "^0.7.9",
-    "@prosekit/extensions": "^0.7.13",
-    "@prosekit/pm": "^0.1.8"
+    "@prosekit/extensions": "^0.7.14",
+    "@prosekit/pm": "^0.1.8",
+    "@prosekit/core": "^0.7.10"
   },
   "devDependencies": {
     "tsup": "^8.2.4",