No more inline styles or HTML tags

1

Hello,

This is my first post so please forgive me my mistakes. Currently I’m working on an editor which needs some handling for text but using inline styles or HTML is limiting me too much. The problem is that I need to style elements for both desktop and mobile versions of the pages. The perfect solution for that is to use something like this:

<html>
   <head>
        <style id="style-id">
              #element1 {
                   //styles
              }
       </style>
   </head>
   <body>
          <div id="editor">
               <p id="element1"></p>
          </div>
   </body>
</html>

So, you keep reference to the style element in JS and you update everything through CSSStyleSheet.insertRule(). The question is whether is it possible also to do with ProseMirror?

I observed that every change even on the same range of text generates another element which traps it.

Please tell me what do you think.

2

Treating the content of a ProseMirror instance as stateful HTML elements is a bad idea — as you noticed, it will re-render things whenever it feels this is appropriate.

I don’t really understand what problem you are trying to solve in the first place. Styling things on desktop and mobile should be addressed way better with CSS media queries.