@ckeditor/ckeditor5-special-characters 34.2.0 → 35.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-special-characters",
-  "version": "34.2.0",
+  "version": "35.1.0",
   "description": "Special characters feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,19 +12,19 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^34.2.0"
+    "ckeditor5": "^35.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-cloud-services": "^34.2.0",
-    "@ckeditor/ckeditor5-core": "^34.2.0",
+    "@ckeditor/ckeditor5-cloud-services": "^35.1.0",
+    "@ckeditor/ckeditor5-core": "^35.1.0",
     "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^34.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "^34.2.0",
-    "@ckeditor/ckeditor5-image": "^34.2.0",
-    "@ckeditor/ckeditor5-theme-lark": "^34.2.0",
-    "@ckeditor/ckeditor5-typing": "^34.2.0",
-    "@ckeditor/ckeditor5-ui": "^34.2.0",
-    "@ckeditor/ckeditor5-utils": "^34.2.0",
+    "@ckeditor/ckeditor5-easy-image": "^35.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
+    "@ckeditor/ckeditor5-image": "^35.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.1.0",
+    "@ckeditor/ckeditor5-typing": "^35.1.0",
+    "@ckeditor/ckeditor5-ui": "^35.1.0",
+    "@ckeditor/ckeditor5-utils": "^35.1.0",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },
@@ -46,7 +46,8 @@
     "src",
     "theme",
     "build",
-    "ckeditor5-metadata.json"
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/specialcharacters.js

@@ -14,6 +14,7 @@ import { CKEditorError } from 'ckeditor5/src/utils';
 import SpecialCharactersNavigationView from './ui/specialcharactersnavigationview';
 import CharacterGridView from './ui/charactergridview';
 import CharacterInfoView from './ui/characterinfoview';
+import SpecialCharactersView from './ui/specialcharactersview';
 
 import specialCharactersIcon from '../theme/icons/specialcharacters.svg';
 import '../theme/specialcharacters.css';
@@ -97,9 +98,14 @@ export default class SpecialCharacters extends Plugin {
 				if ( !dropdownPanelContent ) {
 					dropdownPanelContent = this._createDropdownPanelContent( locale, dropdownView );
 
-					dropdownView.panelView.children.add( dropdownPanelContent.navigationView );
-					dropdownView.panelView.children.add( dropdownPanelContent.gridView );
-					dropdownView.panelView.children.add( dropdownPanelContent.infoView );
+					const specialCharactersView = new SpecialCharactersView(
+						locale,
+						dropdownPanelContent.navigationView,
+						dropdownPanelContent.gridView,
+						dropdownPanelContent.infoView
+					);
+
+					dropdownView.panelView.children.add( specialCharactersView );
 				}
 
 				dropdownPanelContent.infoView.set( {

package/src/ui/charactergridview.js

@@ -7,7 +7,9 @@
  * @module special-characters/ui/charactergridview
  */
 
-import { View, ButtonView } from 'ckeditor5/src/ui';
+import { View, ButtonView, addKeyboardHandlingForGrid } from 'ckeditor5/src/ui';
+
+import { KeystrokeHandler, FocusTracker, global } from 'ckeditor5/src/utils';
 
 import '../../theme/charactergrid.css';
 
@@ -56,6 +58,33 @@ export default class CharacterGridView extends View {
 			}
 		} );
 
+		/**
+		 * Tracks information about the DOM focus in the grid.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		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
+		} );
+
 		/**
 		 * Fired when any of {@link #tiles grid tiles} is clicked.
 		 *
@@ -113,4 +142,46 @@ export default class CharacterGridView extends View {
 
 		return tile;
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		for ( const item of this.tiles ) {
+			this.focusTracker.add( item.element );
+		}
+
+		this.tiles.on( 'change', ( eventInfo, { added, removed } ) => {
+			if ( added.length > 0 ) {
+				for ( const item of added ) {
+					this.focusTracker.add( item.element );
+				}
+			}
+			if ( removed.length > 0 ) {
+				for ( const item of removed ) {
+					this.focusTracker.remove( item.element );
+				}
+			}
+		} );
+
+		this.keystrokes.listenTo( this.element );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.keystrokes.destroy();
+	}
+
+	/**
+	 * Focuses the first focusable in {@link #tiles}.
+	 */
+	focus() {
+		this.tiles.get( 0 ).focus();
+	}
 }

package/src/ui/specialcharactersnavigationview.js

@@ -59,6 +59,13 @@ export default class SpecialCharactersNavigationView extends FormHeaderView {
 		return this.groupDropdownView.value;
 	}
 
+	/**
+	 * Focuses the character categories dropdown.
+	 */
+	focus() {
+		this.groupDropdownView.focus();
+	}
+
 	/**
 	 * Returns a dropdown that allows selecting character groups.
 	 *

package/src/ui/specialcharactersview.js

@@ -0,0 +1,138 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module special-characters/ui/specialcharactersview
+ */
+
+import { View, FocusCycler } from 'ckeditor5/src/ui';
+import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
+
+/**
+ * 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).
+ *
+ * @extends module:ui/view~View
+ */
+export default class SpecialCharactersView extends View {
+	/**
+	 * Creates an instance of the `SpecialCharactersView`.
+	 *
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
+	 * @param {module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView} navigationView
+	 * @param {module:special-characters/ui/charactergridview~CharacterGridView} gridView
+	 * @param {module:special-characters/ui/characterinfoview~CharacterInfoView} infoView
+	 */
+	constructor( locale, navigationView, gridView, infoView ) {
+		super( locale );
+
+		/**
+		 * A collection of the focusable children of the view.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.items = this.createCollection();
+
+		/**
+		 * Tracks information about the DOM focus in the view.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
+		/**
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 *
+		 * @readonly
+		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
+		 */
+		this.keystrokes = new KeystrokeHandler();
+
+		/**
+		 * Helps cycling over focusable {@link #items} in the view.
+		 *
+		 * @readonly
+		 * @protected
+		 * @member {module:ui/focuscycler~FocusCycler}
+		 */
+		this._focusCycler = new FocusCycler( {
+			focusables: this.items,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				focusPrevious: 'shift + tab',
+				focusNext: 'tab'
+			}
+		} );
+
+		/**
+		 * An instance of the `SpecialCharactersNavigationView`.
+		 *
+		 * @member {module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
+		 */
+		this.navigationView = navigationView;
+
+		/**
+		 * An instance of the `CharacterGridView`.
+		 *
+		 * @member {module:special-characters/ui/charactergridview~CharacterGridView}
+		 */
+		this.gridView = gridView;
+
+		/**
+		 * An instance of the `CharacterInfoView`.
+		 *
+		 * @member {module:special-characters/ui/characterinfoview~CharacterInfoView}
+		 */
+		this.infoView = infoView;
+
+		this.setTemplate( {
+			tag: 'div',
+			children: [
+				this.navigationView,
+				this.gridView,
+				this.infoView
+			]
+		} );
+
+		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();
+	}
+}