Hello,
My project has some global styles defined in a styles.css, such as below. I want to add the same look & feel to prosemirror text/nodes when they are rendered. How can I do that? Should I modify every toDOM call? How do I apply below font type,size,weight for example? Any examples appreciated. Thanks!
h1 {
font-size: 3.157em;
font-weight: 700; }
@media (min-width: 992px) {
h1 {
font-size: 4.209em; } }
…
Sharing how I resolved this as reference.
The general CSS styles such as h1 as in my example are already picked up and styled to the editor DOM output.
So I am getting the correct font parameters already.
In my case I needed to also add a CSS class “lead” to paragraphs. Initially I added an attribute to the paragraph nodespec in prosemirror-schema-basic, but this wasn’t the correct way:
attrs: { class: { default: "lead"}}
Apparently these are some data attributes for the prosemirror internal representation of the node. Not relevant to the browser DOM. I then changed the toDOM method:
toDOM() { return ["p", {class: "lead"}, 0] }
The 2nd entry in the array is added. This works, all my paragraphs have class=“lead” now.
1 Like