Problem/Motivation

Follow-up to:

#3535380: Make testimonial field support limited HTML to demonstrate CKEditor

to add CKEditor to the starshot-paragraph component

Steps to reproduce

Proposed resolution

Update starshot-paragraph code like that one

Remaining tasks

Update code, test, and merge

User interface changes

The Paragraph component will use CKEditor

API changes

Data model changes

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

kristen pol created an issue. See original summary.

kristen pol’s picture

Issue summary: View changes
kristen pol’s picture

While CKEditor is working, it is hijacking the styles, so that the theme (light/dark) and style props aren't working... so something else is needed

kristen pol’s picture

StatusFileSize
new327.2 KB

SDDS theme in XB with paragraph component using CKEditor but styling looks off

kristen pol’s picture

Status: Active » Needs work

gábor hojtsy made their first commit to this issue’s fork.

gábor hojtsy’s picture

Status: Needs work » Needs review
StatusFileSize
new82.75 KB
new101.15 KB

The "problem" was that the template has a real HTML paragraph element for this component. Paragraphs can't contain other paragraphs or lists, so the paragraph naturally ends when you enter a list. Then the styling does not apply to that anymore. Once the wrapper is a div, not a paragraph, this is solved. Not semantically very nice but quickly fixed it :D

BEFORE

AFTER (added another list too and picked the strong variant to show it applies to even list items):

gábor hojtsy’s picture

BTW the testimonial component has the same problem, you may want to fix it here to be a div for the quote not a p too or open a new issue :) That at least is conceptually easier since the quote is not conceptualised as a "paragraph" :)

Current:

After changing to div:

kristen pol’s picture

Assigned: Unassigned » kristen pol

Thanks, looking

kristen pol’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new2.26 MB

Updated the css so that links show up with the correct colors

Going to merge

testing demo design system components with ckeditor properties that have links in text so the styles show up okay

kristen pol’s picture

Assigned: kristen pol » Unassigned
Status: Reviewed & tested by the community » Fixed

merged

kristen pol’s picture

Title: Make paragraph field support limited HTML to demonstrate CKEditor » Make SDDS paragraph field support limited HTML to demonstrate CKEditor

add context

kristen pol’s picture

Status: Fixed » Closed (fixed)

closing