search

victrme / Bonjourr

Minimalist & lightweight startpage inspired by iOS
https://bonjourr.fr
GNU General Public License v3.0
836 stars 99 forks source link

Some changes to the CSS editor #358

Closed FIameCaster closed 2 months ago

FIameCaster commented 2 months ago

What I've changed

Currently, before creating the editor, multiple modules are dynamically imported one by one. Since the build system doesn't create a JS file for each dynamically imported module, there won't be any network waterfalls, but it's still not great for tree-shaking. For example the editHistory extension is in the current JS bundle despite being unused. Therefore, I moved the creation of the editor to its own module. This ensures only what's used ends up the final bundle, and it will make it easier to add more extensions to the editor in the future.

I added comment toggling and auto-indent to CSS for the editor. Since the CSS snippets all use tabs for indentation, I set the insertSpaces option to false.

Next, I moved the focus border for the editor from its textarea to its container. This allowed me to remove the border radius for the textarea. This border radius was clipping the textarea's cursor and selection background, which looked weird. I unfortunitely had to use !important to remove the outline since the body.tabbing textarea:focus selector has higher specificity. I also added a negative outline offset to the editor container so the outline isn't clipped by the dropdown element with overflow: hidden. You could alternatively add overflow: visible to .all .as_css, but I think the negative outline offset looks good too.

Other

I've seen that the old CSS editor without syntax highlighting had attributes like maxlength, placeholder and aria-labelledby on the textarea. You can easily add these to the current editor's textarea and they'll all work as expected.

Regarding the themes, I like the dark one, although I think the selection background should be way less transparent. However, some of the tokens in the light theme have pretty terrible contrast, --class especially.

Let me know if there's any changes you'd like.

victrme commented 2 months ago

Wow, this was unexpected.

Thank you for the tree-shaking, the indentation, and the outline. I just learned about negative outline-offset, thanks !

maxlength, placeholder and aria-labelledby on the textarea. You can easily add these to the current editor's textarea and they'll all work as expected.

Didn't think of adding those back 🤔

Regarding the themes, I like the dark one, although I think the selection background should be way less transparent. However, some of the tokens in the light theme have pretty terrible contrast, --class especially.

You can blame Ayu VSCode theme for that! You're right, the current light theme contrast is not great. I think the dark theme selection is good enough, maybe a slight brightness bump.

victrme commented 2 months ago

One thing I want to do is to only disable the Tab command when a user is using the keyboard to move around because it is trapping the focus, but have it if the user is already in the editor.

It would be cool if you want to try that. Of course I don't expect you to do it !

FIameCaster commented 2 months ago

One thing I want to do is to only disable the Tab command when a user is using the keyboard to move around because it is trapping the focus, but have it if the user is already in the editor.

It would be cool if you want to try that. Of course I don't expect you to do it !

Ok, the Tab command doesn't run now if the body has the class tabbing. This should allow keyboard navigators to tab past the editor while allowing others to use the Tab key for indentation.

victrme commented 2 months ago

Thank you for your contribution !