I am kinda confused with all the possibilities prosemirror gives thus I am lost with the simplest questions.
I would like to have a possibility to paste raw html and then show it as preview. The best way would probably add another option on menu right for preview ? EDIT:(actually it’s already here within post but I have problems with setting the styles)
I’ve seen that there are many many examples of editors but there are no examples with color pickers. Would it be complex thing to make it work?
Would it be difficult to make styling work for html inputs?
(.dotted for example):
<html.>
<div.><p.>test</p.><p.>HTML </p.><p.><span style=“color:red;”.>sdasadsda</span.></p.></div.>
</html.>
ProseMirror is not really an HTML editor—it’ll only allow the things you’ve defined in your schema in the document. Maybe that’s where the confusion comes from?
Kinda. I wasn’t focusing on “HTML editor” thing. I’ve thought that I can use it simply to render elements within editor.
About the question with colour pallete. If I use a color picker for it and create like the menu item would there be any troubles with applying the styles?
If you want the editor view to be the rendered view (ie, the user mucks around with the rendered view, not the raw HTML) but with the ability to load in a raw HTML string at the start, you can do something like
let domStr = document.querySelector("textarea[name=event]").value;
let domDoc = document.createRange().createContextualFragment(domStr);
let doc = DOMParser.fromSchema(mySchema).parse(domDoc);
And then use that doc to construct the editor around. This is what I’m doing for an editor view that allows switching between raw HTML and a rendered ProseMirror view (there’s another step to write out the ProseMirror content to the textarea when it’s updated, so that the textarea with the raw HTML stays in sync with the ProseMirror content).
For color, it shouldn’t be hard but you have to decide what elements are allows to have colors set on them, and define them in your schema.