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
- 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).
Here is a video showing the issues.
Is there something I do wrong?
.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.
Thanks for helping on that annoying issue.
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.
Is one of the editor’s parent elements transformed with CSS, by any chance?
No. I don’t use transformation.
On Windows, this is what I get. Everything is correct.
There was a conflicting setting in my CSS part: on Mac I had set all margins and padding to 0px at Body level.
Many thanks for your support
Glad you found the cause. CSS is a monster to debug.
Many thanks to you. CodeMirror is really powerful…