Skip to content

Conversation

@joaquincasal
Copy link
Collaborator

Purpose

This app allows content creators to visually compare changes in a rich text field against the last published version. A two-column view highlights added, removed, and modified content, including referenced entries and assets.

Approach

  • Both the current and published content of the rich text field are obtained
  • Then the contents are transformed from their json representation to React nodes. Here we choose how to display references to entries and assets are displayed, since the library that makes the transformation ignores them by default
  • Then the content gets rendered to html and both html codes get compared to mark the differences.

Testing steps

  • Install the app
  • Choose a content type with a rich text field and change the appearance of the field to be the one from the app
  • Edit an entry from the chosen content type and click "Compare versions"
Screen.Recording.2025-08-21.at.09.47.27.mov

JuliRossi and others added 13 commits August 4, 2025 12:17
* feat: initialize rich text versioning app with basic structure and components

* move tests to test folder

* add config settings for vite and vitest

* Taking advantage of those jest matchers

* prettier
…10054)

* creating UI and call to fetch the rich text diff

* adding tests and some refactors

* adding more tests

* adding css style to Dialog location

* removing html-diff-ts that was not used

* correction of PRs
…10053)

* wip

* wip

* Fix emotion issue

* simplifying and upping the state to config screen

* update label

* adjusting margins

* adjusting labels

* refactoring

* fix test

* update deps

* fixing because conflict with 7.0 version

* refsctoring test

* removing unwanted test

* renaming

* simplifying mapping

* changes per comments

* fixes after merge
…3] (#10059)

* creating UI and call to fetch the rich text diff

* adding tests and some refactors

* adding more tests

* adding css style to Dialog location

* removing html-diff-ts that was not used

* first version of error handling

* using sdk to get the published version + refactor in tests

* adjusting the width and height of the dialog if there is an error

* formating with prettier after rebase

* updating package-lock.json

* update in mockSdk to fix tests after rebase

* adding css style in Dialog.styles.ts

* correction of pr comments

* removing some prettier format
* removing access token from the config screen

* removing api key tests + ContentfulApiKeyInput component
)

* correction in the Field catch to fix test

* refactor in onButtonClick to fix the dialog error width

* refactor to remove unnecessary errorInfo state + refactor in Dialog styles

* correcting tests

* leaving the correct query key back again
* wip

* wip

* comments

* joas approach!

* rename

* Update loading condition in HtmlDiffViewer to include diffHtml check

* this doesn't need to be optional

* wip

* Making single call

* wip

* Rough error handling

* Add entry title and status utilities; refactor HtmlDiffViewer and Dialog components

* fix

* Handling errors

* removing unused

* removing unused deps

* Update dependencies to include @contentful/rich-text-types version 16.1.0 in package.json and package-lock.json

* Fixing type issues

* adding tests

* entry not found

* removing afterEach

* adding margin bottom in createOptions embedded entry

* Refactor createOptions and Dialog components to use locale parameter for entry status and title retrieval; remove unused dependencies from package.json and package-lock.json.

---------

Co-authored-by: francobanfi <[email protected]>
* fix issue

* Localization dIff fix
* Rich text versioning: Add asset support

* Fix node type

* Update tests logic for changed field
* Adjust button and deleted references styles

* Remove badge
@joaquincasal joaquincasal requested a review from a team as a code owner August 21, 2025 12:48
@netlify
Copy link

netlify bot commented Aug 21, 2025

Deploy Preview for ecommerce-app-base-components canceled.

Name Link
🔨 Latest commit 28ba268
🔍 Latest deploy log https://app.netlify.com/projects/ecommerce-app-base-components/deploys/68ac60076c52790008ccaf6b

@wiz-inc-38d59fb8d7
Copy link

wiz-inc-38d59fb8d7 bot commented Aug 21, 2025

Wiz Scan Summary

Scanner Findings
Vulnerability Finding Vulnerabilities -
Data Finding Sensitive Data -
Secret Finding Secrets -
IaC Misconfiguration IaC Misconfigurations -
Total -

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension.

@ryunsong-contentful
Copy link
Contributor

ryunsong-contentful commented Aug 22, 2025

Few things I noticed

  1. When the modal is open, it's kind of annoying that I can't close it by clicking outside of the modal.
  2. Edge case where the bullet points aren't shown in the modal
Screenshot 2025-08-22 at 11 44 20 AM Screenshot 2025-08-22 at 11 44 17 AM
  1. Edge case where horizontal rules aren't shown in the modal and therefore no diff shown
Screenshot 2025-08-22 at 11 44 50 AM Screenshot 2025-08-22 at 11 44 47 AM
  1. Edge case where bullet point is shown in the modal but no diff is noted
Screenshot 2025-08-22 at 11 44 07 AM Screenshot 2025-08-22 at 11 44 04 AM
  1. Edge case where hyperlink is shown in the modal but no diff is noted
Screenshot 2025-08-22 at 11 43 57 AM Screenshot 2025-08-22 at 11 42 50 AM
  1. I did some testing with white spaces, and sometimes the modal will show the white space but never shows any diff. There are also other cases where I add white spaces but the modal doesn't respect the white space even though the rich text editor shows it
Screenshot 2025-08-22 at 11 41 06 AM Screenshot 2025-08-22 at 11 40 59 AM

Another example of white spaces
Screenshot 2025-08-22 at 11 53 11 AM
Screenshot 2025-08-22 at 11 53 09 AM

@ryunsong-contentful
Copy link
Contributor

ryunsong-contentful commented Aug 22, 2025

None of these are release blocking imo and I don't think any of them are worth the follow up work except for issue 1 with closing the modal by clicking outside the modal.

I think the rest of the issues can be done if the customer complains and want these features. I will now just do a code review now that I've done some qa'ing

<>
<div
className={styles}
dangerouslySetInnerHTML={{
Copy link
Contributor

Choose a reason for hiding this comment

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

See the last commit I added here to add more security around XSS attacks.

I did a quick double check to make sure it didn't affect the final product but I encourage you to also do a check as well and make sure my commit didn't change anything other than adding more security

Copy link
Contributor

@ryunsong-contentful ryunsong-contentful left a comment

Choose a reason for hiding this comment

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

Still having white space issues, but I'm not sure how much there is to do based on your last commit. Might be a library specific thing.
Screenshot 2025-08-22 at 1 20 29 PM
Screenshot 2025-08-22 at 1 20 25 PM

@joaquincasal joaquincasal merged commit 8dd5922 into master Aug 25, 2025
17 checks passed
@joaquincasal joaquincasal deleted the rich-text-versioning branch August 25, 2025 16:06
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.

5 participants