web/src/compose_ui.ts - main - githubmirror/zulip

web/src/compose_ui.ts
1 808 строк70 KB
Shubham Padia
compose_ui: Don't let edit boxes overwrite compose_textarea_typeahead.
04 авг 2026, 08:40
04 авг 2026, 08:40966a325
/* Compose box module responsible for manipulating the compose box
   textarea correctly. */

import autosize from "autosize";
import {$} from "jquery";
import _ from "lodash";
import assert from "minimalistic-assert";
import {
    insertTextIntoField,
    replaceFieldText,
    setFieldText,
    wrapFieldSelection,
} from "text-field-edit";
import * as z from "zod/mini";

import type {Typeahead} from "./bootstrap_typeahead.ts";
import * as bulleted_numbered_list_util from "./bulleted_numbered_list_util.ts";
import * as channel from "./channel.ts";
import * as common from "./common.ts";
import * as compose_state from "./compose_state.ts";
import type {TypeaheadSuggestion} from "./composebox_typeahead.ts";
import {$t, $t_html} from "./i18n.ts";
import * as linkifiers from "./linkifiers.ts";
import * as loading from "./loading.ts";
import * as markdown from "./markdown.ts";
import {message_render_response_schema} from "./message_store.ts";
import * as people from "./people.ts";
import {postprocess_content} from "./postprocess_content.ts";
import * as rendered_markdown from "./rendered_markdown.ts";
import {get_retry_backoff_seconds} from "./retry_backoff.ts";
import * as rtl from "./rtl.ts";
import {current_user} from "./state_data.ts";
import * as stream_data from "./stream_data.ts";
import * as user_status from "./user_status.ts";
import * as util from "./util.ts";

export const DEFAULT_COMPOSE_PLACEHOLDER = $t({defaultMessage: "Compose your message here"});

export type ComposeTriggeredOptions = {
    trigger: string;
    defer_focus?: boolean | undefined;
} & (
    | {
          message_type: "stream";
          topic: string;
          stream_id?: number | undefined;
      }
    | {
          message_type: "private";
          private_message_recipient_ids: number[];
      }
);
export type ComposePlaceholderOptions =
    | {
          message_type: "stream";
          stream_id: number | undefined;
          topic: string;
      }
    | {
          message_type: "private";
          direct_message_user_ids: number[];
      };
type SelectedLinesSections = {
    before_lines: string;
    separating_new_line_before: boolean;
    selected_lines: string;
    separating_new_line_after: boolean;
    after_lines: string;
};

export let compose_spinner_visible = false;

export function rewire_compose_spinner_visible(value: typeof compose_spinner_visible): void {
    compose_spinner_visible = value;
}

export let shift_pressed = false; // true or false
export let code_formatting_button_triggered = false; // true or false
export let compose_textarea_typeahead: Typeahead<TypeaheadSuggestion> | undefined;
let full_size_status = false; // true or false
let expanded_status = false; // true or false

export function maybe_set_compose_textarea_typeahead(
    typeahead: Typeahead<TypeaheadSuggestion>,
): void {
    // initialize_compose_typeahead also creates the typeaheads for
    // message-edit boxes; ignore those so that this variable always
    // points at the main compose box's typeahead.
    if (!typeahead.input_element.$element.is("textarea#compose-textarea")) {
        return;
    }
    compose_textarea_typeahead = typeahead;
}

export function set_code_formatting_button_triggered(value: boolean): void {
    code_formatting_button_triggered = value;
}

// Some functions to handle the expanded status explicitly
export function set_expanded_status(is_expanded: boolean, is_full = is_expanded): void {
    expanded_status = is_expanded;
    full_size_status = is_full;
    // Show typeahead at bottom of textarea on compose full size.
    if (compose_textarea_typeahead) {
        compose_textarea_typeahead.dropup = !is_full;
    }
}

export function is_expanded(): boolean {
    return expanded_status;
}

export function is_full_size(): boolean {
    return full_size_status;
}

export let autosize_textarea = ($textarea: JQuery<HTMLTextAreaElement>): void => {
    // Since this supports both compose and file upload, one must pass
    // in the text area to autosize.
    if (!is_expanded()) {
        autosize.update($textarea);
    }
};

export function rewire_autosize_textarea(value: typeof autosize_textarea): void {
    autosize_textarea = value;
}

export let insert_and_scroll_into_view = (
    content: string,
    $textarea: JQuery<HTMLTextAreaElement>,
    replace_all = false,
    replace_all_without_undo_support = false,
): void => {
    if (replace_all_without_undo_support) {
        // setFieldText is very slow and noticeable when inserting 10k+
        // characters of text like from a drafted response,
        // but we use it since we want to support `undo`. If we don't want
        // to support `undo`, we can use a faster method.
        $textarea.val(content);
    } else if (replace_all) {
        setFieldText(util.the($textarea), content);
    } else {
        insertTextIntoField(util.the($textarea), content);
    }
    // Blurring and refocusing ensures the cursor / selection is in view
    // in chromium browsers.
    $textarea.trigger("blur");
    $textarea.trigger("focus");
    autosize_textarea($textarea);
};

export function rewire_insert_and_scroll_into_view(
    value: typeof insert_and_scroll_into_view,
): void {
    insert_and_scroll_into_view = value;
}

export function maybe_show_scrolling_formatting_buttons(container_selector: string): void {
    const button_container = document.querySelector(container_selector);
    const button_bar = document.querySelector(
        `${container_selector} .compose-control-buttons-container`,
    );

    if (!button_container || !button_bar) {
        return;
    }

    const button_container_width = button_container?.clientWidth;
    const button_bar_width = button_bar?.scrollWidth;
    const button_bar_scroll_left = button_bar?.scrollLeft;

    const button_bar_max_left_scroll = button_bar_width - button_container_width;

    assert(
        typeof button_container_width === "number" &&
            typeof button_bar_width === "number" &&
            typeof button_bar_scroll_left === "number",
    );

    // Set these values as data attributes for ready access by
    // other scrolling logic
    button_container.setAttribute("data-button-container-width", button_container_width.toString());
    button_container.setAttribute("data-button-bar-width", button_bar_width.toString());
    button_container.setAttribute(
        "data-button-bar-max-left-scroll",
        button_bar_max_left_scroll.toString(),
    );

    button_container.classList.remove("can-scroll-forward", "can-scroll-backward");

    if (button_container_width < button_bar_width) {
        // It's possible that the buttons may be scrolled prior
        // to the viewport being resized
        if (button_bar_scroll_left < button_bar_max_left_scroll) {
            button_container?.classList.add("can-scroll-forward");
        }

        if (button_bar_scroll_left > 0) {
            button_container?.classList.add("can-scroll-backward");
        }
    }
}

function get_focus_area(opts: ComposeTriggeredOptions): string {
    // Set focus to "Topic" when narrowed to a stream+topic
    // and "Start new conversation" button clicked.
    if (
        opts.message_type === "stream" &&
        opts.stream_id &&
        !opts.topic &&
        !stream_data.can_use_empty_topic(opts.stream_id)
    ) {
        return "input#stream_message_recipient_topic";
    }
    if (
        (opts.message_type === "stream" && opts.stream_id !== undefined) ||
        (opts.message_type === "private" && opts.private_message_recipient_ids.length > 0)
    ) {
        if (
            opts.trigger === "clear topic button" ||
            opts.trigger === "compose_hotkey" ||
            opts.trigger === "inbox_nofocus" ||
            opts.trigger === "zoomed new topic"
        ) {
            return "input#stream_message_recipient_topic";
        }
        return "textarea#compose-textarea";
    }

    if (opts.message_type === "stream") {
        return "#compose_select_recipient_widget_wrapper";
    }
    return "#private_message_recipient";
}

// Export for testing
export const _get_focus_area = get_focus_area;

export function set_focus(opts: ComposeTriggeredOptions): void {
    // Called mainly when opening the compose box or switching the
    // message type to set the focus in the first empty input in the
    // compose box.
    if (window.getSelection()!.toString() === "" || opts.trigger !== "message click") {
        const focus_area = get_focus_area(opts);
        $(focus_area).trigger("focus");
    }
}

export let smart_insert_inline = ($textarea: JQuery<HTMLTextAreaElement>, syntax: string): void => {
    function is_space(c: string | undefined): boolean {
        return c === " " || c === "\t" || c === "\n";
    }

    const pos = $textarea.caret();
    const before_str = $textarea.val()!.slice(0, pos);
    const after_str = $textarea.val()!.slice(pos);

    if (
        pos > 0 &&
        // If there isn't space either at the end of the content
        // before the insert or (unlikely) at the start of the syntax,
        // add one.
        !is_space(before_str.slice(-1)) &&
        !is_space(syntax[0])
    ) {
        syntax = " " + syntax;
    }

    // If there isn't whitespace either at the end of the syntax or the
    // start of the content after the syntax, add one.
    if (!(
        (after_str.length > 0 && is_space(after_str[0])) ||
        (syntax.length > 0 && is_space(syntax.slice(-1)))
    )) {
        syntax += " ";
    }

    insert_and_scroll_into_view(syntax, $textarea);
};

export function rewire_smart_insert_inline(value: typeof smart_insert_inline): void {
    smart_insert_inline = value;
}

export function smart_insert_block(
    $textarea: JQuery<HTMLTextAreaElement>,
    syntax: string,
    padding_newlines = 2,
): void {
    const pos = $textarea.caret();
    const before_str = $textarea.val()!.slice(0, pos);
    const after_str = $textarea.val()!.slice(pos);

    if (pos > 0) {
        // Insert newline/s before the content block if there is
        // already some content in the compose box and the content
        // block is not being inserted at the beginning, such
        // that there are at least padding_newlines number of new
        // lines between the content and start of the content block.
        let new_lines_before_count = 0;
        let current_pos = pos - 1;
        while (
            current_pos >= 0 &&
            before_str.charAt(current_pos) === "\n" &&
            new_lines_before_count < padding_newlines
        ) {
            // count up to padding_newlines number of new lines before cursor
            current_pos -= 1;
            new_lines_before_count += 1;
        }
        const new_lines_needed_before_count = padding_newlines - new_lines_before_count;
        syntax = "\n".repeat(new_lines_needed_before_count) + syntax;
    }

    let new_lines_after_count = 0;
    let current_pos = 0;
    while (
        current_pos < after_str.length &&
        after_str.charAt(current_pos) === "\n" &&
        new_lines_after_count < padding_newlines
    ) {
        // count up to padding_newlines number of new lines after cursor
        current_pos += 1;
        new_lines_after_count += 1;
    }
    // Insert newline/s after the content block, such that there
    // are at least padding_newlines number of new lines between
    // the content block and the content after the cursor, if any.
    const new_lines_needed_after_count = padding_newlines - new_lines_after_count;
    syntax += "\n".repeat(new_lines_needed_after_count);

    insert_and_scroll_into_view(syntax, $textarea);
}

export let insert_syntax_and_focus = (
    syntax: string,
    $textarea = $<HTMLTextAreaElement>("textarea#compose-textarea"),
    mode = "inline",
    padding_newlines?: number,
): void => {
    // Generic helper for inserting syntax into the main compose box
    // where the cursor was and focusing the area.  Mostly a thin
    // wrapper around smart_insert_inline and smart_inline_block.
    //
    // We focus the textarea first. In theory, we could let the
    // `insert` function of text-area-edit take care of this, since it
    // will focus the target element before manipulating it.
    //
    // But it unfortunately will blur it afterwards if the original
    // focus was something else, which is not behavior we want, so we
    // just focus the textarea in question ourselves before calling
    // it.
    $textarea.trigger("focus");

    if (mode === "inline") {
        smart_insert_inline($textarea, syntax);
    } else if (mode === "block") {
        smart_insert_block($textarea, syntax, padding_newlines);
    }
};

export function rewire_insert_syntax_and_focus(value: typeof insert_syntax_and_focus): void {
    insert_syntax_and_focus = value;
}

export let replace_syntax = (
    old_syntax: string,
    new_syntax: string,
    $textarea = $<HTMLTextAreaElement>("textarea#compose-textarea"),
    ignore_caret = false,
): boolean => {
    // The following couple lines are needed to later restore the initial
    // logical position of the cursor after the replacement
    const prev_caret = $textarea.caret();
    const replacement_offset = $textarea.val()!.indexOf(old_syntax);

    // Replaces `old_syntax` with `new_syntax` text in the compose box. Due to
    // the way that JavaScript handles string replacements, if `old_syntax` is
    // a string it will only replace the first instance. If `old_syntax` is
    // a RegExp with a global flag, it will replace all instances.

    // We need use anonymous function for `new_syntax` to avoid JavaScript's
    // replace() function treating `$`s in new_syntax as special syntax.  See
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Description
    // for details.

    const old_text = $textarea.val();
    replaceFieldText(util.the($textarea), old_syntax, () => new_syntax, "after-replacement");
    const new_text = $textarea.val();
    const has_changed = old_text !== new_text;

    // If the caller wants to ignore the caret position, we return early.
    // This is useful e.g. when we are replacing content without affecting
    // which element has focus.
    if (ignore_caret) {
        return has_changed;
    }

    // When replacing content in a textarea, we need to move the cursor
    // to preserve its logical position if and only if the content we
    // just added was before the current cursor position. If it was,
    // we need to move the cursor forward by the increase in the
    // length of the content after the replacement.
    if (prev_caret >= replacement_offset + old_syntax.length) {
        $textarea.caret(prev_caret + new_syntax.length - old_syntax.length);
    } else if (prev_caret > replacement_offset) {
        // In the rare case that our cursor was inside the
        // placeholder, we treat that as though the cursor was
        // just after the placeholder.
        $textarea.caret(replacement_offset + new_syntax.length + 1);
    } else {
        // Otherwise we simply restore it to it's original position
        $textarea.caret(prev_caret);
    }

    // Return if anything was actually replaced.
    return has_changed;
};

export function rewire_replace_syntax(value: typeof replace_syntax): void {
    replace_syntax = value;
}

export function compute_placeholder_text(opts: ComposePlaceholderOptions): string {
    // Computes clear placeholder text for the compose box, depending
    // on what heading values have already been filled out.
    //
    // We return text with the stream and topic name unescaped,
    // because the caller is expected to insert this into the
    // placeholder field in a way that does HTML escaping.
    if (opts.message_type === "stream") {
        let stream_name = "";
        if (opts.stream_id !== undefined) {
            const stream = stream_data.get_sub_by_id(opts.stream_id);
            if (stream !== undefined) {
                stream_name = stream.name;
            }
        }

        // The following block of code will do nothing if the channel is
        // not selected as the placeholder in that case will be "Compose your message here".
        let topic_display_name: string | undefined;
        if (opts.topic !== "") {
            topic_display_name = opts.topic;
        } else if (
            stream_data.can_use_empty_topic(opts.stream_id) &&
            !$("input#stream_message_recipient_topic").is(":focus")
        ) {
            topic_display_name = util.get_final_topic_display_name(opts.topic);
        }

        if (stream_name && topic_display_name !== undefined) {
            return $t(
                {defaultMessage: "Message #{channel_name} > {topic_name}"},
                {channel_name: stream_name, topic_name: topic_display_name},
            );
        }
        if (stream_name) {
            return $t({defaultMessage: "Message #{channel_name}"}, {channel_name: stream_name});
        }
    } else if (opts.direct_message_user_ids.length > 0) {
        const user_ids = opts.direct_message_user_ids;
        if (people.is_direct_message_conversation_with_self(user_ids)) {
            return $t({defaultMessage: "Write yourself a note"});
        }
        const users = people.get_users_from_ids(user_ids);
        const recipient_parts = users.map((user) => {
            if (people.should_add_guest_user_indicator(user.user_id)) {
                return $t({defaultMessage: "{name} (guest)"}, {name: user.full_name});
            }
            return user.full_name;
        });
        const recipient_names = util.format_array_as_list(recipient_parts, "long", "conjunction");

        if (users.length === 1 && users[0] !== undefined) {
            // If it's a single user, display status text if available
            const user = users[0];
            const status = user_status.get_status_text(user.user_id);
            if (status) {
                return $t(
                    {defaultMessage: "Message {recipient_name} ({recipient_status})"},
                    {recipient_name: recipient_names, recipient_status: status},
                );
            }
        }
        return $t({defaultMessage: "Message {recipient_names}"}, {recipient_names});
    }
    return DEFAULT_COMPOSE_PLACEHOLDER;
}

export let set_compose_box_top = (set_top: boolean): void => {
    if (set_top) {
        // As `#compose` has `position: fixed` property, we cannot
        // make the compose-box to attain the correct height just by
        // using CSS. If that wasn't the case, we could have somehow
        // refactored the HTML so as to consider only the space below
        // below the `#navbar_alerts` as `height: 100%` of `#compose`.
        const compose_top = $("#navbar-fixed-container").height();
        $("#compose").css("top", compose_top + "px");
    } else {
        $("#compose").css("top", "");
    }
};

export function rewire_set_compose_box_top(value: typeof set_compose_box_top): void {
    set_compose_box_top = value;
}

export function make_compose_box_full_size(): void {
    set_expanded_status(true);

    // The autosize should be destroyed for the full size compose
    // box else it will interfere and shrink its size accordingly.
    autosize.destroy($("textarea#compose-textarea"));

    $("#compose").removeClass("compose-intermediate");
    $("#compose").removeClass("automatically-expanded");
    $("#compose").addClass("compose-fullscreen");

    // Set the `top` property of compose-box.
    set_compose_box_top(true);

    $("#scroll-to-bottom-button-container").removeClass("show");
    $("textarea#compose-textarea").trigger("focus");
}

export function make_compose_box_intermediate_size(): void {
    set_expanded_status(true, false);

    // The autosize should be destroyed for the intermediate size compose
    // box else it will interfere and shrink its size accordingly.
    autosize.destroy($("textarea#compose-textarea"));

    $("#compose").removeClass("compose-fullscreen");
    $("#compose").removeClass("automatically-expanded");
    $("#compose").addClass("compose-intermediate");

    // Unset the `top` property of compose-box.
    set_compose_box_top(false);

    $("textarea#compose-textarea").trigger("focus");
}

export function make_compose_box_original_size(): void {
    set_expanded_status(false);

    $("#compose").removeClass("compose-fullscreen");
    $("#compose").removeClass("compose-intermediate");
    $("#compose").removeClass("automatically-expanded");

    // Unset the `top` property of compose-box.
    set_compose_box_top(false);

    // Again initialise the compose textarea as it was destroyed
    // when compose box was made full screen
    const $compose_textarea = $<HTMLTextAreaElement>("textarea#compose-textarea");
    autosize($compose_textarea);

    // If the preview area is open, reset the min-height for it to
    // ensure a smooth back-and-forth for toggling preview mode.
    const $preview_message_area = $("#compose .preview_message_area");
    if ($preview_message_area.length > 0) {
        const edit_height = $compose_textarea.height();
        $preview_message_area.css({"min-height": edit_height + "px"});
    }
    $compose_textarea.trigger("focus");
}

export function handle_scrolling_formatting_buttons(event: JQuery.ScrollEvent): void {
    event.stopPropagation();
    const $button_bar = $(event.currentTarget);
    const $button_container = $button_bar.closest(".compose-scrolling-buttons-container");
    const button_bar_max_left_scroll = Number(
        $button_container.attr("data-button-bar-max-left-scroll"),
    );
    const button_bar_left_scroll = $button_bar.scrollLeft();

    // If we're within 4px of the start or end of the formatting buttons,
    // go ahead and hide the respective scrolling button
    const hide_scroll_button_threshold_px = 4;

    $button_container.addClass("can-scroll-forward can-scroll-backward");

    assert(typeof button_bar_left_scroll === "number");

    if (button_bar_left_scroll >= button_bar_max_left_scroll - hide_scroll_button_threshold_px) {
        $button_container.removeClass("can-scroll-forward");
    }
    if (button_bar_left_scroll <= hide_scroll_button_threshold_px) {
        $button_container.removeClass("can-scroll-backward");
    }
}

export function handle_list_indent(
    $textarea: JQuery<HTMLTextAreaElement>,
    increase: boolean,
): boolean {
    const elem = $textarea[0]!;
    const val = elem.value;
    const start = elem.selectionStart;
    const end = elem.selectionEnd;

    const line_start = val.lastIndexOf("\n", start - 1) + 1;
    const line_end_idx = val.indexOf("\n", end);
    const line_end = line_end_idx === -1 ? val.length : line_end_idx;
    const selected_block = val.slice(line_start, line_end);
    const original_lines = selected_block.split("\n");
    const lines = [...original_lines];
    let changed = false;
    let changed_count = 0;
    let is_list_context = false;

    for (let i = 0; i < lines.length; i += 1) {
        const line = lines[i]!;
        if (!bulleted_numbered_list_util.is_list_item(line)) {
            continue;
        }
        is_list_context = true;
        if (increase) {
            lines[i] = "  " + line;
            changed = true;
            changed_count += 1;
        } else if (line.startsWith(" ")) {
            lines[i] = line.startsWith("  ") ? line.slice(2) : line.slice(1);
            changed = true;
            changed_count += line.startsWith("  ") ? 2 : 1;
        }
    }

    if (!changed) {
        return is_list_context;
    }

    const new_block = lines.join("\n");
    const new_val = val.slice(0, line_start) + new_block + val.slice(line_end);
    setFieldText(elem, new_val);

    let start_offset = 0;
    if (lines[0] !== original_lines[0]) {
        if (increase) {
            start_offset = 2;
        } else {
            start_offset = original_lines[0]!.startsWith("  ") ? -2 : -1;
        }
    }
    const end_offset = increase ? changed_count * 2 : -changed_count;

    elem.setSelectionRange(
        Math.max(line_start, start + start_offset),
        Math.max(line_start, end + end_offset),
    );
    return true;
}

export function handle_keydown(
    event: JQuery.KeyboardEventBase,
    $textarea: JQuery<HTMLTextAreaElement>,
): void {
    if (event.key === "Shift") {
        shift_pressed = true;
    }
    // The event.key property will have uppercase letter if
    // the "Shift + <key>" combo was used or the Caps Lock
    // key was on. We turn to key to lowercase so the key bindings
    // work regardless of whether Caps Lock was on or not.
    const key = event.key.toLowerCase();
    let type;
    if (key === "b") {
        type = "bold";
    } else if (key === "i" && !event.shiftKey) {
        type = "italic";
    } else if (key === "l" && event.shiftKey) {
        type = "link";
    } else if (key === "c" && event.shiftKey) {
        type = "code";
    }

    // detect Cmd and Ctrl key
    const isCmdOrCtrl = common.has_mac_keyboard() ? event.metaKey : event.ctrlKey;

    if (type && isCmdOrCtrl) {
        format_text($textarea, type);
        autosize_textarea($textarea);
        event.preventDefault();
    }

    if (isCmdOrCtrl && (key === "]" || key === "[")) {
        if (handle_list_indent($textarea, key === "]")) {
            event.preventDefault();
            event.stopPropagation();
        }

        return;
    }
}

export function handle_keyup(
    _event: JQuery.KeyboardEventBase | null,
    $textarea: JQuery<HTMLTextAreaElement>,
): void {
    if (_event?.key === "Shift") {
        shift_pressed = false;
    }
    // Set the rtl class if the text has an rtl direction, remove it otherwise
    rtl.set_rtl_class_for_textarea($textarea);
}

/**
 * True if the cursor in `$textarea` for the current line sits between an opening run
 * of backticks (`, ```, ...) and its still‑missing matching closer
 * where the cursor is placed.
 */
export function cursor_inside_inline_code_span($textarea: JQuery<HTMLTextAreaElement>): boolean {
    const text_area_element = $textarea[0];
    if (!text_area_element) {
        return false;
    }
    // jQuery.val() can be string | number | string[] | undefined.
    const val = $textarea.val();
    assert(typeof val === "string");
    const caret = text_area_element.selectionStart;

    const last_newline = val.lastIndexOf("\n", caret - 1);
    const line_start = last_newline === -1 ? 0 : last_newline + 1;
    const current_line_prefix = val.slice(line_start, caret);

    let open_backtick_count = 0;
    for (let i = 0; i < current_line_prefix.length; i += 1) {
        if (current_line_prefix[i] === "`") {
            let consecutive_count = 1;
            while (i + 1 < current_line_prefix.length && current_line_prefix[i + 1] === "`") {
                consecutive_count += 1;
                i += 1;
            }

            // A code span can be opened with any number of consecutive backticks,
            // and can only be closed with the same number of consecutive backticks.
            if (open_backtick_count === 0) {
                open_backtick_count = consecutive_count;
            } else if (consecutive_count === open_backtick_count) {
                open_backtick_count = 0;
            }
        }
    }
    return open_backtick_count > 0;
}

export function cursor_inside_code_block($textarea: JQuery<HTMLTextAreaElement>): boolean {
    // Returns whether the cursor is at a point that would be inside
    // a code block on rendering the textarea content as markdown.
    const cursor_position = $textarea.caret();
    const current_content = $textarea.val()!;

    return position_inside_code_block(current_content, cursor_position);
}

export function position_inside_code_block(content: string, position: number): boolean {
    let unique_insert = "UNIQUEINSERT:" + Math.random();
    while (content.includes(unique_insert)) {
        unique_insert = "UNIQUEINSERT:" + Math.random();
    }
    const unique_insert_content =
        content.slice(0, position) + unique_insert + content.slice(position);
    const rendered_content = markdown.parse_non_message(unique_insert_content);
    const rendered_html = new DOMParser().parseFromString(rendered_content, "text/html");
    const code_blocks = rendered_html.querySelectorAll(":scope pre > code");
    return [...code_blocks].some((code_block) => code_block?.textContent?.includes(unique_insert));
}

// A function with the same name implements this on the Python side.
// Please replicate any changes here to that function as well.
function expand_reverse_template(
    reverse_template: string,
    variables: Record<string, string>,
): string {
    const output: string[] = [];
    let index = 0;
    while (index < reverse_template.length) {
        if (reverse_template.startsWith("{{", index)) {
            output.push("{");
            index += 2;
        } else if (reverse_template.startsWith("}}", index)) {
            output.push("}");
            index += 2;
        } else if (reverse_template[index] === "{") {
            const end_index = reverse_template.indexOf("}", index + 1);
            // This should not fail with a valid reverse_template.
            assert(end_index !== -1);

            const name = reverse_template.slice(index + 1, end_index);
            // This should not fail with a valid reverse_template.
            assert(name !== "");

            const value = variables[name];
            // This should not fail with a valid reverse_template.
            assert(value !== undefined);

            output.push(value);
            index = end_index + 1;
        } else {
            output.push(reverse_template[index]!);
            index += 1;
        }
    }
    return output.join("");
}

function reverse_linkify_segment(segment: string): string | null {
    const linkifier_map = linkifiers.get_linkifier_map();
    for (const [
        pattern,
        {url_template, reverse_template, alternative_url_templates},
    ] of linkifier_map) {
        if (!reverse_template) {
            continue;
        }

        const all_templates = [url_template, ...alternative_url_templates];
        for (const template of all_templates) {
            const template_context = template.match(segment);
            if (!template_context) {
                continue;
            }

            const reversed_text = expand_reverse_template(reverse_template, template_context);
            // Use the RE2JS matcher to verify the reversed text matches the pattern.
            const matcher = pattern.matcher(reversed_text);
            if (!matcher.find()) {
                continue;
            }

            // Validate that expanding the captured groups round-trips to the original URL.
            const named_groups = pattern.namedGroups();
            const context: Record<string, string> = {};
            for (const name of Object.keys(named_groups)) {
                context[name] = matcher.group(name)!;
            }
            const expanded_url = template.expand(context);
            if (expanded_url !== segment) {
                continue;
            }
            return reversed_text;
        }
    }
    return null;
}

export function reverse_linkify_text(text: string): string | null {
    // We keep the spaces around in a capturing group so we can join it later.
    const segments = text.split(/(\s+)/);
    let changed = false;

    for (let i = 0; i < segments.length; i += 1) {
        const segment = segments[i]!;
        if (segment.trim() === "") {
            continue;
        }
        const replacement = reverse_linkify_segment(segment) ?? segment;
        if (replacement !== segment) {
            changed = true;
            segments[i] = replacement;
        }
    }

    return changed ? segments.join("") : null;
}

export let format_text = (
    $textarea: JQuery<HTMLTextAreaElement>,
    type: string,
    inserted_content = "",
): void => {
    const italic_syntax = "*";
    const bold_syntax = "**";
    const bold_and_italic_syntax = "***";
    let is_selected_text_italic = false;
    let is_inner_text_italic = false;
    const field = $textarea.get(0)!;
    let range = $textarea.range();
    let text = $textarea.val()!;
    // Remove new line and space around selected text, except list formatting,
    // where we want to especially preserve any selected new line character
    // before the selected text, as it is conventionally depicted with a highlight
    // at the end of the previous line, which we would like to format.
    const TRIM_ONLY_END_TYPES = ["bulleted", "numbered"];

    let start_trim_length;
    if (TRIM_ONLY_END_TYPES.includes(type)) {
        start_trim_length = 0;
    } else {
        start_trim_length = range.text.length - range.text.trimStart().length;
    }
    const end_trim_length = range.text.length - range.text.trimEnd().length;
    field.setSelectionRange(range.start + start_trim_length, range.end - end_trim_length);
    range = $textarea.range();
    const selected_text = range.text;

    // Check if the selection is already surrounded by syntax
    const is_selection_formatted = (syntax_start: string, syntax_end = syntax_start): boolean =>
        range.start >= syntax_start.length &&
        text.length - range.end >= syntax_end.length &&
        text.slice(range.start - syntax_start.length, range.start) === syntax_start &&
        text.slice(range.end, range.end + syntax_end.length) === syntax_end;

    // Check if selected text itself has syntax inside it.
    const is_inner_text_formatted = (syntax_start: string, syntax_end = syntax_start): boolean =>
        range.length >= syntax_start.length + syntax_end.length &&
        selected_text.startsWith(syntax_start) &&
        selected_text.endsWith(syntax_end);

    const section_off_selected_lines = (): SelectedLinesSections => {
        // Divide all lines of text (separated by `\n`) into those entirely or
        // partially selected, and those before and after these selected lines.
        const before = text.slice(0, range.start);
        const after = text.slice(range.end);
        let separating_new_line_before;
        let closest_new_line_beginning_before_index;
        if (before.includes("\n")) {
            separating_new_line_before = true;
            closest_new_line_beginning_before_index = before.lastIndexOf("\n");
        } else {
            separating_new_line_before = false;
            // The beginning of the entire text acts as a new line.
            closest_new_line_beginning_before_index = -1;
        }
        let separating_new_line_after;
        let closest_new_line_char_after_index;
        if (after.includes("\n")) {
            separating_new_line_after = true;
            closest_new_line_char_after_index =
                after.indexOf("\n") + before.length + selected_text.length;
        } else {
            separating_new_line_after = false;
            // The end of the entire text acts as a new line.
            closest_new_line_char_after_index = text.length;
        }
        // selected_lines neither includes the `\n` character that marks its
        // beginning (which exists if there are before_lines) nor the one
        // that marks its end (which exists if there are after_lines).
        const selected_lines = text.slice(
            closest_new_line_beginning_before_index + 1,
            closest_new_line_char_after_index,
        );
        // before_lines excludes the `\n` character that separates it from selected_lines.
        const before_lines = text.slice(0, Math.max(0, closest_new_line_beginning_before_index));
        // after_lines excludes the `\n` character that separates it from selected_lines.
        const after_lines = text.slice(closest_new_line_char_after_index + 1);
        return {
            before_lines,
            separating_new_line_before,
            selected_lines,
            separating_new_line_after,
            after_lines,
        };
    };

    const format_list = (type: string): void => {
        let is_marked: (line: string) => boolean;
        let strip_marking: (line: string) => string;
        if (type === "bulleted") {
            is_marked = bulleted_numbered_list_util.is_bulleted;
            strip_marking = bulleted_numbered_list_util.strip_bullet;
        } else {
            is_marked = bulleted_numbered_list_util.is_numbered;
            strip_marking = bulleted_numbered_list_util.strip_numbering;
        }
        // We toggle complete lines even when they are partially selected (and just selecting the
        // newline character after a line counts as partial selection too).
        const sections = section_off_selected_lines();
        let {before_lines, selected_lines, after_lines} = sections;
        const {separating_new_line_before, separating_new_line_after} = sections;
        // Blank lines never have markers, so exclude them when deciding whether
        // to mark or unmark. Otherwise a selection containing blank lines would
        // always be detected as "needs marking", causing the marker to be
        // prepended again on every click instead of toggling off.
        const non_blank_lines = selected_lines.split("\n").filter((line) => line.trim() !== "");
        const should_mark =
            non_blank_lines.length === 0 || non_blank_lines.some((line) => !is_marked(line));
        if (should_mark) {
            const lines = selected_lines.split("\n");
            // Only skip blank lines for multi-line selections, where blanks
            // act as spacing between list items. For a single line (including
            // when the cursor is on an empty line with no selection), always
            // insert the list marker so the button is not a noop.
            const skip_blank_lines = lines.length > 1;
            const processed_lines = [];
            let counter = 1;
            for (const line of lines) {
                if (skip_blank_lines && line.trim() === "") {
                    processed_lines.push(line);
                } else {
                    // Strip any existing list marker first, so switching
                    // between bulleted and numbered doesn't stack markers
                    // (e.g. "- x" + numbered click should give "1. x", not
                    // "1. - x").
                    let stripped = line;
                    if (bulleted_numbered_list_util.is_bulleted(line)) {
                        stripped = bulleted_numbered_list_util.strip_bullet(line);
                    } else if (bulleted_numbered_list_util.is_numbered(line)) {
                        stripped = bulleted_numbered_list_util.strip_numbering(line);
                    }
                    if (type === "bulleted") {
                        processed_lines.push("- " + stripped);
                    } else {
                        processed_lines.push(counter + ". " + stripped);
                        counter += 1;
                    }
                }
            }
            selected_lines = processed_lines.join("\n");

            // We always ensure a blank line after the list, as we want
            // a clean separation between the list and the rest of the text, especially
            // when the markdown is rendered.

            // Add blank line between list and rest of text if not already present.
            if (after_lines.length > 0 && after_lines.at(0) !== "\n") {
                after_lines = "\n" + after_lines;
            }
        } else {
            // Unmark all marked lines by removing the marking syntax characters.
            selected_lines = selected_lines
                .split("\n")
                .map((line) => strip_marking(line))
                .join("\n");
        }
        // Restore the separating newlines that were removed by section_off_selected_lines.
        if (separating_new_line_before) {
            before_lines += "\n";
        }
        if (separating_new_line_after) {
            after_lines = "\n" + after_lines;
        }
        text = before_lines + selected_lines + after_lines;
        insert_and_scroll_into_view(text, $textarea, true);
        // If no text was selected, that is, marking was added to the line with the
        // cursor, nothing will be selected and the cursor will remain as it was.
        if (selected_text === "") {
            field.setSelectionRange(
                before_lines.length + selected_lines.length,
                before_lines.length + selected_lines.length,
            );
        } else {
            field.setSelectionRange(
                before_lines.length,
                before_lines.length + selected_lines.length,
            );
        }
    };

    const format = (syntax_start: string, syntax_end = syntax_start): boolean => {
        let linebreak_start = "";
        let linebreak_end = "";
        if (syntax_start.startsWith("\n")) {
            linebreak_start = "\n";
        }
        if (syntax_end.endsWith("\n")) {
            linebreak_end = "\n";
        }
        if (is_selection_formatted(syntax_start, syntax_end)) {
            text =
                text.slice(0, range.start - syntax_start.length) +
                linebreak_start +
                text.slice(range.start, range.end) +
                linebreak_end +
                text.slice(range.end + syntax_end.length);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start - syntax_start.length,
                range.end - syntax_start.length,
            );
            return false;
        }
        if (is_inner_text_formatted(syntax_start, syntax_end)) {
            // Remove syntax inside the selection, if present.
            text =
                text.slice(0, range.start) +
                linebreak_start +
                text.slice(range.start + syntax_start.length, range.end - syntax_end.length) +
                linebreak_end +
                text.slice(range.end);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start,
                range.end - syntax_start.length - syntax_end.length,
            );
            return false;
        }

        // Otherwise, we don't have syntax within or around, so we add it.
        wrapFieldSelection(field, syntax_start, syntax_end);
        return true;
    };

    const format_spoiler = (): void => {
        const spoiler_syntax_start = "```spoiler \n";
        let spoiler_syntax_start_without_break = "```spoiler ";
        let spoiler_syntax_end = "\n```";

        // For when the entire spoiler block (with no header) is selected.
        if (is_inner_text_formatted(spoiler_syntax_start, spoiler_syntax_end)) {
            text =
                text.slice(0, range.start) +
                text.slice(
                    range.start + spoiler_syntax_start.length,
                    range.end - spoiler_syntax_end.length,
                ) +
                text.slice(range.end);
            if (text.startsWith("\n")) {
                text = text.slice(1);
            }
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start,
                range.end - spoiler_syntax_start.length - spoiler_syntax_end.length,
            );
            return;
        }

        // For when the entire spoiler block (with a header) is selected.
        if (is_inner_text_formatted(spoiler_syntax_start_without_break, spoiler_syntax_end)) {
            text =
                text.slice(0, range.start) +
                text.slice(
                    range.start + spoiler_syntax_start_without_break.length,
                    range.end - spoiler_syntax_end.length,
                ) +
                text.slice(range.end);
            if (text.startsWith("\n")) {
                text = text.slice(1);
            }
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start,
                range.end - spoiler_syntax_start_without_break.length - spoiler_syntax_end.length,
            );
            return;
        }

        // For when the text (including the header) inside a spoiler block is selected.
        if (is_selection_formatted(spoiler_syntax_start_without_break, spoiler_syntax_end)) {
            text =
                text.slice(0, range.start - spoiler_syntax_start_without_break.length) +
                selected_text +
                text.slice(range.end + spoiler_syntax_end.length);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start - spoiler_syntax_start_without_break.length,
                range.end - spoiler_syntax_start_without_break.length,
            );
            return;
        }

        // For when only the text inside a spoiler block (without a header) is selected.
        if (is_selection_formatted(spoiler_syntax_start, spoiler_syntax_end)) {
            text =
                text.slice(0, range.start - spoiler_syntax_start.length) +
                selected_text +
                text.slice(range.end + spoiler_syntax_end.length);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start - spoiler_syntax_start.length,
                range.end - spoiler_syntax_start.length,
            );
            return;
        }

        const is_inner_content_selected = (): boolean =>
            range.start >= spoiler_syntax_start.length &&
            text.length - range.end >= spoiler_syntax_end.length &&
            text.slice(range.end, range.end + spoiler_syntax_end.length) === spoiler_syntax_end &&
            text[range.start - 1] === "\n" &&
            text.lastIndexOf(spoiler_syntax_start_without_break, range.start - 1) ===
                text.lastIndexOf("\n", range.start - 2) + 1;

        // For when only the text inside a spoiler block (with a header) is selected.
        if (is_inner_content_selected()) {
            const new_selection_start = text.lastIndexOf(
                spoiler_syntax_start_without_break,
                range.start,
            );
            text =
                text.slice(0, new_selection_start) +
                text.slice(
                    new_selection_start + spoiler_syntax_start_without_break.length,
                    range.start,
                ) +
                selected_text +
                text.slice(range.end + spoiler_syntax_end.length);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                new_selection_start,
                range.end - spoiler_syntax_start_without_break.length,
            );
            return;
        }

        const is_header_selected = (): boolean =>
            range.start >= spoiler_syntax_start_without_break.length &&
            text.slice(range.start - spoiler_syntax_start_without_break.length, range.start) ===
                spoiler_syntax_start_without_break &&
            text.length - range.end >= spoiler_syntax_end.length &&
            text[range.end] === "\n";

        // For when only the header of a spoiler block  is selected.
        if (is_header_selected()) {
            const header = range.text;
            const new_range_end = text.indexOf(spoiler_syntax_end, range.start);
            const new_range_start = header ? range.start : range.start + 1;
            text =
                text.slice(0, range.start - spoiler_syntax_start_without_break.length) +
                text.slice(new_range_start, new_range_end) +
                text.slice(new_range_end + spoiler_syntax_end.length);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                new_range_start - spoiler_syntax_start_without_break.length - (header ? 0 : 1),
                new_range_end - spoiler_syntax_start_without_break.length - (header ? 0 : 1),
            );
            return;
        }

        if (range.start > 0 && text[range.start - 1] !== "\n") {
            spoiler_syntax_start_without_break = "\n" + spoiler_syntax_start_without_break;
        }
        if (range.end < text.length && text[range.end] !== "\n") {
            spoiler_syntax_end += "\n";
        }

        const spoiler_syntax_start_with_header = spoiler_syntax_start_without_break + "Header\n";

        // Otherwise, we don't have spoiler syntax, so we add it.
        wrapFieldSelection(field, spoiler_syntax_start_with_header, spoiler_syntax_end);

        field.setSelectionRange(
            range.start + spoiler_syntax_start_without_break.length,
            range.start + spoiler_syntax_start_with_header.length - 1,
        );
    };

    // Links have to be formatted differently because formatting is not only
    // at the beginning and end of the text, but also in the middle
    // Therefore more checks are necessary if selected text is already formatted
    const format_link = (): void => {
        const link_syntax_start = "[";
        const link_syntax_end = "](url)";

        const space_between_description_and_url = (descr: string, url: string): string => {
            if (descr === "" || url === "" || url === "url") {
                return "";
            }
            return " ";
        };

        const url_to_retain = (url: string): string => {
            if (url === "" || url === "url") {
                return "";
            }
            return url;
        };

        // Captures:
        // [<description>](<url>)
        // with just <url> selected
        const is_selection_url = (): boolean =>
            range.start >= "[](".length &&
            text.length - range.end >= ")".length &&
            text.slice(range.start - 2, range.start) === "](" &&
            text[range.end] === ")" &&
            text.lastIndexOf("[", range.start - 3) < text.lastIndexOf("]", range.start - 2);

        if (is_selection_url()) {
            const beginning = text.lastIndexOf("[", range.start);
            const description = text.slice(beginning + 1, range.start - 2);
            const url = url_to_retain(selected_text);
            text =
                text.slice(0, beginning) +
                description +
                space_between_description_and_url(description, url) +
                url +
                text.slice(range.end + 1);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start - 3 + space_between_description_and_url(description, url).length,
                range.start -
                    3 +
                    space_between_description_and_url(description, url).length +
                    url.length,
            );
            return;
        }

        // Captures:
        // [<description>](<url>)
        // with just <description> selected
        const is_selection_description_of_link = (): boolean =>
            range.start >= "[".length &&
            text.length - range.end >= "]()".length &&
            text.slice(range.start - 1, range.start) === "[" &&
            text.slice(range.end, range.end + 2) === "](" &&
            text.includes(")", range.end + 2) &&
            (text.includes("(", range.end + 2)
                ? text.indexOf(")", range.end + 2) < text.indexOf("(", range.end + 2)
                : true);

        if (is_selection_description_of_link()) {
            let url = text.slice(range.end + 2, text.indexOf(")", range.end));
            url = url_to_retain(url);
            text =
                text.slice(0, range.start - 1) +
                selected_text +
                space_between_description_and_url(selected_text, url) +
                url +
                text.slice(text.indexOf(")", range.end) + 1);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(range.start - 1, range.end - 1);
            return;
        }

        // Captures:
        // [<description>](<url>)
        // with [<description>](<url>) selected
        const is_selection_link = (): boolean =>
            range.length >= "[]()".length &&
            text[range.start] === "[" &&
            text[range.end - 1] === ")" &&
            text.slice(range.start + 1, range.end - 1).includes("](");

        if (is_selection_link()) {
            const i = selected_text.indexOf("](", 1);
            const description = selected_text.slice(1, i);
            let url = selected_text.slice(i + "](".length, -1);
            url = url_to_retain(url);
            text =
                text.slice(0, range.start) +
                description +
                space_between_description_and_url(description, url) +
                url +
                text.slice(range.end);
            insert_and_scroll_into_view(text, $textarea, true);
            field.setSelectionRange(
                range.start,
                range.start +
                    description.length +
                    space_between_description_and_url(description, url).length +
                    url.length,
            );
            return;
        }

        // Otherwise, we don't have link syntax, so we add it.
        wrapFieldSelection(field, link_syntax_start, link_syntax_end);

        // Highlight the new `url` part of the syntax.
        // If <text> marks the selected region, we're mapping:
        // <text> => [text](<url>).
        const new_start = range.end + "[](".length;
        const new_end = new_start + "url".length;
        field.setSelectionRange(new_start, new_end);
    };

    switch (type) {
        case "bold":
            // Ctrl + B: Toggle bold syntax on selection.
            format(bold_syntax);
            break;
        case "italic":
            // Ctrl + I: Toggle italic syntax on selection. This is
            // much more complex than toggling bold syntax, because of
            // the following subtle detail: If our selection is
            // **foo**, toggling italics should add italics, since in
            // fact it's just bold syntax, even though with *foo* and
            // ***foo*** should remove italics.

            // If the text is already italic, we remove the italic_syntax from text.
            if (range.start >= 1 && text.length - range.end >= italic_syntax.length) {
                // If text has italic_syntax around it.
                const has_italic_syntax =
                    text.slice(range.start - italic_syntax.length, range.start) === italic_syntax &&
                    text.slice(range.end, range.end + italic_syntax.length) === italic_syntax;

                if (is_selection_formatted(bold_syntax)) {
                    // If text has bold_syntax around it.
                    if (
                        range.start > bold_syntax.length &&
                        text.length - range.end >= bold_and_italic_syntax.length
                    ) {
                        // If text is both bold and italic.
                        const has_bold_and_italic_syntax =
                            text.slice(range.start - bold_and_italic_syntax.length, range.start) ===
                                bold_and_italic_syntax &&
                            text.slice(range.end, range.end + bold_and_italic_syntax.length) ===
                                bold_and_italic_syntax;
                        if (has_bold_and_italic_syntax) {
                            is_selected_text_italic = true;
                        }
                    }
                } else if (has_italic_syntax) {
                    // If text is only italic.
                    is_selected_text_italic = true;
                }
            }

            if (is_selected_text_italic) {
                // If text has italic syntax around it, we remove the italic syntax.
                text =
                    text.slice(0, range.start - italic_syntax.length) +
                    text.slice(range.start, range.end) +
                    text.slice(range.end + italic_syntax.length);
                insert_and_scroll_into_view(text, $textarea, true);
                field.setSelectionRange(
                    range.start - italic_syntax.length,
                    range.end - italic_syntax.length,
                );
                break;
            }
            if (
                selected_text.length > italic_syntax.length * 2 &&
                // If the selected text contains italic syntax
                selected_text.startsWith(italic_syntax) &&
                selected_text.endsWith(italic_syntax)
            ) {
                if (is_inner_text_formatted(bold_syntax)) {
                    if (
                        selected_text.length > bold_and_italic_syntax.length * 2 &&
                        selected_text.startsWith(bold_and_italic_syntax) &&
                        selected_text.endsWith(bold_and_italic_syntax)
                    ) {
                        // If selected text is both bold and italic.
                        is_inner_text_italic = true;
                    }
                } else {
                    // If selected text is only italic.
                    is_inner_text_italic = true;
                }
            }

            if (is_inner_text_italic) {
                // We remove the italic_syntax from within the selected text.
                text =
                    text.slice(0, range.start) +
                    text.slice(
                        range.start + italic_syntax.length,
                        range.end - italic_syntax.length,
                    ) +
                    text.slice(range.end);
                insert_and_scroll_into_view(text, $textarea, true);
                field.setSelectionRange(range.start, range.end - italic_syntax.length * 2);
                break;
            }

            wrapFieldSelection(field, italic_syntax);
            break;
        case "bulleted":
        case "numbered":
            format_list(type);
            break;
        case "strikethrough": {
            const strikethrough_syntax = "~~";
            format(strikethrough_syntax);
            break;
        }
        case "code": {
            // Ctrl + Shift + C: Toggle code syntax on selection.
            const inline_code_syntax = "`";
            let block_code_syntax_start = "```\n";
            let block_code_syntax_end = "\n```";
            // If there is no text selected or the selected text is either multiline or
            // already using multiline code syntax, we use multiline code syntax.
            if (
                selected_text === "" ||
                selected_text.includes("\n") ||
                is_selection_formatted(block_code_syntax_start, block_code_syntax_end)
            ) {
                // Add newlines before and after, if not already present.
                if (range.start > 0 && text[range.start - 1] !== "\n") {
                    block_code_syntax_start = "\n" + block_code_syntax_start;
                }
                if (range.end < text.length && text[range.end] !== "\n") {
                    block_code_syntax_end += "\n";
                }
                const added_fence = format(block_code_syntax_start, block_code_syntax_end);
                if (added_fence) {
                    const cursor_after_opening_fence =
                        range.start + block_code_syntax_start.length - 1;
                    field.setSelectionRange(cursor_after_opening_fence, cursor_after_opening_fence);
                    set_code_formatting_button_triggered(true);
                    // Trigger typeahead lookup with a click.
                    field.click();
                }
            } else {
                format(inline_code_syntax);
            }
            break;
        }
        case "link": {
            // Ctrl + L: Insert a link to selected text
            format_link();
            break;
        }
        case "linked": {
            // From a paste event with a URL as inserted content
            wrapFieldSelection(field, "[", `](${inserted_content})`);
            // Put the cursor at the end of the selection range
            // and all wrapped material
            $textarea.caret(range.end + `[](${inserted_content})`.length);
            break;
        }
        case "quote": {
            let quote_syntax_start = "```quote\n";
            let quote_syntax_end = "\n```";
            // Add newlines before and after, if not already present.
            if (range.start > 0 && text[range.start - 1] !== "\n") {
                quote_syntax_start = "\n" + quote_syntax_start;
            }
            if (range.end < text.length && text[range.end] !== "\n") {
                quote_syntax_end += "\n";
            }
            format(quote_syntax_start, quote_syntax_end);
            break;
        }
        case "spoiler":
            format_spoiler();
            break;
        case "latex": {
            const inline_latex_syntax = "$$";
            let block_latex_syntax_start = "```math\n";
            let block_latex_syntax_end = "\n```";
            // If there is no text selected or the selected text is either multiline or
            // already using multiline math syntax, we use multiline math syntax.
            if (
                selected_text === "" ||
                selected_text.includes("\n") ||
                is_selection_formatted(block_latex_syntax_start, block_latex_syntax_end)
            ) {
                // Add newlines before and after, if not already present.
                if (range.start > 0 && text[range.start - 1] !== "\n") {
                    block_latex_syntax_start = "\n" + block_latex_syntax_start;
                }
                if (range.end < text.length && text[range.end] !== "\n") {
                    block_latex_syntax_end += "\n";
                }
                format(block_latex_syntax_start, block_latex_syntax_end);
            } else {
                format(inline_latex_syntax);
            }
            break;
        }
    }
};

export function rewire_format_text(value: typeof format_text): void {
    format_text = value;
}

/* TODO: This functions don't belong in this module, as they have
 * nothing to do with the compose textarea. */
export function hide_compose_spinner(): void {
    compose_spinner_visible = false;
    $(".compose-submit-button .loader").hide();
    $(".compose-submit-button .zulip-icon-send").show();
    $(".compose-submit-button").removeClass("compose-button-disabled");
}

export function show_compose_spinner(): void {
    compose_spinner_visible = true;
    // Always use white spinner.
    loading.show_button_spinner($(".compose-submit-button .loader"), true);
    $(".compose-submit-button .zulip-icon-send").hide();
    $(".compose-submit-button").addClass("compose-button-disabled");
}

let thumbnail_poll_timeout: ReturnType<typeof setTimeout> | null = null;
let pending_thumbnail_paths = new Set<string>();
const MAX_THUMBNAIL_RETRIES = 5;

function extract_thumbnail_paths($preview_content: JQuery): Set<string> {
    const paths = new Set<string>();

    $preview_content.find(".image-loading-placeholder").each(function () {
        const $img = $(this);
        const $link = $img.closest("a");
        const href = $link.attr("href");

        if (href?.startsWith("/user_uploads/")) {
            paths.add(href.slice("/user_uploads/".length));
        }
    });

    return paths;
}

async function check_thumbnail_status(path_id: string): Promise<boolean> {
    const thumbnail_status_schema = z.object({
        has_thumbnail: z.boolean(),
    });

    try {
        const response: unknown = await channel.get({
            url: `/json/thumbnail/status/${path_id}`,
        });
        const data = thumbnail_status_schema.parse(response);
        return data.has_thumbnail;
    } catch {
        return false;
    }
}

async function poll_thumbnail_status(
    $preview_container: JQuery,
    $preview_spinner: JQuery,
    $preview_content_box: JQuery,
    content: string,
    attempt = 1,
): Promise<void> {
    if (attempt > MAX_THUMBNAIL_RETRIES) {
        pending_thumbnail_paths.clear();
        return;
    }

    if (pending_thumbnail_paths.size === 0 || !$preview_container.hasClass("preview_mode")) {
        return;
    }

    // Check all pending thumbnails in parallel
    const thumbnails_to_check = [...pending_thumbnail_paths];
    const thumbnail_status_results = await Promise.all(
        thumbnails_to_check.map(async (path_id) => ({
            path_id,
            ready: await check_thumbnail_status(path_id),
        })),
    );

    // Remove thumbnails that are now ready
    let any_thumbnail_ready = false;
    for (const {path_id, ready} of thumbnail_status_results) {
        if (ready) {
            pending_thumbnail_paths.delete(path_id);
            any_thumbnail_ready = true;
        }
    }

    // We check preview mode again since the user could have exited preview
    // while we were waiting for the thumbnail status
    if ($preview_container.hasClass("preview_mode")) {
        if (any_thumbnail_ready) {
            render_and_show_preview(
                $preview_container,
                $preview_spinner,
                $preview_content_box,
                content,
                false,
            );
            return;
        }

        if (pending_thumbnail_paths.size > 0) {
            const retry_delay_secs = get_retry_backoff_seconds(undefined, attempt, true);
            thumbnail_poll_timeout = setTimeout(() => {
                void poll_thumbnail_status(
                    $preview_container,
                    $preview_spinner,
                    $preview_content_box,
                    content,
                    attempt + 1,
                );
            }, retry_delay_secs * 1000);
        }
    }
}

export function clear_thumbnail_polling(): void {
    if (thumbnail_poll_timeout !== null) {
        clearTimeout(thumbnail_poll_timeout);
        thumbnail_poll_timeout = null;
    }
    pending_thumbnail_paths.clear();
}

// We use this module-level variable to suppress the preview spinner for
// the next render cycle. We need this state because the preview update
// is triggered via a global input event listener when we modify the textarea
// (e.g. cancelling an upload). We cannot pass a "no spinner" argument
// through the standard event chain because the event listener format is fixed.
let prevent_next_spinner = false;

export function set_prevent_next_spinner(value: boolean): void {
    prevent_next_spinner = value;
}

export function enter_preview_mode($container: JQuery): void {
    // Disable unneeded compose_control_buttons as we don't
    // need them in preview mode.
    $container.addClass("preview_mode");
    $container.find(".preview_mode_disabled .compose_control_button").attr("tabindex", -1);

    $container.find(".markdown_preview").hide();
    $container.find(".undo_markdown_preview").show();
    $container.find(".undo_markdown_preview").trigger("focus");
}

export function exit_preview_mode($container: JQuery): void {
    $container.find("textarea.message-textarea").trigger("focus");

    // While in preview mode we disable unneeded compose_control_buttons,
    // so here we are re-enabling those compose_control_buttons
    $container.removeClass("preview_mode");
    $container.find(".preview_mode_disabled .compose_control_button").attr("tabindex", 0);

    $container.find(".undo_markdown_preview").hide();
    $container.find(".preview_message_area").hide();
    $container.find(".preview_content").empty();
    $container.find(".markdown_preview").show();
}

export function render_and_show_preview(
    $preview_container: JQuery,
    $preview_spinner: JQuery,
    $preview_content_box: JQuery,
    content: string,
    show_spinner = true,
): void {
    if (prevent_next_spinner) {
        show_spinner = false;
    }

    const preview_render_count = compose_state.get_preview_render_count() + 1;
    compose_state.set_preview_render_count(preview_render_count);

    function show_preview(rendered_content: string, raw_content?: string): void {
        // content is passed to check for status messages ("/me ...")
        // and will be undefined in case of errors
        let rendered_preview_html;
        if (raw_content !== undefined && markdown.is_status_message(raw_content)) {
            // Handle previews of /me messages
            rendered_preview_html =
                "<p><strong>" +
                _.escape(current_user.full_name) +
                "</strong>" +
                rendered_content.slice("<p>/me".length);
        } else {
            rendered_preview_html = rendered_content;
        }

        $preview_content_box.html(postprocess_content(rendered_preview_html));
        rendered_markdown.update_elements($preview_content_box);

        // Check for thumbnail loading placeholders and start polling
        clear_thumbnail_polling();
        pending_thumbnail_paths = extract_thumbnail_paths($preview_content_box);

        if (pending_thumbnail_paths.size > 0) {
            void poll_thumbnail_status(
                $preview_container,
                $preview_spinner,
                $preview_content_box,
                content,
            );
        }
    }

    if (content.length === 0) {
        show_preview($t_html({defaultMessage: "Nothing to preview"}));
    } else {
        if (markdown.contains_backend_only_syntax(content) && show_spinner) {
            const $spinner = $preview_spinner.expectOne();
            loading.make_indicator($spinner);
        } else {
            // For messages that don't appear to contain syntax that
            // is only supported by our backend Markdown processor, we
            // render using the frontend Markdown processor (but still
            // render server-side to ensure the preview is accurate;
            // if the `markdown.contains_backend_only_syntax` logic is
            // wrong, users will see a brief flicker of the locally
            // echoed frontend rendering before receiving the
            // authoritative backend rendering from the server).
            const rendered_content = markdown.render(content).content;
            show_preview(rendered_content);
        }
        void channel.post({
            url: "/json/messages/render",
            data: {content},
            success(response_data) {
                if (
                    preview_render_count !== compose_state.get_preview_render_count() ||
                    !$preview_container.hasClass("preview_mode")
                ) {
                    // The user is no longer in preview mode or the compose
                    // input has already been updated with new raw Markdown
                    // since this rendering request was sent off to the server, so
                    // there's nothing to do.
                    return;
                }
                const data = message_render_response_schema.parse(response_data);
                if (markdown.contains_backend_only_syntax(content)) {
                    loading.destroy_indicator($preview_spinner);
                }
                show_preview(data.rendered, content);
            },
            error() {
                if (markdown.contains_backend_only_syntax(content)) {
                    loading.destroy_indicator($preview_spinner);
                }
                show_preview($t_html({defaultMessage: "Failed to generate preview"}));
            },
        });
    }
}