feat: support long-click/press to edit a Todo

Clicking/tapping a description continues to act consistently with
clicking the checkbox (toggles completion), but long-clicking/pressing
will now open the edit dialog.

Closes #33

Author: mvgrimes

dist/manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "todotxt",
 	"name": "TodoTxt",
-	"version": "2.0.5",
+	"version": "2.1.0",
 	"minAppVersion": "0.15.0",
 	"description": "Manage Todo.txt files.",
 	"author": "Mark Grimes",

dist/styles.css

@@ -95,9 +95,12 @@
     }
 
   #todotxt .todo {
+
     border: 3px solid transparent;
     border-radius: 4px;
-  }
+
+    display: flex;
+}
 
   /* .todo:has(input:focus)  { */
 

dist/versions.json

@@ -24,5 +24,6 @@
 	"2.0.2": "0.15.0",
 	"2.0.3": "0.15.0",
 	"2.0.4": "0.15.0",
-	"2.0.5": "0.15.0"
+	"2.0.5": "0.15.0",
+	"2.1.0": "0.15.0"
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "todotxt",
 	"name": "TodoTxt",
-	"version": "2.0.5",
+	"version": "2.1.0",
 	"minAppVersion": "0.15.0",
 	"description": "Manage Todo.txt files.",
 	"author": "Mark Grimes",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-sample-plugin",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "This is a sample plugin for Obsidian (https://obsidian.md)",
   "main": "dist/main.js",
   "scripts": {

src/lib/useLongPress.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useRef, useCallback } from 'react';
+
+type useLongPressType = (
+  onLongPress: (event: any) => void,
+  onClick: (event: any) => void,
+  options?: {
+    delay?: number;
+  },
+) => {
+  onMouseDown: (event: any) => void;
+  onTouchStart: (event: any) => void;
+  onMouseUp: (event: any) => void;
+  onMouseLeave: (event: any) => void;
+  onTouchEnd: (event: any) => void;
+};
+const useLongPress: useLongPressType = (
+  onLongPress,
+  onClick,
+  { delay = 500 } = {},
+) => {
+  const [longPressTriggered, setLongPressTriggered] = useState(false);
+  const timeout = useRef<any>();
+
+  const start = useCallback(
+    (event: React.MouseEvent) => {
+      timeout.current = setTimeout(() => {
+        onLongPress(event);
+        setLongPressTriggered(true);
+      }, delay);
+    },
+    [onLongPress, delay],
+  );
+
+  const clear = useCallback(
+    (event: React.MouseEvent, shouldTriggerClick = true) => {
+      timeout.current && clearTimeout(timeout.current);
+      if (shouldTriggerClick && !longPressTriggered) {
+        onClick(event);
+      }
+      setLongPressTriggered(false);
+    },
+    [onClick, longPressTriggered],
+  );
+
+  return {
+    onMouseDown: (e) => start(e),
+    onTouchStart: (e) => start(e),
+    onMouseUp: (e) => clear(e),
+    onMouseLeave: (e) => clear(e, false),
+    onTouchEnd: (e) => clear(e),
+  };
+};
+
+export default useLongPress;

src/styles.css

@@ -84,11 +84,11 @@
     input[type="checkbox"] {
       margin-top: 0.125rem;
     }
-  }
 
-  .todo {
     border: 3px solid transparent;
     border-radius: 4px;
+
+    display: flex;
   }
 
   /* .todo:has(input:focus)  { */

src/ui/todoview.tsx

@@ -11,6 +11,7 @@ import {
   TodoProject,
   TodoTag,
 } from '../lib/todo';
+import useLongPress from '../lib/useLongPress';
 import cn from '../lib/classNames';
 
 type TodoViewProps = {
@@ -24,17 +25,23 @@ type TodoViewProps = {
 };
 export const TodoView = (props: TodoViewProps) => {
   const { todo } = props;
+  const longPressProps = useLongPress(
+    () => props.onEditClicked(todo),
+    () => props.onCompleteToggle(todo),
+    { delay: 500 },
+  );
 
   return (
     <div className="todo">
-      <label htmlFor={`todo-${todo.id}`} className="todo-label">
-        <input
-          type="checkbox"
-          checked={todo.completed}
-          id={`todo-${todo.id}`}
-          onChange={() => props.onCompleteToggle(todo)}
-          onKeyUp={(e) => props.onKeyPressed(e, todo)}
-        />
+      <input
+        type="checkbox"
+        checked={todo.completed}
+        id={`todo-${todo.id}`}
+        onKeyUp={(e) => props.onKeyPressed(e, todo)}
+        onChange={() => props.onCompleteToggle(todo)}
+      />
+      {/* We can't use <label htmlFor={`todo-${todo.id}`}> here because it will cause the onCompleteToggle to fire twice */}
+      <div className="todo-label" {...longPressProps}>
         <span
           className={cn(
             'todo-priority',
@@ -73,7 +80,7 @@ export const TodoView = (props: TodoViewProps) => {
             </button>
           </span>
         </span>
-      </label>
+      </div>
     </div>
   );
 };

versions.json

@@ -24,5 +24,6 @@
 	"2.0.2": "0.15.0",
 	"2.0.3": "0.15.0",
 	"2.0.4": "0.15.0",
-	"2.0.5": "0.15.0"
+	"2.0.5": "0.15.0",
+	"2.1.0": "0.15.0"
 }