Description

This PR adds code diff highlighting to the Code Blocks.
I needed to display code blocks in Lexical so I looked at what Prismjs is doing in https://prismjs.com/plugins/diff-highlight/ to see how it could be ported to Lexical.

Prismjs, in its v2 branch, has a diff-highlight plugin implementation that works at the token level (not at the html level like what 1.30 is doing). This fits well with Lexical and I could integrate this implementation into packages/lexical-code/src/CodeHighlighterPrism.ts
Basically it works by first tokenizing the code with a diff grammar that detects the inserted/deleted/unchanged blocks and then tokenizes each block with the language grammar to have both diff highlighting & language highlighting.

The result is that with this PR you can see highlighted & editable diffs in Lexical

it uses the same API is diff-highlight, by adding "diff-" in front of the language name so to use it in Lexical, create a code block with language diff-javascript for example (it can be specified in the markdown mode for example)

modifications:

1. [lexical-markdown] is modified to allow languages with "-" inside their id. It seems ok & necessary in any case as Prismjs accepts language ids with "-", like "excel-formula" or "firestone-security-rules"

2. [lexical-playground] is modified to create new styles for the inserted/deleted/unchanged nodes. The proposed solution was hard to find as it is not easy to colorize the diff lines in the current html layout which is fully flattened. I created a discussion on Adding support for code diff in Code Blocks #7608 where I explain the css difficulty. The solution manages to highlight the full line with a little hint at the beginning of the line to highlight the fact that each line should begin with its diff status:

• "+ or >" for inserted
• "- or <" for deleted
• " " for unchanged

The only limitation is that the css do not colorize wrapped lines, i.e when the code line before linebreak is too long to fit in the code view. I think the trade-off is acceptable as we already have this problem with the gutter with line numbers that are not aligned with their "true" line when some lines have wrapping. The trade-off would mean that this is an acceptable solution until either

• the @scope-siblings css directive becomes mainstream
• the html for Code blocks is revamped to another layout, maybe with line containers (?).

For now I did not add new UX to activate the diff mode. Either we can leave it is a power user mode (via markdown or a programmatic way) or maybe add a toggle in the playground. Tell me what you prefer.

3. [lexical-code] is modified to

• add the diff prismjs grammar
• integrate the new semantics where a language id can now begin with diff-xxxx to mean the code should be highlighted with diff and then xxxx
• replicate the diff-highlight tokenization strategy in packages/lexical-code/src/CodeHighlighterPrism.ts as Prismsjs v2 is I think not going to get published in the short term.
• adapt the codeNodeTransform code to implement the strategy : xxxx is tokenized as xxxx and diff-xxxx is tokenized as diff plus diff-highlight(xxxx).

Test plan

At this stage, I mainly did manual tests in the playground. I could add tests if you see interesting axes to test, or we could rely on the existing code block tests.

I hope that this PR will raise some interest and that we can work to make it merged into the project ! thanks for your time looking at this and for your feedback.