@ckeditor/ckeditor5-special-characters 41.4.1 → 42.0.0-alpha.0

package/dist/index.js

@@ -4,25 +4,46 @@
  */
 import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { Typing } from '@ckeditor/ckeditor5-typing/dist/index.js';
-import { FormHeaderView, createDropdown, addListToDropdown, ViewModel, View, ButtonView, addKeyboardHandlingForGrid, FocusCycler } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { FormHeaderView, createDropdown, addListToDropdown, ViewModel, View, addKeyboardHandlingForGrid, ButtonView, FocusCycler } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { Collection, FocusTracker, KeystrokeHandler, global, CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.js';
 
-class SpecialCharactersNavigationView extends FormHeaderView {
+/**
+ * A class representing the navigation part of the special characters UI. It is responsible
+ * for describing the feature and allowing the user to select a particular character group.
+ */ class SpecialCharactersNavigationView extends FormHeaderView {
+    /**
+	 * A dropdown that allows selecting a group of special characters to be displayed.
+	 */ groupDropdownView;
+    /**
+	 * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
+	 * class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param groupNames The names of the character groups and their displayed labels.
+	 */ constructor(locale, groupNames){
+        super(locale);
+        const t = locale.t;
+        this.set('class', 'ck-special-characters-navigation');
+        this.groupDropdownView = this._createGroupDropdown(groupNames);
+        this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
+        this.label = t('Special characters');
+        this.children.add(this.groupDropdownView);
+    }
     /**
-     * Returns the name of the character group currently selected in the {@link #groupDropdownView}.
-     */ get currentGroupName() {
+	 * Returns the name of the character group currently selected in the {@link #groupDropdownView}.
+	 */ get currentGroupName() {
         return this.groupDropdownView.value;
     }
     /**
-     * Focuses the character categories dropdown.
-     */ focus() {
+	 * Focuses the character categories dropdown.
+	 */ focus() {
         this.groupDropdownView.focus();
     }
     /**
-     * Returns a dropdown that allows selecting character groups.
-     *
-     * @param groupNames The names of the character groups and their displayed labels.
-     */ _createGroupDropdown(groupNames) {
+	 * Returns a dropdown that allows selecting character groups.
+	 *
+	 * @param groupNames The names of the character groups and their displayed labels.
+	 */ _createGroupDropdown(groupNames) {
         const locale = this.locale;
         const t = locale.t;
         const dropdown = createDropdown(locale);
@@ -51,12 +72,12 @@ class SpecialCharactersNavigationView extends FormHeaderView {
         return dropdown;
     }
     /**
-     * Returns list item definitions to be used in the character group dropdown
-     * representing specific character groups.
-     *
-     * @param dropdown Dropdown view element
-     * @param groupNames The names of the character groups and their displayed labels.
-     */ _getCharacterGroupListItemDefinitions(dropdown, groupNames) {
+	 * Returns list item definitions to be used in the character group dropdown
+	 * representing specific character groups.
+	 *
+	 * @param dropdown Dropdown view element
+	 * @param groupNames The names of the character groups and their displayed labels.
+	 */ _getCharacterGroupListItemDefinitions(dropdown, groupNames) {
         const groupDefs = new Collection();
         for (const [name, label] of groupNames){
             const model = new ViewModel({
@@ -73,30 +94,66 @@ class SpecialCharactersNavigationView extends FormHeaderView {
         }
         return groupDefs;
     }
+}
+
+/**
+ * A grid of character tiles. It allows browsing special characters and selecting the character to
+ * be inserted into the content.
+ */ class CharacterGridView extends View {
+    /**
+	 * A collection of the child tile views. Each tile represents a particular character.
+	 */ tiles;
     /**
-     * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
-     * class.
-     *
-     * @param locale The localization services instance.
-     * @param groupNames The names of the character groups and their displayed labels.
-     */ constructor(locale, groupNames){
+	 * Tracks information about the DOM focus in the grid.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * Creates an instance of a character grid containing tiles representing special characters.
+	 *
+	 * @param locale The localization services instance.
+	 */ constructor(locale){
         super(locale);
-        const t = locale.t;
-        this.set('class', 'ck-special-characters-navigation');
-        this.groupDropdownView = this._createGroupDropdown(groupNames);
-        this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';
-        this.label = t('Special characters');
-        this.children.add(this.groupDropdownView);
+        this.tiles = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            children: [
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-character-grid__tiles'
+                        ]
+                    },
+                    children: this.tiles
+                }
+            ],
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-character-grid'
+                ]
+            }
+        });
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.tiles,
+            numberOfColumns: ()=>global.window.getComputedStyle(this.element.firstChild) // Responsive .ck-character-grid__tiles
+                .getPropertyValue('grid-template-columns').split(' ').length,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
     }
-}
-
-class CharacterGridView extends View {
     /**
-     * Creates a new tile for the grid.
-     *
-     * @param character A human-readable character displayed as the label (e.g. "ε").
-     * @param name The name of the character (e.g. "greek small letter epsilon").
-     */ createTile(character, name) {
+	 * Creates a new tile for the grid.
+	 *
+	 * @param character A human-readable character displayed as the label (e.g. "ε").
+	 * @param name The name of the character (e.g. "greek small letter epsilon").
+	 */ createTile(character, name) {
         const tile = new ButtonView(this.locale);
         tile.set({
             label: character,
@@ -135,8 +192,8 @@ class CharacterGridView extends View {
         return tile;
     }
     /**
-     * @inheritDoc
-     */ render() {
+	 * @inheritDoc
+	 */ render() {
         super.render();
         for (const item of this.tiles){
             this.focusTracker.add(item.element);
@@ -156,58 +213,22 @@ class CharacterGridView extends View {
         this.keystrokes.listenTo(this.element);
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         this.keystrokes.destroy();
     }
     /**
-     * Focuses the first focusable in {@link ~CharacterGridView#tiles}.
-     */ focus() {
+	 * Focuses the first focusable in {@link ~CharacterGridView#tiles}.
+	 */ focus() {
         this.tiles.first.focus();
     }
-    /**
-     * Creates an instance of a character grid containing tiles representing special characters.
-     *
-     * @param locale The localization services instance.
-     */ constructor(locale){
-        super(locale);
-        this.tiles = this.createCollection();
-        this.setTemplate({
-            tag: 'div',
-            children: [
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: [
-                            'ck',
-                            'ck-character-grid__tiles'
-                        ]
-                    },
-                    children: this.tiles
-                }
-            ],
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-character-grid'
-                ]
-            }
-        });
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.tiles,
-            numberOfColumns: ()=>global.window.getComputedStyle(this.element.firstChild) // Responsive .ck-character-grid__tiles
-                .getPropertyValue('grid-template-columns').split(' ').length,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-    }
 }
 
-class CharacterInfoView extends View {
+/**
+ * The view displaying detailed information about a special character glyph, e.g. upon
+ * hovering it with a mouse.
+ */ class CharacterInfoView extends View {
     constructor(locale){
         super(locale);
         const bind = this.bindTemplate;
@@ -268,31 +289,37 @@ class CharacterInfoView extends View {
     return 'U+' + ('0000' + hexCode).slice(-4);
 }
 
-class SpecialCharactersView extends View {
+/**
+ * A view that glues pieces of the special characters dropdown panel together:
+ *
+ * * the navigation view (allows selecting the category),
+ * * the grid view (displays characters as a grid),
+ * * and the info view (displays detailed info about a specific character).
+ */ class SpecialCharactersView extends View {
     /**
-     * @inheritDoc
-     */ render() {
-        super.render();
-        this.focusTracker.add(this.navigationView.groupDropdownView.buttonView.element);
-        this.focusTracker.add(this.gridView.element);
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
+	 * A collection of the focusable children of the view.
+	 */ items;
     /**
-     * @inheritDoc
-     */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
+	 * Tracks information about the DOM focus in the view.
+	 */ focusTracker;
     /**
-     * Focuses the first focusable in {@link #items}.
-     */ focus() {
-        this.navigationView.focus();
-    }
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * Helps cycling over focusable {@link #items} in the view.
+	 */ _focusCycler;
+    /**
+	 * An instance of the `SpecialCharactersNavigationView`.
+	 */ navigationView;
     /**
-     * Creates an instance of the `SpecialCharactersView`.
-     */ constructor(locale, navigationView, gridView, infoView){
+	 * An instance of the `CharacterGridView`.
+	 */ gridView;
+    /**
+	 * An instance of the `CharacterInfoView`.
+	 */ infoView;
+    /**
+	 * Creates an instance of the `SpecialCharactersView`.
+	 */ constructor(locale, navigationView, gridView, infoView){
         super(locale);
         this.navigationView = navigationView;
         this.gridView = gridView;
@@ -325,27 +352,70 @@ class SpecialCharactersView extends View {
         this.items.add(this.navigationView.groupDropdownView.buttonView);
         this.items.add(this.gridView);
     }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        this.focusTracker.add(this.navigationView.groupDropdownView.buttonView.element);
+        this.focusTracker.add(this.gridView.element);
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+	 * Focuses the first focusable in {@link #items}.
+	 */ focus() {
+        this.navigationView.focus();
+    }
 }
 
 var specialCharactersIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 2.5a7.47 7.47 0 0 1 4.231 1.31 7.268 7.268 0 0 1 2.703 3.454 7.128 7.128 0 0 1 .199 4.353c-.39 1.436-1.475 2.72-2.633 3.677h2.013c0-.226.092-.443.254-.603a.876.876 0 0 1 1.229 0c.163.16.254.377.254.603v.853c0 .209-.078.41-.22.567a.873.873 0 0 1-.547.28l-.101.006h-4.695a.517.517 0 0 1-.516-.518v-1.265c0-.21.128-.398.317-.489a5.601 5.601 0 0 0 2.492-2.371 5.459 5.459 0 0 0 .552-3.693 5.53 5.53 0 0 0-1.955-3.2A5.71 5.71 0 0 0 10 4.206 5.708 5.708 0 0 0 6.419 5.46 5.527 5.527 0 0 0 4.46 8.663a5.457 5.457 0 0 0 .554 3.695 5.6 5.6 0 0 0 2.497 2.37.55.55 0 0 1 .317.49v1.264c0 .286-.23.518-.516.518H2.618a.877.877 0 0 1-.614-.25.845.845 0 0 1-.254-.603v-.853c0-.226.091-.443.254-.603a.876.876 0 0 1 1.228 0c.163.16.255.377.255.603h1.925c-1.158-.958-2.155-2.241-2.545-3.678a7.128 7.128 0 0 1 .199-4.352 7.268 7.268 0 0 1 2.703-3.455A7.475 7.475 0 0 1 10 2.5z\"/></svg>";
 
 const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
-class SpecialCharacters extends Plugin {
+/**
+ * The special characters feature.
+ *
+ * Introduces the `'specialCharacters'` dropdown.
+ */ class SpecialCharacters extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * Registered characters. A pair of a character name and its symbol.
+	 */ _characters;
+    /**
+	 * Registered groups. Each group contains a displayed label and a collection with symbol names.
+	 */ _groups;
+    /**
+	 * A label describing the "All" special characters category.
+	 */ _allSpecialCharactersGroupLabel;
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             Typing
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharacters';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        const t = editor.t;
+        this._characters = new Map();
+        this._groups = new Map();
+        this._allSpecialCharactersGroupLabel = t('All');
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const inputCommand = editor.commands.get('insertText');
@@ -381,20 +451,20 @@ class SpecialCharacters extends Plugin {
         });
     }
     /**
-     * Adds a collection of special characters to the specified group. The title of a special character must be unique.
-     *
-     * **Note:** The "All" category name is reserved by the plugin and cannot be used as a new name for a special
-     * characters category.
-     */ addItems(groupName, items, options = {
+	 * Adds a collection of special characters to the specified group. The title of a special character must be unique.
+	 *
+	 * **Note:** The "All" category name is reserved by the plugin and cannot be used as a new name for a special
+	 * characters category.
+	 */ addItems(groupName, items, options = {
         label: groupName
     }) {
         if (groupName === ALL_SPECIAL_CHARACTERS_GROUP) {
             /**
-             * The name "All" for a special category group cannot be used because it is a special category that displays all
-             * available special characters.
-             *
-             * @error special-character-invalid-group-name
-             */ throw new CKEditorError('special-character-invalid-group-name', null);
+			 * The name "All" for a special category group cannot be used because it is a special category that displays all
+			 * available special characters.
+			 *
+			 * @error special-character-invalid-group-name
+			 */ throw new CKEditorError('special-character-invalid-group-name', null);
         }
         const group = this._getGroup(groupName, options.label);
         for (const item of items){
@@ -403,17 +473,17 @@ class SpecialCharacters extends Plugin {
         }
     }
     /**
-     * Returns special character groups in an order determined based on configuration and registration sequence.
-     */ getGroups() {
+	 * Returns special character groups in an order determined based on configuration and registration sequence.
+	 */ getGroups() {
         const groups = Array.from(this._groups.keys());
         const order = this.editor.config.get('specialCharacters.order') || [];
         const invalidGroup = order.find((item)=>!groups.includes(item));
         if (invalidGroup) {
             /**
-             * One of the special character groups in the "specialCharacters.order" configuration doesn't exist.
-             *
-             * @error special-character-invalid-order-group-name
-             */ throw new CKEditorError('special-character-invalid-order-group-name', null, {
+			 * One of the special character groups in the "specialCharacters.order" configuration doesn't exist.
+			 *
+			 * @error special-character-invalid-order-group-name
+			 */ throw new CKEditorError('special-character-invalid-order-group-name', null, {
                 invalidGroup
             });
         }
@@ -423,8 +493,8 @@ class SpecialCharacters extends Plugin {
         ]);
     }
     /**
-     * Returns a collection of special characters symbol names (titles).
-     */ getCharactersForGroup(groupName) {
+	 * Returns a collection of special characters symbol names (titles).
+	 */ getCharactersForGroup(groupName) {
         if (groupName === ALL_SPECIAL_CHARACTERS_GROUP) {
             return new Set(this._characters.keys());
         }
@@ -434,19 +504,19 @@ class SpecialCharacters extends Plugin {
         }
     }
     /**
-     * Returns the symbol of a special character for the specified name. If the special character could not be found, `undefined`
-     * is returned.
-     *
-     * @param title The title of a special character.
-     */ getCharacter(title) {
+	 * Returns the symbol of a special character for the specified name. If the special character could not be found, `undefined`
+	 * is returned.
+	 *
+	 * @param title The title of a special character.
+	 */ getCharacter(title) {
         return this._characters.get(title);
     }
     /**
-     * Returns a group of special characters. If the group with the specified name does not exist, it will be created.
-     *
-     * @param groupName The name of the group to create.
-     * @param label The label describing the new group.
-     */ _getGroup(groupName, label) {
+	 * Returns a group of special characters. If the group with the specified name does not exist, it will be created.
+	 *
+	 * @param groupName The name of the group to create.
+	 * @param label The label describing the new group.
+	 */ _getGroup(groupName, label) {
         if (!this._groups.has(groupName)) {
             this._groups.set(groupName, {
                 items: new Set(),
@@ -456,8 +526,8 @@ class SpecialCharacters extends Plugin {
         return this._groups.get(groupName);
     }
     /**
-     * Updates the symbol grid depending on the currently selected character group.
-     */ _updateGrid(currentGroupName, gridView) {
+	 * Updates the symbol grid depending on the currently selected character group.
+	 */ _updateGrid(currentGroupName, gridView) {
         // Updating the grid starts with removing all tiles belonging to the old group.
         gridView.tiles.clear();
         const characterTitles = this.getCharactersForGroup(currentGroupName);
@@ -467,10 +537,10 @@ class SpecialCharacters extends Plugin {
         }
     }
     /**
-     * Initializes the dropdown, used for lazy loading.
-     *
-     * @returns An object with `navigationView`, `gridView` and `infoView` properties, containing UI parts.
-     */ _createDropdownPanelContent(locale, dropdownView) {
+	 * Initializes the dropdown, used for lazy loading.
+	 *
+	 * @returns An object with `navigationView`, `gridView` and `infoView` properties, containing UI parts.
+	 */ _createDropdownPanelContent(locale, dropdownView) {
         const groupEntries = Array.from(this.getGroups()).map((name)=>[
                 name,
                 this._groups.get(name).label
@@ -506,26 +576,28 @@ class SpecialCharacters extends Plugin {
             infoView
         };
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        const t = editor.t;
-        this._characters = new Map();
-        this._groups = new Map();
-        this._allSpecialCharactersGroupLabel = t('All');
-    }
 }
 
-class SpecialCharactersArrows extends Plugin {
+/**
+ * A plugin that provides special characters for the "Arrows" category.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., SpecialCharacters, SpecialCharactersArrows ],
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ */ class SpecialCharactersArrows extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharactersArrows';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const plugin = editor.plugins.get('SpecialCharacters');
@@ -624,15 +696,26 @@ class SpecialCharactersArrows extends Plugin {
     }
 }
 
-class SpecialCharactersText extends Plugin {
+/**
+ * A plugin that provides special characters for the "Text" category.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., SpecialCharacters, SpecialCharactersText ],
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ */ class SpecialCharactersText extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharactersText';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const plugin = editor.plugins.get('SpecialCharacters');
@@ -751,15 +834,26 @@ class SpecialCharactersText extends Plugin {
     }
 }
 
-class SpecialCharactersMathematical extends Plugin {
+/**
+ * A plugin that provides special characters for the "Mathematical" category.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., SpecialCharacters, SpecialCharactersMathematical ],
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ */ class SpecialCharactersMathematical extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharactersMathematical';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const plugin = editor.plugins.get('SpecialCharacters');
@@ -946,15 +1040,26 @@ class SpecialCharactersMathematical extends Plugin {
     }
 }
 
-class SpecialCharactersLatin extends Plugin {
+/**
+ * A plugin that provides special characters for the "Latin" category.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., SpecialCharacters, SpecialCharactersLatin ],
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ */ class SpecialCharactersLatin extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharactersLatin';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const plugin = editor.plugins.get('SpecialCharacters');
@@ -1477,15 +1582,26 @@ class SpecialCharactersLatin extends Plugin {
     }
 }
 
-class SpecialCharactersCurrency extends Plugin {
+/**
+ * A plugin that provides special characters for the "Currency" category.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., SpecialCharacters, SpecialCharactersCurrency ],
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ */ class SpecialCharactersCurrency extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharactersCurrency';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const plugin = editor.plugins.get('SpecialCharacters');
@@ -1640,15 +1756,26 @@ class SpecialCharactersCurrency extends Plugin {
     }
 }
 
-class SpecialCharactersEssentials extends Plugin {
+/**
+ * A plugin combining a basic set of characters for the special characters plugin.
+ *
+ * ```ts
+ * ClassicEditor
+ *   .create( {
+ *     plugins: [ ..., SpecialCharacters, SpecialCharactersEssentials ],
+ *   } )
+ *   .then( ... )
+ *   .catch( ... );
+ * ```
+ */ class SpecialCharactersEssentials extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'SpecialCharactersEssentials';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             SpecialCharactersCurrency,
             SpecialCharactersText,