chore: update inline image

web/src/components/DailyMemo.tsx

@@ -21,7 +21,6 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
   };
   const displayConfig: DisplayConfig = {
     enableExpand: false,
-    showInlineImage: true,
   };
 
   return (

web/src/components/MemoContent.tsx

@@ -3,14 +3,8 @@ import { formatMemoContent } from "../helpers/marked";
 import Icon from "./Icon";
 import "../less/memo-content.less";
 
-const defaultDisplayConfig: DisplayConfig = {
-  enableExpand: true,
-  showInlineImage: false,
-};
-
 export interface DisplayConfig {
   enableExpand: boolean;
-  showInlineImage: boolean;
 }
 
 interface Props {
@@ -27,6 +21,10 @@ interface State {
   expandButtonStatus: ExpandButtonStatus;
 }
 
+const defaultDisplayConfig: DisplayConfig = {
+  enableExpand: true,
+};
+
 const MAX_MEMO_CONTAINER_HEIGHT = 384;
 
 const MemoContent: React.FC<Props> = (props: Props) => {
@@ -39,9 +37,6 @@ const MemoContent: React.FC<Props> = (props: Props) => {
     ...defaultDisplayConfig,
     ...props.displayConfig,
   };
-  const formatConfig = {
-    inlineImage: displayConfig.showInlineImage,
-  };
 
   useEffect(() => {
     if (!memoContentContainerRef) {
@@ -84,7 +79,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
         onClick={handleMemoContentClick}
         onDoubleClick={handleMemoContentDoubleClick}
-        dangerouslySetInnerHTML={{ __html: formatMemoContent(content, formatConfig) }}
+        dangerouslySetInnerHTML={{ __html: formatMemoContent(content) }}
       ></div>
       {state.expandButtonStatus !== -1 && (
         <div className="expand-btn-container">

web/src/components/ShareMemoImageDialog.tsx

@@ -4,10 +4,8 @@ import { userService } from "../services";
 import toImage from "../labs/html2image";
 import { ANIMATION_DURATION } from "../helpers/consts";
 import * as utils from "../helpers/utils";
-import { IMAGE_URL_REG } from "../helpers/marked";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import "../less/share-memo-image-dialog.less";
 
@@ -19,21 +17,14 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
   const { memo: propsMemo, destroy } = props;
   const { t } = useTranslation();
   const { user: userinfo } = userService.getState();
+  const [shortcutImgUrl, setShortcutImgUrl] = useState("");
   const memo = {
     ...propsMemo,
     createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
   };
-  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(imageUrls.length);
   const memoElRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (imgAmount > 0) {
-      return;
-    }
-
     setTimeout(() => {
       if (!memoElRef.current) {
         return;
@@ -46,24 +37,16 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
         .then((url) => {
           setShortcutImgUrl(url);
         })
-        .catch(() => {
-          // do nth
+        .catch((err) => {
+          console.error(err);
         });
     }, ANIMATION_DURATION);
-  }, [imgAmount]);
+  }, []);
 
   const handleCloseBtnClick = () => {
     destroy();
   };
 
-  const handleImageOnLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
-    if (event.type === "error") {
-      toastHelper.error(t("message.image-load-failed"));
-      (event.target as HTMLImageElement).remove();
-    }
-    setImgAmount(imgAmount - 1);
-  };
-
   const handleDownloadBtnClick = () => {
     const a = document.createElement("a");
     a.href = shortcutImgUrl;
@@ -90,13 +73,6 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           {shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={shortcutImgUrl} />}
           <span className="time-text">{memo.createdAtStr}</span>
           <MemoContent className="memo-content-wrapper" content={memo.content} displayConfig={{ enableExpand: false }} />
-          {imageUrls.length > 0 && (
-            <div className="images-container">
-              {imageUrls.map((imgUrl, idx) => (
-                <img decoding="async" key={idx} src={imgUrl} onLoad={handleImageOnLoad} onError={handleImageOnLoad} />
-              ))}
-            </div>
-          )}
           <div className="watermark-container">
             <span className="normal-text">
               <span className="icon-text">✍️</span> by <span className="name-text">{userinfo?.name}</span>

web/src/helpers/marked.ts

@@ -36,29 +36,12 @@ const parseHtmlToRawText = (htmlStr: string): string => {
   return text;
 };
 
-interface FormatterConfig {
-  inlineImage: boolean;
-}
-const defaultFormatterConfig: FormatterConfig = {
-  inlineImage: false,
-};
-
-const formatMemoContent = (content: string, additionConfig?: Partial<FormatterConfig>) => {
-  const config = {
-    ...defaultFormatterConfig,
-    ...additionConfig,
-  };
+const formatMemoContent = (content: string) => {
   const tempElement = document.createElement("div");
   tempElement.innerHTML = parseMarkedToHtml(escape(content));
 
-  let outputString = tempElement.innerHTML;
-  if (config.inlineImage) {
-    outputString = outputString.replace(IMAGE_URL_REG, "<img class='img' src='$1' />");
-  } else {
-    outputString = outputString.replace(IMAGE_URL_REG, "");
-  }
-
-  return outputString
+  return tempElement.innerHTML
+    .replace(IMAGE_URL_REG, "<img class='img' src='$1' />")
     .replace(MEMO_LINK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>")
     .replace(LINK_URL_REG, "<a class='link' target='_blank' rel='noreferrer' href='$2'>$1</a>")
     .replace(TAG_REG, "<span class='tag-span'>#$1</span> ");

web/src/less/memo.less

@@ -1,5 +1,4 @@
 @import "./mixin.less";
-@import "./memo-content.less";
 
 .memo-wrapper {
   @apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
@@ -100,18 +99,15 @@
     }
   }
 
-  > .memo-content-text {
-    @apply w-full h-auto transition-all;
+  > .memo-content-wrapper {
+    > .memo-content-text {
+      .tag-span {
+        @apply cursor-pointer hover:opacity-80;
+      }
 
-    &.expanded {
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 8;
-      overflow: hidden;
-    }
-
-    .tag-span {
-      @apply cursor-pointer hover:opacity-80;
+      .img {
+        @apply max-w-xs;
+      }
     }
   }