Split editor with custom views

Hi, thank you for the great work on ProseMirror.

Our team is trying to implement a split editor with two synchronized views of the same underlying document. The left pane should show the entire document contents, while the right pane should show a custom view based on the node under the cursor. The user can edit the document on the left pane, and preview the result on the right pane. Plus, the user can interact with the right pane, and the changes should be reflected in the left pane.

While our use case is different, here is a simplified scenario. The document in the left pane is a bulleted list of tasks. Each task has a deadline represented by the inline text @YYYY-MM-DD. When the cursor is over one of the tasks, the right pane shows the task title and the deadline separately. The task title could be either a prosemirror editor or a input field. The deadline could an interactive calendar widget. Changes on one side should update the other.

In our case, we have different node types that map to different previews, and we’re looking for a solution that would allow to add new types/previews like plugins. We also plan to later include collaborative editing (the preview would depend on the cursor of the local user). We have made some progress towards this, but we’re relatively new to ProseMirror, and we’re not confident in our approach. Could someone suggest how they would approach this?

Thank you!

1 Like

The basic idea would be to sync your right-side pane to the proper node every time the ProseMirror editor updates its state (either via dispatchTransaction or with a plugin view. And then, when the user manipulates the current node through that pane, dispatch a transaction to the editor to apply the changes.

@marjin what about using the collaboration module. The smaller editor (the one that is showing a subset of the document) transforming the step positions by adding an offset (this will be the starting position of this subset data) to make it appear as a full sized editor to the collaboration server. Do you think that will work ? I am not sure of how to handle the edge case if the user selects some data which is partly inside the smaller editor and partly outside and then deletes it.

Thank you both for the quick reply.

We initially tried using the collaboration module but have had more success with an approach similar to marijn’s.

We’re happy with how we sync from left to right, but we’re struggling with right to left.

We’ll work on this some more and I’ll follow up with additional details. Thank you again!

Some silly idea: maybe you can use a custom node view to display the task title and deadline calendar widget? When the user focus on a task item, simply add some styles so that all other nodes except the focused task item are hidden.