Procházet zdrojové kódy

Added a special category "All" to special characters.

Kamil Piechaczek před 6 roky
rodič
revize
5da38c7268

+ 31 - 9
packages/ckeditor5-special-characters/src/specialcharacters.js

@@ -10,12 +10,15 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview';
 import CharacterGridView from './ui/charactergridview';
 
 import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
 import '../theme/specialcharacters.css';
 
+const ALL_SPECIAL_CHARACTERS_GROUP = 'All';
+
 /**
  * The special characters feature.
  *
@@ -69,12 +72,16 @@ export default class SpecialCharacters extends Plugin {
 		const t = editor.t;
 
 		const inputCommand = editor.commands.get( 'input' );
-		const specialCharsPlugin = editor.plugins.get( 'SpecialCharacters' );
 
 		// Add the `specialCharacters` dropdown button to feature components.
 		editor.ui.componentFactory.add( 'specialCharacters', locale => {
 			const dropdownView = createDropdown( locale );
-			const navigationView = new SpecialCharactersNavigationView( locale, specialCharsPlugin.getGroups() );
+			const specialCharsGroups = [ ...this.getGroups() ];
+
+			// Add a special group that shows all available special characters.
+			specialCharsGroups.push( ALL_SPECIAL_CHARACTERS_GROUP );
+
+			const navigationView = new SpecialCharactersNavigationView( locale, specialCharsGroups );
 			const gridView = new CharacterGridView( this.locale, {
 				columns: 10
 			} );
@@ -82,11 +89,11 @@ export default class SpecialCharacters extends Plugin {
 			gridView.delegate( 'execute' ).to( dropdownView );
 
 			// Set the initial content of the special characters grid.
-			this._updateGrid( specialCharsPlugin, navigationView.currentGroupName, gridView );
+			this._updateGrid( navigationView.currentGroupName, gridView );
 
 			// Update the grid of special characters when a user changed the character group.
 			navigationView.on( 'execute', () => {
-				this._updateGrid( specialCharsPlugin, navigationView.currentGroupName, gridView );
+				this._updateGrid( navigationView.currentGroupName, gridView );
 			} );
 
 			dropdownView.buttonView.set( {
@@ -117,6 +124,18 @@ export default class SpecialCharacters extends Plugin {
 	 * @param {Array.<module:special-characters/specialcharacters~SpecialCharacterDefinition>} items
 	 */
 	addItems( groupName, items ) {
+		if ( groupName === ALL_SPECIAL_CHARACTERS_GROUP ) {
+			/**
+			 * The name "All" for special category group cannot be used because it's a special category which displays all available
+			 * special characters.
+			 *
+			 * @error special-character-invalid-group-name
+			 */
+			throw new CKEditorError(
+				`special-character-invalid-group-name: The name "${ ALL_SPECIAL_CHARACTERS_GROUP }" is reserved and cannot be used.`
+			);
+		}
+
 		const group = this._getGroup( groupName );
 
 		for ( const item of items ) {
@@ -135,12 +154,16 @@ export default class SpecialCharacters extends Plugin {
 	}
 
 	/**
-	 * Returns a collection of symbol names (titles).
+	 * Returns a collection of special characters symbol names (titles).
 	 *
 	 * @param {String} groupName
 	 * @returns {Set.<String>|undefined}
 	 */
 	getCharactersForGroup( groupName ) {
+		if ( groupName === ALL_SPECIAL_CHARACTERS_GROUP ) {
+			return new Set( this._characters.keys() );
+		}
+
 		return this._groups.get( groupName );
 	}
 
@@ -172,18 +195,17 @@ export default class SpecialCharacters extends Plugin {
 	 * Updates the symbol grid depending on the currently selected character group.
 	 *
 	 * @private
-	 * @param {module:special-characters/specialcharacters~SpecialCharacters} specialCharsPlugin
 	 * @param {String} currentGroupName
 	 * @param {module:special-characters/ui/charactergridview~CharacterGridView} gridView
 	 */
-	_updateGrid( specialCharsPlugin, currentGroupName, gridView ) {
+	_updateGrid( currentGroupName, gridView ) {
 		// Updating the grid starts with removing all tiles belonging to the old group.
 		gridView.tiles.clear();
 
-		const characterTitles = specialCharsPlugin.getCharactersForGroup( currentGroupName );
+		const characterTitles = this.getCharactersForGroup( currentGroupName );
 
 		for ( const title of characterTitles ) {
-			const character = specialCharsPlugin.getCharacter( title );
+			const character = this.getCharacter( title );
 
 			gridView.tiles.add( gridView.createTile( character, title ) );
 		}

+ 50 - 17
packages/ckeditor5-special-characters/tests/specialcharacters.js

@@ -14,6 +14,7 @@ import SpecialCharactersArrows from '../src/specialcharactersarrows';
 import SpecialCharactersNavigationView from '../src/ui/specialcharactersnavigationview';
 import CharacterGridView from '../src/ui/charactergridview';
 import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
+import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
 describe( 'SpecialCharacters', () => {
 	let plugin;
@@ -72,6 +73,14 @@ describe( 'SpecialCharacters', () => {
 				expect( dropdown.panelView.children.first ).to.be.instanceOf( SpecialCharactersNavigationView );
 			} );
 
+			it( 'a navigation contains the "All" special category', () => {
+				const listView = dropdown.panelView.children.first.groupDropdownView.panelView.children.first;
+
+				// "Mathematical" and "Arrows" are provided by other plugins. "All" is being added by SpecialCharacters itself.
+				expect( listView.items.length ).to.equal( 3 );
+				expect( listView.items.last.children.first.label ).to.equal( 'All' );
+			} );
+
 			it( 'has a grid view', () => {
 				expect( dropdown.panelView.children.last ).to.be.instanceOf( CharacterGridView );
 			} );
@@ -152,6 +161,27 @@ describe( 'SpecialCharacters', () => {
 			expect( plugin._characters.has( 'arrow left' ) ).to.equal( true );
 			expect( plugin._characters.has( 'arrow right' ) ).to.equal( true );
 		} );
+
+		it( 'works with subsequent calls to the same group', () => {
+			plugin.addItems( 'Mathematical', [ {
+				title: 'dot',
+				character: '.'
+			} ] );
+
+			plugin.addItems( 'Mathematical', [ {
+				title: ',',
+				character: 'comma'
+			} ] );
+
+			const groups = [ ...plugin.getGroups() ];
+			expect( groups ).to.deep.equal( [ 'Mathematical' ] );
+		} );
+
+		it( 'does not accept "All" as a group name', () => {
+			expectToThrowCKEditorError( () => {
+				plugin.addItems( 'All', [] );
+			}, /special-character-invalid-group-name/ );
+		} );
 	} );
 
 	describe( 'getGroups()', () => {
@@ -170,23 +200,6 @@ describe( 'SpecialCharacters', () => {
 		} );
 	} );
 
-	describe( 'addItems()', () => {
-		it( 'works with subsequent calls to the same group', () => {
-			plugin.addItems( 'Mathematical', [ {
-				title: 'dot',
-				character: '.'
-			} ] );
-
-			plugin.addItems( 'Mathematical', [ {
-				title: ',',
-				character: 'comma'
-			} ] );
-
-			const groups = [ ...plugin.getGroups() ];
-			expect( groups ).to.deep.equal( [ 'Mathematical' ] );
-		} );
-	} );
-
 	describe( 'getCharactersForGroup()', () => {
 		it( 'returns a collection of defined special characters names', () => {
 			plugin.addItems( 'Mathematical', [
@@ -201,6 +214,26 @@ describe( 'SpecialCharacters', () => {
 			expect( characters.has( 'succeeds' ) ).to.equal( true );
 		} );
 
+		it( 'returns a collection of all special characters for "All" group', () => {
+			plugin.addItems( 'Arrows', [
+				{ title: 'arrow left', character: '←' },
+				{ title: 'arrow right', character: '→' }
+			] );
+
+			plugin.addItems( 'Mathematical', [
+				{ title: 'precedes', character: '≺' },
+				{ title: 'succeeds', character: '≻' }
+			] );
+
+			const characters = plugin.getCharactersForGroup( 'All' );
+
+			expect( characters.size ).to.equal( 4 );
+			expect( characters.has( 'arrow left' ) ).to.equal( true );
+			expect( characters.has( 'arrow right' ) ).to.equal( true );
+			expect( characters.has( 'precedes' ) ).to.equal( true );
+			expect( characters.has( 'succeeds' ) ).to.equal( true );
+		} );
+
 		it( 'returns undefined for non-existing group', () => {
 			plugin.addItems( 'Mathematical', [
 				{ title: 'precedes', character: '≺' },