init

frontend/src/pages/server/channel/index.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import MarkdownIt from 'markdown-it'
+import 'highlight.js/styles/github-dark.css'
 import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import {useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia';
 import {useMessageStore} from '@/stores/message';
 import {useUserStore} from "@/stores/user.ts";
+import {useMarkdown} from '@/composables/useMarkdown'
 
 const props = defineProps<{
   serverId: string
@@ -16,6 +17,7 @@ const channelId = computed(() => props.channelId);
 const route = useRoute();
 const messageStore = useMessageStore();
 const userStore = useUserStore();
+const {renderMarkdown} = useMarkdown()
 
 // Référence vers l'élément scrollable
 const messageContainer = ref<HTMLElement | null>(null);
@@ -25,15 +27,6 @@ const {messages, loading} = storeToRefs(messageStore);
 
 const newMessage = ref('');
 
-const md = new MarkdownIt({
-  html: false,        // Désactive le HTML pur pour la sécurité
-  linkify: true,      // Convertit automatiquement les URLs en liens
-  typographer: true,
-  breaks: true        // Convertit les retours à la ligne en <br> (comportement type chat)
-})
-const renderMarkdown = (content: string) => {
-  return md.render(content);
-};
 
 const scrollToBottom = async () => {
   await nextTick();
@@ -100,9 +93,9 @@ watch(messages, () => {
             <span class="text-caption text-grey">{{ msg.created_at }}</span>
           </v-list-item-title>
 
-          <v-list-item-subtitle class="text-body-1 text-high-emphasis opacity-100">
+          <div class="text-body-1 text-high-emphasis opacity-100 mt-1">
             <div class="markdown-content" v-html="renderMarkdown(msg.content)"></div>
-          </v-list-item-subtitle>
+          </div>
         </v-list-item>
       </v-list>
     </div>