chore: use markdown image syntax (#83)

web/src/components/DailyMemo.tsx

@@ -20,7 +20,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
     createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
     timeStr: utils.getTimeString(propsMemo.createdTs),
   };
-  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
 
   return (
     <div className="daily-memo-wrapper">

web/src/components/DeletedMemo.tsx

@@ -21,7 +21,7 @@ const DeletedMemo: React.FC<Props> = (props: Props) => {
     deletedAtStr: utils.getDateTimeString(propsMemo.updatedTs ?? Date.now()),
   };
   const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
-  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
 
   const handleDeleteMemoClick = async () => {
     if (showConfirmDeleteBtn) {

web/src/components/Memo.tsx

@@ -23,7 +23,7 @@ const Memo: React.FC<Props> = (props: Props) => {
     createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
   };
   const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
-  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
 
   const handleShowMemoStoryDialog = () => {
     showMemoCardDialog(memo);

web/src/components/MemoCardDialog.tsx

@@ -26,7 +26,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
   });
   const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]);
   const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]);
-  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
 
   useEffect(() => {
     const fetchLinkedMemos = async () => {

web/src/components/MemoEditor.tsx

@@ -80,7 +80,7 @@ const MemoEditor: React.FC<Props> = () => {
         const file = event.clipboardData.files[0];
         const url = await handleUploadFile(file);
         if (url) {
-          editorRef.current?.insertText(url + " ");
+          editorRef.current?.insertText(`![](${url})`);
         }
       }
     };
@@ -91,7 +91,7 @@ const MemoEditor: React.FC<Props> = () => {
         const file = event.dataTransfer.files[0];
         const url = await handleUploadFile(file);
         if (url) {
-          editorRef.current?.insertText(url);
+          editorRef.current?.insertText(`![](${url})`);
         }
       }
     };
@@ -246,7 +246,7 @@ const MemoEditor: React.FC<Props> = () => {
       const file = inputEl.files[0];
       const url = await handleUploadFile(file);
       if (url) {
-        editorRef.current?.insertText(url);
+        editorRef.current?.insertText(`![](${url})`);
       }
     };
     inputEl.click();

web/src/components/ShareMemoImageDialog.tsx

@@ -20,10 +20,10 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
     ...propsMemo,
     createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
   };
-  const memoImgUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []);
+  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
 
   const [shortcutImgUrl, setShortcutImgUrl] = useState("");
-  const [imgAmount, setImgAmount] = useState(memoImgUrls.length);
+  const [imgAmount, setImgAmount] = useState(imageUrls.length);
   const memoElRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -81,9 +81,9 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           </Only>
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
-          <Only when={memoImgUrls.length > 0}>
+          <Only when={imageUrls.length > 0}>
             <div className="images-container">
-              {memoImgUrls.map((imgUrl, idx) => (
+              {imageUrls.map((imgUrl, idx) => (
                 <img
                   crossOrigin="anonymous"
                   decoding="async"

web/src/helpers/consts.ts

@@ -17,7 +17,7 @@ export const TAG_REG = /#(.+?) /g;
 export const LINK_REG = /(https?:\/\/[^\s<\\*>']+)/g;
 
 // image regex
-export const IMAGE_URL_REG = /([^\s<\\*>']+\.(jpeg|jpg|gif|png|svg|webp))/g;
+export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)/g;
 
 // linked memo regex
 export const MEMO_LINK_REG = /\[@(.+?)\]\((.+?)\)/g;

web/src/less/daily-memo-diary-dialog.less

@@ -20,7 +20,7 @@
           }
 
           &.share-btn {
-            @apply w-5 h-auto;
+            @apply ~"p-0.5";
           }
         }
       }

web/src/less/memo-content.less

@@ -5,7 +5,7 @@
   @apply w-full whitespace-pre-wrap break-words;
 
   > p {
-    @apply inline-block w-full h-auto mb-1 text-base leading-7 whitespace-pre-wrap break-words;
+    @apply inline-block w-full h-auto mb-1 last:mb-0 text-base leading-7 whitespace-pre-wrap break-words;
   }
 
   .tag-span {

web/src/less/memo.less

@@ -2,7 +2,7 @@
 @import "./memo-content.less";
 
 .memo-wrapper {
-  @apply flex flex-col justify-start items-start w-full max-w-full p-3 px-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
+  @apply flex flex-col justify-start items-start w-full max-w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 
   &.deleted-memo {
     @apply border-gray-200;
@@ -13,7 +13,7 @@
   }
 
   > .memo-top-wrapper {
-    @apply flex flex-row justify-between items-center w-full h-6 mb-2;
+    @apply flex flex-row justify-between items-center w-full h-6 mb-1;
 
     > .time-text {
       @apply text-xs text-gray-400 cursor-pointer;