From 1f15aef87bade75577698f24d67b3ca992f96129 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 08:10:52 +0530
Subject: [PATCH 01/11] require double click to enter editing mode.

---
 src/components/task/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
index 107e469..6eb3fb8 100644
--- a/src/components/task/index.tsx
+++ b/src/components/task/index.tsx
@@ -38,7 +38,7 @@ export default function Task({ task, index }: { task: TaskType; index: number })
           provided.draggableProps.style.transform += " rotate(5deg)";
         return (
           <label
-            onClick={() => {
+            onDoubleClick={() => {
               setIsEditing(true);
               resizeTextArea(textareaRef);
               if (textareaRef.current?.value) {

From 7239004122bdfd1bb8e0bd806389f521a613edb5 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 08:14:41 +0530
Subject: [PATCH 02/11] Create toast on single click

fixes #42
fixes #40
---
 src/components/task/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
index 6eb3fb8..50143a8 100644
--- a/src/components/task/index.tsx
+++ b/src/components/task/index.tsx
@@ -38,6 +38,7 @@ export default function Task({ task, index }: { task: TaskType; index: number })
           provided.draggableProps.style.transform += " rotate(5deg)";
         return (
           <label
+            onClick={() => vscode.toast("Double-click to enter editing mode!")}
             onDoubleClick={() => {
               setIsEditing(true);
               resizeTextArea(textareaRef);
@@ -46,6 +47,7 @@ export default function Task({ task, index }: { task: TaskType; index: number })
                 textareaRef.current.value = task.description;
               }
             }}
+            title="Double click to enter editing mode."
             htmlFor={id}
             ref={provided.innerRef}
             {...provided.dragHandleProps}

From 093b58c122011428df2a54ad3b5814d4b843a356 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 08:15:06 +0530
Subject: [PATCH 03/11] docs(changeset): Fix clicking on link and allow
 selection without entering editing mode.

---
 .changeset/itchy-wasps-reflect.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/itchy-wasps-reflect.md

diff --git a/.changeset/itchy-wasps-reflect.md b/.changeset/itchy-wasps-reflect.md
new file mode 100644
index 0000000..d3f93b9
--- /dev/null
+++ b/.changeset/itchy-wasps-reflect.md
@@ -0,0 +1,5 @@
+---
+"trello-kanban-task-board": patch
+---
+
+Fix clicking on link and allow selection without entering editing mode.

From fb3bb6e7a849d52b2bf9a3da6dfebe7ac31df78f Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 08:15:11 +0530
Subject: [PATCH 04/11] RELEASING: Releasing 1 package(s)

Releases:
  trello-kanban-task-board@0.6.1
---
 .changeset/itchy-wasps-reflect.md | 5 -----
 CHANGELOG.md                      | 6 ++++++
 package.json                      | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/itchy-wasps-reflect.md

diff --git a/.changeset/itchy-wasps-reflect.md b/.changeset/itchy-wasps-reflect.md
deleted file mode 100644
index d3f93b9..0000000
--- a/.changeset/itchy-wasps-reflect.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"trello-kanban-task-board": patch
----
-
-Fix clicking on link and allow selection without entering editing mode.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 418fc6b..bf3e06b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Trello Kanban Board
 
+## 0.6.1
+
+### Patch Changes
+
+- 093b58c: Fix clicking on link and allow selection without entering editing mode.
+
 ## 0.6.0
 
 ### Minor Changes
diff --git a/package.json b/package.json
index 51f171e..d8cfb24 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "trello-kanban-task-board",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",

From 1fedee5381067cfd069c6c00ac6ff4509ea089d9 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 08:26:20 +0530
Subject: [PATCH 05/11] Update tests

---
 src/App.test.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index e9cb035..86c5cb7 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -132,23 +132,23 @@ describe("Test Board", () => {
     expect(setStateFn).toBeCalled();
   });
 
-  test("Remove task", async ({ expect }) => {
-    const columnEl = screen.getByTestId("column-0");
-    const taskEl = columnEl.getElementsByClassName(taskStyles.task)[0];
-    act(() => fireEvent.click(taskEl.getElementsByClassName(taskStyles.close)[0]));
-    expect(columnEl.getElementsByClassName(taskStyles.task).length).toBe(1);
-  });
-
   test("Edit task", async ({ expect }) => {
     const columnEl = screen.getByTestId("column-0");
     const taskEl = columnEl.getElementsByClassName(taskStyles.task)[0];
-    act(() => fireEvent.click(taskEl));
+    act(() => fireEvent.doubleClick(taskEl));
     const inputEl = taskEl.getElementsByTagName("textarea")[0];
     act(() => fireEvent.input(inputEl, { target: { value: "Task 1" } }));
     act(() => fireEvent.blur(inputEl));
     expect(taskEl.textContent).toContain("Task 1");
   });
 
+  test("Remove task", async ({ expect }) => {
+    const columnEl = screen.getByTestId("column-0");
+    const taskEl = columnEl.getElementsByClassName(taskStyles.task)[0];
+    act(() => fireEvent.click(taskEl.getElementsByClassName(taskStyles.close)[0]));
+    expect(columnEl.getElementsByClassName(taskStyles.task).length).toBe(1);
+  });
+
   test("Drawer", ({ expect }) => {
     act(() => render(<Drawer open scope="Global" />));
     act(() => fireEvent.click(screen.getByText("⚙")));

From 3a030c9f08eebe78b991794ee439ce439439aaf5 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 08:37:53 +0530
Subject: [PATCH 06/11] Add mouse trails

---
 package.json | 1 +
 src/App.tsx  | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/package.json b/package.json
index d8cfb24..b9b1435 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-toastify": "^9.1.3",
+    "react-webgl-trails": "^0.0.4",
     "rehype-raw": "^7.0.0"
   },
   "devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index a5bdcfc..a27940a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { GlobalContext } from "utils/context";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { ThemeSwitcher } from "nextjs-themes";
+import { MouseTrail } from "react-webgl-trails";
 
 function App() {
   const [state, _setState] = useState<BoardType>(defaultBoard);
@@ -24,6 +25,7 @@ function App() {
       <ThemeSwitcher storage="localStorage" themeTransition="all .3s" />
       <Board />
       <ToastContainer position="bottom-right" />
+      <MouseTrail />
     </GlobalContext.Provider>
   );
 }

From b688a3accb4af76c9393541ddf45338fd4b1f9c5 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 09:09:36 +0530
Subject: [PATCH 07/11] Added task header

- Fix issues with clicking links fixes #40
- Allow for text selection fixes #42
---
 .../column-list/column-list.module.scss       |  3 +-
 src/components/task/index.tsx                 | 31 +++++++------
 src/components/task/task.module.scss          | 44 ++++++++++++-------
 3 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/components/column-list/column-list.module.scss b/src/components/column-list/column-list.module.scss
index 4897014..933dfa7 100644
--- a/src/components/column-list/column-list.module.scss
+++ b/src/components/column-list/column-list.module.scss
@@ -53,7 +53,8 @@
   overflow-x: hidden;
   overflow-y: auto;
   max-height: calc(100vh - 200px);
-  padding: 0;
+  padding: 0 10px;
+  margin: 0 -10px;
 }
 .close {
   display: none;
diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
index 50143a8..c506a30 100644
--- a/src/components/task/index.tsx
+++ b/src/components/task/index.tsx
@@ -38,21 +38,27 @@ export default function Task({ task, index }: { task: TaskType; index: number })
           provided.draggableProps.style.transform += " rotate(5deg)";
         return (
           <label
-            onClick={() => vscode.toast("Double-click to enter editing mode!")}
-            onDoubleClick={() => {
-              setIsEditing(true);
-              resizeTextArea(textareaRef);
-              if (textareaRef.current?.value) {
-                textareaRef.current.value = "hk";
-                textareaRef.current.value = task.description;
-              }
-            }}
-            title="Double click to enter editing mode."
             htmlFor={id}
             ref={provided.innerRef}
-            {...provided.dragHandleProps}
             {...provided.draggableProps}
             className={[styles.task, isEditing ? styles.active : ""].join(" ")}>
+            <header {...provided.dragHandleProps}>
+              <span>∘∘∘</span>
+              <button className={styles.close} onClick={removeTask}>
+                ✖
+              </button>
+              <button
+                onClick={() => {
+                  setIsEditing(true);
+                  if (textareaRef.current?.value) {
+                    textareaRef.current.value = "hk";
+                    textareaRef.current.value = task.description;
+                  }
+                  setTimeout(() => resizeTextArea(textareaRef), 100);
+                }}>
+                🖉
+              </button>
+            </header>
             <textarea
               id={id}
               value={task.description}
@@ -66,9 +72,6 @@ export default function Task({ task, index }: { task: TaskType; index: number })
               placeholder="Enter task description in Markdown format"
               hidden={!isEditing}
             />
-            <span className={styles.close} onClick={removeTask}>
-              ✖
-            </span>
             {!isEditing &&
               (task.description.trim() ? (
                 <ReactMarkdown rehypePlugins={[rehypeRaw]}>{task.description.replace(/\n+/g, "\n\n")}</ReactMarkdown>
diff --git a/src/components/task/task.module.scss b/src/components/task/task.module.scss
index e43a16a..70c590f 100644
--- a/src/components/task/task.module.scss
+++ b/src/components/task/task.module.scss
@@ -1,5 +1,5 @@
 .task {
-  margin: 5px;
+  margin-bottom: 10px;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid gray;
@@ -7,6 +7,34 @@
   display: block;
   position: relative;
   background: var(--bg);
+  header {
+    text-align: center;
+    box-shadow: 0 0 2px currentColor;
+    margin: -5px;
+    margin-bottom: -5px;
+    margin-bottom: 0;
+    border-radius: 5px 5px 0 0;
+    padding-bottom: 2px;
+    position: relative;
+    button {
+      all: unset;
+      position: absolute;
+      right: 24px;
+      top: 0;
+      cursor: pointer;
+      padding: 0 5px;
+      &:hover {
+        color: orange;
+      }
+    }
+
+    .close {
+      right: 2px;
+      &:hover {
+        color: red;
+      }
+    }
+  }
   textarea {
     width: calc(100% - 10px);
     resize: none;
@@ -18,9 +46,6 @@
   ul {
     padding-left: 20px;
   }
-  &:hover .close {
-    display: block;
-  }
 }
 .active {
   box-shadow: 0 0 5px red;
@@ -28,14 +53,3 @@
 .placeholder {
   opacity: 0.5;
 }
-.close {
-  position: absolute;
-  right: 5px;
-  top: -5px;
-  display: none;
-  cursor: pointer;
-  z-index: 100;
-  &:hover {
-    color: red;
-  }
-}

From 7add6e72cf411763eedce41fa714a4f2df20d35f Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 09:13:06 +0530
Subject: [PATCH 08/11] Auto detect urls and create links

---
 package.json                  | 3 ++-
 src/components/task/index.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b9b1435..ff801d9 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "react-markdown": "^9.0.1",
     "react-toastify": "^9.1.3",
     "react-webgl-trails": "^0.0.4",
-    "rehype-raw": "^7.0.0"
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
index c506a30..9f5a818 100644
--- a/src/components/task/index.tsx
+++ b/src/components/task/index.tsx
@@ -3,6 +3,7 @@ import { RefObject, useId, useRef, useState } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 import { useGlobalState } from "utils/context";
 import styles from "./task.module.scss";
 import { vscode } from "utils/vscode";
@@ -74,7 +75,9 @@ export default function Task({ task, index }: { task: TaskType; index: number })
             />
             {!isEditing &&
               (task.description.trim() ? (
-                <ReactMarkdown rehypePlugins={[rehypeRaw]}>{task.description.replace(/\n+/g, "\n\n")}</ReactMarkdown>
+                <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]}>
+                  {task.description.replace(/\n+/g, "\n\n")}
+                </ReactMarkdown>
               ) : (
                 <p className={styles.placeholder}>Enter task description in Markdown format.</p>
               ))}

From fd89a64adb136d7ae1cb62b5682dc871d09595af Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 09:23:58 +0530
Subject: [PATCH 09/11] mock webgl trails

---
 vitest.setup.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vitest.setup.ts b/vitest.setup.ts
index e0b3093..2d1b2d5 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom";
+import { MouseTrail } from "react-webgl-trails";
 import { vi } from "vitest";
 
 export const scrollIntoViewMock = vi.fn();
@@ -17,3 +18,5 @@ Object.defineProperty(window, "matchMedia", {
     dispatchEvent: vi.fn(),
   })),
 });
+
+vi.mock("react-webgl-trails", () => ({ MouseTrail: () => null }));

From 5c60fac6fff5ca40b65e1a2afc4b0e46d6688a34 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 09:36:58 +0530
Subject: [PATCH 10/11] Update tests

---
 src/App.test.tsx                      | 21 ++++++++++++---------
 src/components/column-list/column.tsx |  2 +-
 src/components/task/index.tsx         |  6 +++---
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 86c5cb7..dfdb4af 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -44,8 +44,10 @@ describe("Test Board", () => {
 
   test("Create new tasks", ({ expect }) => {
     const columnEl = screen.getByTestId("column-3");
-    act(() => fireEvent.click(columnEl.getElementsByTagName("button")[0]));
-    act(() => fireEvent.click(columnEl.getElementsByTagName("button")[0]));
+    // click add task button
+    act(() => fireEvent.click(columnEl.getElementsByClassName(columnListStyles.addTask)[0]));
+    // Add another task
+    act(() => fireEvent.click(columnEl.getElementsByClassName(columnListStyles.addTask)[0]));
     expect(columnEl.getElementsByClassName(taskStyles.task).length).toBe(2);
   });
 
@@ -60,7 +62,7 @@ describe("Test Board", () => {
 
   test("Create a new task", async ({ expect }) => {
     const columnEl = screen.getByTestId("column-0");
-    act(() => fireEvent.click(columnEl.getElementsByTagName("button")[0]));
+    act(() => fireEvent.click(columnEl.getElementsByClassName(columnListStyles.addTask)[0]));
     await new Promise((resolve) => setTimeout(resolve, 400));
     expect(columnEl.getElementsByClassName(taskStyles.task).length).toBe(2);
     expect(scrollIntoViewMock).toBeCalled();
@@ -69,12 +71,12 @@ describe("Test Board", () => {
   /** Todo: drop on another column or position */
   test("Move task", async ({ expect }) => {
     const columnEl = screen.getByTestId("column-0");
-    const taskEl = columnEl.getElementsByClassName(taskStyles.task)[0];
+    const taskHanleEl = columnEl.getElementsByClassName(taskStyles.task)[0].getElementsByTagName("header")[0];
     // simulate dragging -- not very effective
-    act(() => fireEvent.mouseDown(taskEl, { clientX: 100, clientY: 150 }));
-    act(() => fireEvent.mouseMove(taskEl, { clientX: 450, clientY: 500 }));
-    act(() => fireEvent.mouseMove(taskEl, { clientX: 650, clientY: 300 }));
-    act(() => fireEvent.mouseUp(taskEl, { clientX: 650, clientY: 300 }));
+    act(() => fireEvent.mouseDown(taskHanleEl, { clientX: 100, clientY: 150 }));
+    act(() => fireEvent.mouseMove(taskHanleEl, { clientX: 450, clientY: 500 }));
+    act(() => fireEvent.mouseMove(taskHanleEl, { clientX: 650, clientY: 300 }));
+    act(() => fireEvent.mouseUp(taskHanleEl, { clientX: 650, clientY: 300 }));
     expect(columnEl.getElementsByClassName(taskStyles.task).length).toBe(2);
   });
 
@@ -135,7 +137,8 @@ describe("Test Board", () => {
   test("Edit task", async ({ expect }) => {
     const columnEl = screen.getByTestId("column-0");
     const taskEl = columnEl.getElementsByClassName(taskStyles.task)[0];
-    act(() => fireEvent.doubleClick(taskEl));
+    const editBtn = taskEl.getElementsByTagName("button")[0];
+    act(() => fireEvent.click(editBtn));
     const inputEl = taskEl.getElementsByTagName("textarea")[0];
     act(() => fireEvent.input(inputEl, { target: { value: "Task 1" } }));
     act(() => fireEvent.blur(inputEl));
diff --git a/src/components/column-list/column.tsx b/src/components/column-list/column.tsx
index b292d18..d1292d6 100644
--- a/src/components/column-list/column.tsx
+++ b/src/components/column-list/column.tsx
@@ -24,7 +24,7 @@ export default function Column({ column, index }: { column: ColumnType; index: n
       // listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
       const newTaskElement = listRef.current?.children[listRef.current.children.length - 1] as HTMLLabelElement;
       newTaskElement?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
-      newTaskElement?.click();
+      newTaskElement?.getElementsByTagName("button")[0].click();
       setTimeout(() => {
         newTaskElement?.getElementsByTagName("textarea")[0].focus();
         newTaskElement?.getElementsByTagName("textarea")[0].click();
diff --git a/src/components/task/index.tsx b/src/components/task/index.tsx
index 9f5a818..d0d03dd 100644
--- a/src/components/task/index.tsx
+++ b/src/components/task/index.tsx
@@ -45,9 +45,6 @@ export default function Task({ task, index }: { task: TaskType; index: number })
             className={[styles.task, isEditing ? styles.active : ""].join(" ")}>
             <header {...provided.dragHandleProps}>
               <span>∘∘∘</span>
-              <button className={styles.close} onClick={removeTask}>
-                ✖
-              </button>
               <button
                 onClick={() => {
                   setIsEditing(true);
@@ -59,6 +56,9 @@ export default function Task({ task, index }: { task: TaskType; index: number })
                 }}>
                 🖉
               </button>
+              <button className={styles.close} onClick={removeTask}>
+                ✖
+              </button>
             </header>
             <textarea
               id={id}

From c53ceba1c2d79a10b6d33e56a22e597c60a7f3ff Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Wed, 3 Jul 2024 09:44:10 +0530
Subject: [PATCH 11/11] Fix build

---
 vitest.setup.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vitest.setup.ts b/vitest.setup.ts
index 2d1b2d5..a540809 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,5 +1,4 @@
 import "@testing-library/jest-dom";
-import { MouseTrail } from "react-webgl-trails";
 import { vi } from "vitest";
 
 export const scrollIntoViewMock = vi.fn();