javascriptprose-mirror

How to make child content of a node uneditable dynamically in ProseMirror?


I have created a document schema that includes a captioned_image node type, which references an image in a separate CMS. The image has a caption and a credit, which I'd like editable in the document. When the user edits the content in the ProseMirror editor, I can take note of the change and send a request to the CMS with the updates.

However, the caption and credit fields can be "locked" when another user is editing the image in the CMS.

How can I make the caption and credit child nodes of the captioned_image node non-editable, when those fields are locked by another user? A selection shouldn't be able to be placed in a position.


Solution

  • I can think of two ways

    1. When a piece of the document is locked, filter transform actions, canceling (resetting to the old state) any that touch this region (can be determined by calling forEach on the elements in action.transform.mapping.maps).

    2. Write a custom node view for these kinds of nodes, and give them an attribute readOnly. Toggle it when they should become uneditable, and when it is on, render the locked content with contenteditable=false. But note that this does not protect against programmatic changes to the content. Also, it will make it impossible to put the cursor into them, which might not be desired.