Swapping out DOM rendering

1

Is it possible to swap out DOM rendering for some other way, for example native calls in React Native?

I know that this would require a lot of effort, but is it even possible to swap out the DOM dependence or would it require forking ProseMirror?

2

Not in the library as it currently exists, but check out this thread, it sounds relevant.

1 Like
3

thanks, that thread is exactly what i was looking for

wouldn’t be surprised if they’re also aiming for a react-native implementation and that’s the first step

4

We’re actually not aiming for React Native here, and I think doing so would require a lot more than that thread is suggesting, unfortunately. The thread that Marijn linked to is discussing a plan to make it possible to swap out the DOM rendering engine; that is, using React to manage updates to the DOM rather than prosemirror-view’s ViewDesc.update, but it still uses the rest of the EditorView for event handling, plugins, mutation observation, etc. All of these features are heavily dependent on the DOM.

A truly native implementation of prosemirror-view would, I think, require a wholesale replacement of the EditorView. In a sense, ProseMirror itself is already set up to support this; you can simply use all of the prosemirror-* libraries except for prosemirror-view. However, this would be an immense undertaking, as (as far as I know) mobile app environments don’t have an analog for the browser’s “contenteditable” mode. In addition to all of the work that prosemirror-view already does, a native implementation would also need to invent the actual editing and selection interface that prosemirror-view relies on the browser for (I think projects like Proton are trying to do this, but it seems challenging!).

An alternative, that is a little clunkier and maybe a little less resource friendly, but I have at least prototyped successfully, is to put prosemirror-view in a Webview and use postMessage/injectJavascript to lift the state up into React Native. This allows you to still use all of the awesome features that exist in web browsers and prosemirror-view for rich text editing, while still giving your users a mostly native experience (and developing with React).

1 Like
5

I’m looking into the feasibility of it as more of a passion project, where making it work in react native is the goal itself, not just finding a way to integrate prose-mirror into an existing app

If I find a path to implement something usable within a year or less I will try to take on the challenge

Thanks for the pointers, will be looking at the internals of EditorView to get a sense of what needs to be replicated in native-land

I have enough experience with text editors to be aware that all of this won’t be easy at all :smiley:

1 Like