CSS Transitions

1

I’m new to ProseMirror, so probably missing something obvious but I’ve been searching for most of the day and haven’t found an answer yet.

I’ve created a quick example here:

What I’m trying to do is set an attr on the node that controls the width of an element. When toggling the size via a ProseMirror transaction, you can see the CSS transitions aren’t applied to the DOM element (I’m assuming this is because the change is causing a full repaint of the node)

Does anybody have any suggestions/ideas that will let me modify attributes while triggering CSS transitions? I’ve had a quick look at the decorations, but these appear to be view-time-only decorators and won’t be persisted via JSON.

2

Changing attributes through decorations should usually preserve the DOM node, so that’s one option. Another is a node view with an update method that compares the old node to the new one and updates the DOM structure to match it.

3

Ok great, thanks - I’ll look at both of those in more detail.

With the NodeView, is it possible to display a node with a custom node view but still allow editing of it’s children? (Had assumed it would be for “non-editable” nodes?)

4

Yes, see the contentDOM attribute.

1 Like