fix: tag regex (#76)

* fix: tag regex

* fix: tag styles

* chore: remove usused codes

web/src/components/Memo.tsx

@@ -160,13 +160,6 @@ export function formatMemoContent(content: string) {
 
   content = parseMarkedToHtml(content);
 
-  content = content.replace(IMAGE_URL_REG, "");
-
-  content = content
-    .replace(TAG_REG, "<span class='tag-span'>#$1</span>")
-    .replace(LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$1'>$1</a>")
-    .replace(MEMO_LINK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>");
-
   // Add space in english and chinese
   content = content.replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2").replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2");
 
@@ -182,7 +175,11 @@ export function formatMemoContent(content: string) {
     }
   }
 
-  return tempDivContainer.innerHTML;
+  return tempDivContainer.innerHTML
+    .replace(IMAGE_URL_REG, "")
+    .replace(TAG_REG, "<span class='tag-span'>#$1</span> ")
+    .replace(LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$1'>$1</a>")
+    .replace(MEMO_LINK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>");
 }
 
 export default memo(Memo);

web/src/helpers/consts.ts

@@ -11,13 +11,13 @@ export const TOAST_ANIMATION_DURATION = 400;
 export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
 
 // tag regex
-export const TAG_REG = /#(.+?)\s/g;
+export const TAG_REG = /#(.+?) /g;
 
 // URL regex
 export const LINK_REG = /(https?:\/\/[^\s<\\*>']+)/g;
 
 // image regex
-export const IMAGE_URL_REG = /([^\s<\\*>']+\.(jpeg|jpg|gif|png|svg))/g;
+export const IMAGE_URL_REG = /([^\s<\\*>']+\.(jpeg|jpg|gif|png|svg|webp))/g;
 
 // linked memo regex
 export const MEMO_LINK_REG = /\[@(.+?)\]\((.+?)\)/g;

web/src/less/memo-content.less

@@ -9,7 +9,7 @@
   }
 
   .tag-span {
-    @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;
+    @apply inline-block w-auto px-2 text-sm leading-6 border-none rounded cursor-pointer text-blue-600 bg-blue-50 hover:text-white hover:bg-blue-600;
   }
 
   .memo-link-text {

web/src/less/memo.less

@@ -3,7 +3,7 @@
 
 .memo-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-full max-w-full p-3 px-4 mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
+  @apply w-full max-w-full p-3 px-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 
   &.deleted-memo {
     @apply border-gray-200;
@@ -27,7 +27,7 @@
 
       > .more-action-btns-wrapper {
         .flex(column, flex-start, center);
-        @apply absolute flex-nowrap;
+        @apply absolute flex-nowrap hover:flex;
         top: calc(100% - 8px);
         right: -16px;
         width: auto;
@@ -36,10 +36,6 @@
         z-index: 1;
         display: none;
 
-        &:hover {
-          display: flex;
-        }
-
         > .more-action-btns-container {
           width: 112px;
           height: auto;
@@ -92,7 +88,7 @@
   }
 
   > .memo-content-text {
-    @apply w-full;
+    @apply w-full h-auto;
   }
 
   > .images-wrapper {