I’m trying to get a basic ProseMirror setup going, following examples shown at https://prosemirror.net/examples/basic/ and Using with React but the styling was non-existent. I initially dragged in the following two stylesheets:
Once I added import 'prosemirror-menu/style/menu', I was up and running, but I was more than a little surprised that I had to include a stylesheet from a package that I didn’t have to explicitly include in my project…and there are no docs that I could see that explicitly called this out:
It would be really helpful if this didn’t take so much sleuthing to get stood up…I’m embarrassed to admit how much time it took me to figure out how to solve this problem. :-\
Hey there,
i completely understand your point, i was struggling with that as well when i started using ProseMirror. I think it’s important to consider the following lines from the ProseMirror guides:
The core library is not an easy drop-in component—we are prioritizing modularity and customizeability over simplicity, with the hope that, in the future, people will distribute drop-in editors based on ProseMirror. As such, this is more of a Lego set than a Matchbox car.
When working with ProseMirror you’ll notice that you have to read through a lot of example code as well as the various repos (for example the example setup repo). The ‘implicit’ documentation that is provided through all these repos and examples is great, but it takes some extra time to figure it all out.
I can’t help but wonder if this approach isn’t self-defeating. One can still take a “building blocks” approach to a project and still have good, solid documentation that doesn’t leave the user surprised in the end. When I see examples of how to do something in code documentation, I am expecting that it’ll just work if I follow it faithfully…so when it doesn’t, it’s frustrating. This erodes my confidence in the whole project because that little voice inside me starts saying “What other surprises are lying in wait for me that are going to cause me pain in the future?”
I don’t want to speak on behalf of the creator, but i think the decision to prefer modularity and customizability over simplicity was made very deliberately, and this will probably not change any time soon. I’d recommend to give the library a try, because the documentation is fantastic, there are a lot of examples, and the core maintainer is very supportive on this board.
About the surprises… yes, there will be surprises. For example, you’ll be surprised how well the api is thought out and how well the editor behaves. In my opinion it is worth it to dig deep and give it a try
And about your original problem with the style sheets: yes, maybe it would make sense to drop a line somewhere at the beginning of the guide that one should import these styles. The problem is that in the examples hosted on Glitch, the sources are bundled specifically for that, and it isn’t visible to the user what styles need to be imported.
By no means does modularity justify poor docs. What happens here is that the example-setup and menu modules aren’t really considered core modules (we expect most sites will want to implement something more custom tailored), so their docs aren’t really on the level of the core’s docs. Still, a note about the CSS files could be added to prosemirror-example-setup’s README.md to hopefully steer the next user in the right direction. Do you want to create a pull request?
For the CSS in the simple HTML page storing the document, I concatenated style/style.css from the repo prosemirror-example-setup with the contents of editor.css, a file included in the Basic Setup example on the ProseMirror site, easily copied from the browser.
I’m a new ProseMirror user (but very longtime advanced CodeMirror user) just going through the basics of the docs, and hit exactly this problem today (on the last day of 2020). I had to use import "prosemirror-menu/style/menu.css"; at least for my webpack setup, and it worked. Thanks for posting this, without which I would have had to spend a lot more time figuring this out…
As of Apr 2021, developers can see a warning in the browser console:
ProseMirror expects the CSS white-space property to be set, preferably to ‘pre-wrap’. It is recommended to load style/prosemirror.css from the prosemirror-view package.
