chore: update todo block

web/src/components/DailyMemo.tsx

@@ -32,7 +32,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
         <Only when={imageUrls.length > 0}>
           <div className="images-container">
             {imageUrls.map((imgUrl, idx) => (
-              <img key={idx} crossOrigin="anonymous" src={imgUrl} decoding="async" />
+              <img key={idx} src={imgUrl} decoding="async" />
             ))}
           </div>
         </Only>

web/src/components/Memo.tsx

@@ -112,7 +112,7 @@ const Memo: React.FC<Props> = (props: Props) => {
       } else {
         locationService.setTagQuery(tagName);
       }
-    } else if (targetEl.className === "todo-block") {
+    } else if (targetEl.classList.contains("todo-block")) {
       const status = targetEl.dataset?.value;
       const todoElementList = [...(memoContainerRef.current?.querySelectorAll(`span.todo-block[data-value=${status}]`) ?? [])];
       for (const element of todoElementList) {

web/src/components/PreviewImageDialog.tsx

@@ -29,7 +29,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
         </button>
       </div>
       <div className="img-container">
-        <img src={imgUrl} crossOrigin="anonymous" />
+        <img src={imgUrl} />
       </div>
     </>
   );

web/src/components/ShareMemoImageDialog.tsx

@@ -91,14 +91,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           <Only when={imageUrls.length > 0}>
             <div className="images-container">
               {imageUrls.map((imgUrl, idx) => (
-                <img
+                <img decoding="async" key={idx} src={imgUrl} onLoad={handleImageOnLoad} onError={handleImageOnLoad} />
-                  crossOrigin="anonymous"
-                  decoding="async"
-                  key={idx}
-                  src={imgUrl}
-                  onLoad={handleImageOnLoad}
-                  onError={handleImageOnLoad}
-                />
               ))}
             </div>
           </Only>

web/src/helpers/marked.ts

@@ -11,8 +11,8 @@ const parseMarkedToHtml = (markedStr: string): string => {
     .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-value='TODO'>⬜</span>")
+    .replace(TODO_BLOCK_REG, "<span class='todo-block todo' data-value='TODO'></span>")
-    .replace(DONE_BLOCK_REG, "<span class='todo-block' data-value='DONE'>✅</span>")
+    .replace(DONE_BLOCK_REG, "<span class='todo-block done' 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>")

web/src/less/memo-content.less

@@ -25,7 +25,10 @@
   }
 
   .todo-block {
-    @apply rounded select-none cursor-pointer hover:shadow-inner;
+    @apply w-4 h-4 leading-4 border rounded float-left box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
+    margin-top: 6px;
+    margin-left: 6px;
+    margin-right: 6px;
   }
 
   pre {

web/src/less/memo.less

@@ -127,11 +127,11 @@
     .pretty-scroll-bar(0, 2px);
 
     > .memo-img {
-      @apply mr-2 last:mr-0 w-auto h-32 shrink-0 grow-0 overflow-y-hidden;
+      @apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;
       .hide-scroll-bar();
 
       > img {
-        @apply w-auto max-h-32 rounded-lg;
+        @apply w-auto max-h-40 rounded-lg;
       }
     }
   }