feat: table row/column drag and drop (#1467)

* chore: add dev container

* feat: add drag handle when hovering cell

* feat: add column drag and drop

* feat: add support for row drag and drop

* refactor: extract preview controllers

* fix: hover issue

* refactor: add handle controller

* chore: f

* chore: remove log

* chore: remove dev files

* feat: hide other drop indicators when table dnd working

* feat: add auto scroll and bug fix

* chore: f

* fix: firefox

apps/client/src/features/editor/extensions/extensions.ts

@@ -38,6 +38,7 @@ import {
   Embed,
   SearchAndReplace,
   Mention,
+  TableDndExtension,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -168,6 +169,7 @@ export const mainExtensions = [
   TableRow,
   TableCell,
   TableHeader,
+  TableDndExtension,
   MathInline.configure({
     view: MathInlineView,
   }),

apps/client/src/features/editor/page-editor.tsx

@@ -375,7 +375,7 @@ export default function PageEditor({
   }
 
   return (
-    <div style={{ position: "relative" }}>
+    <div className="editor-container" style={{ position: "relative" }}>
       <div ref={menuContainerRef}>
         <EditorContent editor={editor} />
 

apps/client/src/features/editor/styles/drag-handle.css

@@ -45,6 +45,10 @@
     display: none;
     pointer-events: none;
   }
+
+  &[data-direction='horizontal'] {
+    rotate: 90deg;
+  }
 }
 
 .dark .drag-handle {

apps/client/src/features/editor/styles/table.css

@@ -8,6 +8,16 @@
   }
 }
 
+.table-dnd-preview {
+  padding: 0;
+  background-color: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(2px);
+}
+
+.table-dnd-drop-indicator {
+  background-color: #adf;
+}
+
 .ProseMirror {
   table {
     border-collapse: collapse;
@@ -118,3 +128,13 @@
     }
   }
 }
+
+.editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
+  .prosemirror-dropcursor-block {
+    display: none;
+  }
+
+  .prosemirror-dropcursor-inline {
+    display: none;
+  }
+}