Search code examples
vue.jsvuetify.jstiptap

JSON content shows a blank window for Tiptap-Vuetify?

Background

I'm using tiptap-vuetify to implement a message/chat UI where users see an editable Tiptap instance for creating new messages as well as several uneditable Tiptap instances (one for each already-sent message in the thread the user is viewing).

enter image description here

I have the editable instance output data in JSON format, which I store in my database in a JSONB field.

Problem

When I load the JSON for sent messages from the database, only plaintext messages show up; if I applied any kind of styling (bold, italics, lists, etc.), nothing at all shows up.

enter image description here

The code I'm using for the uneditable Tiptap instances is this:

<tiptap-vuetify
  v-model="message.content"
  :editor-properties="{ editable: false }"
  output-format="json"
/>

Here's a screenshot of the message object (and message.content) for the "bold asdf" example above: enter image description here

Solution

  • I figured out the fix:

    1. I didn't realize I needed to include the :extensions prop for all of the HTML features I wanted to use (bold, italic, etc.) in the editor that would render the HTML. I thought those extensions were just used to add the toolbar buttons, but they are also used to render the JSON that those buttons produce.

    2. To then hide the toolbar, I just used the example toolbar-slot code from the readme, and the toolbar was gone.

    Here's the working code:

    <tiptap-vuetify
  v-model="message.content"
  :extensions="extensions"
  :editor-properties="{ editable: false }"
>
  <template #toolbar="{ buttons }">
    <pre>{{ buttons }}</pre>
  </template>
</tiptap-vuetify>