Styling API

[harshzalavadiya]

This project looks amazing fulfills minimal editor scenario perfactly

Since I believe that this project wants to keep component minimal but having ability to modify styles might be nice to have feature.

Suggestions

Targetable Classes

having classes on components like rcw-toolbar etc so it will be easy to target styling overrides

Inlined Styles

Inlined styled are hard to override since we have to put !important everywhere it also introduces style repeations everywhere

1. seprate minified and bundled css file
2. adding tiny version of styled-component replacing runtime like goober

I'll be happy to provide a PR if you are intrested

[megahertz]

Thank you for the suggestion. Yes, I think it's a nice idea. I would prefer to use className pointing to the style injected to head. I think this way allows to keep minimal size and doesn't require to care about separated css file. What do you think? I would appreciate if you could make a PR, since I have no time for that till March.

[harshzalavadiya]

@megahertz that's great idea, I'll try to work on this over weekends

[harshzalavadiya]

@megahertz

After looking at project there was changes might be necessary but since they are quite large I thought of asking you first before working on it

Move to TSDX

• I was able to create PoC but only using tsdx(behind the scene also uses rollup) and extending config to use postcss
• I tried with current rollup config but no luck
• there was no build size change when I just moved from plain rollup to tsdx based see below for output
• also added storybook

dist/react-simple-wysiwyg.cjs.production.min.js
Size limit: 10 KB
Size:       3.42 KB with all dependencies, minified and gzipped

dist/react-simple-wysiwyg.esm.js
Size limit: 10 KB
Size:       3.49 KB with all dependencies, minified and gzipped

Bundlephobia of current package

Remove direct style API since classes can be easily overridden once class comes in

• will it be okay if we remove styles prop from editor since they can be easily overwritten using user's preffered provided target className on each prop?, this way we can remove deepMerge code and will be able to achieve same thing
• this way we can avoid extra complixity and reduce bundle size even more

here's WIP repo that I'm working on any feedback is appriciated

[megahertz]

Thanks @harshzalavadiya, it looks interesting

A few notes:

• I would prefer to configure bundling directly without tools like tsdx
• I would prefer to have a single css file which is injected only once.

[harshzalavadiya]

@megahertz

I would prefer to configure bundling directly without tools like tsdx

Sure, I'll try with that if possible

I would prefer to have a single css file which is injected only once.

The reason I thought of multiple styles so components can be imported like lego blocks and still work. but sure can put everything in a root editor so this will be applied as expected

---

update: I have been busy lately I'll try to work on this in coming weeks