New feature: click-to-navigate in editor

We just released a new dev version of DoenetML with a new feature by @Anurag_Katyal: a bidirectional click-to-navigate scrolling that links the editor panel position on the left with the viewer panel position on the right. (You’ll need to switch to the 0.7dev version, and possibly clear your browser’s cache to check it out.)

When the new dev version is loaded, clicking on a element in the viewer automatically highlights the line in the DoenetML source that created that element and scrolls the editor to that line. Conversely, when you move the cursor in the editor to a DoenetML tag, the viewer automatically scrolls to center that element.

If you’re willing to check out the dev version, we’d love to get your reaction to this feature. Do you like having this scrolling enabled? Does it work as you expect?

The scrolling make it much easier to be able to connect the DoenetML source with the elements it produces.

In our Test Kitchen, @Carly_Vollet noted that clicking on free floating text does not take one to the source. Text written within <p> works as expected when clicked upon.

There is no marker in the HTML document for free floating text (unless you put it in a <text> component or something like that), so there’s no place to tell it to scroll to. Before publishing this feature, I tried working on that gap by finding the next element below it to scroll to that (or the next element above it if there is nothing below). Does that not work correctly? I just spot-checked one example, and it seemed to do something reasonable. If you have an example where it is failing, post it here.

tl;dr version of feedback

As it is currently implemented, I would honestly prefer the feature to be always off rather than always on. Right now, the synchronization is intrusive enough that it frequently works against my intent, forcing me to constantly fight the UI to maintain the context I want in each pane.

While losing click-to-navigate convenience would be a drawback, existing tools like Ctrl+F already provide a reliable way to locate content in either panel. That may require an extra step, but it is predictable and, more importantly, never overrides the user’s chosen viewport or focus unexpectedly.

I think the underlying idea is valuable, but it needs to become more intentional. A modifier key model (such as TeXMaker’s Cmd+Click) or a true link/unlink toggle would preserve the benefits of synchronized navigation while ensuring that users remain in control of when and how it occurs.


Full Feedback on Click-to-Navigate (Editor ↔ Preview) Feature

First, I want to say that I think this is a promising feature and a great addition to the editing experience. Being able to quickly jump between source and rendered output is genuinely useful. However, in its current implementation, the behavior feels a bit too aggressive because every click in either pane immediately forces the other pane to reposition.

In practice, I often want to edit one section of a document while simultaneously viewing a completely different section in the preview. For example, I may be making repetitive changes near the top of a file while monitoring formatting, equations, or generated output much further down. With the current behavior, any click resets that context and pulls the other window somewhere else, making it difficult to maintain separate working areas.

I would recommend considering one of the following approaches:

Option 1: Modifier Key Navigation (TeXMaker Style)

TeXMaker handles source-to-preview navigation by requiring a modifier key (for example, Cmd+Click) when the user explicitly wants to synchronize locations.

This approach has a few advantages:

  • Normal clicks behave as expected and do not disrupt the other pane.
  • Navigation remains available when needed.
  • Accidental viewport jumps are greatly reduced.
  • The intent to navigate is explicit rather than assumed.

Option 2: Linked/Unlinked Panes (Obsidian Style)

Another approach would be to allow users to toggle whether the editor and preview are linked.

When linked:

  • Clicking in either pane navigates the other.
  • Scrolling could optionally remain synchronized.
  • The two views behave as a coordinated pair.

When unlinked:

  • Each pane maintains its own position independently.
  • Users can edit one section while viewing another.
  • Navigation synchronization is temporarily disabled.

If a link/unlink model is used, I would expect it to apply to both navigation and scrolling behavior. Otherwise, users may end up in a confusing middle ground where current-line focus is synchronized but viewport position is not.

Why This Matters

A particular challenge arises when there is a large mismatch between source size and rendered output size. Some elements require extensive source code but generate relatively little visible output. In those situations, selecting or editing a small section of code can cause unexpectedly large movements in the preview viewport.

This is actually the same issue I encounter in Obsidian, and it is one of the main reasons I consider unlinking the panes essential. Without a way to temporarily decouple the views, the editor can feel like it’s fighting the user’s intent rather than helping them navigate.

Overall

I think the feature is valuable and worth keeping, but the current “always synchronized” model is too aggressive for many real-world editing workflows. A modifier-key approach like TeXMaker’s Cmd+Click, or a clear link/unlink toggle similar to Obsidian’s pane model, would provide users with much more control while preserving the benefits of quick source-to-preview navigation.

I think Cmd+click is a very fair compromise/option. Wonder if it is possible to have Cmd+scroll link the panel…I think I might have a good use for the free $100 credits I received for Fable.

It seems that Cmd+click wouldn’t work in the VS extension as it is reserved for Go to Definition but it would work in the CodeMirror editor.

Some kind of hot-key binding approach seems the closest to the current implementation – you should be able to make this configurable in VS Code so users can decide what the key hook should be. Many extensions have this type of customization, so it shouldn’t be a heavy lift for the AI.

The simplest quick-fix would likely be to add a linked (Emojis: :link:, :broken_chain:, or Lucide Link Icons) toggle that enables/disables the feature in CodeMirror.