From be2fc6e910f1fe9cf6d6d36f64f01809dd1a54b6 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sun, 17 Nov 2024 13:12:05 +0800
Subject: [PATCH] chore(group): modify markdown editor style

---
 components/Group/GroupList/GroupCard.jsx            |  9 +++++++--
 components/Profile/MyGroup/GroupCard.jsx            |  7 ++++++-
 shared/components/MarkdownEditor/MarkdownEditor.jsx | 12 ++++++++++--
 shared/styles/global.css                            |  8 +++++++-
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/Group/GroupList/GroupCard.jsx b/components/Group/GroupList/GroupCard.jsx
index 0f43156..e01c63e 100644
--- a/components/Group/GroupList/GroupCard.jsx
+++ b/components/Group/GroupList/GroupCard.jsx
@@ -48,8 +48,13 @@ function GroupCard({
             <span>{formatToString(partnerEducationStep, '皆可')}</span>
           </StyledText>
         </StyledInfo>
-        <StyledText lineClamp="2" fontSize="14px" style={{ height: '48px' }}>
-          <MarkdownEditor value={content?.split('\n')[0]} suppressLinkDefaultPrevent readOnly />
+        <StyledText lineClamp="2" fontSize="14px" style={{ height: '42px' }}>
+          <MarkdownEditor
+            value={content?.split('\n')[0]}
+            disabledProse
+            suppressLinkDefaultPrevent
+            readOnly
+          />
         </StyledText>
         <StyledAreas>
           <LocationOnOutlinedIcon fontSize="16px" sx={{ color: '#536166' }} />
diff --git a/components/Profile/MyGroup/GroupCard.jsx b/components/Profile/MyGroup/GroupCard.jsx
index f49bfa3..4e13396 100644
--- a/components/Profile/MyGroup/GroupCard.jsx
+++ b/components/Profile/MyGroup/GroupCard.jsx
@@ -88,7 +88,12 @@ function GroupCard({
         <StyledContainer>
           <StyledTitle>{title}</StyledTitle>
           <StyledText lineClamp="2" style={{ height: '42px' }}>
-            <MarkdownEditor readOnly value={content?.split('\n')[0]} suppressLinkDefaultPrevent />
+            <MarkdownEditor
+              readOnly
+              value={content?.split('\n')[0]}
+              disabledProse
+              suppressLinkDefaultPrevent
+            />
           </StyledText>
           <StyledAreas>
             <LocationOnOutlinedIcon fontSize="16px" sx={{ color: '#536166' }} />
diff --git a/shared/components/MarkdownEditor/MarkdownEditor.jsx b/shared/components/MarkdownEditor/MarkdownEditor.jsx
index 86aa93b..d0b8302 100644
--- a/shared/components/MarkdownEditor/MarkdownEditor.jsx
+++ b/shared/components/MarkdownEditor/MarkdownEditor.jsx
@@ -64,12 +64,14 @@ function InternalMarkdownEditor(
     editorClassName,
     onChange,
     suppressLinkDefaultPrevent = false,
+    disabledProse = false,
   },
   ref
 ) {
   const id = useId();
   const checkLinkRef = useRef(null);
   const markdown = useRef(value);
+  const editorSelectors = 'markdown-editor';
   const pluginsSettings = useMemo(
     () =>
       Object.entries(generatePluginsSettings({ diffMarkdown: markdown.current }))
@@ -87,13 +89,18 @@ function InternalMarkdownEditor(
   );
 
   useEffect(() => {
-    const editor = document.getElementById(id).querySelector('.prose');
+    const editor = document.getElementById(id).querySelector(`.${editorSelectors}`);
 
     const handleClick = (e) => {
       if (suppressLinkDefaultPrevent) {
         return;
       }
 
+      if (!readOnly) {
+        e.preventDefault();
+        return;
+      }
+
       let { target } = e;
       while (target.tagName !== 'A') {
         if (editor === target) break;
@@ -121,7 +128,8 @@ function InternalMarkdownEditor(
         suppressHtmlProcessing
         className={className}
         contentEditableClassName={cn(
-          'prose',
+          editorSelectors,
+          disabledProse ? 'disabled-prose' : 'prose',
           readOnly && '!p-0',
           editorClassName
         )}
diff --git a/shared/styles/global.css b/shared/styles/global.css
index e0f476e..653c62b 100644
--- a/shared/styles/global.css
+++ b/shared/styles/global.css
@@ -6,4 +6,10 @@
   .prose li[role=checkbox] {
     @apply indent-1 relative before:translate-y-1 after:absolute after:top-1/2 after:-translate-y-2/3 after:rotate-45;
   }
-}
\ No newline at end of file
+  .disabled-prose li {
+    @apply my-0;
+  }
+  .disabled-prose a {
+    @apply text-basic-black;
+  }
+}