Add code block copy button with toast

open-isle-cli/src/views/AboutPageView.vue

@@ -10,7 +10,7 @@
         <div class="about-tabs-item-label">{{ tab.label }}</div>
       </div>
     </div>
-    <div class="about-content" v-html="renderMarkdown(content)"></div>
+    <div class="about-content" v-html="renderMarkdown(content)" @click="handleContentClick"></div>
     <div class="about-loading" v-if="isFetching">
       <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
     </div>
@@ -19,7 +19,7 @@
 
 <script>
 import { ref, onMounted } from 'vue'
-import { renderMarkdown } from '../utils/markdown'
+import { renderMarkdown, handleMarkdownClick } from '../utils/markdown'
 import { hatch } from 'ldrs'
 hatch.register()
 
@@ -61,7 +61,11 @@ export default {
       loadContent(tabs[0].file)
     })
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching }
+    const handleContentClick = e => {
+      handleMarkdownClick(e)
+    }
+
+    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
   }
 }
 </script>

open-isle-cli/src/views/PostPageView.vue

@@ -51,7 +51,7 @@
             <div class="user-name">{{ author.username }}</div>
             <div class="post-time">{{ postTime }}</div>
           </div>
-          <div class="info-content-text" v-html="renderMarkdown(postContent)" @click="handleImageClick"></div>
+          <div class="info-content-text" v-html="renderMarkdown(postContent)" @click="handleContentClick"></div>
 
           <div class="article-footer-container">
             <ReactionsGroup v-model="postReactions" content-type="post" :content-id="postId">
@@ -113,7 +113,7 @@ import ArticleTags from '../components/ArticleTags.vue'
 import ArticleCategory from '../components/ArticleCategory.vue'
 import ReactionsGroup from '../components/ReactionsGroup.vue'
 import DropdownMenu from '../components/DropdownMenu.vue'
-import { renderMarkdown } from '../utils/markdown'
+import { renderMarkdown, handleMarkdownClick } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
 import TimeManager from '../utils/time'
@@ -237,7 +237,8 @@ export default {
       return false
     }
 
-    const handleImageClick = e => {
+    const handleContentClick = e => {
+      handleMarkdownClick(e)
       if (e.target.tagName === 'IMG') {
         const container = e.target.parentNode
         const imgs = [...container.querySelectorAll('img')].map(i => i.src)
@@ -511,7 +512,7 @@ export default {
       lightboxVisible,
       lightboxIndex,
       lightboxImgs,
-      handleImageClick,
+      handleContentClick,
       isMobile
     }
   }