Oni: Plugins: UI Extensibility / Custom React components

[bryphe]

Aside from just color schemes changes, I'd like to add plugin support for css styling / css skinning and theming.

This would open up the door for some very in-depth customization options, as well as slick animations. This would basically allow a plugin to include a stylesheet that is loaded - allowing the developer to customize font rendering, UI, etc.

This is a placeholder for now but will add more details as it materializes. Let me know if you have ideas / comments.

[bryphe]

A good example of the scenario I'd like to support is something like https://atom.io/packages/activate-power-mode.

[bryphe]

Also, add proof-of-concept by migrating the 'box-shadow' styling to a CSS file associated with onedark theme.

[benjamin-rood]

I'd been interested in pitching in to this if possible? Regular vim colour styles are fugly in general, and make Oni look bad. I find dark colour schemes much harder to read than light ones.
It's clear that the functional direction for Oni is to have all the decorative customisation of an "electron" text editor but with (Neo) Vim tooling.

[bryphe]

Hi @benjamin-rood ,

Would be great to have your help here! We're starting to add the ability to customize colors beyond plain vim colorschemes - there's an example here: https://github.com/onivim/oni/blob/master/extensions/theme-onedark/colors/onedark.json

And then the ability to specify them via config:
https://github.com/onivim/oni/blob/master/extensions/theme-onedark/colors/onedark.json

It's clear that the functional direction for Oni is to have all the decorative customisation of an "electron" text editor but with (Neo) Vim tooling.

Well put, yes, this is exactly the direction we're heading 👍

Beyond specifying colors, there are some next-level customizations we could do, by virtue of being an electron editor:

• CSS customization - this opens the door for things like animations/transitions (ie, power-mode type plugins), but is not applicable for all elements. For this, one approach is to simply specify a css file path in the theme's json file, and then we load it and add it to the DOM in our ThemeManager.
• Custom React components - we could add to our extensibility model ways to override React components (for example, specifying a new Cursor component). This would require a bit more thinking but allow arbitrary extension of the UI.

Let me know if you need any help getting started here - definitely appreciate your help!

IMO, a good litmus test for this level of extensibility is if we can support a plugin like this:
https://atom.io/packages/activate-power-mode

If we can support something like that, we can likely support a wide breadth of customizations.

[bryphe]

Just a heads up @benjamin-rood - it looks like we're moving towards using styled-components in #1134 , so as opposed to bringing in a CSS file, for the deep extensibility we'll need to pursue the _Custom React component_ approach.

[veeramarni]

wondering if we can inject extension component similar to described here

[bryphe]

@veeramarni - that's cool! I didn't know about that library. That would be perfect for this use case.