Case change

The case change feature lets you quickly change the letter case of the selected content. You can use it to format part of the text like a title or change it to all-caps and back.

# Demo

The demo below lets you test the case change. Place the cursor inside a block such as a paragraph, heading, or list item to affect the entire block. You can also select a text fragment you want to change. Then, apply the case formatting with the toolbar dropdown.

You can also use the Shift+F3 keyboard shortcut to cycle through case formats: UPPERCASE > lowercase > Title Case. Undo changes with Ctrl/Cmd+Z.

# Installation

To add this feature to your editor, install the @ckeditor/ckeditor5-case-change package:

npm install --save @ckeditor/ckeditor5-case-change

Then add the CaseChange plugin to your plugin list:

import { CaseChange } from '@ckeditor/ckeditor5-case-change';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CaseChange, /* ... */ ],
        toolbar: [ 'caseChange', /* ... */ ],
        // Title case configuration, see the section below.
        caseChange: {
            titleCase: {
                excludeWords: [ 'a', 'an', 'and', 'as', 'at', 'but', 'by', 'en', 'for', 'if', 'in',
                    'nor', 'of', 'on', 'or', 'per', 'the', 'to', 'vs', 'vs.', 'via' ]
            }
        },
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Configuring the title case mode

Approaches to the title case change vary. This is why we did not add a default ruleset. You can use the config.caseChange.titleCase configuration to apply your rules. The configuration allows for adding exclusions – words that the feature should not capitalize. It also provides an entry point for writing custom sentence end detection mechanisms to handle exclusions in special positions in the sentence.

# Related features

Here are some more CKEditor 5 features that can help you format your content:

• Basic text styles – The essentials, like bold, italic and others.
• Font styles – Control the font family, size, and text or background color.
• Autoformatting – Format the text on the go using Markdown.
• Remove format – Easily clean basic text formatting.

# Common API

The CaseChange plugin registers:

• The 'caseChange' UI dropdown component.
• The 'changeCaseUpper', 'changeCaseLower', and 'changeCaseTitle' commands implemented by CaseChangeCommand.

You can execute the command using the editor.execute() method:

// Change the case of selected content to uppercase.
editor.execute( 'changeCaseUpper' );

// Change the case of selected content to lowercase.
editor.execute( 'changeCaseLower' );

// Change the case of selected content to title case.
editor.execute( 'changeCaseTitle' );