From f3347c54302b64005e82ba4cf12be780862f8dc2 Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Mon, 1 Jul 2024 15:22:23 +0530
Subject: [PATCH] [WEB-1736] fix: drag drop task list (#4959)

* fix: drag drop issues with h4,h5,h6,images and drag handle position in tables solved

* fix: drag drop fixed for task lists

* fix: drag drop fixed for task lists

* fix: drag drop task list items
---
 .../editor/src/core/extensions/drag-drop.tsx  |  4 +--
 packages/editor/src/styles/drag-drop.css      | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/core/extensions/drag-drop.tsx b/packages/editor/src/core/extensions/drag-drop.tsx
index 14b03243fb7..06a74427feb 100644
--- a/packages/editor/src/core/extensions/drag-drop.tsx
+++ b/packages/editor/src/core/extensions/drag-drop.tsx
@@ -71,8 +71,8 @@ function nodeDOMAtCoords(coords: { x: number; y: number }) {
     "blockquote",
     "img",
     "h1, h2, h3, h4, h5, h6",
-    ".table-wrapper",
     "[data-type=horizontalRule]",
+    ".table-wrapper",
   ].join(", ");
 
   for (const elem of elements) {
@@ -120,7 +120,7 @@ function calcNodePos(pos: number, view: EditorView, node: Element) {
   const $pos = view.state.doc.resolve(safePos);
 
   if ($pos.depth > 1) {
-    if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+    if (node.matches("ul li, ol li")) {
       // only for nested lists
       const newPos = $pos.before($pos.depth);
       return Math.max(0, Math.min(newPos, maxPos));
diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css
index d46d26ecca3..74eaeb4752d 100644
--- a/packages/editor/src/styles/drag-drop.css
+++ b/packages/editor/src/styles/drag-drop.css
@@ -75,6 +75,37 @@
   border-radius: 4px;
 }
 
+/* for targetting the taks list items */
+li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
+  margin-left: -5px;
+}
+
+/* for targetting the unordered list items */
+ul > li.ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -10px; /* Adjust as needed */
+}
+
+/* Initialize a counter for the ordered list */
+ol {
+  counter-reset: item;
+}
+
+/* for targetting the ordered list items */
+ol > li.ProseMirror-selectednode:not(.dragging)::after {
+  counter-increment: item;
+  margin-left: -18px;
+}
+
+/* for targetting the ordered list items after the 9th item */
+ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -25px;
+}
+
+/* for targetting the ordered list items after the 99th item */
+ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -35px;
+}
+
 .ProseMirror img {
   transition: filter 0.1s ease-in-out;
   cursor: pointer;