CKEditor TextSelection for Drupal: keep your cursor and selection when switching to Source mode

What the module does

CKEditor TextSelection is a Drupal module that integrates the CKEditor 5 “Text Selection” plugin into Drupal’s CKEditor 5 editor. Its main goal is simple: preserve your cursor position and text selection when toggling between WYSIWYG and Source mode — and keep the selection visible by scrolling it into view.

• Preserves cursor position across WYSIWYG ↔ Source toggles.
• Preserves an actual text selection (not just the caret).
• Scrolls the viewport to show the selection in both modes.
• Works well alongside CKEditor CodeMirror Source Editing for a nicer Source editing experience.
• Inspired by the classic CKEditor 4 addon behavior: CKEditor 4 TextSelection .

Why this matters (a UX detail that saves real time)

Editors switch to Source mode for good reasons: cleaning up pasted markup, adjusting a link attribute, fixing a list structure, verifying headings, or making sure the HTML is exactly what they intend. Losing selection/caret on every toggle introduces friction—especially in longer articles. The goal of this module is simple: keep you in flow.

How it works (high-level)

When switching from WYSIWYG to Source mode, the plugin maps your current cursor position or selection from the editor model to the corresponding position in the HTML source. When switching back, it reads the cursor/selection in Source mode and restores it in the rich text editor. If something can’t be mapped perfectly (edge cases happen), it fails gracefully without breaking the editor.

Try it (demo)

Want to see the underlying CKEditor 5 plugin in action? Open the demo, select a phrase, toggle Source, and watch the selection stay put: CKEditor 5 Text Selection Plugin Demo .

Drupal project links

• Project page: https://www.drupal.org/project/ckeditor_textselection 
• Releases: https://www.drupal.org/project/ckeditor_textselection/releases (check here for the latest version and compatibility notes)
• Git instructions (clone/patch workflow): https://www.drupal.org/project/ckeditor_textselection/git-instructions 
• Issues: https://www.drupal.org/project/issues/ckeditor_textselection 

Installation

1) Install via Composer

Install the module using Composer (recommended). If you want a specific version, pick it from the Releases page .

composer require drupal/ckeditor_textselection

2) Enable the module

Enable CKEditor TextSelection like any contributed module (UI or Drush).

3) Enable it in your text format

1. Go to Administration → Configuration → Content authoring → Text formats and editors.
2. Open the format that uses CKEditor 5.
3. Under CKEditor 5 settings, enable the Text Selection plugin.
4. Ensure the Source editing button is available in the toolbar (you need Source mode for toggling).
5. Save the text format configuration.

4) Done

No extra settings are required. Once enabled, selection preservation works automatically whenever you toggle modes.

Using it with CodeMirror Source Editing

If your editorial team prefers syntax highlighting in Source mode, pair this module with CKEditor CodeMirror Source Editing . This improves readability while keeping selection preservation intact.

Under the hood: upstream projects

The Drupal module is built around the upstream CKEditor 5 plugin. If you want to look at or contribute to that:

• GitHub repository: https://github.com/levmyshkin/ckeditor5-textselection 
• Packagist package: https://packagist.org/packages/levmyshkin/ckeditor5-textselection 

Feedback & contributions welcome

I’d love feedback from Drupal editors, site builders, and developers — especially around tricky edge cases where mapping selection between WYSIWYG and HTML can be ambiguous. Please share your findings, open issues, or contribute: CKEditor TextSelection on Drupal.org .