Track Changes Playground

This playground contains various content types and different editing scenarios for testing the Track Changes extension. Try selecting across different blocks, deleting content, and testing edge cases.

Basic Text Editing

This is a simple paragraph with plain bold text, plain italic text, and tracked bold emphasis. This sentence was recently added. Try selecting text within this paragraph and deleting it, or type new text to see additions tracked.

Here is another paragraph with tracked italic styling so mark suggestions are visible right away.

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 cursor tracking works correctly.

Bullet Lists

  • First list item with some content

  • Second list item - try selecting across this and the next item

  • Newly added list item for testing

  • 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

  1. Step one of the process

  2. Step two comes after step one

  3. 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

  1. Numbered parent

    • Bullet child under numbered

    • Another bullet child

  2. Second numbered parent

Blockquotes

This is a blockquote. It can contain rich and 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.

Multiple images in a row:

And some text after the images.

Figure caption content can be edited independently from the image.

Tables

Header 1 Header 2 Header 3
Cell A1 Cell A2 Cell A3
Cell B1 Cell B2 - try editing table cells Cell B3
Cell C1 Cell C2 Cell C3

Headings of Different Levels

This is an H3 heading

Paragraph under H3.

This is an H4 heading

Paragraph under H4.

This is an H5 heading

Paragraph under H5.

Edge Case Testing

Short paragraph.

Another short one.

And a third.

  • Single item list

Paragraph between lists.

  1. Single numbered item

Long Content for Scrolling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Drag and Drop Testing

Try dragging this paragraph to another location in the document to test drag-and-drop with track changes enabled.

You can also try dragging list items:

  • Drag me somewhere else
  • Or drag this one
  • Third draggable item

End of the playground content. Happy testing!