Keep track of recently used symbols

bug: T110722
Change-Id: Ie2c3b63aabaec5b9955520a51c9c1b7501514423

Author: foldleft

i18n/en.json

@@ -221,6 +221,7 @@
 	"visualeditor-specialcharacter-group-set-accents": "{\"Æ\":\"Æ\",\"æ\":\"æ\",\"À\":\"À\",\"à\":\"à\",\"Â\":\"Â\",\"â\":\"â\",\"Ä\":\"Ä\",\"ä\":\"ä\",\"Å\":\"Å\",\"å\":\"å\",\"Ç\":\"Ç\",\"ç\":\"ç\",\"È\":\"È\",\"è\":\"è\",\"É\":\"É\",\"é\":\"é\",\"Ê\":\"Ê\",\"ê\":\"ê\",\"Ë\":\"Ë\",\"ë\":\"ë\",\"Î\":\"Î\",\"î\":\"î\",\"Ï\":\"Ï\",\"ï\":\"ï\",\"Ô\":\"Ô\",\"ô\":\"ô\",\"Ö\":\"Ö\",\"ö\":\"ö\",\"Ø\":\"Ø\",\"ø\":\"ø\",\"Ù\":\"Ù\",\"ù\":\"ù\",\"Û\":\"Û\",\"û\":\"û\",\"Ü\":\"Ü\",\"ü\":\"ü\",\"Ÿ\":\"Ÿ\",\"ÿ\":\"ÿ\",\"Œ\":\"Œ\",\"œ\":\"œ\"}",
 	"visualeditor-specialcharacter-group-set-mathematical": "{\"−\":\"−\",\"×\":\"×\",\"÷\":\"÷\",\"≈\":\"≈\",\"≠\":\"≠\",\"≤\":\"≤\",\"≥\":\"≥\",\"±\":\"±\",\"¹\":\"¹\",\"²\":\"²\",\"³\":\"³\",\"⁴\":\"⁴\",\"⁵\":\"⁵\",\"⁶\":\"⁶\",\"⁷\":\"⁷\",\"⁸\":\"⁸\",\"⁹\":\"⁹\",\"⁰\":\"⁰\",\"½\":\"½\"}",
 	"visualeditor-specialcharacter-group-set-symbols": "{\"−\":\"−\",\"—\":\"—\",\"°\":\"°\",\"′\":\"′\",\"″\":\"″\",\"←\":\"←\",\"→\":\"→\",\"« »\":\"« »\",\"“”\":\"“”\",\"#\":\"#\",\"@\":\"@\",\"|\":\"|\",\"~\":\"~\",\"§\":\"§\",\"•\":\"•\",\"·\":\"·\",\"…\":\"…\",\"€\":\"€\"}",
+	"visualeditor-specialcharacter-recentlyused": "Recently used",
 	"visualeditor-table-context-col": "Column",
 	"visualeditor-table-context-row": "Row",
 	"visualeditor-table-contextitem-properties": "Properties",

i18n/qqq.json

@@ -240,6 +240,7 @@
 	"visualeditor-specialcharacter-group-set-accents": "This is a JSON string defining accent special characters that can be inserted using the special character insertion tool. It is not used in the MediaWiki version of VisualEditor.\n{{doc-important|Please make sure it is a valid JSON string.}}\n{{Optional}}",
 	"visualeditor-specialcharacter-group-set-mathematical": "This is a JSON string defining mathematical special characters that can be inserted using the special character insertion tool. It is not used in the MediaWiki version of VisualEditor.\n{{doc-important|Please make sure it is a valid JSON string.}}\n{{Optional}}",
 	"visualeditor-specialcharacter-group-set-symbols": "This is a JSON string defining symbol special characters that can be inserted using the special character insertion tool. It is not used in the MediaWiki version of VisualEditor.\n{{doc-important|Please make sure it is a valid JSON string.}}\n{{Optional}}",
+	"visualeditor-specialcharacter-recentlyused": "Label to indicate the list of recently used characters in the symbol list table",
 	"visualeditor-table-context-col": "Accessibility label for the menu of options for a table column.",
 	"visualeditor-table-context-row": "Accessibility label for the menu of options for a table row.",
 	"visualeditor-table-contextitem-properties": "Label for the properties button in the table context\n{{Identical|Property}}",

src/init/ve.init.Platform.js

@@ -158,6 +158,15 @@ ve.init.Platform.prototype.getUserConfig = null;
  */
 ve.init.Platform.prototype.setUserConfig = null;
 
+/**
+ * Determine whether we can store preferences
+ *
+ * @return {boolean}
+ */
+ve.init.Platform.prototype.canUseUserConfig = function () {
+	return true;
+};
+
 /**
  * Create a safe storage object
  *

src/ui/dialogs/ve.ui.SpecialCharacterDialog.js

@@ -51,11 +51,11 @@ ve.ui.SpecialCharacterDialog.prototype.initialize = function () {
 	// Parent method
 	ve.ui.SpecialCharacterDialog.super.prototype.initialize.call( this );
 
-	this.characterListLayout = new ve.ui.SymbolListBookletLayout();
+	// Use 'visualeditor-symbolList-recentlyUsed-specialCharacters' in Hooks.php
+	this.characterListLayout = new ve.ui.SymbolListBookletLayout( { preferenceNameSuffix: 'specialCharacters' } );
 	this.characterListLayout.connect( this, {
 		choose: 'onCharacterListChoose'
 	} );
-	// Character list is lazy-loaded the first time getSetupProcess runs
 
 	this.$body.append( this.characterListLayout.$element );
 };

src/ui/layouts/ve.ui.SymbolListBookletLayout.js

@@ -22,13 +22,28 @@ ve.ui.SymbolListBookletLayout = function VeUiSymbolListBookletLayout( config ) {
 		continuous: true
 	}, config ) );
 
+	if ( config.preferenceNameSuffix && ve.init.platform.canUseUserConfig() ) {
+		this.recentlyUsedKey = 'visualeditor-symbolList-recentlyUsed-' + config.preferenceNameSuffix;
+		this.recentlyUsed = ve.userConfig( this.recentlyUsedKey ) || [];
+	}
+
 	this.$element.addClass( 've-ui-symbolListBookletLayout' );
 };
 
 /* Inheritance */
 
 OO.inheritClass( ve.ui.SymbolListBookletLayout, OO.ui.BookletLayout );
 
+/* Static properties */
+
+/**
+ * Sets how many entries to keep in the "recently used" list
+ *
+ * @static
+ * @property {number}
+ */
+ve.ui.SymbolListBookletLayout.static.maxRecentlyUsed = 32;
+
 /* Methods */
 
 /**
@@ -49,6 +64,58 @@ ve.ui.SymbolListBookletLayout.prototype.setSymbolData = function ( symbolData )
 		'.ve-ui-symbolListPage-symbol',
 		this.onListClick.bind( this )
 	);
+
+	this.renderRecentlyUsed();
+};
+
+/**
+ * Set recent data
+ */
+ve.ui.SymbolListBookletLayout.prototype.renderRecentlyUsed = function () {
+	if ( this.recentlyUsed === undefined ) {
+		return;
+	}
+	const recentPage = new ve.ui.SymbolListPage( 'recent', {
+		label: ve.msg( 'visualeditor-specialcharacter-recentlyused' ),
+		symbols: this.recentlyUsed,
+		attributes: { 'data-recent': '' }
+	} );
+	this.addPages( [ recentPage ], 0 );
+};
+
+/**
+ * Inserts a character at the start of the recently-used list and updates the user preference.
+ *
+ * @param {string|Object} character A symbol string or object
+ * @param {boolean} fromRecentList Set when the symbol was chosen from the recently-used list. Inhibits a rerender.
+ */
+ve.ui.SymbolListBookletLayout.prototype.updateRecentlyUsed = function ( character, fromRecentList ) {
+	if ( this.recentlyUsed === undefined ) {
+		return;
+	}
+
+	const seen = this.recentlyUsed.findIndex(
+		( c ) => JSON.stringify( c ) === JSON.stringify( character )
+	);
+	if ( seen === 0 ) {
+		// The character is already the most recently-used, so there's no need to update anything
+		return;
+	}
+	if ( seen !== -1 ) {
+		// This character is already in the list - remove it so we can re-insert it at the start
+		this.recentlyUsed.splice( seen, 1 );
+	}
+	this.recentlyUsed.unshift( character );
+	this.recentlyUsed = this.recentlyUsed.slice( 0, this.constructor.static.maxRecentlyUsed );
+
+	if ( this.recentlyUsedKey !== undefined ) {
+		ve.userConfig( this.recentlyUsedKey, this.recentlyUsed );
+	}
+
+	/* Avoid re-ordering the list under the user's cursor */
+	if ( !fromRecentList ) {
+		this.renderRecentlyUsed();
+	}
 };
 
 /**
@@ -61,5 +128,6 @@ ve.ui.SymbolListBookletLayout.prototype.onListClick = function ( e ) {
 
 	if ( symbol ) {
 		this.emit( 'choose', symbol );
+		this.updateRecentlyUsed( symbol, e.target.parentNode.hasAttribute( 'data-recent' ) );
 	}
 };