[highlightcode] Update bundled highlight.js package and improve language alias matching

sdkjs-plugins/content/highlightcode/CHANGELOG.md

@@ -16,4 +16,9 @@
 
 ## 1.0.3
 
-* Update jquery version.
+* Update jquery version.
+
+## 1.0.4
+
+* Update the bundled `highlight.js` assets to the full language catalog.
+* Improve language picker alias matching and document the available formatting targets.

sdkjs-plugins/content/highlightcode/README.md

@@ -7,15 +7,17 @@ The plugin uses the [highlight.js](https://highlightjs.org/) engine, [prettier](
 It is installed by default in cloud, [self-hosted](https://github.com/ONLYOFFICE/DocumentServer) and [desktop version](https://github.com/ONLYOFFICE/DesktopEditors) of ONLYOFFICE editors. 
 ## Supported languages and styles
 
-Supported languages: apache, bash, shell, matlab, erlang, javascript, profile, ruby, prolong, swift, sql, java, http, fortran, perl, xml, cpp, json, cs, nginx, basic, markdown, css, python, objectivec, php, delphi. 
+Supported languages are populated from the bundled `highlight.js` build at runtime via `hljs.listLanguages()`. The language picker also matches aliases exposed by `highlight.js`, such as `js`, `c++`, `c#`, `sh`, and `yml`.
 
 Supported styles: Googlecode, GitHub, GitHub Gist, Android Studio, Visual Studio, Visual Studio 2015, Idea, Qtcreator Dark, Qtcreator Light, XCode, Fortran, Foundation, XML 1, XML 2. 
 
+Code formatting is available for: `xml`, `javascript`, `typescript`, `css`, `markdown`, `json`, `php`, and `html`.
+
 ## How to use
 
 1. Find the plugin in the Plugins tab.
 2. Insert your code.
 3. Set the language you use. It will be defined automatically, but you can also change it manually. 
 4. Choose style/background color and press OK to insert your code into the document. 
 
-If you need more information about how to use or write your own plugin, please see this https://api.onlyoffice.com/docs/plugin-and-macros/get-started/overview/
+If you need more information about how to use or write your own plugin, please see this https://api.onlyoffice.com/docs/plugin-and-macros/get-started/overview/

sdkjs-plugins/content/highlightcode/config.json

@@ -14,7 +14,7 @@
 		"sr-Latn-RS": "Istakni kod",
 		"zh-ZH": "突出显示代码"
 	},
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"variations": [
 		{
 			"EditorsSupport": [
@@ -128,4 +128,4 @@
 			}
 		}
 	]
-}
+}

sdkjs-plugins/content/highlightcode/index.html

@@ -118,8 +118,8 @@
 			</div>
 			<div class="item-settings">
 				<label id="lb_format" class="defaultlable"> </label>
-				<button id="btn_format" class="btn-text-default" title="Available only for the following languages: xml, javascript, typescript, css, markdown, json, php, html.">Format</button>
+				<button id="btn_format" class="btn-text-default" title="Available only for the following languages: xml, javascript, typescript, css, markdown, json, php, html">Format</button>
 			</div>
 		</div>
 	</body>
-</html>
+</html>

sdkjs-plugins/content/highlightcode/scripts/highlight.js

@@ -40,6 +40,8 @@
 	};
 
 	var languages = hljs.listLanguages().sort(),									// array languages
+		languageOptions = [],
+		languageAliases = {},
 		style_value,																// current value style
 		code_field,																	// field for higlight code
 		container,																	// scrollable conteiner
@@ -64,6 +66,9 @@
 		php : !isOldChrome,
 		html : true
 	};
+	var formatLangTooltip = Object.keys(format_lang).filter(function(lang) {
+		return format_lang[lang];
+	}).join(", ");
 	var settings = {								// object with current settings for user (there are default values)
 		curLang : "Auto",							// current language (default - Auto)
 		style : "googlecode.css",					// current style name (dafault - googlecode.css)
@@ -138,6 +143,8 @@
 	var myscroll = window.Asc.ScrollableDiv;
 
 	window.Asc.plugin.init = function(text) {
+		languageOptions = createLangForSelect();
+		languageAliases = createLanguageAliasMap(languageOptions);
 
 		get_supported_fonts();
 		$('#style_id').select2({
@@ -167,11 +174,12 @@
 			settings.font_size = this.value;
 		};
 		$('#language_id').select2({
-			data : createLangForSelect(),
-			minimumResultsForSearch: Infinity
+			data : languageOptions,
+			matcher: matchLanguageOption,
+			minimumResultsForSearch: 0
 		}).on('select2:select', function(e) {
 			text = code_field.innerText;
-			settings.curLang = e.params.data.text;		// change current language
+			settings.curLang = e.params.data.id;		// change current language
 			if (format_lang[settings.curLang]) {
 				document.getElementById("btn_format").removeAttribute('disabled');
 			} else {
@@ -209,11 +217,21 @@
 		};
 
 		function createLangForSelect() {
-			var tmpArr = [{id:0, text:"Auto"}];
+			var tmpArr = [{
+				id: "Auto",
+				text: "Auto",
+				searchText: "auto automatic autodetect highlight highlight.js"
+			}];
 			for (var i = 0; i < languages.length; i++) {
+				var searchText = [languages[i]];
+				var languageInfo = hljs.getLanguage(languages[i]);
+				if (languageInfo && Array.isArray(languageInfo.aliases))
+					searchText = searchText.concat(languageInfo.aliases);
+
 				tmpArr.push({
-					id : i+1,
-					text : languages[i]
+					id : languages[i],
+					text : languages[i],
+					searchText : searchText.join(" ").toLowerCase()
 				});
 			}
 			return tmpArr;
@@ -738,19 +756,48 @@
 		});
 	};
 
+	function createLanguageAliasMap(options) {
+		var aliasMap = {};
+		for (var i = 0; i < options.length; i++) {
+			var option = options[i];
+			var terms = option.searchText ? option.searchText.split(" ") : [option.id];
+			for (var j = 0; j < terms.length; j++) {
+				if (terms[j])
+					aliasMap[terms[j]] = option.id;
+			}
+		}
+		return aliasMap;
+	};
+
+	function matchLanguageOption(params, data) {
+		var term = $.trim(params.term || "").toLowerCase();
+		if (!term)
+			return data;
+		if (data.searchText && data.searchText.indexOf(term) !== -1)
+			return data;
+		return null;
+	};
+
+	function normalizeLanguage(lang) {
+		if (!lang)
+			return null;
+		if (lang === "Auto")
+			return lang;
+		return languageAliases[String(lang).toLowerCase()] || null;
+	};
+
 	function select_language(lang) {
-		for (var i=0; i<$('#language_id')[0].length;i++) {
-			if ($('#language_id')[0].options[i].text == lang) {
-				settings.curLang = lang;
-				if (format_lang[lang]) {
-					document.getElementById("btn_format").removeAttribute('disabled');
-				} else {
-					document.getElementById("btn_format").setAttribute('disabled', true);
-				}
-				$('#language_id').val(i).trigger("change");
-				break;
-			}	
+		var normalizedLang = normalizeLanguage(lang);
+		if (!normalizedLang)
+			return;
+
+		settings.curLang = normalizedLang;
+		if (format_lang[normalizedLang]) {
+			document.getElementById("btn_format").removeAttribute('disabled');
+		} else {
+			document.getElementById("btn_format").setAttribute('disabled', true);
 		}
+		$('#language_id').val(normalizedLang).trigger("change");
 	};
 
 	function select_style(style) {
@@ -892,7 +939,7 @@
 		var btn_format = document.getElementById("btn_format");
 		if (btn_format) {
 			btn_format.innerHTML = window.Asc.plugin.tr("Format");
-			btn_format.title = window.Asc.plugin.tr("Available only for the following languages") + ": xml, javascript, typescript, css, markdown, json, php, html";
+			btn_format.title = window.Asc.plugin.tr("Available only for the following languages") + ": " + formatLangTooltip;
 
 		}
 
@@ -924,4 +971,4 @@
 			}
 		});
 	};
-})(window, undefined);
+})(window, undefined);