refactor: markdown message UI

src/common/component/Message/Reply.js

@@ -1,18 +1,19 @@
 // import React from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
+import MrakdownRender from "../MrakdownRender";
+
 import { ContentTypes } from "../../../app/config";
 import { getFileIcon } from "../../utils";
 import Avatar from "../Avatar";
 const Styled = styled.div`
   cursor: pointer;
   display: flex;
-  align-items: center;
-  padding: 16px;
+  align-items: flex-start;
+  padding: 8px;
   background: #e5e7eb;
   border-radius: var(--br);
   gap: 8px;
-
   margin-bottom: 4px;
   .user {
     display: flex;
@@ -49,6 +50,24 @@ const Styled = styled.div`
       word-wrap: break-word;
       word-break: break-all;
     }
+    .md {
+      position: relative;
+      max-height: 152px;
+      overflow: hidden;
+      &:after {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        content: "";
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0) 63.54%,
+          #e5e7eb 93.09%
+        );
+      }
+    }
     .pic {
       display: inherit;
       max-width: 34px;
@@ -73,7 +92,11 @@ const renderContent = (data) => {
       res = <span className="txt"> {content}</span>;
       break;
     case ContentTypes.markdown:
-      res = <span className="txt">[markdown]</span>;
+      res = (
+        <div className="md">
+          <MrakdownRender content={content} />
+        </div>
+      );
       break;
     case ContentTypes.image:
     case ContentTypes.imageJPG:

src/common/component/Message/renderContent.js

@@ -1,8 +1,10 @@
+import React from "react";
 import Linkify from "react-linkify";
 import dayjs from "dayjs";
 import MrakdownRender from "../MrakdownRender";
 import { getDefaultSize } from "../../utils";
 import FileBox from "../FileBox";
+import URLPreview from "./URLPreview";
 const renderContent = ({
   from_uid,
   created_at,
@@ -19,14 +21,18 @@ const renderContent = ({
         <>
           <Linkify
             componentDecorator={(decoratedHref, decoratedText, key) => (
-              <a
-                target="_blank"
-                href={decoratedHref}
-                key={key}
-                rel="noreferrer"
-              >
-                {decoratedText}
-              </a>
+              <React.Fragment key={key}>
+                <a
+                  className="link"
+                  target="_blank"
+                  href={decoratedHref}
+                  key={key}
+                  rel="noreferrer"
+                >
+                  {decoratedText}
+                </a>
+                <URLPreview url={decoratedHref} />
+              </React.Fragment>
             )}
           >
             {content}

src/common/component/Message/styled.js

@@ -73,7 +73,7 @@ const StyledMsg = styled.div`
         max-width: 400px;
         cursor: pointer;
       }
-      a {
+      > .link {
         text-decoration: none;
         border-radius: 2px;
         /* background-color: #f5feff; */

src/common/component/Send/Replying.js

@@ -1,6 +1,7 @@
 // import React from 'react'
 import { useDispatch, useSelector } from "react-redux";
 import { ContentTypes } from "../../../app/config";
+import MrakdownRender from "../MrakdownRender";
 import closeIcon from "../../../assets/icons/close.circle.svg?url";
 import pictureIcon from "../../../assets/icons/picture.svg?url";
 import { getFileIcon } from "../../utils";
@@ -10,7 +11,7 @@ const Styled = styled.div`
   z-index: 999;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   gap: 16px;
   border-top-left-radius: 8px;
@@ -37,13 +38,33 @@ const Styled = styled.div`
     }
   }
   .content {
-    font-weight: 500;
     color: #616161;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 30px;
     display: flex;
     align-items: center;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    .md {
+      position: relative;
+      max-height: 100px;
+      overflow: hidden;
+      &:after {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        content: "";
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0) 63.54%,
+          #f3f4f6 93.09%
+        );
+      }
+    }
     .icon {
       width: 15px;
       height: 20px;
@@ -57,9 +78,9 @@ const Styled = styled.div`
   .close {
     background: none;
     position: absolute;
-    top: 50%;
+    top: 16px;
     right: 16px;
-    transform: translateY(-50%);
+    /* transform: translateY(-50%); */
   }
 `;
 const renderContent = (data) => {
@@ -70,7 +91,11 @@ const renderContent = (data) => {
       res = content;
       break;
     case ContentTypes.markdown:
-      res = `[markdown]`;
+      res = (
+        <div className="md">
+          <MrakdownRender content={content} />
+        </div>
+      );
       break;
     case ContentTypes.image:
     case ContentTypes.imageJPG: