Add wrapped side-by-side renderer #563
Open
Conversation
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
This is a preparation commit for a new wrapped side-by-side diff renderer. The new diff view uses four-column tables. Adding colspan allows block headers to span the full width of the table, ensuring they are formatted correctly. This change is backward-compatible. Existing templates will not be affected because the colspan attribute defaults to 1 and is optional.
This commit introduces wrapped side-by-side as the third diff mode. The wrapped side-by-side style requires that corresponding old and new lines have the same height, even when only one side of a line wraps. To achieve this without JavaScript, lines are placed on the same row within an HTML table. Because this approach results in a fundamentally different HTML structure from the current synchronized scrolling mode, it was implemented as a new, independent renderer.
This commit adds tests for the new wrapped side-by-side renderer. The tests are based on and adapted from the existing test suite for the synchronized scroll side-by-side mode.
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.
Thank you for creating such a great project and welcoming community! It encouraged me to make my first contribution.
This pull request introduces wrapped side-by-side as the third diff mode. Fixes #99
The changes in this PR are broken down into three commits:
colspanto generic block headers for wrapped side-by-side mode.Changes are tested with:
npm startand viewing some PRsnpm run validateThe wrapped side-by-side diff style requires that corresponding old and new lines have the same height, even when text on only one side wraps.
To accomplish this without using JavaScript, I chose to place the lines on the same row within an HTML table.
Since this approach creates a fundamentally different HTML structure from the current synchronized-scrolling mode,
implementing it as a new, independent renderer was a cleaner and more maintainable solution than modifying the existing code.
I'd appreciate your feedback on this.