Skip to content

BP-1293: Add theming support to new rich-text editor for basic redactor configuration #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jovana-marceta wants to merge 28 commits into
base: master
Choose a base branch
from
Open

BP-1293: Add theming support to new rich-text editor for basic redactor configuration #240

jovana-marceta wants to merge 28 commits into from

Conversation

@jovana-marceta
Copy link
Contributor

@jovana-marceta jovana-marceta commented Oct 30, 2024 •
edited
Loading

https://enigmatry.atlassian.net/browse/BP-1293

The Redactor editor will replace CKEditor. This new rich text editor includes predefined CSS that lacks support for our custom theming system, which covers colors, fonts, spacing, and other customizable options.

To address this, this update introduces a mixin that overrides default values for the following elements used in the Basics & Standard Redactor configurations.

Covered elements: Headings (h1 to h6), toolbar buttons, paragraphs, bullet and numbered lists, checkboxes (to-do items), tables, buttons, and links.

Additionally, our custom Redactor class and light mode by default have been added to the Redactor repository.

jovana-marceta
jovana-marceta commented Nov 6, 2024
View reviewed changes
typhoon41
typhoon41 requested changes Nov 7, 2024
View reviewed changes
typhoon41
typhoon41 requested changes Nov 15, 2024
View reviewed changes
typhoon41
typhoon41 requested changes Dec 13, 2024
View reviewed changes
libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_buttons-generator.scss
$theming-font-weight: map.get($theme, 'general', 'fonts', 'buttons', 'weight');
$theming-font-size: map.get($theme, 'general', 'fonts', 'buttons', 'size');

$primary-color: if($theming-primary == '' or $theming-primary == null, mat.get-color-from-palette(mat.$primary-palette, 500), $theming-primary);
Copy link
Member

@typhoon41 typhoon41 Dec 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Cvetanovic please communicate with @jovana-marceta where she has found this shorter IF syntax for Scss because I was not able to find it the latest official docs (which doesn't mean it's not working).

libs/entry-components/styles/modules/vendors/rich-text/necessary-mix/_checkboxes-generator.scss Outdated

.enigmatry-redactor-content {

$checkbox-color: if($theming-accent-color == '' or $theming-accent-color == null,
Copy link
Member

@typhoon41 typhoon41 Dec 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understood we need to check for empty string and null for variables coming from AM, but this is our theme which leads me to the fact something's maybe not right on your machine, @jovana-marceta .
@Cvetanovic please switch to this branch and try testing this if condition without empty string and communicate with Jovana (and me eventually) whether is working and what exactly isn't since we expect null value if unset and not an empty string.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@typhoon41 typhoon41 typhoon41 requested changes

@msljivic msljivic Awaiting requested review from msljivic

@Cvetanovic Cvetanovic Awaiting requested review from Cvetanovic

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@jovana-marceta @Cvetanovic @typhoon41