[Feature Request] Automatically preview math equations

[lihenghuang]

Add settings to preferences: When the cursor moves to a formula block (such as within $$ or $$$$), automatically pop up a preview of the formula, instead of needing to click the "Preview" button, and hide this button.

This is especially useful for situations where a large number of formulas need to be written.

[cyanzhong]

Thanks for the feedback. However, it is not going to work.

You can try this script (how to use it: https://github.com/MarkEdit-app/MarkEdit/wiki/Customization):

(() => {
  document.addEventListener('mouseover', event => {
    const target = event.target;
    if (target.className !== 'cm-md-previewButton') {
      return;
    }
  
    const code = target.getAttribute('data-code');
    if (code === null) {
      return;
    }
  
    const pos = target.getAttribute('data-pos');
    if (pos === null) {
      return;
    }
  
    const rect = window.editor.coordsAtPos(parseInt(pos));
    if (rect === null) {
      return;
    }
  
    const type = target.getAttribute('data-type');
    window.nativeModules.preview.show({ code, type, rect: getClientRect(rect) });
  
    event.preventDefault();
    event.stopPropagation();
  });

  function getClientRect(rect) {
    const scale = window.visualViewport.scale;
    return {
      x: rect.left * scale,
      y: rect.top * scale,
      width: (rect.right - rect.left) * scale,
      height: (rect.bottom - rect.top) * scale,
    };
  }
})();

When you hover on another preview button, you will see multiple popovers (this is because popover requries a click to dismiss).

I am not a big fan of hover to show a popover, Mac apps rarely use this approach.

[cyanzhong]

Well, if you do like this kind of interaction and would like to use the script I shared, I can probably improve how popover is presented to avoid multiple popovers.

[cyanzhong]

With #501 and the script you will be able to achieve what you want, but IMO the behavior is weird.