web: added functionality for dragging tabs with data.

apps/web/src/components/editor/action-bar.tsx

@@ -275,6 +275,11 @@ function TabStrip() {
           }}
           renderItem={({ item: session, index: i }) => (
             <Tab
+              onDragStart={(e) => {
+                // e.dataTransfer.setData("note-id", "here is item");
+                // e.dataTransfer.dropEffect = "copy";
+                // console.log("ondragStart", e);
+              }}
               id={session.id}
               key={session.id}
               title={
@@ -379,6 +384,7 @@ type TabProps = {
   onCloseAll: () => void;
   onRevealInList: () => void;
   onPin: () => void;
+  onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
 };
 function Tab(props: TabProps) {
   const {
@@ -397,7 +403,8 @@ function Tab(props: TabProps) {
     onCloseToTheRight,
     onCloseToTheLeft,
     onRevealInList,
-    onPin
+    onPin,
+    onDragStart
   } = props;
   const Icon = isLocked
     ? type === "locked"
@@ -506,6 +513,11 @@ function Tab(props: TabProps) {
       }}
       {...listeners}
       {...attributes}
+      draggable
+      onDragStart={(e) => {
+        //listeners?.onDragStart?.(e);
+        //onDragStart?.(e);
+      }}
     >
       <Flex mr={1}>
         <Icon size={16} color={isActive ? "accent-selected" : "icon"} />

apps/web/src/components/editor/tiptap.tsx

@@ -182,6 +182,9 @@ function TipTap(props: TipTapProps) {
             onAttachFiles(Array.from(event.clipboardData.files));
             return true;
           }
+        },
+        handleDrop: (e: DragEvent) => {
+          console.log("handleDrop...", e.dataTransfer?.getData("note-id"));
         }
       },
       enableInputRules: markdownShortcuts,