Editor component to have "as JSON" prop

[martyf]

Currently the Editor returns its content as HTML. Tiptap can, however, also return it as JSON.

It would be superb to have this as a prop to toggle its output.

The getter for the component is currently returning either null or HTML using the editor's getHTML helper.

For JSON, this would need to be adjusted to return [] (instead of null) and the JSON using the editor's getJSON helper.

One of the biggest strengths is that it makes it more trivial to work alongside Statamic, having both backend content (in Statamic's CP using their Bard fieldtype, built on Tiptap) and front end content (driven by Flux's Editor component) more effortlessly compatible.

Better yet, given we can extend Flux's Editor ourselves, it is possible to create extensions for Tiptap that mimic the structured markup of Bard's Sets in Statamic world. I've done this on a non-Flux project using an Alpine build of Tiptap, and is game changing for front end authoring for Statamic-based apps.

(Note, for Statamic devs, there's an additional wrapper that the getJSON includes that needs to be trimmed for full compatibility, but that's a dev problem not a Flux issue. The huge benefit is interoperability between Bard and Flux's editor).

[martyf]

Side note: if anyone is wanting to get this up and running in your own app, check out https://www.martyfriedel.com/blog/making-the-livewire-flux-editor-component-return-json-instead-of-html (and thanks to Josh too!)

Be great to see it as trivial as a prop - but in the meantime it is still do-able.

[squaredpx]

Thanks for the code snippet @martyf! It works although I have a little issue with the timeout, when I change the cursor and start typing again the cursor goes to the end of the editor after the first key press... have you encountered this issue or is there something that I'm missing?

PD: please add native support for json return in Flux 🙃

[martyf]

Oh wow I just experienced that too... adding to the to-look-at list. I've never had that with Tiptap before in Alpine or in Statamic as Bard, so clearly something not quite right here. Stay tuned.

[mauritskorse]

See this request as well #742 with @jacksleight reply:

I managed to get this working with an Alpine x-init function:

<flux:editor 
    label="Content"
    x-init="
        const editor = $el.querySelector('.tiptap').editor;
        editor.commands.setContent($wire.get('content'));
        editor.on('update', () => {
            $wire.set('content', editor.getJSON());
        })
    " />

[squaredpx]

I've also tried that approach but has the same issue

[squaredpx]

i'va managed to make it work, the solution is a bit "hacky" and I don't like it... but it works for now 🤷‍♂️. You need to remove the wire:model directive from the editor and add a hidden input field with it:

x-init="
  const editor = $el.querySelector('.tiptap').editor;

  // Hydrate once from Livewire value (JSON or HTML)
  const initial = $wire.get('content');
  if (initial) {
      try {
          // if it's JSON already
          editor.commands.setContent(initial, false);
      } catch (e) {
          // fallback if it were HTML
          editor.commands.setContent(initial, false);
      }
  }
  // Avoid Livewire re-render loop that moves the caret
  let t;
  editor.on('update', () => {
      clearTimeout(t);
      t = setTimeout(() => {
          const json = editor.getJSON();
          // Update via hidden input + $wire.set while editor is ignored
          $refs.description.value = JSON.stringify(json);
          $wire.set('content', json);
      }, 200);
  });
"

<input type="hidden" x-ref="description" wire:model="content">

[martyf]

I wanted to make something reusable for different model names - such as content or introduction or form.content and took your ideas here and moved it in to a reusable Blade component:

@props([
    'live' => false,
    'model'
])
<div x-data="{
         live: {{ $live ? 'true' : 'false' }},

         init() {
             const editor = $el.querySelector('.tiptap').editor;

             // Hydrate once from Livewire value (JSON or HTML)
             const initial = $wire.get('{{ $model }}');
             if (initial) {
                 try {
                     // if it's JSON already
                     editor.commands.setContent(initial, false);
                 } catch (e) {
                     // fallback if it were HTML
                     editor.commands.setContent(initial, false);
                 }
             }

             let t;
             editor.on('update', () => {
                 clearTimeout(t);
                 t = setTimeout(() => this.update(editor), 200);
             });

             editor.on('blur', () => this.update(editor));
         },

         update(editor) {
             let json = editor.getJSON()
             $wire.{{ $model }} = json;
             if (this.live) {
                 $wire.set('{{ $model }}', json);
             }
         }
     }">

    <flux:editor {{ $attributes->whereDoesntStartWith('model') }}/>
</div>

The live prop enables the $wire.set call - otherwise it is just mutating the model (meaning less chatty to the backend).

I can then re-use it like:

{{-- For smaller editors, a live-updating component --}}
<x-fields.editor model="introduction" :live="true"/>

{{-- For larger editors, a non-live component --}}
<x-fields.editor model="form.content"/>

But thanks for your groundwork that helped me more easily get to this stage!

I wrote a blog post with more details too.