NodeView vs nodeDecorator - Conflicts on setting style attributes

1

Recently we started using NodeViews for our paragraph nodes.

Question: For a paragraph node I am using nodeView and a plugin which decorates a paragraph node decorator. With both nodeView and node decorator, I am adding a style attribute to the paragraph <p> element.

For example In Decorator

Decoration.node(from, to, { class: 'para', style: paraStyle })

In nodeView

node.setAttribute('style', parseStyle(formattingStyles))

But I have observed that whatever style attributes I set from my node decorator, get overwritten due to setAttribute on nodeView side. Is there any better way to prevent that situation?

I had a read through few old posts as listed below, but was not entirely sure if they are suggesting an approach to my issue.

2

Not really. You could define your styles in CSS rules and swap some other attribute that they target instead.

1 Like
3

Thanks, Marijn for your reply.

What I was hoping for is both the styles from nodeView and node decorator are added up in a string, as described here in the Decorator attrs specs

Interestingly when I set different classes from both places, it does get added up as per my expectation on the DOM, but the same is not seen for styles (maybe due to my setAttribute(style, ’ ') step, it rewrites it).

I can very well try the class approach you said as a workaround, but direct inline styles were the best use for my case.

4

Yes, setting the style attribute will clear all other inline styles.