diff --git a/web/src/composebox_typeahead.js b/web/src/composebox_typeahead.js index bfb0c3aad4..c9e16acdc9 100644 --- a/web/src/composebox_typeahead.js +++ b/web/src/composebox_typeahead.js @@ -65,9 +65,9 @@ export function get_or_set_completing_for_tests(val) { return completing; } -export function update_emoji_data() { +export function update_emoji_data(initial_emojis) { emoji_collection = []; - for (const emoji_dict of emoji.emojis_by_name.values()) { + for (const emoji_dict of initial_emojis) { const {reaction_type} = emoji.get_emoji_details_by_name(emoji_dict.name); if (emoji_dict.is_realm_emoji === true) { emoji_collection.push({ @@ -1184,8 +1184,6 @@ export function initialize_compose_typeahead(selector) { } export function initialize({on_enter_send}) { - update_emoji_data(); - // These handlers are at the "form" level so that they are called after typeahead $("form#send_message_form").on("keydown", (e) => handle_keydown(e, {on_enter_send})); $("form#send_message_form").on("keyup", handle_keyup); diff --git a/web/src/emoji_picker.js b/web/src/emoji_picker.js index 35c36102d5..e0103bf9ff 100644 --- a/web/src/emoji_picker.js +++ b/web/src/emoji_picker.js @@ -9,6 +9,7 @@ import render_emoji_showcase from "../templates/popovers/emoji/emoji_showcase.hb import * as blueslip from "./blueslip"; import * as compose_ui from "./compose_ui"; +import * as composebox_typeahead from "./composebox_typeahead"; import * as emoji from "./emoji"; import * as keydown_util from "./keydown_util"; import * as message_store from "./message_store"; @@ -157,6 +158,14 @@ export function rebuild_catalog() { icon: category.icon, emojis: catalog.get(category.name), })); + const emojis_by_category = complete_emoji_catalog.flatMap((category) => { + if (category.name === "Popular") { + // popular category has repeated emojis in the catalog so we skip it + return []; + } + return category.emojis; + }); + composebox_typeahead.update_emoji_data(emojis_by_category); } const generate_emoji_picker_content = function (id) { diff --git a/web/src/server_events_dispatch.js b/web/src/server_events_dispatch.js index 78e5260522..8aaeba10c8 100644 --- a/web/src/server_events_dispatch.js +++ b/web/src/server_events_dispatch.js @@ -15,7 +15,6 @@ import * as compose_call_ui from "./compose_call_ui"; import * as compose_pm_pill from "./compose_pm_pill"; import * as compose_recipient from "./compose_recipient"; import * as compose_state from "./compose_state"; -import * as composebox_typeahead from "./composebox_typeahead"; import * as dark_theme from "./dark_theme"; import * as emoji from "./emoji"; import * as emoji_picker from "./emoji_picker"; @@ -391,7 +390,6 @@ export function dispatch_normal_event(event) { // And then let other widgets know. settings_emoji.populate_emoji(); emoji_picker.rebuild_catalog(); - composebox_typeahead.update_emoji_data(); break; case "realm_export": diff --git a/web/tests/composebox_typeahead.test.js b/web/tests/composebox_typeahead.test.js index 29c47a30d2..8b46436bd9 100644 --- a/web/tests/composebox_typeahead.test.js +++ b/web/tests/composebox_typeahead.test.js @@ -41,6 +41,7 @@ const typeahead = zrequire("../shared/src/typeahead"); const stream_topic_history = zrequire("stream_topic_history"); const compose_state = zrequire("compose_state"); const emoji = zrequire("emoji"); +const emoji_picker = zrequire("emoji_picker"); const typeahead_helper = zrequire("typeahead_helper"); const muted_users = zrequire("muted_users"); const people = zrequire("people"); @@ -185,12 +186,6 @@ const emojis_by_name = new Map( headphones: emoji_headphones, }), ); -const emoji_list = [...emojis_by_name.values()].map((emoji_dict) => ({ - emoji_name: emoji_dict.name, - emoji_code: emoji_dict.emoji_code, - reaction_type: "unicode_emoji", - is_realm_emoji: false, -})); const me_slash = { name: "me", @@ -259,12 +254,17 @@ for (const [key, val] of emojis_by_name.entries()) { name_to_codepoint[key] = val.emoji_code; } +const codepoint_to_name = {}; +for (const [key, val] of emojis_by_name.entries()) { + codepoint_to_name[val.emoji_code] = key; +} + const emoji_codes = { name_to_codepoint, names: [...emojis_by_name.keys()], emoji_catalog: {}, emoticon_conversions: {}, - codepoint_to_name: {}, + codepoint_to_name, }; emoji.initialize({ @@ -276,6 +276,8 @@ emoji.emojis_by_name.clear(); for (const [key, val] of emojis_by_name.entries()) { emoji.emojis_by_name.set(key, val); } +emoji_picker.rebuild_catalog(); +const emoji_list = composebox_typeahead.emoji_collection; const ali = { email: "ali@zulip.com", @@ -1696,14 +1698,14 @@ test("typeahead_results", () => { } assert_emoji_matches("da", [ { - emoji_name: "tada", - emoji_code: "1f389", + emoji_name: "panda_face", + emoji_code: "1f43c", reaction_type: "unicode_emoji", is_realm_emoji: false, }, { - emoji_name: "panda_face", - emoji_code: "1f43c", + emoji_name: "tada", + emoji_code: "1f389", reaction_type: "unicode_emoji", is_realm_emoji: false, }, diff --git a/web/tests/dispatch.test.js b/web/tests/dispatch.test.js index b6b30b95ef..98fd01b587 100644 --- a/web/tests/dispatch.test.js +++ b/web/tests/dispatch.test.js @@ -29,7 +29,6 @@ const attachments_ui = mock_esm("../src/attachments_ui"); const audible_notifications = mock_esm("../src/audible_notifications"); const bot_data = mock_esm("../src/bot_data"); const compose_pm_pill = mock_esm("../src/compose_pm_pill"); -const composebox_typeahead = mock_esm("../src/composebox_typeahead"); const dark_theme = mock_esm("../src/dark_theme"); const emoji_picker = mock_esm("../src/emoji_picker"); const gear_menu = mock_esm("../src/gear_menu"); @@ -661,7 +660,6 @@ run_test("realm_emoji", ({override}) => { const ui_func_names = [ [settings_emoji, "populate_emoji"], [emoji_picker, "rebuild_catalog"], - [composebox_typeahead, "update_emoji_data"], ]; const ui_stubs = [];