feat: Add ability to show/hide tracked changes

[Pallavikumarimdb]

Description

Implements the full set of Microsoft Word-style tracked changes modes (All Markup, Simple Markup, No Markup, and Original) across core, React, and Vue packages. It also resolves a bug in Simple Markup mode where inline revisions did not render margin indicators by recursively detecting inline edits and displaying red left margin change bars.

Changes

• Core: Added hasInlineEdit and inlineEditType to ParagraphAttrs, implemented recursive inline revision scanning in toFlowBlocks, added the revision mark styling classes in renderParagraph, and forced margin lines to render red in Simple Markup mode.
• Adapters: Integrated the new modes and props into both React and Vue components, wired up sidebar card filtering, and added triggers to recompute page layouts on mode changes.

Closes: #918

---

^{Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docx-editor	Ready	Preview, Comment	Jun 21, 2026 9:36pm

[eigenpal-release-pal]

All contributors have signed the CLA ✍️ ✅

_{Posted by the CLA bot.}

[greptile-apps]

Greptile Summary

This PR adds Microsoft Word-style tracked-changes display modes (all, simple, none, original) to the core layout pipeline, both React and Vue adapters, and fixes a gap where paragraphs containing only inline insertions or deletions did not render a left-margin change bar in Simple Markup mode.

• Core (toFlowBlocks, runs.ts, renderParagraph.ts): Filtering of insertion/deletion marks, table-row skipping, and paragraph merging (for deleted paragraph breaks) are all gated on the new mode; hasInlineEdit / inlineEditType attrs are added to ParagraphAttrs so the painter can draw change bars for inline-only edits.
• Adapters (React + Vue): showTrackedChangesMarkup prop is threaded from DocxEditor all the way into computeLayout; data-markup-mode is stamped on the root element; sidebar tracked-changes list is cleared for non-all modes; re-layout is triggered when the mode changes.
• CSS: A large new block of [data-markup-mode='X'] overrides is added to prosemirror/editor.css to hide decoration classes or force change-bar colors per mode.

Confidence Score: 4/5

Safe to merge after addressing the hand-written changeset; the logic changes are well-tested and React/Vue parity is maintained.

The filtering and merging logic in toFlowBlocks is covered by the new unit tests and the mode is correctly threaded through both adapters. The main concerns are non-runtime: the changeset was hand-written (violating the repo rule that risks crashing the Release workflow), the new CSS block landed in the wrong file, the fontFamilies TSDoc block was accidentally deleted causing API snapshot drift, and there is a dead-code path in mergeParagraphBlocks where hasParagraphRevision is always false and never read by the painter.

toFlowBlocks.ts (duplicated mode-normalization and dead hasParagraphRevision code), prosemirror/editor.css (CSS in the wrong file), DocxEditor.tsx (missing fontFamilies JSDoc), and .changeset/simple-markup-change-bars.md (must be regenerated with bun changeset).

Important Files Changed

Filename	Overview
.changeset/simple-markup-change-bars.md	Hand-written changeset file; CLAUDE.md requires bun changeset to generate it — hand-writing risks a typo'd package name that crashes the Release workflow.
packages/core/src/layout-bridge/toFlowBlocks.ts	Core filtering logic for all four markup modes; mode normalization ternary duplicated 6×; internal _pPrDel/_pPrIns state smuggled via any casts; hasParagraphRevision set in mergeParagraphBlocks is always false and unused by the painter.
packages/core/src/prosemirror/editor.css	Adds ~145 lines of [data-markup-mode] UI-chrome CSS; these rules belong in packages/core/src/styles/editor.css (the CLAUDE.md single source of truth for editor chrome CSS), not in this Document/PM CSS file.
packages/react/src/components/DocxEditor.tsx	Adds showTrackedChangesMarkup prop and sidebar filtering; fontFamilies JSDoc block accidentally deleted, causing API snapshot drift on next extract.
packages/core/src/layout-painter/renderParagraph.ts	Extends change-bar rendering to cover paragraphs with inline edits (hasInlineEdit); logic is straightforward and correctly falls back to layout-revision-del when inlineEditType is absent.
packages/core/src/layout-bridge/tests/toFlowBlocks-tracked-changes.test.ts	Good new test coverage for all four modes, paragraph merging, table row skipping, and Simple Markup change-bar preservation; missing a test for paragraph merging in simple mode specifically.
packages/vue/src/composables/useDocxEditor.ts	Mirrors React changes; passes showTrackedChangesMarkup into computeLayout and triggers re-layout via watch; parity is maintained.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["DocxEditor prop\nshowTrackedChangesMarkup"] --> B["DocxEditorShell\nnormalize to data-markup-mode attr"]
    A --> C["useLayoutPipeline / useDocxEditor\npass to computeLayout"]
    C --> D["toFlowBlocks with mode"]
    D --> E{Resolve mode}
    E -->|true/undefined| F[all: keep all runs and attrs]
    E -->|false| G[none: skip deletions, merge deleted breaks]
    E -->|simple| H[simple: skip deletions, keep change bar attrs]
    E -->|original| I[original: skip insertions, merge inserted breaks]
    F --> J[renderParagraph: change bar via layout-revision-pmark]
    H --> J
    B --> K[CSS data-markup-mode overrides]
    J --> K
    A --> L[Sidebar: show trackedChanges only for all/true]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A["DocxEditor prop\nshowTrackedChangesMarkup"] --> B["DocxEditorShell\nnormalize to data-markup-mode attr"]
    A --> C["useLayoutPipeline / useDocxEditor\npass to computeLayout"]
    C --> D["toFlowBlocks with mode"]
    D --> E{Resolve mode}
    E -->|true/undefined| F[all: keep all runs and attrs]
    E -->|false| G[none: skip deletions, merge deleted breaks]
    E -->|simple| H[simple: skip deletions, keep change bar attrs]
    E -->|original| I[original: skip insertions, merge inserted breaks]
    F --> J[renderParagraph: change bar via layout-revision-pmark]
    H --> J
    B --> K[CSS data-markup-mode overrides]
    J --> K
    A --> L[Sidebar: show trackedChanges only for all/true]

Loading

Comments Outside Diff (1)

1. packages/core/src/layout-bridge/toFlowBlocks.ts, line 955-1000 (link)

   hasParagraphRevision in mergeParagraphBlocks is always false and is never consumed

   After the while loop, (paraBlock as any)[prop] has been set to the last merged paragraph's _pPrDel/_pPrIns value — which is always undefined (falsy) for the terminal paragraph that ended the chain. At that point hasParagraphRevision = !!(paraBlock as any)._pPrDel || !!(paraBlock as any)._pPrIns evaluates to false for every successfully merged block. Additionally, the painter (renderParagraph.ts) never reads block.hasParagraphRevision — it only checks attrs.pPrIns, attrs.pPrDel, and attrs.hasInlineEdit. The property write and the surrounding comment are dead code that can be removed.

_{Reviews (1): Last reviewed commit: "chore: add api extractor" | Re-trigger Greptile}

[greptile-apps]

Changeset file was hand-written

CLAUDE.md explicitly forbids hand-writing .changeset/*.md files: "Generate the changeset with bun changeset — never hand-write the .changeset/*.md file. The interactive prompt picks the correct package name and bump and writes the right frontmatter. Hand-writing risks a wrong/typo'd package name, which crashes the post-merge Release workflow." This file was not produced by bun changeset — please delete it, run bun changeset, and commit the generated file instead.

Context Used: CLAUDE.md (source)

[greptile-apps]

Markup-mode CSS should live in styles/editor.css, not prosemirror/editor.css

CLAUDE.md defines two CSS files with distinct roles: prosemirror/editor.css is for Document/PM CSS, while packages/core/src/styles/editor.css is the single source of truth for UI chrome CSS and color tokens. The new [data-markup-mode='...'] selectors anchor on the editor shell's root element (.ep-root.docx-editor), which is UI chrome behavior — they should go in packages/core/src/styles/editor.css. Adding them here breaks the single-source-of-truth contract and bypasses the check:adapter-css-thin enforcement.

Context Used: CLAUDE.md (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[greptile-apps]

fontFamilies TSDoc block was accidentally deleted

The full JSDoc comment for fontFamilies (including the important "pass a stable reference" warning and both @example entries) was removed as part of this diff. This is a @public prop on the exported DocxEditorProps interface; losing its TSDoc causes API Extractor to strip the description from the generated snapshot on the next bun run api:extract, silently regressing the published docs. The two changes (adding showTrackedChangesMarkup, removing the existing comment) appear to be an accidental over-selection during editing.

[greptile-apps]

Mode-normalization ternary is duplicated six times across this file alone

The same three-way ternary that maps true/undefined → 'all', false → 'none', string → string is copy-pasted in convertParagraphAttrs, convertParagraph, convertTableCell, convertTableRow, convertTable, and the tail of toFlowBlocks. A shared helper like resolveMarkupMode(showTrackedChangesMarkup) would reduce the blast radius of any future change to the default-value semantics and make each call site easier to read at a glance.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!