Using json as content for the editor

[mauritskorse]

TipTap offers setting and getting the content of the editor using JSON.
getting the JSON back from the editor can still be done ($el.querySelector('[data-slot="content"]').editor.getJSON()), but it does not seem possible to set the contents or wire:model with json as the innerHTML is explicitly retrieved from the ui-editor-content element.
It would be great if this will be possible.

[mauritskorse]

For those interested, I have working json support.
Unfortunately, you will need to edit the editor.js file in flux-pro/js dir or copy it to create a new webcomponent.
You will need to set the format attribute to json on the webcomponent's tag for this to work.
If you create a custom webcomponent, be sure to change the references.

-        let content = this.querySelector('ui-editor-content').innerHTML
+        let content = this.getAttribute('content') || this.querySelector('ui-editor-content').innerHTML || '';
         this.querySelector('ui-editor-content').innerHTML = '';

         const format = this.getAttribute('format') || 'html';
         const extensions = await this.loadExtensions();


         let getValue = () => {
           // Otherwise, an empty state will return <p></p>...
-          if (this.editor.isEmpty) return ''
-          return this.editor.getHTML()
+          if (this.editor.isEmpty) return format === 'json' ? '{}' : ''
+          return format === 'json' ? this.editor.getJSON() : this.editor.getHTML()
         }
         let setValue = value => {
-          this.editor.commands.setContent(value)
+          // apparently the intial set passes a string when using json on the wire:model
+          // but the subsequent set calls pass an object in case of jsonstring
+          try {
+            if (typeof value === 'string') {
+              // value is a string
+              this.editor.commands.setContent(format === 'json' ? JSON.parse(value) : value);
+            } else if (typeof value === 'object' && value !== null) {
+              // value is an object (including a proxy object)
+              this.editor.commands.setContent(value);
+            } else {
+              // value is neither a string nor an object
+              console.error('Unsupported value type:', typeof value);
+            }            
+          }
+          catch(e) {
+            this.editor.setEditable(false, false);
+            document.addEventListener('livewire:navigated', function() {
+              Flux.toast({
+                heading: 'Content erorr',
+                text: 'The contents contains an error and cannot be rendered.',
+                variant: 'warning',
+              });
+             });
+             console.log(e);
+          }
         }

Oh, and this script also implements a flux toast message in case the json is invalid (or contains marks/nodes that the editor does not support). Currently the message is hardcoded.