Track Changes with Collaboration & Comments

This demo combines Track Changes, real-time collaboration, and comments. You can see other users' cursors, track changes with their user IDs, and add comments to discuss specific parts of the document.

Basic Text Editing

This is a simple paragraph. Try selecting text within this paragraph and deleting it, or type new text to see additions tracked.

Here is another paragraph. Try selecting from the middle of the previous paragraph to the middle of this one to test cross-paragraph deletions and joining.

A third paragraph for good measure. Testing multiple sequential paragraphs helps verify position mapping works correctly.

Bullet Lists

First list item with some content
Second list item - try selecting across this and the next item
Third list item to test list item merging
Fourth item with longer content that might wrap to multiple lines depending on the viewport width

Numbered Lists

Step one of the process
Step two comes after step one
Step three is the final step

Nested Lists

Parent item one
- Nested child A
- Nested child B
Parent item two
- Nested child C
- Nested child D - try selecting from here to parent item three
Parent item three

Mixed List Types

Numbered parent
- Bullet child under numbered
- Another bullet child
Second numbered parent

Blockquotes

This is a blockquote. It can contain multiple paragraphs and other content.
Second paragraph inside the blockquote. Try editing within and across blockquote boundaries.

Text after the blockquote to test transitions.

Code Blocks

function TrackedChanges() {
  const suggestions = [];
  // Try editing inside this code block
  return suggestions;
}

Paragraph after code block.

Images

Here is an image between paragraphs:

Text after the image. Try selecting from before the image to after it.

Tables

Headings of Different Levels

This is an H3 heading

Paragraph under H3.

This is an H4 heading

Paragraph under H4.

End of the playground content. Happy testing!