@prosekit/web - npm Package Compare versions

Comparing version 0.3.13 to 0.3.14

dist/_tsup-dts-rollup.d.ts

@@ -182,2 +182,5 @@ import { BaseElement } from '@aria-ui/core';
 
+/**
+ * @deprecated Use `BlockHandleDraggableProps` instead.
+ */
 declare interface BlockDragHandleProps {
@@ -194,10 +197,63 @@ /**
 
+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;
 
@@ -303,2 +359,39 @@ /**
 
+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<{
@@ -533,3 +626,3 @@ editor: null;
 
-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;
 
@@ -548,2 +641,11 @@ export declare function getHoveringCell(view: EditorView, event: MouseEvent): HoveringCellInfo | undefined;
 
+/**
+ * @internal
+ */
+export declare interface HoverState {
+    element: HTMLElement;
+    node: ProseMirrorNode;
+    pos: number;
+}
+
 declare class InlinePopoverElement extends InlinePopoverElement_base {
@@ -977,4 +1079,16 @@ }
 
+/**
+ * @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;
@@ -981,0 +1095,0 @@

dist/prosekit-web-autocomplete.js

@@ -85,3 +85,2 @@ import {
 import {
-  createSignal,
   mapSignals,
@@ -148,10 +147,7 @@ useEffect as useEffect2
 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;
@@ -165,3 +161,3 @@ }
         }
-        keydownHandlerValue(event);
+        keydownHandler == null ? void 0 : keydownHandler(event);
         return event.defaultPrevented;
@@ -176,3 +172,3 @@ }
   return (keydownHandlerValue) => {
-    keydownHandler.set(keydownHandlerValue);
+    keydownHandler = keydownHandlerValue;
     return () => {
@@ -217,3 +213,3 @@ disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
   createComputed,
-  createSignal as createSignal3,
+  createSignal as createSignal2,
   useAnimationFrame,
@@ -237,7 +233,7 @@ useAttribute,
 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, () => {
@@ -259,6 +255,6 @@ requestAnimationFrame(() => {
   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());
@@ -307,3 +303,3 @@ queryContext.provide(host, query);
     }
-    return addAutocompleteExtension(
+    const rule = createAutocompleteRule(
       editorValue,
@@ -316,5 +312,7 @@ regexValue,
     );
+    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) => {
@@ -335,3 +333,3 @@ const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
   };
-  const rule = new AutocompleteRule({
+  return new AutocompleteRule({
     regex,
@@ -341,4 +339,2 @@ onEnter: handleEnter,
   });
-  const extension = defineAutocomplete(rule);
-  return editor.use(extension);
 }
@@ -345,0 +341,0 @@ function createKeymapHandler(handler, enabled) {

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

 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';

dist/prosekit-web-block-handle.js

@@ -18,2 +18,4 @@ import {
 import {
+  createSignal,
+  useAttribute,
   useEffect,
@@ -29,7 +31,3 @@ useEventListener
   "prosekit-block-popover-context",
-  {
-    pos: null,
-    node: null,
-    element: null
-  }
+  null
 );
@@ -43,6 +41,11 @@
   });
+  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) {
@@ -58,9 +61,12 @@ return;
   });
+}
+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();
@@ -76,2 +82,16 @@ event.dataTransfer.setData("text/html", element.outerHTML);
 }
+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;
+}
 
@@ -83,5 +103,58 @@ // src/components/block-handle/block-drag-handle/element.gen.ts
 
-// 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
@@ -98,7 +171,14 @@ import {
 
+// 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
@@ -135,3 +215,3 @@ } from "@aria-ui/core";
     if (pos == null || pos < 0) {
-      handler(null, null, null, null);
+      handler(null, null);
       return;
@@ -146,4 +226,4 @@ }
       const element2 = view.nodeDOM(ancestorPos);
-      if (!element2) {
-        handler(null, null, null, null);
+      if (!element2 || !node2) {
+        handler(null, null);
         return;
@@ -174,6 +254,6 @@ }
       };
-      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 });
   };
@@ -183,3 +263,3 @@ return union(
     defineDOMEventHandler("pointerout", handlePointerEvent),
-    defineDOMEventHandler("keypress", () => handler(null, null, null, null))
+    defineDOMEventHandler("keypress", () => handler(null, null))
   );
@@ -191,40 +271,48 @@ }
   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) {
 };
@@ -234,5 +322,11 @@ defineCustomElement("prosekit-block-popover", BlockPopoverElement);
   BlockDragHandleElement,
+  BlockHandleAddElement,
+  BlockHandleDraggableElement,
+  BlockHandlePopoverElement,
   BlockPopoverElement,
   defaultBlockDragHandleProps,
+  defaultBlockHandleAddProps,
+  defaultBlockHandleDraggableProps,
+  defaultBlockHandlePopoverProps,
   defaultBlockPopoverProps
 };

package.json

 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "private": false,
@@ -85,5 +85,5 @@ "author": {
     "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"
   },
@@ -90,0 +90,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100019

increased by7.86%

Lines of code

2643

increased by7.53%

Dependency changes

• Updated@prosekit/core@^0.7.10

• Updated@prosekit/extensions@^0.7.14