From 0d651c271ef197fd39180865c269ae69ee9663a3 Mon Sep 17 00:00:00 2001 From: "Cleopatra Enjeck M." <patrathewhiz@gmail.com> Date: Wed, 4 Dec 2024 10:47:25 +0100 Subject: [PATCH] enh: use tiptap's editor to render HTML Signed-off-by: Cleopatra Enjeck M. <patrathewhiz@gmail.com> --- .../ncTable/partials/TableCellHtml.vue | 37 ++++++++++++++++++- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/src/shared/components/ncTable/partials/TableCellHtml.vue b/src/shared/components/ncTable/partials/TableCellHtml.vue index 8afc4d367..847f100a9 100644 --- a/src/shared/components/ncTable/partials/TableCellHtml.vue +++ b/src/shared/components/ncTable/partials/TableCellHtml.vue @@ -4,15 +4,21 @@ --> <template> <div> - <!-- eslint-disable-next-line vue/no-v-html --> - <div v-if="value" class="tiptap-reader-cell" v-html="value" /> + <EditorContent :editor="editor" /> </div> </template> <script> +import { Editor, EditorContent } from '@tiptap/vue-2' +import { StarterKit } from '@tiptap/starter-kit' + export default { name: 'TableCellHtml', + components: { + EditorContent, + }, + props: { column: { type: Object, @@ -27,6 +33,33 @@ export default { default: '', }, }, + + data() { + return { + editor: null, + } + }, + + watch: { + value(value) { + this.editor.commands.setContent(value, false) + }, + }, + + mounted() { + this.editor = new Editor({ + extensions: [ + StarterKit, + ], + content: this.value, + editable: false, + }) + }, + + beforeUnmount() { + this.editor.destroy() + }, + } </script>