Access to a slot function inside a child component in VusJS

Question

I'm trying to use tiptap. Actually it works, but what I'm trying to do is to access the "isActive" slot from outside the editor component, and I don't know how to do it.

Here is a codesandbox example: https://codesandbox.io/s/v07xnxo807?file=/src/App.vue

You see the Editor component is called from the App.vue. The buttons in the Editor component are activated depending on the "isActive" slot functions. What I would like is to access this slot to get for example the value of isActive.bold() from the App.vue, in order to update the model of a "multiple button" you can find on Vuetify: https://vuetifyjs.com/fr-FR/components/button-groups/

Here is for example what I could have:

<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
  <v-btn-toggle
    v-model="toggle_multiple"
    dense
    background-color="primary"
    dark
    multiple
    class="my-2"
  >
    <v-btn :color="isActive.bold()?'red':'green'" @click="commands.bold">
      <v-icon>mdi-format-bold</v-icon>
    </v-btn>
    <v-btn @click="commands.italic">
      <v-icon>mdi-format-italic</v-icon>
    </v-btn>
    <v-btn @click="commands.strike">
      <v-icon>mdi-format-strikethrough</v-icon>
    </v-btn>
    <v-btn @click="commands.underline">
      <v-icon>mdi-format-underline</v-icon>
    </v-btn>
    <v-btn @click="commands.blockquote">
      <v-icon>mdi-format-quote-open</v-icon>
    </v-btn>
  </v-btn-toggle>
</editor-menu-bar>

And the toggle_multiple would be computed depending on the different "isActive" function values.

I already tried:

computed: {
  toggle_multiple: function () {
    let t = []
    if (editor)  {console.log("Bold: "+editor.isActive.bold())}
    return t
  }
},

But I receive this error: error 'editor' is not defined

I'm open to any suggestion. Thanks in advance.

Answer 1

Property isActive is stored in the tiptap instance (in your case it's this.editor):

In HTML:

<div>{{editor.isActive.bold()}}</div>

In JS:

<div>{{toggle_multiple}}</div>

computed: {
  toggle_multiple () {
    // Keep in mind, other properties like ".isActive.heading()" will be undefined
    // until you import the extension for it.
    // So the function "heading" below exists only if you're using that extension
    // console.log(this.editor.isActive.heading({ level: 2 })
    return this.editor.isActive.bold()
  }
}