Upgrade nbdime for jupyterlab 4

[HaudinFlorence]

This PR is a first pass on trying a migration to jupyterlab4. It includes :

• moving from Lumino 1 to 2
• moving from JupyterLab 2 || 3 to 4 working with codemirror 6 (CM6)

Main changes
This PR includes among others the migration to CM6 of these features of the web applications:

• lines and characters hilighting using a dedicated a stateField, stateEffects and specific decorations of CM6
• spacers when addition/deletion of texts are made using a stateField, stateEffects, a builder and decoration widgets of CM6
• picker and conflict gutter markers using dedicated stateFields and stateEffects
• update of the different methods that enable to update the views of the editors and the models of the diffView.

Diff app rendering example

Merge app rendering example

Styling/UX differences

• the collapse functionnality has been removed.
• the new background is white when it was previously light grey
• in the merge app, the padding spacers don't have colors. They are ll grey (using decoration widgets makes the previous css logics not work anymore, this should be changed to make the coloring possible like in the diff web application.)
• in the diff app, the small arrows between editors have been removed. There are picker gutter markers in the diff too.
• all padding spacers are directly displayed on the view, there is no need to click on a picker gutter markers to make a spacer fully expend with its real sizing.
• there is no picker gutter marker for spacers. In the merge editor, only the text chunks are shown, there is no spacer.
• the syntax highlighting seems to have priority on the character change highlighting (as shown for the sinus function in the central editor in the merge example above).
• there is only 1 gutter when there were 2 previously (1 for pickers and 1 for the conflict gutter markers)
• there is a small white space between editors defined in the css of the grid panel now used to encapsulate the editors.
• 'Metadata changed' panel at the end of the applications is missing.

Future work and follow up tasks

• In some cases, the result of the native function findAlignedLines is not right leading to a misalignment of lines to be put at the same height and to incorrect treatment of adding paddings. An issue has been opened with an example findAlignedLines sometimes returns unexpected results #669

• More ui tests will be added when findAlignedLines will be fixed for the non working case

• In reference to comment Upgrade nbdime for jupyterlab 4 #664 (comment), changes will have to be made after the PR is merged regarding use of find, each, toArray related to Lumino to move to JS equivalent.

[vidartf]

Note that this repo is currently using npm + package-lock.json, so please avoid adding yarn things.

[HaudinFlorence]

@vidartf Thanks for your feedback. I will change this for npm usage.

[vidartf]

There are a lot of formatting changes in this PR. It would be very much easier for me to look at it if pure formatting changes were removed! 😃

[HaudinFlorence]

@vidartf That's right. Would you be ok to add a formatter like prettier on the project? This could be done in a separate PR. If so I can do it. The changes related to the migration to jupyterlab 4 would then appear more clearly. Please let me know what you think about it. Thanks.

[vidartf]

The bottle neck for my work on nbdime is the time I have to spend on it. If this is just a config for prettier + an autoformat commit + the ignore config so that GH doesn't consider that commit for git blame, it would be ok. I don't want to have to spend time on managing commit hooks or CI actions related to formatting though. So it might just be simpler to undo the pure-formatting changes in this PR (they will also pollute the git blame as they are).

Thanks for your understanding 😃

[HaudinFlorence]

@vidartf Thanks for your reply. So we can try to do what you are suggesting : " a config for prettier + an autoformat commit + the ignore config so that GH doesn't consider that commit for git blame." As a first step, I opened this draft PR #668 with a config for prettier (that can be tuned), and a commit with the autoformat changes. I guess that we can add in a second time a .git-blame-ignore-revs so that Github does not consider this commit for git blame. Let me please know if the prettier config does not fit your expectations.

[vidartf]

As I mentioned previously, I've been traveling recently, so I've missed a lot of the discussion here. I will try to read through the discussion, but for now: I merged the lint PR, so now @HaudinFlorence is no longer a first-time contributor, so workflows should no longer need manual approvals.

[vidartf]

Thanks @HaudinFlorence.

What would make it easiest for you to move forward:

* wait for the UI tests and [A list of small improvements HaudinFlorence/nbdime#12](https://github.com/HaudinFlorence/nbdime/pull/12) to be merged into the branch and only then merge this PR

* merge this PR as-is and retarget the remaining PRs against master branch in this repo?

Review-wise this is getting difficult to handle due to conversation length and number of files modified, but we can handle two more merges if that's easier.

If you want, I can create a new branch on this repo for now (~"lab4"). Will that help, or does the actions config need to be in the default branch?

[krassowski]

It needs to be on the default branch I believe. I had created https://github.com/jupyter/nbdime/tree/3.2.x yesterday so I think we could merge this one into master (merge conflicts due to prettier apart).

[HaudinFlorence]

@vidartf Thanks a lot for merging the lint PR. A new PR rebasing with master has been opened here #673 with the help of @fcollonval. Hoping that the ui tests will be green🤞🏻🟢

[SylvainCorlay]

Closing as superseded by #673.