update ReactRenderer to include CSS class

[kukagg]

Includes extension name to root react-renderer node so that styling can be done directly.

[netlify]

✔️ Deploy Preview for tiptap-embed ready!

🔨 Explore the source changes: 8423d8f

🔍 Inspect the deploy log: https://app.netlify.com/sites/tiptap-embed/deploys/6192112090e17f00077afab0

😎 Browse the preview: https://deploy-preview-2166--tiptap-embed.netlify.app

[philippkuehn]

Not sure about this one. You can add a class to your component within ReactRenderer, right?

[kukagg]

Thanks!

Yeah, @philippkuehn we can do that but the tree looks like .react-renderer > .custom-component. So the node that has .react-renderer can’t be modified via CSS. My use case is that I have two .react-renderer components and the visuals should be conditionally modified with:

.first-component + .next-component {
  margin-top: -3rem;
}

in this structure:

<div class="react-renderer first-component">
  …
</div>
<div class="react-renderer next-component">
  …
</div>

This CSS above doesn’t work right now because going up the tree in CSS is not possible so this CSS below doesn’t have access to the .next-component:

.react-renderer > .first-component + ?

as structure is:

<div class="react-renderer">
  <div class="first-component"></div>
</div>
<div class="react-renderer">
  <div class="next-component"></div>
</div>

---

It’s possible to do it programmatically but not ideal, thus this PR.

Let me know if this makes sense.

[hanspagel]

Thanks for the PR!

The solution feels somehow wrong to me. If we’ll add support for it, it should be configureable and maybe even off by default.

Another nitpick: We use lowerCamelCase for extension names, so the class names would end up like react-renderer taskItem, which I couldn’t take. 😅

[kukagg]

Ok, that’s fair @hanspagel. What about adding extension name as a data-extension attr then?

So it would look like:

<div class="react-renderer" data-extension="taskItem" />

[thatsjonsense]

We're currently using a decoration to achieve this as a workaround, but I think it would be easier and more performant if Tiptap did this out of the box. Here's our custom plugin for reference:

Extension.create({
  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          decorations: ({ doc }) => {
            const decorations: Decoration[] = []
            const decorate = (node, pos) => {
              decorations.push(
                Decoration.node(pos, pos + node.nodeSize, {
                  class: `node-${node.type.name}`,
                })
              )
            }
            doc.descendants(decorate)
            return DecorationSet.create(doc, decorations)
          },
        },
      }),
    ]
  },
})

[philippkuehn]

Thanks for this PR but instead of adding the extension name to the ReactRenderer I added a className option. Within ReactNodeViewRenderer I use this option to add a class name based on the extension name.

[kukagg]

Awesome, thanks @philippkuehn