Inherit the editor font in the highlight overlay

[Ciinz-04]

Makes the highlight overlay inherit the editor font so the caret stays aligned on macOS, and adds a browser check that compares the font family of the overlay with the textarea's.

Tested on macOS with Safari 27.0 (22625.1.29.11.27). The caret drifted away from the highlighted text in every test I ran, and the gap grew with the number of lines. After running document.querySelector("#editor-highlight code").style.font = "inherit" in the developer console, the caret stayed aligned with the text on every line.

Closes #82

---

Summary by cubic

Fixes the highlight overlay caret drifting away from the text on macOS by making the overlay inherit the editor font instead of the user-agent monospace.

• Adds a browser check that compares the overlay's font family with the textarea's so the mismatch fails on any platform, not just macOS.

Closes #82.

^{Written for commit c962454. Summary will update on new commits.}

[ColtenOuO]

A few notes on the description and commit message:

1. The description still says "Tested on macOS <version>". Could you fill in the actual version? #82 and #155 both report macOS 27, so it would help to confirm this is the same environment.

2. The commit message says "On macOS that is a different font from the textarea's ui-monospace". As far as I know, only Safari resolves ui-monospace; Chrome and Firefox skip it and use a later entry in the stack. That would explain why #82 saw no drift in Chrome on the same Mac, so "Safari on macOS" would be more precise.

3. In #82, jserv asked whether the drift persists while typing or is temporary and goes away after a new session, as in #155. A font mismatch should show up from the first keystroke and should not go away on its own. Could you say in the description which one you saw? If #155's case isn't explained by this change, Refs #82 may fit better than Closes #82 for now, or note that the temporary case is still open.

[ColtenOuO]

Following up on my suggestion in #199: I meant the computed font styles as a whole, not only the family. The commit message says the drift came from the taller line box, so fontSize and lineHeight belong in the comparison too; otherwise a later font-size on <code> brings the drift back with this check still green. For example:

const metrics = (node) => {
  const s = getComputedStyle(node);
  return [s.fontFamily, s.fontSize, s.lineHeight, s.letterSpacing];
};

[ColtenOuO]

This check has nothing to do with Enter handling, but it sits in checkEditorNewlines, and this log line still only reports the Enter cases. Could you either move it into its own small function (e.g. checkEditorOverlayFont), or extend the message so a passing run shows the font check ran?