A React ProseMirror component

I’ve made a start on a package that provides React components for editing rich text using ProseMirror 1.0.

It currently provides two components: Editor, which saves the content as ProseMirror JSON, and HtmlEditor, which converts the content to and from HTML.

It works well for my use case, which is a single editor on a page, but I’m not sure how best to use componentWillReceiveProps to update the editor if the props change (currently it just attaches the editor when the component mounts and lets ProseMirror handle all the rendering). Does anyone have any ideas how this could be improved?

The conversion to and from HTML is nice and simple thanks to ProseMirror’s DOMParser and DOMSerializer. I wonder if perhaps the parse and serializeFragment methods could be updated to convert to/from strings as well as DOM nodes?

1 Like

Nice. Thanks for publishing that!

You don’t seem to be binding the base keys in the demo, so that Enter doesn’t work.

The base keys are being bound, but “Enter” was also mapped to splitListItem - I’ve disabled that now until I work out how to combine the key handlers.

Update: it’s using chainCommands now.

The menu bar’s a React component now, instead of using prosemirror-menu. The menu config is looking pretty nice!

Much better! Is there some way to create an <h2> etc through the menu? I couldn’t find it.

Not yet, in the absence of any implementation of a dropdown menu. I’m wondering if a “heading” button (create a heading at the current level) + indent might make sense…

Nice :slight_smile:

BTW, while I was playing with it I found that I can apply both subscript and superscript at the same time :wink:

That’s a good point, but I can’t see an obvious way to specify that restriction, given that sub and sup are marks and only nodes can have a content schema. Even if they were converted to inline nodes, it would need something like “inline* but not sup” as the content schema, which is getting complicated - probably best to just allow the combination, as it shouldn’t cause problems.

It would actually be useful for some cases (e.g. chemical formulae) to have a node type that contains both superscript + subscript, displaying them stacked above each other.

I think the excludes spec can help there.

That’s perfect, thanks @marijn - you really have thought of everything!

Isn’t it better to generalize those situations and provide a way to enter formulae using LaTeX syntax and MathJax?

Yes, that’s true, although I can imagine a UI specifically for chemical formulae, with clickable placeholders for superscript and subscript modifiers around each element. It could still be LaTeX and MathJax behjnd the scenes, if there isn’t a more semantic way to do the markup with HTML.

Thanks for the React wrapper - @aeaton. Is there a way of customising the menu component? I actually just want to limit which icons show.