Files
zulip/static/js/realm_playground.js
Sumanth V Rao ad76df25ac playgrounds: Add pygment aliases into a parenthetical in the typeahead.
The `pygments_name` field typeahead shows a list of human-readable
`pretty_name`to pick from. However, the Pygment aliases which are
used for code highlighting within a code block are different from
these. This mismatch might be confusing for folks unfamiliar with
technical details of the "code playgrounds" feature.

To bridge the gap, we now include the Pygment aliases within
parenthesis along with its human-readable name, in the typeaheads.

E.g: Python 2.x (py2, python2).
2021-05-09 16:11:30 -07:00

61 lines
2.1 KiB
JavaScript

import * as typeahead_helper from "./typeahead_helper";
const map_language_to_playground_info = new Map();
const map_pygments_pretty_name_to_aliases = new Map();
export function update_playgrounds(playgrounds_data) {
map_language_to_playground_info.clear();
for (const data of Object.values(playgrounds_data)) {
const element_to_push = {
id: data.id,
name: data.name,
url_prefix: data.url_prefix,
};
if (map_language_to_playground_info.has(data.pygments_language)) {
map_language_to_playground_info.get(data.pygments_language).push(element_to_push);
} else {
map_language_to_playground_info.set(data.pygments_language, [element_to_push]);
}
}
}
export function get_playground_info_for_languages(lang) {
return map_language_to_playground_info.get(lang);
}
export function sort_pygments_pretty_names_by_priority(generated_pygments_data) {
const priority_sorted_pygments_data = Object.keys(generated_pygments_data.langs).sort(
typeahead_helper.compare_by_popularity,
);
for (const alias of priority_sorted_pygments_data) {
const pretty_name = generated_pygments_data.langs[alias].pretty_name;
// JS Map remembers the original order of insertion of keys.
if (map_pygments_pretty_name_to_aliases.has(pretty_name)) {
map_pygments_pretty_name_to_aliases.get(pretty_name).push(alias);
} else {
map_pygments_pretty_name_to_aliases.set(pretty_name, [alias]);
}
}
}
export function get_pygments_typeahead_list() {
const lookup_table = new Map();
const pygments_pretty_name_list = [];
for (const [key, values] of map_pygments_pretty_name_to_aliases) {
lookup_table[key] = key + " (" + Array.from(values).join(", ") + ")";
pygments_pretty_name_list.push(key);
}
return {
pygments_pretty_name_list,
lookup_table,
};
}
export function initialize(playground_data, generated_pygments_data) {
update_playgrounds(playground_data);
sort_pygments_pretty_names_by_priority(generated_pygments_data);
}