From 980048b6ab8837dee91869d94b983faa2fec9d67 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Thu, 2 Oct 2025 14:05:47 +0200
Subject: [PATCH] Allow to have value as html or json

---
 tp-rich-text-box.js | 56 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/tp-rich-text-box.js b/tp-rich-text-box.js
index fbd919a..2824b81 100644
--- a/tp-rich-text-box.js
+++ b/tp-rich-text-box.js
@@ -70,14 +70,6 @@ class TpRichTextBox extends FormElement(LitElement) {
     ];
   }
 
-  constructor() {
-    super();
-    this.extensions = [];
-    this.menuMode = 'hidden'; // 'hidden', 'selection', 'suggestion'
-    this.activeSuggestionType = null; // 'emoji', 'user', null
-    this._slotObserver = new MutationObserver(this._processSlotChanges.bind(this));
-  }
-
   render() {
     return html`
       <!-- Selection-based floating menu with all controls -->
@@ -99,10 +91,20 @@ class TpRichTextBox extends FormElement(LitElement) {
       editor: { type: Object },
       extensions: { type: Array },
       menuMode: { type: String, reflect: true },
-      activeSuggestionType: { type: String }
+      activeSuggestionType: { type: String },
+      asHtml: { type: Boolean }
     };
   }
 
+  constructor() {
+    super();
+    this.extensions = [];
+    this.menuMode = 'hidden'; // 'hidden', 'selection', 'suggestion'
+    this.activeSuggestionType = null; // 'emoji', 'user', null
+    this.asHtml = false;
+    this._slotObserver = new MutationObserver(this._processSlotChanges.bind(this));
+  }
+
   firstUpdated() {
     // Get initial extensions from slot
     this._processChildExtensions();
@@ -328,18 +330,40 @@ class TpRichTextBox extends FormElement(LitElement) {
 
   get value() {
     if (this.editor) {
-      return this.editor.getJSON();
+      return this.asHtml ? this.editor.getHTML() : this.editor.getJSON();
     }
     
+    return this.asHtml ? '' : {};
+  }
+
+  set value(content) {
+    this.updateComplete.then(() => {
+      if (this.editor) {
+        this.editor.commands.setContent(content);
+      }
+    });
+  }
+
+  /**
+   * Get the editor content as JSON
+   * @returns {Object} The editor content as JSON object
+   */
+  getJson() {
+    if (this.editor) {
+      return this.editor.getJSON();
+    }
     return {};
   }
 
-  set value(jsonContent) {
-    this.updateComplete.then(() => {
-      if (this.editor) {
-        this.editor.commands.setContent(jsonContent);
-      }
-    });
+  /**
+   * Get the editor content as HTML
+   * @returns {string} The editor content as HTML string
+   */
+  getHtml() {
+    if (this.editor) {
+      return this.editor.getHTML();
+    }
+    return '';
   }
 }