search

fabianmichael / kirby-markdown-field

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

Fixed label focus #150

Closed medienbaecker closed 2 years ago

medienbaecker commented 2 years ago

I noticed you can't click on the label to focus. After some digging I finally found the reason.

At first I thought it would be related to the uid vs _uid in lines 3 and 10 of this file:

https://github.com/fabianmichael/kirby-markdown-field/blob/ad53d129974dbe74439c7f6f8666791bbfc37954/src/components/MarkdownField.vue#L1-L17

But that's not it. Even with the correct uid it doesn't work because there's no input/textarea with that id. As you can see here a for attribute is set to that uid and other fields add it as an id to their input/textarea element.

And while it would in theory be possible to add an id to CodeMirror's contenteditable element there's unfortunately no sustainable way of doing so according to my research. That's why I overwrote the label slot and added @click="focus". What do you think?

fabianmichael commented 2 years ago

@medienbaecker I don’t know whether this has some implications for usablity, but let’s use whatever gets the job done. 🤷

medienbaecker commented 2 years ago

I'd argue the current state with the non-clickable label is definitely worse for usability 😅

But I'd prefer not to overwrite the label in case of breaking changes in the core. It would be much better to add an id to CodeMirror, but I spent a lot of time looking for a solution and at some point I gave up.

fabianmichael commented 2 years ago

@medienbaecker You could always access the raw DOM of CM while it it being initialized … but let’s be pragmatic for now. :-)