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

  1. Install Rivet and set a Rivet theme as the default frontend theme.
  2. Configure a text format to use CKEditor 5.
  3. Edit content containing headings, paragraphs, lists, links, code, or tables.
  4. Save the content and view it on a page where it is rendered inside .rvt-prose.
  5. Compare the typography in CKEditor with the rendered frontend content.
  6. Inspect the loaded Rivet stylesheet and confirm that selectors scoped to .rvt-prose do not match the .ck.ck-content editing 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-prose selector with .ck.ck-content in 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.json and package-lock.json instead 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.

CommentFileSizeAuthor
#8 3636635-before.png276.21 KBjwilson3
#8 3636635-after.png319.71 KBjwilson3

Issue fork rivet-3636635

Command icon 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

jwilson3 created an issue. See original summary.

shubhamgoel made their first commit to this issue’s fork.

shubhamgoel’s picture

Status: Active » Needs review

Hi 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

jwilson3’s picture

Status: Needs review » Needs work
jwilson3’s picture

I 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 html and body.

3. Don't strip @font-face rules.

shubhamgoel’s picture

Status: Needs work » Needs review

Thanks @jwilson3 for the feedbacks.

The requested changes have been applied. Please let me know, if any changes required.

jwilson3’s picture

Status: Needs review » Fixed
StatusFileSize
new319.71 KB
new276.21 KB

Looks great. I've rebased the MR and merged to 1.2.x

Fantastic work. Thank you.

Before

before

After

after

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

jwilson3’s picture

Title: Apply Rivet prose styles to CKEditor 5 content » Add scoped CKEditor 5 stylesheet

jwilson3’s picture

Released in 1.2.1