fix: problem editor content style

[ihor-romaniuk]

Description

This pull request contains styling fixes of content editor for Problem xblock. For fields Question, Answers, Feedback, Hints:

• [1] Heading 3, Heading 4, Heading 5, Heading 6
• [2] Numbered list is displayed without numbers

Related Pull Requests

PR to the quince branch: #34870
PR to the redwood branch: #34869

Screenshots before:

[1]	[1]	[2]	[2]

Screenshots after:

[1]	[1]	[2]	[2]

Steps to Reproduce:

1. Enable new problem editor and sharing by adding in /admin/waffle/flag/

• new_core_editors.use_new_problem_editor

2. In studio open unit -> add new component -> Problem -> Single / Multiple select
3. Check problem displaying

[openedx-webhooks]

Thanks for the pull request, @ihor-romaniuk!

This repository is currently maintained by @openedx/wg-maintenance-edx-platform.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

---

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[mphilbrick211]

@openedx/wg-build-test-release-security-patchers would someone be able to take a look at this and its two backports?

[mphilbrick211]

@openedx/wg-build-test-release-security-patchers would someone be able to take a look at this and its two backports?

Friendly ping on this, @openedx/wg-build-test-release-security-patchers

[sarina]

@mphilbrick211 I don't think this is a security fix. I don't understand the "why" of this PR. @ihor-romaniuk why is this change necessary?

[sarina]

@ihor-romaniuk ping on my question here. If this is no longer necessary could you kindly close the PR?

[ihor-romaniuk]

@sarina You’re right — this is not a security fix. The purpose of this PR is to improve visual consistency in the HTML editor. Some elements like headings and lists previously had no styles applied, which made the editing experience inconsistent or unclear. This change ensures that common formatting elements are rendered with basic, readable styles during editing.

[sarina]

This screenshot is odd to me:

It seems like the headers are rendering at relative sizes that don't make sense (such as h3 being larger than h2 and h5 being larger than h4)

[sarina]

@ihor-romaniuk are you planning to pursue this PR and respond to my above question or shall we close it?

[ihor-romaniuk]

@sarina I have rebased this pull request on the current master branch and it looks much better.

[sarina]

Thanks @ihor-romaniuk - this does look better to me. I'm not a frontend dev but perhaps @bradenmacdonald or @arbrandes can take a look at some point.

[bradenmacdonald]

Hmm, some of your images are no longer loading. But this is what I see when testing this PR now. Is this correct?

Master	This PR

1. I don't see any changes within the editor itself.
2. Alignment of numbered and bulleted lists is significantly improved.
3. The sizing of the headings is generally better.
4. Many problems remain. I assume these issues are out of scope for this PR so don't worry about them.
   a. LMS and Studio are different.
   b. heading 2 "feels" lighter than heading 3
   c. heading 1 has huge spacing below it
   d. editor keeps defaulting to "div" instead of "paragraph". The weird spacing in my screenshots between "paragraph" and "Lists" is because "paragraph" is accidentally a "div" for this reason.

[ihor-romaniuk]

@bradenmacdonald Thank you for your review.
The display of headings and lists in editors was quite good initially. The main issue was the visual display in LMS or Studio. The primary goal of this pull request was to fix the visual display for LMS and Studio. This pull request has been in review for a very long time, and during this time, the original platform styles have also changed.

If we want to achieve precise typography display in LMS and Studio, I would consider this a separate issue.

[bradenmacdonald]

@ihor-romaniuk That makes sense to me. I'm just asking if what's in my screenshots is correct (is what you wanted to achieve with this PR). And if so, then I will approve it.

[ihor-romaniuk]

@bradenmacdonald Yes, for this PR, these changes are correct.