浏览代码

Merge pull request #5 from ckeditor/i/5982

Internal: Merged the SpecialCharactersUI plugin to SpecialCharacter. Closes ckeditor/ckeditor5#5982.
Piotrek Koszuliński 6 年之前
父节点
当前提交
c989f6c4b9

+ 78 - 2
packages/ckeditor5-special-characters/src/specialcharacters.js

@@ -8,13 +8,19 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import SpecialCharactersUI from './specialcharactersui';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview';
+import CharacterGridView from './ui/charactergridview';
 
+import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
 import '../theme/specialcharacters.css';
 
 /**
  * The special characters feature.
  *
+ * Introduces the `'specialCharacters'` dropdown.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class SpecialCharacters extends Plugin {
@@ -22,7 +28,7 @@ export default class SpecialCharacters extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ SpecialCharactersUI ];
+		return [ Typing ];
 	}
 
 	/**
@@ -56,6 +62,55 @@ export default class SpecialCharacters extends Plugin {
 	}
 
 	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		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 gridView = new CharacterGridView( this.locale, {
+				columns: 10
+			} );
+
+			gridView.delegate( 'execute' ).to( dropdownView );
+
+			// Set the initial content of the special characters grid.
+			this._updateGrid( specialCharsPlugin, 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 );
+			} );
+
+			dropdownView.buttonView.set( {
+				label: t( 'Special characters' ),
+				icon: specialCharactersIcon,
+				tooltip: true
+			} );
+
+			dropdownView.bind( 'isEnabled' ).to( inputCommand );
+
+			// Insert a special character when a tile was clicked.
+			dropdownView.on( 'execute', ( evt, data ) => {
+				editor.execute( 'input', { text: data.character } );
+				editor.editing.view.focus();
+			} );
+
+			dropdownView.panelView.children.add( navigationView );
+			dropdownView.panelView.children.add( gridView );
+
+			return dropdownView;
+		} );
+	}
+
+	/**
 	 * Adds a collection of special characters to specified group. A title of a special character must be unique.
 	 *
 	 * @param {String} groupName
@@ -112,6 +167,27 @@ export default class SpecialCharacters extends Plugin {
 
 		return this._groups.get( groupName );
 	}
+
+	/**
+	 * 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 ) {
+		// Updating the grid starts with removing all tiles belonging to the old group.
+		gridView.tiles.clear();
+
+		const characterTitles = specialCharsPlugin.getCharactersForGroup( currentGroupName );
+
+		for ( const title of characterTitles ) {
+			const character = specialCharsPlugin.getCharacter( title );
+
+			gridView.tiles.add( gridView.createTile( character, title ) );
+		}
+	}
 }
 
 /**

+ 0 - 109
packages/ckeditor5-special-characters/src/specialcharactersui.js

@@ -1,109 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module special-characters/specialcharactersui
- */
-
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
-import CharacterGridView from './ui/charactergridview';
-import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-
-/**
- * The special characters UI plugin.
- *
- * Introduces the `'specialCharacters'` dropdown.
- *
- * @extends module:core/plugin~Plugin
- */
-export default class SpecialCharactersUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ Typing ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'SpecialCharactersUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		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 gridView = new CharacterGridView( this.locale, {
-				columns: 10
-			} );
-
-			gridView.delegate( 'execute' ).to( dropdownView );
-
-			// Set the initial content of the special characters grid.
-			this._updateGrid( specialCharsPlugin, 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 );
-			} );
-
-			dropdownView.buttonView.set( {
-				label: t( 'Special characters' ),
-				icon: specialCharactersIcon,
-				tooltip: true
-			} );
-
-			dropdownView.bind( 'isEnabled' ).to( inputCommand );
-
-			// Insert a special character when a tile was clicked.
-			dropdownView.on( 'execute', ( evt, data ) => {
-				editor.execute( 'input', { text: data.character } );
-				editor.editing.view.focus();
-			} );
-
-			dropdownView.panelView.children.add( navigationView );
-			dropdownView.panelView.children.add( gridView );
-
-			return dropdownView;
-		} );
-	}
-
-	/**
-	 * 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 ) {
-		// Updating the grid starts with removing all tiles belonging to the old group.
-		gridView.tiles.clear();
-
-		const characterTitles = specialCharsPlugin.getCharactersForGroup( currentGroupName );
-
-		for ( const title of characterTitles ) {
-			const character = specialCharsPlugin.getCharacter( title );
-
-			gridView.tiles.add( gridView.createTile( character, title ) );
-		}
-	}
-}
-

+ 118 - 2
packages/ckeditor5-special-characters/tests/specialcharacters.js

@@ -3,8 +3,17 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* global document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import SpecialCharacters from '../src/specialcharacters';
-import SpecialCharactersUI from '../src/specialcharactersui';
+import SpecialCharactersMathematical from '../src/specialcharactersmathematical';
+import SpecialCharactersArrows from '../src/specialcharactersarrows';
+import SpecialCharactersNavigationView from '../src/ui/specialcharactersnavigationview';
+import CharacterGridView from '../src/ui/charactergridview';
+import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
 
 describe( 'SpecialCharacters', () => {
 	let plugin;
@@ -14,13 +23,120 @@ describe( 'SpecialCharacters', () => {
 	} );
 
 	it( 'should require proper plugins', () => {
-		expect( SpecialCharacters.requires ).to.deep.equal( [ SpecialCharactersUI ] );
+		expect( SpecialCharacters.requires ).to.deep.equal( [ Typing ] );
 	} );
 
 	it( 'should be named', () => {
 		expect( SpecialCharacters.pluginName ).to.equal( 'SpecialCharacters' );
 	} );
 
+	describe( 'init()', () => {
+		let editor, command, element;
+
+		beforeEach( () => {
+			element = document.createElement( 'div' );
+			document.body.appendChild( element );
+
+			return ClassicTestEditor
+				.create( element, {
+					plugins: [
+						SpecialCharactersMathematical,
+						SpecialCharactersArrows
+					]
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+					command = editor.commands.get( 'input' );
+				} );
+		} );
+
+		afterEach( () => {
+			element.remove();
+
+			return editor.destroy();
+		} );
+
+		describe( '"specialCharacters" dropdown', () => {
+			let dropdown;
+
+			beforeEach( () => {
+				dropdown = editor.ui.componentFactory.create( 'specialCharacters' );
+			} );
+
+			afterEach( () => {
+				dropdown.destroy();
+			} );
+
+			it( 'has a navigation view', () => {
+				expect( dropdown.panelView.children.first ).to.be.instanceOf( SpecialCharactersNavigationView );
+			} );
+
+			it( 'has a grid view', () => {
+				expect( dropdown.panelView.children.last ).to.be.instanceOf( CharacterGridView );
+			} );
+
+			describe( '#buttonView', () => {
+				it( 'should get basic properties', () => {
+					expect( dropdown.buttonView.label ).to.equal( 'Special characters' );
+					expect( dropdown.buttonView.icon ).to.equal( specialCharactersIcon );
+					expect( dropdown.buttonView.tooltip ).to.be.true;
+				} );
+
+				it( 'should bind #isEnabled to the command', () => {
+					expect( dropdown.isEnabled ).to.be.true;
+
+					command.isEnabled = false;
+					expect( dropdown.isEnabled ).to.be.false;
+					command.isEnabled = true;
+				} );
+			} );
+
+			it( 'executes a command and focuses the editing view', () => {
+				const grid = dropdown.panelView.children.last;
+				const executeSpy = sinon.stub( editor, 'execute' );
+				const focusSpy = sinon.stub( editor.editing.view, 'focus' );
+
+				grid.tiles.get( 2 ).fire( 'execute' );
+
+				sinon.assert.calledOnce( executeSpy );
+				sinon.assert.calledOnce( focusSpy );
+				sinon.assert.calledWithExactly( executeSpy.firstCall, 'input', {
+					text: '≤'
+				} );
+			} );
+
+			describe( 'grid view', () => {
+				let grid;
+
+				beforeEach( () => {
+					grid = dropdown.panelView.children.last;
+				} );
+
+				it( 'delegates #execute to the dropdown', () => {
+					const spy = sinon.spy();
+
+					dropdown.on( 'execute', spy );
+					grid.fire( 'execute', { name: 'foo' } );
+
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'has default contents', () => {
+					expect( grid.tiles ).to.have.length.greaterThan( 10 );
+				} );
+
+				it( 'is updated when navigation view fires #execute', () => {
+					const navigation = dropdown.panelView.children.first;
+
+					expect( grid.tiles.get( 0 ).label ).to.equal( '<' );
+					navigation.groupDropdownView.fire( new EventInfo( { label: 'Arrows' }, 'execute' ) );
+
+					expect( grid.tiles.get( 0 ).label ).to.equal( '⇐' );
+				} );
+			} );
+		} );
+	} );
+
 	describe( 'addItems()', () => {
 		it( 'adds special characters to the available symbols', () => {
 			plugin.addItems( 'Arrows', [

+ 0 - 129
packages/ckeditor5-special-characters/tests/specialcharactersui.js

@@ -1,129 +0,0 @@
-/**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/* global document */
-
-import SpecialCharacters from '../src/specialcharacters';
-import SpecialCharactersMathematical from '../src/specialcharactersmathematical';
-import SpecialCharactersArrows from '../src/specialcharactersarrows';
-import SpecialCharactersUI from '../src/specialcharactersui';
-import SpecialCharactersNavigationView from '../src/ui/specialcharactersnavigationview';
-import CharacterGridView from '../src/ui/charactergridview';
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
-import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
-import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
-
-describe( 'SpecialCharactersUI', () => {
-	let editor, command, element;
-
-	beforeEach( () => {
-		element = document.createElement( 'div' );
-		document.body.appendChild( element );
-
-		return ClassicTestEditor
-			.create( element, {
-				plugins: [
-					SpecialCharacters,
-					SpecialCharactersMathematical,
-					SpecialCharactersArrows,
-					SpecialCharactersUI
-				]
-			} )
-			.then( newEditor => {
-				editor = newEditor;
-				command = editor.commands.get( 'input' );
-			} );
-	} );
-
-	afterEach( () => {
-		element.remove();
-
-		return editor.destroy();
-	} );
-
-	it( 'should be named', () => {
-		expect( SpecialCharactersUI.pluginName ).to.equal( 'SpecialCharactersUI' );
-	} );
-
-	describe( '"specialCharacters" dropdown', () => {
-		let dropdown;
-
-		beforeEach( () => {
-			dropdown = editor.ui.componentFactory.create( 'specialCharacters' );
-		} );
-
-		afterEach( () => {
-			dropdown.destroy();
-		} );
-
-		it( 'has a navigation view', () => {
-			expect( dropdown.panelView.children.first ).to.be.instanceOf( SpecialCharactersNavigationView );
-		} );
-
-		it( 'has a grid view', () => {
-			expect( dropdown.panelView.children.last ).to.be.instanceOf( CharacterGridView );
-		} );
-
-		describe( '#buttonView', () => {
-			it( 'should get basic properties', () => {
-				expect( dropdown.buttonView.label ).to.equal( 'Special characters' );
-				expect( dropdown.buttonView.icon ).to.equal( specialCharactersIcon );
-				expect( dropdown.buttonView.tooltip ).to.be.true;
-			} );
-
-			it( 'should bind #isEnabled to the command', () => {
-				expect( dropdown.isEnabled ).to.be.true;
-
-				command.isEnabled = false;
-				expect( dropdown.isEnabled ).to.be.false;
-				command.isEnabled = true;
-			} );
-		} );
-
-		it( 'executes a command and focuses the editing view', () => {
-			const grid = dropdown.panelView.children.last;
-			const executeSpy = sinon.stub( editor, 'execute' );
-			const focusSpy = sinon.stub( editor.editing.view, 'focus' );
-
-			grid.tiles.get( 2 ).fire( 'execute' );
-
-			sinon.assert.calledOnce( executeSpy );
-			sinon.assert.calledOnce( focusSpy );
-			sinon.assert.calledWithExactly( executeSpy.firstCall, 'input', {
-				text: '≤'
-			} );
-		} );
-
-		describe( 'grid view', () => {
-			let grid;
-
-			beforeEach( () => {
-				grid = dropdown.panelView.children.last;
-			} );
-
-			it( 'delegates #execute to the dropdown', () => {
-				const spy = sinon.spy();
-
-				dropdown.on( 'execute', spy );
-				grid.fire( 'execute', { name: 'foo' } );
-
-				sinon.assert.calledOnce( spy );
-			} );
-
-			it( 'has default contents', () => {
-				expect( grid.tiles ).to.have.length.greaterThan( 10 );
-			} );
-
-			it( 'is updated when navigation view fires #execute', () => {
-				const navigation = dropdown.panelView.children.first;
-
-				expect( grid.tiles.get( 0 ).label ).to.equal( '<' );
-				navigation.groupDropdownView.fire( new EventInfo( { label: 'Arrows' }, 'execute' ) );
-
-				expect( grid.tiles.get( 0 ).label ).to.equal( '⇐' );
-			} );
-		} );
-	} );
-} );