# Help with Translation/displaying labels correctly

**URL:** https://meta.discourse.org/t/help-with-translation-displaying-labels-correctly/341250
**Category:** Development
**Created:** [December 8, 2024, 8:08pm UTC](https://meta.discourse.org/t/help-with-translation-displaying-labels-correctly/341250 "2024-12-08T20:08:49Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [December 8, 2024, 8:08pm UTC](https://meta.discourse.org/t/help-with-translation-displaying-labels-correctly/341250/1 "2024-12-08T20:08:49Z")

</div>

I’m trying to create a theme component that adds underlining to the composer toolbar.

I’m able to get it working, the button label is working, however when it’s used it returns

[en.composer.underline\_text]

not the expected

Example Text

I’ve been going around in circles but unable to workout why, anyone got any idea what i’m missing?

Thanks

* * *

api-setup.js

```plaintext
import { apiInitializer } from "discourse/lib/api";
import I18n from "I18n";
import { iconNode } from "discourse-common/lib/icon-library";

export default apiInitializer("0.11.1", (api) => {
  const currentLocale = I18n.currentLocale();

  I18n.translations[currentLocale].js.underline_button_title = settings.underline_button;
  I18n.translations[currentLocale].js.underline_text = settings.underline_text;

  api.onToolbarCreate((toolbar) => {
    const buttons = [
      {
        id: "underline_button",
        group: "fontStyles",
        icon: "underline",
        shortcut: "U",
        title: "underline_button_title",
        perform: (e) => e.applySurround("[u]", "[/u]", "underline_text"),
      },
    ];

    buttons.forEach((button) => toolbar.addButton(button));
  });

  api.decorateCookedElement(
    async (elem, helper) => {
      const id = helper ? `post_${helper.getModel().id}` : "composer";
      applyHighlight(elem, id);
    },
    { id: "wrap-mark" }
  );
});

```

settings.yml

```plaintext
underline_button:
  default: "Underline"
  description:
    en: Enter the text for the title of the button in the composer.
underline_text:
  default: "Example Text"
  description:
    en: Enter the placeholder text that appears in the composer after the user clicks the button.

Svg_icons: 
  type: 'list'
  list_type: 'compact'
  default: 'underline'
  description: 
    en: "Include FontAwesome 6 icon classes for each icon used in the list."

```

en.yml

```plaintext
en:
  js:
    underline_button_title: settings.underline_button
    underline_text: settings.underline_text

```

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [December 8, 2024, 9:20pm UTC](https://meta.discourse.org/t/help-with-translation-displaying-labels-correctly/341250/2 "2024-12-08T21:20:33Z")

</div>

Why do you create the texts as settings instead of putting them directly in en.yml?

> [@Add localizable strings to themes and theme components](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867):
>
> For those looking to add custom languages and translations to a Discourse theme or theme component, they [can now include](https://github.com/discourse/discourse/commit/880311dd4d2b367e54cc8244fba60fce69e121c3) localised strings, which are made available for use in UI components. Translations are stored in the same format as core/plugin translations, and can be used in almost the same way. Themes can supply translation files in a format like /locales/{locale}.yml. These files should be valid YAML, with a single top level key equal to the locale being defined. These can be defined us…

I think [Composer Footnote Button](https://meta.discourse.org/t/composer-footnote-button/243487) is a helpful example

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [December 8, 2024, 11:49pm UTC](https://meta.discourse.org/t/help-with-translation-displaying-labels-correctly/341250/3 "2024-12-08T23:49:45Z")

</div>

Thanks for pointing me in the right direction

Turned out

`I18n.translations[currentLocale].js.underline_text = settings.underline_text;`

should be

`I18n.translations[currentLocale].js.composer.underline_text = settings.underline_text;`

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [January 7, 2025, 11:50pm UTC](https://meta.discourse.org/t/help-with-translation-displaying-labels-correctly/341250/4 "2025-01-07T23:50:12Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.