Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 22:04:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

Rendre les commentaire markdown

Browse Source
This commit is contained in:
Boris Waaub 2024-05-13 11:59:50 +02:00
parent 821fce3dd8
commit d6f5eae0c9
2 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">

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

@ -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>