From de11735c19680afae23ea18845f84009048c5756 Mon Sep 17 00:00:00 2001
From: Laurens Borst <laurens.borst@lime.tech>
Date: Wed, 1 May 2024 22:26:58 +0200
Subject: [PATCH] fix(text-editor): add watcher for value prop

---
 .../prosemirror-adapter.tsx                   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx
index a73435c6c5..d8929755b8 100644
--- a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx
+++ b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx
@@ -5,6 +5,7 @@ import {
     EventEmitter,
     Prop,
     State,
+    Watch,
     h,
 } from '@stencil/core';
 import { EditorState } from 'prosemirror-state';
@@ -67,6 +68,18 @@ export class ProsemirrorAdapter {
     @Event()
     private change: EventEmitter<string>;
 
+    @Watch('value')
+    protected watchValue(newValue: string) {
+        if (
+            !this.view ||
+            newValue === this.contentConverter.serialize(this.view, schema)
+        ) {
+            return;
+        }
+
+        this.updateView(newValue);
+    }
+
     private contentConverter: ContentTypeConverter;
 
     public componentWillLoad() {
@@ -137,6 +150,32 @@ export class ProsemirrorAdapter {
         );
 
         this.menuCommandFactory = new MenuCommandFactory(mySchema);
+
+        if (this.value) {
+            this.view.dom.innerHTML = this.value;
+        }
+    };
+
+    private async updateView(content: string) {
+        const html = await this.contentConverter.parseAsHTML(content, schema);
+        const prosemirrorDOMparser = DOMParser.fromSchema(
+            this.view.state.schema,
+        );
+        const domParser = new window.DOMParser();
+        const doc = domParser.parseFromString(html, 'text/html');
+        const prosemirrorDoc = prosemirrorDOMparser.parse(doc.body);
+        const tr = this.view.state.tr;
+        tr.replaceWith(0, tr.doc.content.size, prosemirrorDoc.content);
+
+        this.view.dispatch(tr);
+    }
+
+    private getHTML = (): string => {
+        if (this.view.dom.textContent === '') {
+            return '';
+        } else {
+            return this.view.dom.innerHTML;
+        }
     };
 
     private handleActionBarItem = (event: CustomEvent<ActionBarItem>) => {