Should we add components instead of scoped slots?

Currently we’re using scoped slots for content and menus.

<editor>
  <!-- Content goes here -->
  <div slot="content" slot-scope="props">
    <p>some text</p>
  </div>

  <!-- Render menubar -->
  <div slot="menubar" slot-scope="{ nodes }">
    <div v-if="nodes">
      <button @click="nodes.heading.command({ level: 1 })">
        H1
      </button>
    </div>
  </div>

  <!-- Render menububble -->
  <div slot="menububble" slot-scope="{ marks }">
    <div v-if="marks">
      <button @click="marks.bold.command()">
        Bold
      </button>
    </div>
  </div>
</editor>

There are two limitations for doing so:

1. In the menububble slot we have to add a check for marks and nodes like this <div v-if="marks">. For one tick these values are null. It would be nice to render these slots only when these values are available but then we do not have access to the DOM element of this slot which is required for the menububble plugin.
2. Nested markup is not supported.

Maybe it would be nice to use components like this:

<editor>
  <!-- Content goes here -->
  <editor-content>
    <p>some text</p>
  </editor-content>

  <!-- Render menubar -->
  <editor-menubar>
    <template slot-scope="{ nodes }">
      <button @click="nodes.heading.command({ level: 1 })">
        H1
      </button>
    </template>
  </editor-menubar>

  <!-- Render menububble -->
  <editor-menububble>
    <template slot-scope="{ marks }">
      <button @click="marks.bold.command()">
        Bold
      </button>
    </template>
  </editor-menububble>
</editor>

But I’m not sure how these components will work together and sync its editor state. With provide and inject or an event bus or passing props? 🤷‍♂️

[qyloxe]

@philippkuehn thanks! surely I plan to contribute something, because your work is remarkable and… enlightening 😉

[philippkuehn]

@qyloxe Thanks for your input! I do not like to configure everything as long arrays via props. That‘s the way most of all editors are configurable and that‘s why I started creating tiptap 🙌 For me it‘s very important to have full control over markup because you can use text editors for so many different use cases today, that it differs to much.