Merge pull request #12440 from ckeditor/ck/6167-special-characters

Other (special-characters): Added missing arrow characters (↑, →, ↓, ←). Closes #6167.

packages/ckeditor5-special-characters/docs/_snippets/features/special-characters-extended-category.html

@@ -1,14 +1,11 @@
 <div id="snippet-special-characters-extended-category">
-	<h3>Euro foreign exchange reference rates</h3>
-	<p>As of February 10, 2020</p>
-	<p>All currencies quoted against the euro (€) as base currency.</p>
+	<h3>Greek alphabet letters</h3>
+	<p>Greek alphabet letters are used as math and science symbols.</p>
+	<p>Examples of greek letters that could be used to describe angles in a triangle:</p>
 	<ul>
-		<li>Currency: <strong>US Dollar</strong>, symbol: <strong>$</strong>, spot: <strong>1.0951</strong>, change: <span style="color:hsl(0,75%,60%);"><strong>↓</strong></span></li>
-		<li>Currency: <strong>British Pound</strong>, symbol: <strong>£</strong>, spot: <strong>0.8463</strong>, change: <span style="color:hsl(0,75%,60%);"><strong>↓</strong></span></li>
-		<li>Currency: <strong>Indian Rupee</strong>, symbol: <strong>₹</strong>, spot: <strong>78.1070</strong>, change: <span style="color:hsl(0,75%,60%);"><strong>↓</strong></span></li>
-		<li>Currency: <strong>Japanese Yen</strong>, symbol: <strong>¥</strong>, spot: <strong>120.1800</strong>, change: <span style="color:hsl(0,75%,60%);"><strong>↓</strong></span></li>
-		<li>Currency: <strong>Russian Ruble</strong>, symbol: <strong>₽</strong>, spot: <strong>70.1120</strong>, change: <span style="color:hsl(120,90%,25%);"><strong>↑</strong></span></li>
-		<li>Currency: <strong>Turkish Lira</strong>, symbol: <strong>₺</strong>, spot: <strong>6.5897</strong>, change: <span style="color:hsl(120,90%,25%);"><strong>↑</strong></span></li>
+		<li>Letter name: <strong>Alpha</strong>, greek letter: <strong>α</strong></li>
+		<li>Letter name: <strong>Beta</strong>, greek letter: <strong>β</strong></li>
+		<li>Letter name: <strong>Gamma</strong>, greek letter: <strong>γ</strong></li>
 	</ul>
 </div>
 

packages/ckeditor5-special-characters/docs/_snippets/features/special-characters-extended-category.js

@@ -8,11 +8,10 @@
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 function SpecialCharactersArrowsExtended( editor ) {
-	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Arrows', [
-		{ title: 'simple arrow left', character: '←' },
-		{ title: 'simple arrow up', character: '↑' },
-		{ title: 'simple arrow right', character: '→' },
-		{ title: 'simple arrow down', character: '↓' }
+	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Mathematical', [
+		{ title: 'alpha', character: 'α' },
+		{ title: 'beta', character: 'β' },
+		{ title: 'gamma', character: 'γ' }
 	] );
 }
 

packages/ckeditor5-special-characters/docs/features/special-characters.md

@@ -79,11 +79,10 @@ import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specia
 import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
 
 function SpecialCharactersArrowsExtended( editor ) {
-	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Arrows', [
-		{ title: 'simple arrow left', character: '←' },
-		{ title: 'simple arrow up', character: '↑' },
-		{ title: 'simple arrow right', character: '→' },
-		{ title: 'simple arrow down', character: '↓' }
+	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Mathematical', [
+		{ title: 'alpha', character: 'α' },
+		{ title: 'beta', character: 'β' },
+		{ title: 'gamma', character: 'γ' }
 	] );
 }
 
@@ -104,7 +103,7 @@ ClassicEditor
 	The title of a special character must be unique across the entire special characters set.
 </info-box>
 
-Below, you can see a demo based on the example shown above. Use the special characters icon in the editor toolbar and then select "Arrows" in the select dropdown. You will see that the category now contains the additional arrow characters added in the configuration above.
+Below, you can see a demo based on the example shown above. Use the special characters icon in the editor toolbar and then select "Mathematical" in the select dropdown. You will see that the category now contains the additional greek letters added in the configuration above.
 
 {@snippet features/special-characters-extended-category}
 

packages/ckeditor5-special-characters/lang/contexts.json

@@ -1,5 +1,9 @@
 {
 	"Special characters": "Name of the special characters plugins, visible in a dropdown and as a button tooltip.",
+  	"leftwards simple arrow": "A label for the \"leftwards simple arrow\" symbol.",
+  	"rightwards simple arrow": "A label for the \"rightwards simple arrow\" symbol.",
+  	"upwards simple arrow": "A label for the \"upwards simple arrow\" symbol.",
+  	"downwards simple arrow": "A label for the \"downwards simple arrow\" symbol.",
 	"leftwards double arrow": "A label for the \"leftwards double arrow\" symbol.",
 	"rightwards double arrow": "A label for the \"rightwards double arrow\" symbol.",
 	"upwards double arrow": "A label for the \"upwards double arrow\" symbol.",

packages/ckeditor5-special-characters/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: '⇑' },

packages/ckeditor5-special-characters/tests/specialcharacters.js

@@ -151,7 +151,7 @@ describe( 'SpecialCharacters', () => {
 					expect( grid.tiles.get( 0 ).label ).to.equal( '<' );
 					navigation.groupDropdownView.fire( new EventInfo( { label: 'Arrows' }, 'execute' ) );
 
-					expect( grid.tiles.get( 0 ).label ).to.equal( '⇐' );
+					expect( grid.tiles.get( 0 ).label ).to.equal( '←' );
 				} );
 			} );