Skip to content

Syntax highlighting for CodeMirror based blob view

Administrator requested to merge fkling/cm-file-view-syntax-highlighting into main

Created by: fkling

With the CodeMirror-based blob view we don't need syntax highlighting as annotated HTML, we need the raw token ranges so that we can created CodeMirror decorations from them.

Comparison of of current view (left) vs CodeMirror (right) when opening a ~15k line document:

https://user-images.githubusercontent.com/179026/179994205-ae92d3c9-5832-4d48-abc2-0e89a9a84821.mp4

CAVEAT: I have no idea what I'm doing because I'm not familiar with these parts of the code base and I'm not familiar with Rust.

This PR adds a new query parameter that informs the syntax highlighter to return the ranges only. At the moment the response is returned in the same HTML field, which is not great. Also there is no way to let the client set the query parameter (it's hardcoded).

I've implemented syntax highlighting by only creating decorations for the lines that are currently rendered. Compared to creating all decorations up-front I feel like the "on demand" version loads a tad faster when opening a ~15k line file.

  • Extend GraphQL to allow passing the parameter (unless there is a better way)
  • Extend the response type to include token ranges directly (vs piggybacking on the html field)
  • Fix tests (where necessary)
  • Fix ranges (there seems to be an issue with ranges following a line that contains a unicode character; see screenshot)
2022-07-20_14-00

Test plan

Merge request reports

Loading