[RFC] find a good API for using Vue.js node views

I am not happy how node view templates work in tiptap 1 and tiptap 2 and looking for a better solution.

There are a few requirements that make using node views more comfortable:

1. set white-space: normal on node view wrapper
2. set white-space: pre-wrap on node view content
3. set a custom dragstart event listener (for better dragging support)
4. a parent contenteditable=“false” has to be enabled again for node view content (based on isEditable)

Here are two solutions I’ve tried already:

1. provide a NodeViewWrapper and NodeViewContent component

usage:

<template>
  <node-view-wrapper>
    <node-view-content />
  </node-view-wrapper>
</template>

rendered:

<div contenteditable="false" style="white-space: normal" :onDragStart="handleDragStart" contenteditable="false">
  <div contenteditable="true" style="white-space: pre-wrap" :contenteditable="isEditable"></div>
</div>

good

• simple template

bad

• <node-view-wrapper> can’t be <node-view-content> at the same time
• currently both components are injected because with that I can bind the handleDragStart method. that’s why we can’t import them (which might be less confusing) but maybe there is a better way for doing that like adding the event handler afterwards

2. using data attributes

usage:

<template>
  <div data-node-view contenteditable="false">
    <div data-node-view-content :contenteditable="isEditable" />
  </div>
</template>

tiptap provides some basic styling

[data-node-view] {
  white-space: normal;
}

[data-node-view-content] {
  white-space: pre-wrap;
}

good

• flexible

bad

• contenteditable has to be set manually
• missing handleDragStart event handler but maybe we can add it afterwards

What you you think? How do you imagine using node views? How could a nice API look like?

[philippkuehn]

this is now implemented and released in vue-2 and vue-3.

[samwillis]

I think it’s a good idea to revisit this, even if you ultimately don’t change it, as I’m also not convinced the API is ideal and think (at least in vue 3) it doesn’t “feel right” with the magic components.

Also removing the need to extend the component in the node view implementation will help to prevent problems like https://github.com/ueberdosis/tiptap-next/issues/179

I wander if you could just add the data-node-view, contenteditable="false" attributes and handleDragStart during the “unwrapping” of the component (in vue 3) as its always the firstChild with simple DOM mutations? Obviously would need checking that vue didn’t then undo these. (As an aside we should also ensure that there is only one top level node in the component in vue 3)

For the contentDom, could that be done with a slot? (the slot itself doesn’t create a dom node so we would have full control)

So with both it would be something like:

<div class="my-class-name">
  <slot as="div" class="my-other-class-name"></slot>
</div>

or just a slot (https://v3.vuejs.org/guide/component-slots.html#scoped-slots):

<slot as="div" class="my-class-name"></slot>