Styling
Paid add-on
The suggestion mark renders as a <span> element with data attributes that can be targeted with CSS.
CSS selectors
/* All suggestions */
[data-suggestion] {
/* Base styles for all suggestions */
}
/* Insertions */
[data-suggestion-type="add"] {
background-color: rgba(0, 255, 0, 0.2);
text-decoration: underline;
}
/* Deletions */
[data-suggestion-type="delete"] {
background-color: rgba(255, 0, 0, 0.2);
text-decoration: line-through;
}
/* Replacement deletions (old text being replaced) */
[data-suggestion-type="replaceDeletion"] {
background-color: rgba(255, 0, 0, 0.2);
text-decoration: line-through;
}
/* Replacement insertions (new text replacing old) */
[data-suggestion-type="replaceInsertion"] {
background-color: rgba(0, 255, 0, 0.2);
text-decoration: underline;
}
/* Style suggestions by user */
[data-suggestion-user="user-123"] {
border-bottom: 2px solid blue;
}Available data attributes
| Attribute | Description |
|---|---|
data-suggestion | Always present on suggestion mark elements |
data-suggestion-id | The unique suggestion ID |
data-suggestion-type | 'add', 'delete', 'replaceDeletion', or 'replaceInsertion' |
data-suggestion-user | The ID of the user who created the suggestion |
data-suggestion-created | ISO timestamp when the suggestion was created |
data-suggestion-user-metadata | JSON-serialized user metadata object (only present when userMetadata is set) |
Known limitations
This extension is in active development and will change significantly over the coming months. The following limitations are known and will be addressed in future releases:
- Attribute or mark changes (e.g. toggling bold, changing a link URL) are not tracked
- Node type changes (e.g. converting a paragraph to a heading) are not tracked
- Inserting new lines or removing text-based nodes (e.g. deleting an entire paragraph) is not handled
- There is no explicit suggestion mode that renders a separate "clean" document alongside the tracked version