From 51bd3c8c8b971881e6440c8114a7b3db99d63de9 Mon Sep 17 00:00:00 2001
From: Trident Pancake <opensource@emailengine.org>
Date: Sat, 7 Jan 2023 13:33:50 -0800
Subject: [PATCH] typeahead: Show Code Playground entries in composebox
 typeahead.

This addresses #23935.
---
 web/src/composebox_typeahead.js    |  4 +--
 web/src/realm_playground.js        | 18 +++++++++++++
 web/tests/realm_playground.test.js | 41 ++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 web/tests/realm_playground.test.js

diff --git a/web/src/composebox_typeahead.js b/web/src/composebox_typeahead.js
index 5cdf616870..659a0e3cf8 100644
--- a/web/src/composebox_typeahead.js
+++ b/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
diff --git a/web/src/realm_playground.js b/web/src/realm_playground.js
index d42f34b7d7..7132c9624a 100644
--- a/web/src/realm_playground.js
+++ b/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();
 
diff --git a/web/tests/realm_playground.test.js b/web/tests/realm_playground.test.js
new file mode 100644
index 0000000000..6fa21de875
--- /dev/null
+++ b/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,
+    );
+});