Rendre les commentaire markdown

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue

@@ -18,8 +18,6 @@
                         v-model="content"
                         tag-name="textarea">
                         </ckeditor>
-                        <!-- <textarea v-model="content" class="form-control" id="content" rows="3"
-                            :placeholder="$t('comment.label')"></textarea> -->
 
                         <div class="d-flex justify-content-end p-2">
                             <button class="btn btn-chill-green text-white float-right" type="submit">

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue

@@ -2,28 +2,66 @@
     <div class="col-12">
         <i class="fa fa-comment"></i>
         <span class="mx-1">
-            {{ $t('history.comment',{ comment: commentHistory.content}) }}
+            {{ $t("history.comment") }}
         </span>
+        <div class="mt-2">
+            <div v-html="convertMarkdownToHtml(commentHistory.content)"></div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-
+import { PropType, defineComponent } from "vue";
-import { PropType, defineComponent } from 'vue';
+import { marked } from "marked";
+import DOMPurify from "dompurify";
 
 // Types
-import { Comment } from '../../../types';
+import { Comment } from "../../../types";
 
 export default defineComponent({
-    name: 'TicketHistoryCommentComponent',
+    name: "TicketHistoryCommentComponent",
     props: {
         commentHistory: {
             type: Object as PropType<Comment>,
             required: true,
         },
     },
-    setup() {}
+    setup() {
+
+        const preprocess = (markdown: string): string => {
+            return markdown;
+        };
+
+        const postprocess = (html: string): string => {
+            DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
+                if ("target" in node) {
+                    node.setAttribute("target", "_blank");
+                    node.setAttribute("rel", "noopener noreferrer");
+                }
+                if (
+                    !node.hasAttribute("target") &&
+                    (node.hasAttribute("xlink:href") ||
+                        node.hasAttribute("href"))
+                ) {
+                    node.setAttribute("xlink:show", "new");
+                }
+            });
+
+            return DOMPurify.sanitize(html);
+        };
+
+        const convertMarkdownToHtml = (markdown: string): string => {
+            marked.use({ hooks: { postprocess, preprocess } });
+            const rawHtml = marked(markdown) as string;
+            return rawHtml;
+        };
+        return {
+            convertMarkdownToHtml,
+        };
+    },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>