fix: convert raw memo

web/src/less/memo-content.less

@@ -2,70 +2,26 @@
 
 .memo-content-text {
   .flex(column, flex-start, flex-start);
-  width: 100%;
+  @apply w-full whitespace-pre-wrap break-words;
-  word-wrap: break-word;
-  word-break: break-word;
-  white-space: pre-wrap;
 
   > p {
-    display: inline-block;
+    @apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap;
-    width: 100%;
-    height: auto;
-    margin-bottom: 4px;
-    font-size: 15px;
-    line-height: 24px;
-    min-height: 24px;
-    white-space: pre-wrap;
   }
 
   .tag-span {
-    display: inline-block;
+    @apply inline-block w-auto px-2 text-sm leading-6 border-none rounded mr-1 cursor-pointer text-blue-600 bg-blue-50 hover:text-white hover:bg-blue-600;
-    width: auto;
-    padding: 0 6px;
-    line-height: 24px;
-    font-size: 13px;
-    border: none;
-    border-radius: 4px;
-    color: @text-blue;
-    background-color: @bg-light-blue;
-    cursor: pointer;
-    vertical-align: bottom;
-
-    &:hover {
-      background-color: @text-blue;
-      color: white;
-    }
   }
 
   .memo-link-text {
-    display: inline-block;
+    @apply inline-block text-blue-600 cursor-pointer font-bold border-none no-underline hover:opacity-80;
-    color: @text-blue;
-    font-weight: bold;
-    border-bottom: none;
-    text-decoration: none;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.8;
-    }
   }
 
   .counter-block,
   .todo-block {
-    display: inline-block;
+    @apply inline-block text-center w-6 font-mono;
-    text-align: center;
-    width: 1.4rem;
-    @apply font-mono;
   }
 
   pre {
-    width: 100%;
+    @apply w-full mt-1 py-2 px-3 rounded text-sm bg-gray-100 whitespace-pre-wrap;
-    margin: 4px 0;
-    padding: 8px 12px;
-    border-radius: 4px;
-    font-size: 15px;
-    line-height: 1.5;
-    background-color: #f6f5f4;
-    white-space: pre-wrap;
   }
 }

web/src/services/memoService.ts

@@ -17,9 +17,7 @@ class MemoService {
     }
 
     const data = await api.getMyMemos();
-    const memos: Model.Memo[] = data.map((m) => {
+    const memos: Model.Memo[] = data.map((m) => this.convertResponseModelMemo(m));
-      return this.convertResponseModelMemo(m);
-    });
     appStore.dispatch({
       type: "SET_MEMOS",
       payload: {
@@ -138,6 +136,7 @@ class MemoService {
   private convertResponseModelMemo(memo: Model.Memo): Model.Memo {
     return {
       ...memo,
+      id: String(memo.id),
       createdAt: utils.getDataStringWithTs(memo.createdTs),
       updatedAt: utils.getDataStringWithTs(memo.updatedTs),
     };