search

fabianmichael / kirby-markdown-field

Super-sophisticated markdown editor for Kirby 3, community built.
Other
160 stars 14 forks source link

[next] Invisibles position is off with `font: sans-serif` #123

Closed medienbaecker closed 2 years ago

medienbaecker commented 2 years ago

Screenshot-19-11-2021_14-00-50@2x

The position of invisible characters seems to be off when font: sans-serif is used. They're barely visible when toggled on.

Kirby 3.6.0 Chrome 95.0.4638.69 macOS 12.0.1

fabianmichael commented 2 years ago

@medienbaecker The correct method would probably to measure the width of a space in the sans-serif font. However, I don’t want to add that kind of complexity and I think, I found a good alternative solution by using an SVG instead of a radial gradient, which also renders nicer thanks to the power of anti-aliasing:

Bildschirmfoto 2021-12-17 um 11 34 38
fabianmichael commented 2 years ago

@medienbaecker Please test and tell me, if that solves the issue for you. :-)

medienbaecker commented 2 years ago

@fabianmichael It works flawlessly, even for all the edge cases I tested like a zoomed-in editor or Safari. Great solution! 👏

medienbaecker commented 2 years ago

I just noticed a very weird issue with soft hyphens and I think it's related to this change. Insert a soft hyphen when invisibles are turned on and you experience this oddity:

Screenshot-17-12-2021_15-54-32

fabianmichael commented 2 years ago

@medienbaecker Sorry, I cannot reproduce your issue. Can you please provide your me browser/version?

medienbaecker commented 2 years ago

I can reproduce it in multiple browsers, including the latest Chrome.

Steps to reproduce:

  1. Write/paste some text into the field
  2. Insert a soft hyphen in the middle of a word
  3. The part to the right of the soft hyphen will be duplicated
fabianmichael commented 2 years ago

@medienbaecker Now I was able to reproduce this error. It seems like this has been caused by a CodeMirror update and related to the use of decorations (used to render whitespace). I honestly don’t have to time to look into that know. I would rather keep an eye on the next Codemirror updates and try if they fix this problem.

fabianmichael commented 2 years ago

@medienbaecker I tried to replicate this today again … and for some reason I cannot do that. Weird … has the last dependency update yesterday changed anything for you?

medienbaecker commented 2 years ago

@fabianmichael It has indeed solved the issue for me too. We were probably the only ones noticing this and they quickly fixed it in CodeMirror without telling anyone 😅