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>