feat: Color scheme customization #305
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| // Sets blockContent class | ||
| blockContent.className = styles.blockContent; | ||
| // Add custom HTML attributes | ||
| const blockContentDOMAttributes = |
There was a problem hiding this comment.
why not blockContentDOMAttributes.blockContent.class?
There was a problem hiding this comment.
For each of the DOM element types, you can add custom attributes, not just a custom class
There was a problem hiding this comment.
Ok, you could do this:
constr { class, ...otherAttributes} = this.options.domAttributes?.blockContent || {};
There was a problem hiding this comment.
Actually this also doesn't really work since class is a reserved word for class definitions
There was a problem hiding this comment.
Check. We could decide to rename class to className, that's also inline with how React does this
There was a problem hiding this comment.
Not sure if it's a good idea tbh, since we're not only applying the class to React components. Basic nodes like blockContainer, blockGroup, etc, are defined outside of React, so I think it's better to keep HTML naming conventions for this rather than React ones
packages/react/src/SharedComponents/ColorPicker/components/ColorIcon.tsx
Outdated
Show resolved
Hide resolved
| // Sets blockContent class | ||
| blockContent.className = styles.blockContent; | ||
| // Add custom HTML attributes | ||
| const blockContentDOMAttributes = |
There was a problem hiding this comment.
Ok, you could do this:
constr { class, ...otherAttributes} = this.options.domAttributes?.blockContent || {};
packages/react/src/SharedComponents/ColorPicker/components/ColorIcon.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| Take a look at how this is done in the demo below: | ||
|
|
||
| ::: sandbox {template=react-ts} |
There was a problem hiding this comment.
For sake of simplicity, I would just make one "red theme" and not a red light / dark theme
There was a problem hiding this comment.
I think it's nice to have both since it both shows off the auto switching from browser settings and saves us having to explain how to pass in a light & dark theme instead of just a single theme. Theming is also not really complicated compared to a lot of the other stuff, since 90% of it is defining colors, so imo we shouldn't run into the issue of people getting overloaded with information.
This PR overhauls how users can style the BlockNote editor. This is done in 3 ways:
There are still a few points of contention:
One of the main limitations is the extended theming customizability. I think most people are interested in just changing colors and fonts, for which we have a good solution, but overriding CSS could probably use some improvements for the future.
Another limitation is that the HTML classes set on elements cannot be dynamically changed atm. I can see this being a blocker for some as setting
hidden,locked, orselectedclasses is a pretty common use case. However, the implementation is actually pretty complex so not sure it's worth our time atm.