I am new to Code Mirror and really find it very well thought, designed and documented. Currently, I use CodeMirror 5.6.
I am integrating it in a Chromium browser dialog running with Sketchup, with the mode Ruby. This is just a small text editor to visualize scriptlets in Ruby.
I have no problem on Windows, where everything works fine. With the same code, I have problem when it runs on Mac (also Chromium embedded in Sketchup). The font is Menlo (monospaced) but the issue is the same regardless of the font family and font size. The editor is created with fromTextArea.
There are 2 carets: one vertical and big, and a small one horizontal on the next character
The vertical caret is not aligned with the characters
The selection by dragging the mouse is also misaligned
The double-click does not select word (there is only a brief highlight).
Again, The code (HTML, CSS, Javascript) is the same between Windows and Mac.
Does calling .refresh() on the editor (after everything has stabilized, for example when clicking) help with the issue?
CodeMirror measures its text size on init. If something (like CSS or fonts loading, or dynamic CSS changes) modifies the size of its content after that, it’ll use the outdated measurements. Calling refresh when everything is laid out in its final form should help with that.
I do a refresh() after creating the editor. I added a refresh() after typing a character, but it does not change anything.
I noticed that, if I disabled the display of line numbers (option lineNumbers:), the vertical caret is now correctly positioned horizontally (i.e. just before characters). However:
the vertical cursor is not correctly positioned vertically. Same for the selection.
the small caret still display next to the vertical caret
It looks like the coordinates are offset by a small delta versus the display text, both for the mouse position and the caret positioning.