# 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

```javascript
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!