Adding generic styles to all nodes

1

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; } }

…

2

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