feat: Support inline toggling for todos. fixes #1931 (#1933)

* [1931] Can now chain the creation of todos from the quick add form

* [1931] Can now toggle todos from the masonry view + added a custom renderer for inputs of type checkbox (required to remove the readonly default attribute)

* handle nested lists and case

---------

Co-authored-by: Cédric <cedric.marinot@elosi.com>
Co-authored-by: Mohamed Bassem <me@mbassem.com>

2 files changed, 39 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx b/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
index 82e483a9..e7fea2c3 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx
@@ -33,10 +33,13 @@ export function BookmarkMarkdownComponent({
       text,

     });

   };

+

   return (

     <div className="h-full">

       {readOnly ? (

-        <MarkdownReadonly>{bookmark.content.text}</MarkdownReadonly>

+        <MarkdownReadonly onSave={onSave}>

+          {bookmark.content.text}

+        </MarkdownReadonly>

       ) : (

         <MarkdownEditor onSave={onSave} isSaving={isPending}>

           {bookmark.content.text}

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 7ac1cade..b80cd889 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -172,6 +172,35 @@ export default function EditorCard({ className }: { className?: string }) {
     }
   };
 
+  /**
+   * Methods that triggers when "enter" is pressed (without ctrl)
+   * It checks if the current line is a todo
+   * if it is it automatically appends a todo a the start of the new line
+   */
+  const handleNewTodo = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const todoMarkup = "- [ ] ";
+    const textarea = inputRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const textBefore = textarea.value.slice(0, start);
+    const lines = textBefore.split("\n");
+    const currentLine = lines[lines.length - 1];
+    const currentLineIsTodo = currentLine.startsWith(todoMarkup);
+    if (!currentLineIsTodo) return;
+    e.preventDefault();
+    const newValue =
+      textarea.value.slice(0, start) +
+      "\n" +
+      todoMarkup +
+      textarea.value.slice(end);
+    form.setValue("text", newValue, { shouldDirty: true, shouldTouch: true });
+    textarea.value = newValue;
+    textarea.selectionStart = start + todoMarkup.length + 1;
+    textarea.selectionEnd = start + todoMarkup.length + 1;
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
   const OS = getOS();
 
   return (
@@ -205,6 +234,12 @@ export default function EditorCard({ className }: { className?: string }) {
                 if (demoMode) {
                   return;
                 }
+                if (
+                  e.key === "Enter" &&
+                  !(e.metaKey || e.ctrlKey || e.shiftKey)
+                ) {
+                  handleNewTodo(e);
+                }
                 if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                   form.handleSubmit(onSubmit, onError)();
                 }