Enhance Rich Text Paragraphs: Preserve Cursor Position & Improve Scrolling in CKEditor 5 Modals

Problem/Motivation

When editing Rich Text Paragraphs inside a Layout Paragraphs modal, CKEditor 5 does not retain the cursor position, and scrolling behavior is inconsistent. This makes it difficult for editors to quickly resume work on large text fields.

Key issues:

• Cursor resets when opening the CKEditor modal, requiring manual repositioning.
• Scrolling behavior is inconsistent, especially for longer text content.
• When selecting text near the bottom of the content, CKEditor does not scroll enough, leaving the cursor out of view.

Steps to reproduce

Proposed resolution

To improve usability, the following enhancements should be made:

• Retain cursor position: Capture the character index before opening the CKEditor modal and restore it upon opening.
• Improve scrolling behavior:
  • First, scroll the outer modal to bring CKEditor into view.
  • Then, adjust CKEditor’s internal scroll to keep the cursor visible.
• Ensure this behavior works for all CKEditor instances inside Layout Paragraphs.

Remaining tasks

• Implement cursor tracking before opening CKEditor.
• Modify scrolling logic to prioritize outer modal scroll first.
• Ensure compatibility across multiple CKEditor instances.
• Test different content structures (headings, lists, paragraphs) to verify cursor retention.
• Address any performance concerns when dealing with large text fields.

User interface changes

• No visible UI changes; improvements will be in cursor behavior and scrolling logic.

API changes

No API changes.

Data model changes

No data model changes.