Skip to content

tw ← Tiptap WYSIWYG: comparison/diff mode (CMS-2649) - #27879

Merged
alvarosabu merged 9 commits into
feat/wysiwyg-tiptapfrom
feat/cms-2649-tiptap-comparison-mode
Jul 14, 2026
Merged

tw ← Tiptap WYSIWYG: comparison/diff mode (CMS-2649)#27879
alvarosabu merged 9 commits into
feat/wysiwyg-tiptapfrom
feat/cms-2649-tiptap-comparison-mode

Conversation

@alvarosabu

Copy link
Copy Markdown
Contributor

Scope

Adds comparison/diff mode (content versioning and revision diffs) to the new Tiptap WYSIWYG editor. The comparison view already special-cases input-rich-text-html fields (use-comparison.ts computes the diff and feeds pre-marked HTML as the field value); this PR adds the interface side that renders it.

What's changed

  • New ComparisonDiff mark (extensions/comparison-diff.ts): lets span.comparison-diff--added / --removed spans (produced by use-comparison-diff.ts) survive schema parsing. Registered only in comparison mode — the normal editing schema still strips diff spans, so they can never leak into saved content.
  • New comparisonMode / comparisonSide props on the interface (passed generically by form-field-interface.vue). comparisonSide is API surface only — side switches flow in as value changes.
  • Comparison mode renders read-only with the normal (non-dimmed) look: no toolbar, no table bubble menu, no soft-length counter (the diff-marked value inflates the count).
  • Added/removed highlight styles on the theme success/danger tokens.
  • Unit tests: mark round-trip for added/removed spans across block contexts, a guard that the normal schema strips them, and component-level wiring tests (read-only, chrome hidden, counter hidden, spans intact).

Potential Risks / Drawbacks

  • ComparisonDiff joins the schema at editor construction based on comparisonMode. The comparison view mounts the interface fresh per comparison, so deciding at construction is safe; a hypothetical runtime toggle of the prop would not re-register the extension.
  • The diff runs on stored HTML upstream, before the interface decodes page-break markers — content containing page breaks may render the marker oddly inside the comparison view (upstream reconstructComparisonHtml concern, not introduced here).

Tested Scenarios

  • Diff spans survive round-trip in paragraphs, headings, list items, nested bold, and links — with the mark registered.
  • Without the mark (normal editing), diff spans are stripped.
  • Comparison mode: editor read-only, toolbar/bubble-menu/soft-length counter absent, non-editable class applied, diff-marked value rendered intact.
  • Normal mode unaffected: editable, toolbar present.
  • Verified visually in the studio against a versioned item (base side shows removed runs in red, incoming in green; unchanged blocks unmarked).
  • Full input-rich-text-html suite (256 tests) passes.

Review Notes / Questions

  • Targets the feature branch feat/wysiwyg-tiptap, not main.
  • The base/incoming diff attribution itself (what gets marked) is upstream comparison-view logic shared with the legacy editor; this PR only renders what it is given.

Checklist

  • Added or updated tests
  • Documentation PR created here or not required — not required
  • OpenAPI package PR created here or not required — not required

Closes CMS-2649

@alvarosabu
alvarosabu requested a review from AlexGaillard as a code owner July 10, 2026 14:16
@linear-code

linear-code Bot commented Jul 10, 2026

Copy link
Copy Markdown

CMS-2649

Comment thread app/src/interfaces/input-rich-text-html/extensions/comparison-diff.ts Outdated
Comment thread app/src/interfaces/input-rich-text-html/input-rich-text-html.vue Outdated
Comment thread app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
@alvarosabu
alvarosabu requested a review from AlexGaillard July 13, 2026 07:01

@AlexGaillard AlexGaillard left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🆒🫘

@alvarosabu
alvarosabu merged commit c10aee8 into feat/wysiwyg-tiptap Jul 14, 2026
3 checks passed
@alvarosabu
alvarosabu deleted the feat/cms-2649-tiptap-comparison-mode branch July 14, 2026 07:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants