Repository: louislam/uptime-kuma
File: src/components/notifications/Telegram.vue (Vue)

Code before:
            </i18n-t>

            <select
                id="message_parse_mode"
                v-model="$parent.notification.telegramTemplateParseMode"
                class="form-select"
                required
            >
                <option value="plain">{{ $t("Plain Text") }}</option>
                <option value="HTML">HTML</option>
                <option value="MarkdownV2">MarkdownV2</option>
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label" for="message_parse_mode">{{ $t("Template") }}</label>

            <div class="form-text mb-3">
                <i18n-t tag="div" keypath="liquidIntroduction">
                    <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
                </i18n-t>

                <code v-pre>{{ msg }}</code>: {{ $t("templateMsg") }}<br />
                <code v-pre>{{ heartbeatJSON }}</code>: {{ $t("templateHeartbeatJSON") }} <b>({{ $t("templateLimitedToUpDownNotifications") }})</b><br />
                <code v-pre>{{ monitorJSON }}</code>: {{ $t("templateMonitorJSON") }} <b>({{ $t("templateLimitedToUpDownCertNotifications") }})</b><br />
            </div>

            <textarea
                id="message_template"
                v-model="$parent.notification.telegramTemplate"
                class="form-control mb-3"
                :placeholder="telegramMessageTemplatePlaceholder"
                required
            ></textarea>
        </div>
    </template>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
        </div>

        <div class="form-text">
            {{ $t("telegramSendSilentlyDescription") }}
        </div>
    </div>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramProtectContent" class="form-check-input" type="checkbox">

Review comment (suggestion):
Please move the related code to a single `TemplatedTextArea` component.
Not doing this in webhooks and smtp was a bit of code smell, but when there are 3, this gets towards being a problem.

Please also adjust smtp and webhook with this new component

Code after:
                class="form-select"
                required
            >
                <option value="plain">{{ $t("Plain Text") }}</option>
                <option value="HTML">HTML</option>
                <option value="MarkdownV2">MarkdownV2</option>
            </select>
            <i18n-t tag="p" keypath="telegramTemplateFormatDescription" class="form-text">
                <a href="https://core.telegram.org/bots/api#formatting-options" target="_blank">{{ $t("documentation") }}</a>
            </i18n-t>

            <label class="form-label" for="message_template">{{ $t('Message Template') }}</label>
            <TemplatedTextarea id="message_template" v-model="$parent.notification.telegramTemplate" :required="true" :placeholder="telegramTemplatedTextareaPlaceholder"></TemplatedTextarea>
        </div>
    </template>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
        </div>

        <div class="form-text">
            {{ $t("telegramSendSilentlyDescription") }}
        </div>
    </div>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramProtectContent" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("telegramProtectContent") }}</label>
        </div>

        <div class="form-text">
            {{ $t("telegramProtectContentDescription") }}
        </div>
    </div>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";
import TemplatedTextarea from "../TemplatedTextarea.vue";
import axios from "axios";

export default {
    components: {
        HiddenInput,
        TemplatedTextarea,
    },
    computed: {
        telegramTemplatedTextareaPlaceholder() {