Make the links in the variable explorer work the same as the links in the main notebook

[JackDevine]

If you Ctrl-click a variable in the notebook, then your screen scrolls so that the variable is in the center of the screen and then your cursor selects the variable.

If you click a variable in the explorer, then you are instantly moved to a location where the variable is at the top of the page.

[JackDevine]

I have made some progress on this by adding an 'onclick' event to the pluto-links that I generate:

get_pluto_link_str(s) = """
	<a href="#$s"
	   onclick="event.preventDefault();
	            document.querySelector('#$s').scrollIntoView(
	                {behavior: 'smooth', block: 'center'}
	            )"><span class="ͼo ͼ12">$s</span></a>"""

But I haven't worked out how to highlight the variable.

The bigger problem that I have with this approach is that it feels like I am re implementing certain Pluto internals.

[fonsp]

The code that does that is here:

https://github.com/fonsp/Pluto.jl/blob/92cd7f7af1ed8b3b20c334849a44d2d383600ed8/frontend/components/CellInput/go_to_definition_plugin.js#L119-L145

You just need to find the cell_id yourself. You can probably find it with document.querySelector(scrollto_selector).closest("pluto-cell").id or by searching the global variable editor_state.notebook.cell_dependencies