feat(examples): vanilla custom UI tracked-changes example (SD-2929)#3132
Closed
caio-pizzol wants to merge 1 commit intocaio/sd-2929-vanilla-custom-ui-commentsfrom
Closed
Conversation
caio-pizzol
force-pushed
the
caio/sd-2929-vanilla-custom-ui-comments
branch
from
77021d4 to
6af174a
Compare
caio-pizzol
force-pushed
the
caio/sd-2929-vanilla-custom-ui-track-changes
branch
from
d06e2be to
de9e8f6
Compare
caio-pizzol
force-pushed
the
caio/sd-2929-vanilla-custom-ui-comments
branch
from
6af174a to
a448478
Compare
Third focused minimal example under examples/editor/custom-ui/.
Single file (~140 lines) demonstrating the tracked-changes review
panel that pairs naturally with the comments composer.
Patterns on display:
- ui.trackChanges.observe(snapshot => ...) drives the panel list AND
the bulk-action enable state from one subscription.
- ui.trackChanges.accept(id) / .reject(id) for per-change decisions;
.acceptAll() / .rejectAll() for bulk; .next() / .previous() /
.scrollTo(id) for navigation. The snapshot's activeId reflects
whichever change is under the cursor.
- ui.document.observe + setMode('editing' | 'suggesting') so the
user can toggle between editing normally and recording each edit
as a tracked change.
- modules.trackChanges: { replacements: 'independent' } surfaces
typed-over selections as separate insert + delete review items
instead of one composite, matching what most review UIs render.
- ui.createScope() collects every subscription so the whole surface
tears down cleanly on ui.destroy().
Wired into examples/manifest.json and the custom-ui CI smoke matrix.
Stacked on caio/sd-2929-vanilla-custom-ui-comments.
caio-pizzol
force-pushed
the
caio/sd-2929-vanilla-custom-ui-track-changes
branch
from
de9e8f6 to
e92ef6a
Compare
Contributor
Author
|
Closing this for now after the Custom UI examples audit. We're going to keep examples docs-driven and concept-shaped, not surface-shaped. The next Custom UI examples should be focused vanilla examples linked from specific docs pages: The |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Third focused minimal example under `examples/editor/custom-ui/`. Single file (~140 lines) demonstrating the tracked-changes review panel that pairs naturally with the comments composer.
The load-bearing piece is the single `ui.trackChanges.observe(snapshot => ...)` subscription that drives the list, the bulk-action enable state, and the active-row highlight from one source. Per-change verbs (`accept` / `reject`), bulk verbs (`acceptAll` / `rejectAll`), and navigation (`next` / `previous` / `scrollTo`) all live on `ui.trackChanges`. `ui.document.setMode` flips between Edit and Suggest so the user can demonstrate the flow without leaving the page.
`modules.trackChanges: { replacements: 'independent' }` surfaces typed-over selections as separate insert + delete review items instead of one composite. Matches what most review UIs (including this one) render.
Verified: `pnpm --filter superdoc build` clean; `tsc --noEmit` clean in the new example.