playgrounds: Hook up configured playgrounds to be used in code blocks.

To prevent breaking of the hardcoded playgrounds, we resort
to checking if realm_playgrounds is empty and falling back
to the hard-coded list if so. This logic is removed in the
followup commit which introduces the UI to add a playground.

static/js/popovers.js

@@ -37,11 +37,11 @@ import * as narrow_state from "./narrow_state";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
+import * as realm_playground from "./realm_playground";
 import * as reminder from "./reminder";
 import * as resize from "./resize";
 import * as rows from "./rows";
 import * as settings_account from "./settings_account";
-import * as settings_config from "./settings_config";
 import * as settings_data from "./settings_data";
 import * as settings_profile_fields from "./settings_profile_fields";
 import * as stream_popover from "./stream_popover";
@@ -932,7 +932,7 @@ export function register_click_handlers() {
         const view_in_playground_button = $(this);
         const codehilite_div = $(this).closest(".codehilite");
         e.stopPropagation();
-        const playground_info = settings_config.get_playground_info_for_languages(
+        const playground_info = realm_playground.get_playground_info_for_languages(
             codehilite_div.data("code-language"),
         );
         // We do the code extraction here and set the target href combining the url_prefix

static/js/realm_playground.js

@@ -0,0 +1,36 @@
+import {page_params} from "./page_params";
+import * as settings_config from "./settings_config";
+
+const map_language_to_playground_info = 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) {
+    if (page_params.realm_playgrounds) {
+        return map_language_to_playground_info.get(lang);
+    }
+
+    // FIXME: To avoid breaking the configured hardcoded playgrounds, this approach
+    // is used. This will be removed in the commit which adds the UI for playground
+    // creation.
+    return settings_config.get_playground_info_for_languages(lang);
+}
+
+export function initialize(playground_data) {
+    update_playgrounds(playground_data);
+}

static/js/rendered_markdown.js

@@ -10,8 +10,8 @@ import * as blueslip from "./blueslip";
 import {$t, $t_html} from "./i18n";
 import {page_params} from "./page_params";
 import * as people from "./people";
+import * as realm_playground from "./realm_playground";
 import * as rtl from "./rtl";
-import * as settings_config from "./settings_config";
 import * as stream_data from "./stream_data";
 import * as timerender from "./timerender";
 import * as user_groups from "./user_groups";
@@ -205,7 +205,7 @@ export const update_elements = (content) => {
         const $pre = $codehilite.find("pre");
         const fenced_code_lang = $codehilite.data("code-language");
         if (fenced_code_lang !== undefined) {
-            const playground_info = settings_config.get_playground_info_for_languages(
+            const playground_info = realm_playground.get_playground_info_for_languages(
                 fenced_code_lang,
             );
             if (playground_info !== undefined) {

static/js/server_events_dispatch.js

@@ -31,6 +31,7 @@ import * as people from "./people";
 import * as reactions from "./reactions";
 import * as realm_icon from "./realm_icon";
 import * as realm_logo from "./realm_logo";
+import * as realm_playground from "./realm_playground";
 import * as reload from "./reload";
 import * as scroll_bar from "./scroll_bar";
 import * as settings_account from "./settings_account";
@@ -349,6 +350,11 @@ export function dispatch_normal_event(event) {
             settings_linkifiers.populate_linkifiers(page_params.realm_linkifiers);
             break;
 
+        case "realm_playgrounds":
+            page_params.realm_playgrounds = event.realm_playgrounds;
+            realm_playground.update_playgrounds(page_params.realm_playgrounds);
+            break;
+
         case "realm_domains":
             {
                 let i;

static/js/ui_init.js

@@ -45,6 +45,7 @@ import * as panels from "./panels";
 import * as people from "./people";
 import * as pm_conversations from "./pm_conversations";
 import * as presence from "./presence";
+import * as realm_playground from "./realm_playground";
 import * as recent_topics from "./recent_topics";
 import * as reload from "./reload";
 import * as resize from "./resize";
@@ -497,6 +498,7 @@ export function initialize_everything() {
         emoji_codes: generated_emoji_codes,
     });
     markdown.initialize(page_params.realm_linkifiers, markdown_config.get_helpers());
+    realm_playground.initialize(page_params.realm_playgrounds);
     compose.initialize();
     composebox_typeahead.initialize(); // Must happen after compose.initialize()
     search.initialize();

tools/test-js-with-node

@@ -104,6 +104,7 @@ EXEMPT_FILES = {
     "static/js/ready.js",
     "static/js/realm_icon.js",
     "static/js/realm_logo.js",
+    "static/js/realm_playground.js",
     "static/js/recent_topics.js",
     "static/js/reload.js",
     "static/js/reminder.js",