Swapping out DOM rendering

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?

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

1 Like

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

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

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