typeahead: Show Code Playground entries in composebox typeahead.

This addresses #23935.

web/src/composebox_typeahead.js

@@ -1,7 +1,6 @@
 import $ from "jquery";
 import _ from "lodash";
 
-import pygments_data from "../generated/pygments_data.json";
 import * as typeahead from "../shared/src/typeahead";
 
 import * as compose from "./compose";
@@ -17,6 +16,7 @@ import * as message_store from "./message_store";
 import * as muted_users from "./muted_users";
 import {page_params} from "./page_params";
 import * as people from "./people";
+import * as realm_playground from "./realm_playground";
 import * as rows from "./rows";
 import * as stream_data from "./stream_data";
 import * as stream_topic_history from "./stream_topic_history";
@@ -631,7 +631,7 @@ export function get_candidates(query) {
         }
         this.completing = "syntax";
         this.token = current_token;
-        return Object.keys(pygments_data.langs);
+        return realm_playground.get_pygments_typeahead_list_for_composebox();
     }
 
     // Only start the emoji autocompleter if : is directly after one

web/src/realm_playground.js

@@ -1,3 +1,4 @@
+import generated_pygments_data from "../generated/pygments_data.json";
 import * as typeahead from "../shared/src/typeahead";
 
 import {$t} from "./i18n";
@@ -42,6 +43,23 @@ export function sort_pygments_pretty_names_by_priority(generated_pygments_data)
     }
 }
 
+// This gets the candidate list for showing autocomplete for a code block in
+// the composebox. The candidate list will include pygments data as well as any
+// Code Playgrounds.
+//
+// May return duplicates, since it's common for playground languages
+// to also be pygments languages! retain_unique_language_aliases will
+// deduplicate them.
+export function get_pygments_typeahead_list_for_composebox() {
+    const playground_pygment_langs = [...map_language_to_playground_info.keys()];
+    const generated_pygment_langs = Object.keys(generated_pygments_data.langs);
+
+    return playground_pygment_langs.concat(generated_pygment_langs);
+}
+
+// This gets the candidate list for showing autocomplete in settings when
+// adding a new Code Playground. This will not include existing Code
+// Playgrounds in the candidate list.
 export function get_pygments_typeahead_list_for_settings(query) {
     const language_labels = new Map();
 

web/tests/realm_playground.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+const {strict: assert} = require("assert");
+
+const {zrequire} = require("./lib/namespace");
+const {run_test} = require("./lib/test");
+
+const pygments_data = zrequire("../generated/pygments_data.json");
+
+const realm_playground = zrequire("realm_playground");
+
+run_test("get_pygments_typeahead_list_for_composebox", () => {
+    // When no Code Playground is configured, the list of candidates should
+    // include everything in pygments_data, but nothing more. Order doesn't
+    // matter.
+    let candidates = realm_playground.get_pygments_typeahead_list_for_composebox();
+    assert.ok(Object.keys(pygments_data.langs).every((value) => candidates.includes(value)));
+    assert.equal(candidates.length, Object.keys(pygments_data.langs).length);
+
+    const custom_pygment_language = "Custom_lang";
+    const playground_data = [
+        {
+            id: 2,
+            name: "Custom Lang",
+            pygments_language: custom_pygment_language,
+            url_prefix: "https://example.com/?q=",
+        },
+    ];
+    realm_playground.initialize(playground_data, pygments_data);
+
+    // Verify that Code Playground's pygments_language shows up in the result.
+    // As well as all of pygments_data. Order doesn't matter and the result
+    // shouldn't include anything else.
+    candidates = realm_playground.get_pygments_typeahead_list_for_composebox();
+    assert.ok(Object.keys(pygments_data.langs).every((value) => candidates.includes(value)));
+    assert.ok(candidates.includes(custom_pygment_language));
+    assert.equal(
+        candidates.length,
+        Object.keys(pygments_data.langs).length + playground_data.length,
+    );
+});