Add buttons from (own) native extensions to toolbar including all others

[basti96]

Hey,

thanks for your nice editor! I try to add tables as native extension from here.

I add the native extension as you describes like so:

...

<tiptap-vuetify v-model="content" :extensions="extensions" :native-extensions="nativeExtensions">
</tiptap-vuetify>     

....

nativeExtensions: [
            new Table(),
            new TableCell(),
            new TableHeader(),
            new TableRow(),
        ],

At this point, i know that the buttons not add automatically to the toolbar, but i don't understand how can i add them manually. Your example code in the readme not work for me:

<tiptap-vuetify
  v-model="content"
  :extensions="extensions"
  :toolbar-attributes="{ color: 'yellow' }"
>
  <template #toolbar="{ buttons, commands, isActive }">
    <!--You can render the buttons as you wish (you can see in the source code how this is done).-->
    <pre>{{ buttons }}</pre>
  </template>
</tiptap-vuetify>

This produces errors because commands and isActive are never used. I try to fix this by adding the div with the class toolbar from the table example but this also didn't work.

How can i render the buttons from the native extensions including all other standard buttons from extensions?

I am interest in that because in the future i would like to write my own extensions and print the buttons to the toolbar.

Thanks for help!

[tvld]

I would also welcome an example. Could not get it to run either...

[pumpknhd]

I would also like to have the Tables button

[mtrnik]

@iliyaZelenko any news on this?

[Shambou]

Does anyone have an example?

[santiagoaloi]

You can add them following the example below.... you can do a console.log of the commands to see which ones you can actually use. You can also do a v-for to get a button for each command.

      <div slot="toolbar" slot-scope="{ commands, isActive }">
        <div>
          <v-btn
            text
            icon
            :class="{ 'grey lighten-2': isActive.bold() }"
            @click="commands.bold"
          >
            <v-icon>mdi-format-bold</v-icon>
          </v-btn>
        </div>
      </div>

[kangchals]

@svLannister I just want to add one more toolbar button. It seems that your example should define all buttons by myself. Do you have any idea on showing original buttons first and show own custom button next?