From 6e350f6746247abea4ab8dee312da8f9295681c7 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Thu, 11 Dec 2025 19:32:18 +0000
Subject: [PATCH] fix nodeview dragging (#1775)

---
 .../src/features/editor/components/drawio/drawio-view.tsx   | 2 +-
 .../src/features/editor/components/embed/embed-view.tsx     | 2 +-
 .../editor/components/excalidraw/excalidraw-view.tsx        | 2 +-
 .../src/features/editor/components/image/image-view.tsx     | 2 +-
 .../src/features/editor/components/mention/mention-view.tsx | 2 +-
 .../features/editor/components/subpages/subpages-view.tsx   | 6 +++---
 .../src/features/editor/components/video/video-view.tsx     | 2 +-
 packages/editor-ext/src/lib/mention.ts                      | 1 +
 packages/editor-ext/src/lib/subpages/subpages.ts            | 2 +-
 9 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/features/editor/components/drawio/drawio-view.tsx b/apps/client/src/features/editor/components/drawio/drawio-view.tsx
index c09c628e..5a0fbd86 100644
--- a/apps/client/src/features/editor/components/drawio/drawio-view.tsx
+++ b/apps/client/src/features/editor/components/drawio/drawio-view.tsx
@@ -87,7 +87,7 @@ export default function DrawioView(props: NodeViewProps) {
   };
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
       <Modal.Root opened={opened} onClose={close} fullScreen>
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
diff --git a/apps/client/src/features/editor/components/embed/embed-view.tsx b/apps/client/src/features/editor/components/embed/embed-view.tsx
index 7ce7b1a6..efdaa950 100644
--- a/apps/client/src/features/editor/components/embed/embed-view.tsx
+++ b/apps/client/src/features/editor/components/embed/embed-view.tsx
@@ -85,7 +85,7 @@ export default function EmbedView(props: NodeViewProps) {
   }
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
       {embedUrl ? (
         <ResizableWrapper
           initialHeight={nodeHeight || 480}
diff --git a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
index 11b5e363..779a826d 100644
--- a/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
+++ b/apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx
@@ -118,7 +118,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
   };
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
       <ReactClearModal
         style={{
           backgroundColor: "rgba(0, 0, 0, 0.5)",
diff --git a/apps/client/src/features/editor/components/image/image-view.tsx b/apps/client/src/features/editor/components/image/image-view.tsx
index 87ce41dd..dbdb8396 100644
--- a/apps/client/src/features/editor/components/image/image-view.tsx
+++ b/apps/client/src/features/editor/components/image/image-view.tsx
@@ -16,7 +16,7 @@ export default function ImageView(props: NodeViewProps) {
   }, [align]);
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
       <Image
         radius="md"
         fit="contain"
diff --git a/apps/client/src/features/editor/components/mention/mention-view.tsx b/apps/client/src/features/editor/components/mention/mention-view.tsx
index c71c9e50..1ba55380 100644
--- a/apps/client/src/features/editor/components/mention/mention-view.tsx
+++ b/apps/client/src/features/editor/components/mention/mention-view.tsx
@@ -31,7 +31,7 @@ export default function MentionView(props: NodeViewProps) {
   });
 
   return (
-    <NodeViewWrapper style={{ display: "inline" }}>
+    <NodeViewWrapper style={{ display: "inline" }} data-drag-handle>
       {entityType === "user" && (
         <Text className={classes.userMention} component="span">
           @{label}
diff --git a/apps/client/src/features/editor/components/subpages/subpages-view.tsx b/apps/client/src/features/editor/components/subpages/subpages-view.tsx
index 525e2ec9..0da33028 100644
--- a/apps/client/src/features/editor/components/subpages/subpages-view.tsx
+++ b/apps/client/src/features/editor/components/subpages/subpages-view.tsx
@@ -52,7 +52,7 @@ export default function SubpagesView(props: NodeViewProps) {
 
   if (error && !shareId) {
     return (
-      <NodeViewWrapper>
+      <NodeViewWrapper data-drag-handle>
         <Text c="dimmed" size="md" py="md">
           {t("Failed to load subpages")}
         </Text>
@@ -62,7 +62,7 @@ export default function SubpagesView(props: NodeViewProps) {
 
   if (subpages.length === 0) {
     return (
-      <NodeViewWrapper>
+      <NodeViewWrapper data-drag-handle>
         <div className={classes.container}>
           <Text c="dimmed" size="md" py="md">
             {t("No subpages")}
@@ -73,7 +73,7 @@ export default function SubpagesView(props: NodeViewProps) {
   }
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
       <div className={classes.container}>
         <Stack gap={5}>
           {subpages.map((page) => (
diff --git a/apps/client/src/features/editor/components/video/video-view.tsx b/apps/client/src/features/editor/components/video/video-view.tsx
index d7a53b0f..d47d9a4a 100644
--- a/apps/client/src/features/editor/components/video/video-view.tsx
+++ b/apps/client/src/features/editor/components/video/video-view.tsx
@@ -15,7 +15,7 @@ export default function VideoView(props: NodeViewProps) {
   }, [align]);
 
   return (
-    <NodeViewWrapper>
+    <NodeViewWrapper data-drag-handle>
       <video
         preload="metadata"
         width={width}
diff --git a/packages/editor-ext/src/lib/mention.ts b/packages/editor-ext/src/lib/mention.ts
index 8d19ebcd..714175e4 100644
--- a/packages/editor-ext/src/lib/mention.ts
+++ b/packages/editor-ext/src/lib/mention.ts
@@ -165,6 +165,7 @@ export const Mention = Node.create<MentionOptions>({
   inline: true,
   selectable: true,
   atom: true,
+  draggable: true,
 
   addAttributes() {
     return {
diff --git a/packages/editor-ext/src/lib/subpages/subpages.ts b/packages/editor-ext/src/lib/subpages/subpages.ts
index 620f0342..59eb9896 100644
--- a/packages/editor-ext/src/lib/subpages/subpages.ts
+++ b/packages/editor-ext/src/lib/subpages/subpages.ts
@@ -28,7 +28,7 @@ export const Subpages = Node.create<SubpagesOptions>({
 
   group: "block",
   atom: true,
-  draggable: false,
+  draggable: true,
 
   parseHTML() {
     return [