Multiple NodeViewContent

[kenanchristian]

Hi there, I'm wondering is it possible to have a multiple NodeViewContent under the same NodeViewWrapper?

I'm looking into creating a 2 column layout with editable content inside each column.
Tried adding 2 content holes in renderHTML but this error RangeError: Multiple content holes

[philippkuehn]

No, this is not supported by ProseMirror. You have to define multiple nodes for that.

[kenanchristian]

Alright, got it. Thanks for the clarification!

[hivokas]

@kenanchristian how have you ended up implementing 2 column layout?

[malakhovmisha]

@kenanchristian Can you suggest a simple implementation example?

[kjfeng]

Would also like to know if anyone's figured out a good approach!

[nperez0111]

To match my reply in Discord:

Figure is a good example of what you are looking for that is simpler than the table extension:

tiptap/demos/src/Experiments/GenericFigure/Vue/figure.ts

Line 4 in f387ad3

export const Figure = Node.create({

You have a parent element that enforces that it must have certain content as it's children, so you are guaranteed in this case that there will be a single block element and then a figcaption.