Is the underlines Decoration example incorrect or am I missing something?

v6
1

I’ve been working through the examples and re-building them in CodeSandbox (I find it helpful to type out the code).

I seem to have found a bug in the underlines Decoration example. Using this minimal example: CM6 - underlines decoration example (broken?) - CodeSandbox, try highlighting some text and hitting Mod-H. It should underline the text immediately, however it does not appear until triggering the key bind a second time.

As far as I can tell, this CSB is identical to the code on the example page, however the example seems to work correctly. Am I missing something?

EDIT: forgot to add, I iterated on the example further based on my understanding of extensions and came up with this: CM6 - underlines decoration example (fixed/reconfigured) - CodeSandbox, which appears to work correctly.

2

Is it possible that you’re sandbox is using a version of @codemirror/state that’s older than 0.19.4? Upgrading to 0.19.6 might help.

3

Aha yes, they both use @codemirror/basic-setup@0.19, which appears to not have been updated to @codemirror/state@0.19.6. Switching out to @codemirror/state@0.19.6 fixes it: CM6 - underlines decoration example (upgraded) - CodeSandbox

4

Using @40thieves sandbox works for the regular characters. However, it fails to underline everything. For example:
failed-underlining

Any quick fix for this?

5

I believe this is due to the default style of text-decoration-skip-ink: text-decoration-skip-ink - CSS: Cascading Style Sheets | MDN.

Adding text-decoration-skip-ink: none; in the underlineTheme I think should fix it.

6

Yup, you’re right. I should have tried a little harder before posting… Thanks! :slight_smile: