chore(group): modify markdown editor style

daodaoedu · Nov 17, 2024 · be2fc6e · be2fc6e
1 parent 3f6bc88
commit be2fc6e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }
-}
+  .disabled-prose li {
+    @apply my-0;
+  }
+  .disabled-prose a {
+    @apply text-basic-black;
+  }
+}