Skip to content

codemirror blob view: (almost) full hovercard support

Administrator requested to merge fkling/cm-file-hovercards into main

Created by: fkling

Note I don't necessarily expect a thorough review but please ask if things are unclear. I'll add better comments or make the code clearer.

This PR refactors the replaces the minimal hovercard implementation with the (almost) complete one. Instead of building a custom version of the hovercard UI we are not reusing WebHoverOverlay.

To make this work properly I had to do a couple of things:

  • Added a way to pass current component props to extensions. This is done via the blobProps facet.
  • Do not use CodeMirror's own hover tooltip extension but implement custom mouseover handling and use CodeMirro's more generic tooltip extension. Without this it's not possible to render pinned hovercards.

There are a couple of facets and plugins at work here so I added a diagram and a short explanation of how everything works together. I hope it's useful.

While working on this I also refactored other parts to reuse helper functions that I created for the hovercards (e.g. distinctWordAtCoords is also used for document highilights).

I also tried to provide more uniformity into how facets/fields are used to pass information from the component to the extensions.

Notable differences:

  • Pinned hovercards now work properly when navigating back and forth
  • More than one hovercard can be shown. If there is a pinned hovercard, hovering over other tokens will still show their hovercards (if available).

What doesn't work yet Click to jump to definition.

Demo:

https://user-images.githubusercontent.com/179026/182654084-d8528f6f-9191-4218-97c5-ec795351c51d.mp4

Test plan

Enable CodeMirror file view and hover over tokens.

App preview:

Check out the client app preview documentation to learn more.

Merge request reports