What's the best way to represent deleted text (uneditable)?

We’re wondering how to show deleted text in Prosemirror without making it editable. Think “suggesting deleting text”, like in Google Docs. Here’s what we’ve tried and what’s going on:

  1. External Model: Each paragraph in Prosemirror has an external representation that tracks which text ranges were inserted or deleted. We convert PM text operations into this external model. When the user deletes non-deleted sections, they should be highlighted as deleted, not actually be deleted. Ideally, in the “steps” that are emitted, they don’t contribute to offsets, or their offsets need to be deterministic, so that we can subtract their “length” from the emitted offsets for internal handling.
  2. Inserted Text: Handled easily with inline decorations.
  3. Deleted Text: We need it to be visible (like strikethrough with a red background) but not editable. Here are our attempts:
    • Custom Node View: This didn’t work well because we can’t control nodeSize. It messed up text position offsets, making it hard to manage.
    • Regular Marks: We had to intercept every transaction, but we could only accept or reject the whole transaction, not parts of it. This made selective changes hard.
    • Decoration Widgets: Our current approach. We use decoration widgets with span elements and classes to display deleted text. This keeps the offsets aligned since Prosemirror doesn’t handle the deleted text.

We’re wondering if using decoration widgets is the right approach or if we’re missing something about how Prosemirror works. We’ve seen advice against mixing uneditable and editable content, but so far, decoration widgets seem to work.

Any insights would be really helpful. Thanks!

Yes, tracking deleted text outside of the document, and displaying it with widgets, is the way I’d recommend approaching this as well.

Thank you! Appreciate the response