From c8bdfd2ac3ac33aca29b48505f8e391dfec3e26b Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:26:22 +0200
Subject: [PATCH] feat: override value property to interact with tiptap

---
 .../input-tiptap/input-tiptap.element.ts        | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
index 3881b8164c..95280f1bd2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts
@@ -41,6 +41,14 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 	@state()
 	private _extensions: Array<UmbTiptapExtensionApi> = [];
 
+	@property({ type: String })
+	override set value(value: string) {
+		this._editor?.commands.setContent(value);
+	}
+	override get value() {
+		return this._editor?.getHTML() ?? '';
+	}
+
 	@property({ attribute: false })
 	configuration!: UmbPropertyEditorConfigCollection;
 
@@ -57,12 +65,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 		await Promise.all([await this.#loadExtensions(), await this.#loadEditor()]);
 	}
 
-	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
-		if (changedProperties.has('value') && this._editor) {
-			this._editor.commands.setContent(this.value, true);
-		}
-	}
-
 	async #loadExtensions() {
 		await new Promise<void>((resolve) => {
 			this.observe(umbExtensionsRegistry.byType('tiptapExtension'), async (manifests) => {
@@ -112,8 +114,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				...extensions,
 			],
 			content: this.value,
-			onUpdate: ({ editor }) => {
-				this.value = editor.getHTML();
+			onUpdate: () => {
 				this.dispatchEvent(new UmbChangeEvent());
 			},
 		});