@ckeditor/ckeditor5-special-characters 35.0.1 → 35.2.0

package/lang/translations/uz.po

@@ -20,6 +20,22 @@ msgctxt "Name of the special characters plugins, visible in a dropdown and as a
 msgid "Special characters"
 msgstr "Maxsus belgilar"
 
+msgctxt "A label for the \"leftwards simple arrow\" symbol."
+msgid "leftwards simple arrow"
+msgstr ""
+
+msgctxt "A label for the \"rightwards simple arrow\" symbol."
+msgid "rightwards simple arrow"
+msgstr ""
+
+msgctxt "A label for the \"upwards simple arrow\" symbol."
+msgid "upwards simple arrow"
+msgstr ""
+
+msgctxt "A label for the \"downwards simple arrow\" symbol."
+msgid "downwards simple arrow"
+msgstr ""
+
 msgctxt "A label for the \"leftwards double arrow\" symbol."
 msgid "leftwards double arrow"
 msgstr ""

package/lang/translations/vi.po

@@ -20,6 +20,22 @@ msgctxt "Name of the special characters plugins, visible in a dropdown and as a
 msgid "Special characters"
 msgstr "Các ký tự đặc biệt"
 
+msgctxt "A label for the \"leftwards simple arrow\" symbol."
+msgid "leftwards simple arrow"
+msgstr "mũi tên đơn giản chỉ sang trái"
+
+msgctxt "A label for the \"rightwards simple arrow\" symbol."
+msgid "rightwards simple arrow"
+msgstr "mũi tên đơn giản chỉ sang phải"
+
+msgctxt "A label for the \"upwards simple arrow\" symbol."
+msgid "upwards simple arrow"
+msgstr "mũi tên đơn giản chỉ lên trên"
+
+msgctxt "A label for the \"downwards simple arrow\" symbol."
+msgid "downwards simple arrow"
+msgstr "mũi tên đơn giản chỉ xuống dưới"
+
 msgctxt "A label for the \"leftwards double arrow\" symbol."
 msgid "leftwards double arrow"
 msgstr "mũi tên kép hướng sang trái"

package/lang/translations/zh-cn.po

@@ -20,6 +20,22 @@ msgctxt "Name of the special characters plugins, visible in a dropdown and as a
 msgid "Special characters"
 msgstr "特殊字符"
 
+msgctxt "A label for the \"leftwards simple arrow\" symbol."
+msgid "leftwards simple arrow"
+msgstr "向左简单箭头"
+
+msgctxt "A label for the \"rightwards simple arrow\" symbol."
+msgid "rightwards simple arrow"
+msgstr "向右简单箭头"
+
+msgctxt "A label for the \"upwards simple arrow\" symbol."
+msgid "upwards simple arrow"
+msgstr "向上简单箭头"
+
+msgctxt "A label for the \"downwards simple arrow\" symbol."
+msgid "downwards simple arrow"
+msgstr "向下简单箭头"
+
 msgctxt "A label for the \"leftwards double arrow\" symbol."
 msgid "leftwards double arrow"
 msgstr "向左双箭头"

package/lang/translations/zh.po

@@ -20,6 +20,22 @@ msgctxt "Name of the special characters plugins, visible in a dropdown and as a
 msgid "Special characters"
 msgstr "特殊字元"
 
+msgctxt "A label for the \"leftwards simple arrow\" symbol."
+msgid "leftwards simple arrow"
+msgstr "向左簡單箭號"
+
+msgctxt "A label for the \"rightwards simple arrow\" symbol."
+msgid "rightwards simple arrow"
+msgstr "向右簡單箭號"
+
+msgctxt "A label for the \"upwards simple arrow\" symbol."
+msgid "upwards simple arrow"
+msgstr "向上簡單箭號"
+
+msgctxt "A label for the \"downwards simple arrow\" symbol."
+msgid "downwards simple arrow"
+msgstr "向下簡單箭號"
+
 msgctxt "A label for the \"leftwards double arrow\" symbol."
 msgid "leftwards double arrow"
 msgstr "向左雙箭頭"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-special-characters",
-  "version": "35.0.1",
+  "version": "35.2.0",
   "description": "Special characters feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,19 +12,19 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^35.0.1"
+    "ckeditor5": "^35.2.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-cloud-services": "^35.0.1",
-    "@ckeditor/ckeditor5-core": "^35.0.1",
-    "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
-    "@ckeditor/ckeditor5-easy-image": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
-    "@ckeditor/ckeditor5-image": "^35.0.1",
-    "@ckeditor/ckeditor5-theme-lark": "^35.0.1",
-    "@ckeditor/ckeditor5-typing": "^35.0.1",
-    "@ckeditor/ckeditor5-ui": "^35.0.1",
-    "@ckeditor/ckeditor5-utils": "^35.0.1",
+    "@ckeditor/ckeditor5-cloud-services": "^35.2.0",
+    "@ckeditor/ckeditor5-core": "^35.2.0",
+    "@ckeditor/ckeditor5-dev-utils": "^31.0.0",
+    "@ckeditor/ckeditor5-easy-image": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
+    "@ckeditor/ckeditor5-image": "^35.2.0",
+    "@ckeditor/ckeditor5-theme-lark": "^35.2.0",
+    "@ckeditor/ckeditor5-typing": "^35.2.0",
+    "@ckeditor/ckeditor5-ui": "^35.2.0",
+    "@ckeditor/ckeditor5-utils": "^35.2.0",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },

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/specialcharactersarrows.js

@@ -37,6 +37,10 @@ export default class SpecialCharactersArrows extends Plugin {
 		const t = editor.t;
 
 		editor.plugins.get( 'SpecialCharacters' ).addItems( 'Arrows', [
+			{ title: t( 'leftwards simple arrow' ), character: '←' },
+			{ title: t( 'rightwards simple arrow' ), character: '→' },
+			{ title: t( 'upwards simple arrow' ), character: '↑' },
+			{ title: t( 'downwards simple arrow' ), character: '↓' },
 			{ title: t( 'leftwards double arrow' ), character: '⇐' },
 			{ title: t( 'rightwards double arrow' ), character: '⇒' },
 			{ title: t( 'upwards double arrow' ), character: '⇑' },

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/specialcharactersview.js

@@ -0,0 +1,143 @@
+/**
+ * @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
+			],
+			attributes: {
+				// Avoid focus loss when the user clicks the area of the grid that is not a button.
+				// https://github.com/ckeditor/ckeditor5/pull/12319#issuecomment-1231779819
+				tabindex: '-1'
+			}
+		} );
+
+		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();
+	}
+}