feat: toggle todo status by clicking (#99)

web/src/components/Memo.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect, useRef, useState } from "react";
-import { escape } from "lodash-es";
+import { escape, indexOf } from "lodash-es";
 import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG, UNKNOWN_ID } from "../helpers/consts";
-import { parseMarkedToHtml } from "../helpers/marked";
+import { DONE_BLOCK_REG, parseMarkedToHtml, TODO_BLOCK_REG } from "../helpers/marked";
 import * as utils from "../helpers/utils";
 import useToggle from "../hooks/useToggle";
 import { editorStateService, locationService, memoService } from "../services";
@@ -116,7 +116,7 @@ const Memo: React.FC<Props> = (props: Props) => {
         toastHelper.error("MEMO Not Found");
         targetEl.classList.remove("memo-link-text");
       }
-    } else if (targetEl.tagName === "SPAN" && targetEl.className === "tag-span") {
+    } else if (targetEl.className === "tag-span") {
       const tagName = targetEl.innerText.slice(1);
       const currTagQuery = locationService.getState().query?.tag;
       if (currTagQuery === tagName) {
@@ -125,7 +125,32 @@ const Memo: React.FC<Props> = (props: Props) => {
         locationService.setTagQuery(tagName);
       }
     } else if (targetEl.className === "todo-block") {
-      // ...do nth
+      const status = targetEl.dataset?.value;
+      const todoElementList = [...(memoContainerRef.current?.querySelectorAll(`span.todo-block[data-value=${status}]`) ?? [])];
+      for (const element of todoElementList) {
+        if (element === targetEl) {
+          const index = indexOf(todoElementList, element);
+          const tempList = memo.content.split(status === "DONE" ? DONE_BLOCK_REG : TODO_BLOCK_REG);
+          let finalContent = "";
+
+          for (let i = 0; i < tempList.length; i++) {
+            if (i === 0) {
+              finalContent += `${tempList[i]}`;
+            } else {
+              if (i === index + 1) {
+                finalContent += status === "DONE" ? "- [ ] " : "- [x] ";
+              } else {
+                finalContent += status === "DONE" ? "- [x] " : "- [ ] ";
+              }
+              finalContent += `${tempList[i]}`;
+            }
+          }
+          await memoService.patchMemo({
+            id: memo.id,
+            content: finalContent,
+          });
+        }
+      }
     }
   };
 

web/src/components/MemoEditor.tsx

@@ -214,7 +214,7 @@ const MemoEditor: React.FC<Props> = () => {
     const prevString = currentValue.slice(0, selectionStart);
     const nextString = currentValue.slice(selectionStart);
 
-    let nextValue = prevString + "# " + nextString;
+    let nextValue = prevString + "#" + nextString;
     let cursorIndex = prevString.length + 1;
 
     if (prevString.endsWith("#") && nextString.startsWith(" ")) {
@@ -265,7 +265,7 @@ const MemoEditor: React.FC<Props> = () => {
 
   const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
     if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
-      editorRef.current?.insertText((event.target as HTMLElement).textContent ?? "");
+      editorRef.current?.insertText((event.target as HTMLElement).textContent + " " ?? "");
       toggleTagSeletor(false);
     }
   }, []);

web/src/components/MenuBtnsPopup.tsx

@@ -57,12 +57,12 @@ const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
 
   return (
     <div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
-      <button className="btn action-btn" onClick={handlePingBtnClick}>
-        <span className="icon">🎯</span> Ping
-      </button>
       <button className="btn action-btn" onClick={handleAboutBtnClick}>
         <span className="icon">🤠</span> About
       </button>
+      <button className="btn action-btn" onClick={handlePingBtnClick}>
+        <span className="icon">🎯</span> Ping
+      </button>
       <button className="btn action-btn" onClick={handleSignOutBtnClick}>
         <span className="icon">👋</span> Sign out
       </button>

web/src/helpers/marked.ts

@@ -1,23 +1,22 @@
 const CODE_BLOCK_REG = /```([\s\S]*?)```/g;
 const BOLD_TEXT_REG = /\*\*(.+?)\*\*/g;
 const EM_TEXT_REG = /\*(.+?)\*/g;
-const TODO_BLOCK_REG = /- \[ \] /g;
-const DONE_BLOCK_REG = /- \[x\] /g;
+export const TODO_BLOCK_REG = /- \[ \] /g;
+export const DONE_BLOCK_REG = /- \[x\] /g;
 const DOT_LI_REG = /[*-] /g;
 const NUM_LI_REG = /(\d+)\. /g;
 
 const parseMarkedToHtml = (markedStr: string): string => {
   const htmlText = markedStr
+    .replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2")
+    .replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2")
     .replace(CODE_BLOCK_REG, "<pre lang=''>$1</pre>")
-    .replace(TODO_BLOCK_REG, "<span class='todo-block' data-type='todo'>⬜</span>")
-    .replace(DONE_BLOCK_REG, "<span class='todo-block' data-type='done'>✅</span>")
+    .replace(TODO_BLOCK_REG, "<span class='todo-block' data-value='TODO'>⬜</span>")
+    .replace(DONE_BLOCK_REG, "<span class='todo-block' data-value='DONE'>✅</span>")
     .replace(DOT_LI_REG, "<span class='counter-block'>•</span>")
     .replace(NUM_LI_REG, "<span class='counter-block'>$1.</span>")
     .replace(BOLD_TEXT_REG, "<strong>$1</strong>")
-    .replace(EM_TEXT_REG, "<em>$1</em>")
-    .replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2")
-    .replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2");
-
+    .replace(EM_TEXT_REG, "<em>$1</em>");
   return htmlText;
 };
 

web/src/less/memo-content.less

@@ -21,7 +21,7 @@
 
   .counter-block,
   .todo-block {
-    @apply inline-block text-center w-6 font-mono;
+    @apply inline-block text-center w-6 font-mono select-none cursor-pointer hover:shadow-inner;
   }
 
   pre {