search

kazzkiq / CodeFlask

A micro code-editor for awesome web pages.
https://kazzkiq.github.io/CodeFlask/
MIT License
1.07k stars 121 forks source link

Abnormal Letter-Spacing misplaces caret #109

Open ultimate-tester opened 4 years ago

ultimate-tester commented 4 years ago

Quite simple problem, having an abnormal letter-spacing will prevent the caret aligning properly. The CSS used by CodeFlash should reset the letter-spacing to the default, which is letter-spacing: normal;

image

brentkelly commented 4 years ago

See below - this same problem exists with a stock standard markdown highlighted example. Problem persists even when setting letter-spacing: normal; for all elements.

example

See the following pen: https://codepen.io/brentkelly/pen/gOabdmQ

NB: https://github.com/ClickSimply/nanoEditor doesn't seem to suffer this issue.

kazzkiq commented 4 years ago

CodeFlask works by syncing textarea text with highlighted editor text. So any differences in letter-spacing (or any other font or spacing CSS properties) will misplace caret.

In your case you changed letter-spacing in your project CSS on purpose? Or was it a side-effect of a CSS meant to style other part of your project?

ultimate-tester commented 4 years ago

CodeFlask works by syncing textarea text with highlighted editor text. So any differences in letter-spacing (or any other font or spacing CSS properties) will misplace caret.

In your case you changed letter-spacing in your project CSS on purpose? Or was it a side-effect of a CSS meant to style other part of your project?

Thanks for responding. In my case it was the latter. Other CSS in my project caused this as a side effect. My advice is to reset the letter-spacing (or take it into account) for CodeFlask.

kazzkiq commented 4 years ago

Yep. But the issue is that other styles can still leak into CodeFlask editor. Is basically a non-ending nightmare when you run without sandboxed code.

I believe this kind of issue will vanish with #119.