feat: theme EditorJS through its own custom properties - #250
Open
daphneslootmans wants to merge 1 commit into
Open
daphneslootmans wants to merge 1 commit into
daphneslootmans wants to merge 1 commit into
Conversation
The EditorJS component was never listed in _imports.scss, so none of it compiled. Its rules also targeted pre-2.26 class names and painted fifteen surfaces with $primary, a brand colour used as a surface token. Rewrite it based on the styling from automator-sumoapp-be-upgrade !18, with two changes. EditorJS declares its popover palette as custom properties on .ce-popover, so eight assignments replace the selector overrides and keep working when its internal markup changes. And the hover states use $gray-700 instead of --bs-secondary-bg: this fork sets $body-bg-dark and $body-secondary-bg-dark to the same $gray-800, which would make every hover band invisible in dark mode. Both colour modes are covered. Add the missing import and document the component, including the EditorJS 2.28 floor the theming depends on. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
Reviewer's GuideThis PR wires the previously uncompiled EditorJS stylesheet into the bundle and rewrites it around EditorJS 2.28+ custom properties, providing maintainable light/dark theming with visible hover states while documenting integration requirements and limitations. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
| Wrap the editor holder in `.editor-js`, and keep the value in a hidden textarea: | ||
|
|
||
| ```twig | ||
| <div data-controller="editorjs"> |
Member
There was a problem hiding this comment.
Wordt dat niet met een formtype gedaan?
Contributor
Author
There was a problem hiding this comment.
In het voorbeeld van Ilias waar die styling van overgenomen was, was het zo met die controller, zie https://git.sumocoders.be/sumocoders/automator-sumoapp-be-upgrade/-/merge_requests/18/diffs?commit_id=9534b30f6158ba7c2b9d69431b5c4b4400fba064&file=54c7701c701f7ef2bdbf8dc8eef9b515433e9eba#diff-content-54c7701c701f7ef2bdbf8dc8eef9b515433e9eba
Member
There was a problem hiding this comment.
Ahja, maar dat staat in blocks.html. Overleg anders eens met Ilias. Want ik ben nog niet 100% mee hoe dat werkt. Ik zou denken dat er een formtype is voor EditorJS. En dat die HTML dus eigenlijk in de default forms template moet komen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Ports the EditorJS styling from
automator-sumoapp-be-upgrade!18 into the bundle, and wires it up.Why
Three separate problems:
assets/scss/components/_editorjs.scsswas never listed in_imports.scss, so none of it compiled. It was added once in4258f3aand never imported..ce-toolbox__button,.ce-settings__button,.ce-conversion-toolbar__label) and painted fifteen surfaces with$primary, a brand colour used as a surface token.var(--bs-secondary-bg)for hover onvar(--bs-body-bg)surfaces. This fork sets$body-bg-darkand$body-secondary-bg-darkto the same$gray-800(#383a43), so the two tokens are identical in dark mode.How
EditorJS declares its whole popover palette as custom properties on
.ce-popover(--color-background,--color-text-primary,--color-border,--color-background-item-hover, and so on)..ce-popover__container,.ce-popover-item,.ce-popover-item__titleand.ce-popover-item__iconall read from those, so eight assignments replace roughly fifteen selector overrides and survive EditorJS reshuffling its internal markup.Only the places EditorJS hardcodes a colour still need a selector:
.ce-toolbar__plus/.ce-toolbar__settings-btn(#1d202b),.cdx-search-field(#F8F8F8),.ce-inline-toolbar(its own--color-text-primary: black), plus the notifier and tool-input placeholder.Colours follow the existing dark-mode convention rather than
--bs-*tokens:$gray-850for elevated surfaces (as in_cards.scss,_list-group.scss),$gray-700for hover (as in_forms.scss),$gray-600for borders.Both colour modes are covered, not just dark.
Changes
assets/scss/components/_editorjs.scssassets/scss/_imports.scss@import 'components/editorjs';docs/editorjs.mddocs/index.mdTest plan
sass:buildexits 0 and the compiled CSS contains the.ce-popoverand.editor-jsrules with the expected valuesstylelint-config-standard-scss#495057) than the popover surface (#2d2f35)Checked locally against
framework-design-checkwith the bundleassets/symlinked into vendor, EditorJS vendored as ESM and a small demo route.Notes for the reviewer
@import 'components/editorjs';line. Whichever lands second gets a one-line conflict, resolve by keeping a single copy.64-editorjs-stylingwas a stale local pointer atmaster; issue 64 is unrelated ("Update bundle structure"). Happy to rename..editor-jsheight rule and no theming, silently. Documented indocs/editorjs.md.🤖 Generated with Claude Code
Summary by Sourcery
Theme EditorJS consistently across light and dark colour modes and document the required integration setup.
New Features:
Bug Fixes:
Documentation: