made-refine 0.2.18-beta.0 → 0.2.19

package/dist/index.d.mts

@@ -98,6 +98,7 @@ interface DirectEditActionsContextValue {
     startTextEditing: (element: HTMLElement) => void;
     commitTextEditing: () => void;
     groupSelection: () => void;
+    deleteSelection: () => void;
     insertElement: (kind: CanvasElementKind) => void;
     toggleCanvas: () => void;
     setCanvasZoom: (zoom: number) => void;

package/dist/index.d.ts

@@ -98,6 +98,7 @@ interface DirectEditActionsContextValue {
     startTextEditing: (element: HTMLElement) => void;
     commitTextEditing: () => void;
     groupSelection: () => void;
+    deleteSelection: () => void;
     insertElement: (kind: CanvasElementKind) => void;
     toggleCanvas: () => void;
     setCanvasZoom: (zoom: number) => void;

package/dist/index.js

@@ -4454,6 +4454,49 @@ function useSessionManager({
       pushUndo: false
     });
   }, [applySelection, buildSelectionSnapshot, getSanitizedSelection, pushUndo, saveCurrentToSession, stateRef]);
+  const deleteSelection = React3.useCallback(() => {
+    const selected = getSanitizedSelection(stateRef.current.selectedElements);
+    if (selected.length === 0 || !stateRef.current.editModeActive) return;
+    if (selected.some((el) => el === document.body || !el.parentElement)) return;
+    saveCurrentToSession();
+    const restoreSelection = buildSelectionSnapshot();
+    const snapshots = selected.map((el) => ({
+      element: el,
+      parent: el.parentElement,
+      nextSibling: el.nextSibling
+    }));
+    const sessionSnapshots = /* @__PURE__ */ new Map();
+    for (const el of selected) {
+      const edit = sessionEditsRef.current.get(el);
+      if (edit) sessionSnapshots.set(el, edit);
+      sessionEditsRef.current.delete(el);
+    }
+    syncSessionItemCount();
+    for (const { element } of snapshots) {
+      if (element.isConnected) element.remove();
+    }
+    pushUndo({
+      type: "structure",
+      restoreSelection,
+      undo: () => {
+        for (let i = snapshots.length - 1; i >= 0; i--) {
+          const { element, parent, nextSibling } = snapshots[i];
+          if (!element.isConnected && parent.isConnected) {
+            if (nextSibling && nextSibling.parentNode === parent) {
+              parent.insertBefore(element, nextSibling);
+            } else {
+              parent.appendChild(element);
+            }
+          }
+        }
+        for (const [el, edit] of sessionSnapshots) {
+          sessionEditsRef.current.set(el, edit);
+        }
+        syncSessionItemCount();
+      }
+    });
+    applySelection([], { primaryElement: null, pushUndo: false });
+  }, [applySelection, buildSelectionSnapshot, getSanitizedSelection, pushUndo, saveCurrentToSession, stateRef, syncSessionItemCount]);
   const resetToOriginal = React3.useCallback(() => {
     const current = stateRef.current;
     const el = current.selectedElement;
@@ -4990,6 +5033,7 @@ ${exportMarkdown}`);
     selectChild,
     insertElement,
     groupSelection,
+    deleteSelection,
     resetToOriginal,
     undo,
     handleMoveComplete,
@@ -5883,6 +5927,7 @@ function useKeyboardShortcuts({
   closePanel,
   clearSelection,
   groupSelection,
+  deleteSelection,
   insertElement,
   setState,
   toggleCanvas,
@@ -5970,6 +6015,13 @@ function useKeyboardShortcuts({
           return;
         }
       }
+      if ((e.key === "Backspace" || e.key === "Delete") && s.editModeActive && !s.textEditingElement) {
+        if (!isInputFocused() && s.selectedElements.length > 0) {
+          e.preventDefault();
+          deleteSelection();
+          return;
+        }
+      }
       if (e.key === "Enter" && s.editModeActive && !s.textEditingElement && s.selectedElement) {
         if (!isInputFocused() && isTextElement2(s.selectedElement)) {
           e.preventDefault();
@@ -6002,7 +6054,7 @@ function useKeyboardShortcuts({
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [clearSelection, closePanel, commitTextEditing, fitCanvasToViewport, groupSelection, insertElement, setCanvasZoom, setState, startTextEditing, toggleCanvas, toggleEditMode, toggleFlexLayout, undo, usesMetaForUndo, zoomCanvasTo100]);
+  }, [clearSelection, closePanel, commitTextEditing, deleteSelection, fitCanvasToViewport, groupSelection, insertElement, setCanvasZoom, setState, startTextEditing, toggleCanvas, toggleEditMode, toggleFlexLayout, undo, usesMetaForUndo, zoomCanvasTo100]);
 }
 
 // src/use-canvas.ts
@@ -6652,6 +6704,7 @@ function DirectEditProvider({ children }) {
     removeSessionEdit,
     clearSessionEdits,
     groupSelection,
+    deleteSelection,
     insertElement
   } = useSessionManager({
     stateRef,
@@ -6880,6 +6933,7 @@ function DirectEditProvider({ children }) {
     setState,
     clearSelection,
     groupSelection,
+    deleteSelection,
     insertElement,
     toggleCanvas: toggleCanvasWithPreference,
     setCanvasZoom,
@@ -6947,6 +7001,7 @@ function DirectEditProvider({ children }) {
     startTextEditing,
     commitTextEditing,
     groupSelection,
+    deleteSelection,
     insertElement,
     toggleCanvas: toggleCanvasWithPreference,
     setCanvasZoom,
@@ -6999,6 +7054,7 @@ function DirectEditProvider({ children }) {
     startTextEditing,
     commitTextEditing,
     groupSelection,
+    deleteSelection,
     insertElement,
     toggleCanvasWithPreference,
     setCanvasZoom,
@@ -7622,6 +7678,8 @@ function useMove({ onMoveComplete }) {
   React12.useEffect(() => {
     if (!dragState.isDragging) return;
     function handlePointerMove(e) {
+      e.stopPropagation();
+      e.preventDefault();
       const current = dragStateRef.current;
       const { draggedElement, dragOffset, originalParent } = current;
       setDragState((prev) => ({
@@ -7709,12 +7767,17 @@ function useMove({ onMoveComplete }) {
         clearReorderPreview();
       }
     }
-    function handlePointerUp() {
+    function handlePointerUp(e) {
+      e.stopPropagation();
       completeDrag();
     }
-    function handlePointerCancel() {
+    function handlePointerCancel(e) {
+      e.stopPropagation();
       cancelDrag();
     }
+    function blockMouseEvent(e) {
+      e.stopPropagation();
+    }
     function handleKeyDown(e) {
       if (e.key === "Escape") {
         cancelDrag();
@@ -7723,15 +7786,19 @@ function useMove({ onMoveComplete }) {
     function handleBlur() {
       cancelDrag();
     }
-    window.addEventListener("pointermove", handlePointerMove);
-    window.addEventListener("pointerup", handlePointerUp);
-    window.addEventListener("pointercancel", handlePointerCancel);
+    window.addEventListener("pointermove", handlePointerMove, true);
+    window.addEventListener("pointerup", handlePointerUp, true);
+    window.addEventListener("pointercancel", handlePointerCancel, true);
+    window.addEventListener("mousemove", blockMouseEvent, true);
+    window.addEventListener("mouseup", blockMouseEvent, true);
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("blur", handleBlur);
     return () => {
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerup", handlePointerUp);
-      window.removeEventListener("pointercancel", handlePointerCancel);
+      window.removeEventListener("pointermove", handlePointerMove, true);
+      window.removeEventListener("pointerup", handlePointerUp, true);
+      window.removeEventListener("pointercancel", handlePointerCancel, true);
+      window.removeEventListener("mousemove", blockMouseEvent, true);
+      window.removeEventListener("mouseup", blockMouseEvent, true);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("blur", handleBlur);
     };
@@ -8513,7 +8580,7 @@ function SelectedCommentComposer({
   React17.useLayoutEffect(() => {
     updatePosition();
   }, [text, updatePosition]);
-  React17.useEffect(() => {
+  const handleComposerClick = React17.useCallback(() => {
     inputRef.current?.focus();
   }, []);
   React17.useEffect(() => {
@@ -8564,7 +8631,10 @@ function SelectedCommentComposer({
         width: position.width,
         pointerEvents: "auto"
       },
-      onClick: (e) => e.stopPropagation(),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleComposerClick();
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "textarea",
@@ -12811,7 +12881,8 @@ function DirectEditPanelContent() {
     sendCommentToAgent: sendCommentToAgent2,
     setActiveCommentId,
     startTextEditing,
-    toggleEditMode
+    toggleEditMode,
+    deleteSelection
   } = useDirectEditActions();
   const {
     position,