Hello,
I tried some time ago to apply some scale to a codemirror instance with transform. This doesn’t work. The cursor position is completely broken, appearing between lines etc. and completely unrelated to where the edition would happen.
I though I had found a workaround by using the non-standard zoom property. The target environment was restricted to chrome so it could work.
The cursor position was correct, i could navigate the cursor, edit.
But when you try to position the cursor, or make a selection, with the mouse, it doesn’t work at all.
See https://jsfiddle.net/zu3m8z94/14/
There’s a first editor (on top) with transform and the second one, below, uses zoom instead.
The second one is clearly better, but still not perfect: you can’t position the cursor with the mouse or select with he mouse.
Why doesn’t this work with zoom? Is there a workaround ?
Forgot to say, obviously the problem is only visible on a browser with zoom (i.e. not firefox).
Nobody knows if this can be made to work with zoom ?
If your problem with the position of cursor you can control on position of cursor by function it’s name some thing like this
editor.setCursor({line: 1, ch: 5})
Well the problem is with the position ofthe cursor the editor itself sets
when you click with the mouse, i don’t try to se it myself.
OK, now I think I got it. That’s not extremely beautiful, but at least it’s better than zoom because 1. it’s standard and 2. it seems to work (famous last words?).
For reference, if anyone in the future find themselves in this situation, I’ll post it here.
I tried building the editor unscaled inside an iframe, then scale the iframe.
From my still limited tests, this seems to work.
https://mleduque.github.io/cm-scale/test-cm-scale.html
That’s still only a workaround, but it’s mostly acceptable (if a bit complicated, now I have to transfer content between the frames).
Note: I tried replacing cm with ace, but it exhibits the same problems both with scale and zoom. And it doesn’t have a beforeinput event.
getClientRects seems to start returning really strange things when a parent node is zoomed. The strange things appear to be consistent enough to make the cursor appear in the right position, but still make it impossible to properly locate a mouse click.
This is probably not something that CodeMirror is going to support, at least until browsers get their act together and provide meaningful client rects for zoomed or transformed content.
OK, thank you. Well anyway zoom was a last resort idea (non standard, ugly etc.).
I’m better off with the process of showing the editor inside and iframe.
I even tried to set up the editor inside the iframe from the main window (meaning, codemirror.js loaded in the main window, CodeMirror construction called from the main window, but the insertion element in the iframe).
I actually didn’t expect it to work and… it mostly did. The only problem I had was that many places seem to call window.focus() (most problematic was the mousedown listener). And in that case, window is not the iframe but the main window, so not ok.
But well, everything works if you load you scripts in the iframe and trigger initialization from the main window (well, this part is a bit log to set-up 
)