Generated with the help of an LLM.
Problem/Motivation
#3480671: Add CKEditor 5 stylesheet for Rivet added a ckeditor5-stylesheets entry that loads the complete Rivet Core stylesheet in CKEditor 5.
That issue intentionally used a simple CDN import and deferred more targeted processing. Many of Rivet's content typography rules are scoped to .rvt-prose, but CKEditor uses .ck.ck-content for its editable content area. As a result, those prose rules do not apply while editing.
This causes headings, paragraphs, lists, tables, code, and other formatted content to look different in CKEditor than when the saved content is rendered inside .rvt-prose on the frontend.
The current stylesheet also contains a TODO for generating editor-specific prose styles:
css/ckeditor.css in Rivet 1.2.0
Steps to reproduce
- Install Rivet and set a Rivet theme as the default frontend theme.
- Configure a text format to use CKEditor 5.
- Edit content containing headings, paragraphs, lists, links, code, or tables.
- Save the content and view it on a page where it is rendered inside
.rvt-prose. - Compare the typography in CKEditor with the rendered frontend content.
- Inspect the loaded Rivet stylesheet and confirm that selectors scoped to
.rvt-prosedo not match the.ck.ck-contentediting area.
Expected result: Content in CKEditor closely represents the Rivet prose typography used on the frontend.
Actual result: Rivet's .rvt-prose rules do not apply to the CKEditor content area.
Proposed resolution
Generate an editor-specific stylesheet from the locally installed rivet-core dependency.
- Process the Rivet prose rules with a selector-aware CSS tool such as PostCSS.
- Replace or duplicate the
.rvt-proseselector with.ck.ck-contentin the editor-specific output. - Preserve descendant and child selectors such as
.rvt-prose :where(p)and.rvt-prose > figure. - Limit the generated rules to the editable content area so they do not affect the CKEditor toolbar or Drupal administration interface.
- Use the version installed through
package.jsonandpackage-lock.jsoninstead of maintaining a separate versioned CDN URL. - Integrate generation and Stylelint validation into
npm run build. - Continue registering the generated file through
ckeditor5-stylesheets. - Remove the existing TODO after the generated stylesheet is in place.
Remaining tasks
- Choose and configure the PostCSS dependencies.
- Add the editor stylesheet source and generation command.
- Integrate the command with the existing npm build pipeline.
- Confirm that output is deterministic and follows the installed Rivet Core version.
- Test headings, paragraphs, links, lists, blockquotes, code, tables, images, and figures.
- Confirm that CKEditor controls and the surrounding administration page are not affected.
- Test with supported Drupal 10 and Drupal 11 versions.
- Run Sass compilation and Stylelint.
User interface changes
Content inside CKEditor 5 will more closely match the typography displayed inside a frontend .rvt-prose container.
The CKEditor toolbar and surrounding Drupal administration interface should not change.
API changes
The frontend build pipeline will gain an editor-stylesheet generation step. No Drupal runtime API changes are expected.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | 3636635-before.png | 276.21 KB | jwilson3 |
| #8 | 3636635-after.png | 319.71 KB | jwilson3 |
Issue fork rivet-3636635
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #4
shubhamgoel commentedHi Team,
I have applied Rivet prose styles to CKEditor 5 content. Please review and merge the MR https://git.drupalcode.org/project/rivet/-/merge_requests/59/diffs
Comment #5
jwilson3Comment #6
jwilson3I requested some changes in an MR comment so that we retain other
.rvt-*utility classes and wrap them in.ck.ck-content. The tests should be updated:1.
.rvt-code, .rvt-prose :where(code) { color: red; }would produce.ck.ck-content .rvt-code, .ck-ck-content :where(code) { color: red; }.2. Add tests for
htmlandbody.3. Don't strip
@font-facerules.Comment #7
shubhamgoel commentedThanks @jwilson3 for the feedbacks.
The requested changes have been applied. Please let me know, if any changes required.
Comment #8
jwilson3Looks great. I've rebased the MR and merged to 1.2.x
Fantastic work. Thank you.
Before
After
Comment #10
jwilson3Comment #12
jwilson3Released in 1.2.1