Using inline handlebars helpers within translation strings

• I am on the latest ember-intl version
• I have searched the issues of this repo and found issues dating back to a couple of years #102 and #421.

Environment

• Ember Version: 2.16.4
• Ember CLI Version: 2.18.2
• Ember Intl Version: 3.5.0
• Browser(s): Chrome 70
• Node Version: 8.11.1

Steps to Reproduce

I’ve run into a rather interesting problem while working with ember-intl regarding usage of {{helpers}} (and some components) within the translation strings - particularly {{action}}, {{link-to}} and {{input}}. I’m working on a localization project for the first time so I’m not really well versed with conventions regarding internationalization, but I believe having inline actions and links would be a very common scenario. For example, consider the following string:

You can <a href="#" {{action 'allow'}}>allow</a> incoming message notifications 
or <a href="#" {{action 'disable'}}>disable</a> them entirely. You can also {{#link-to 
'settings.notifications' user}}manage notifications{{/link-to}} for your own profile.

Another variant of the above string used extensively within the app I’m working on uses inline {{input}} within the text for some controls, and sometimes even custom components.

Reading the discussions in #102 and #421 seem to suggest that there were discussions for a possible solution to this a couple of years ago but seems like nothing concrete really materialized from them. Are there any current guidelines or best practices for tackling these scenarios since I wasn’t able to figure out the best approach from the documentation?

[mongoose700]

Hello! My team has been using a custom i18n solution, but we’d like to switch to using ember-intl. We have a solution for this called t-split. It can take a translation string like

Text before the link
{{#link}}
  First text in the link
  {{#strong}}text in the strong{{/strong}},
  final text in the link
{{/link}}
text after the link

and be used in the template like this:

{{#t-split "translation.key" as |segment|~}}
  {{~#if (eq segment.key "link")~}}
    <a href="#" {{action "didClickLink"}}>
      {{~#segment.content as |innerSegment|~}}
        {{~#if (eq innerSegment.key "strong")~}}
          <strong>
            {{~innerSegment.content~}}
          </strong>
        {{~/if~}}
      {{~/segment.content~}}
    </a>
  {{~/if~}}
{{~/t-split}}

It finds the special {{#separator}} and {{/separator}} tags in the translation string, converts into the appropriate nested structure, then yields them as nested contextual components. Any text not wrapped in special tags gets rendered automatically, so it only needs to handle the special text.

We could implement the same thing in ember-intl.

[mongoose700]

In cases where there’s only one type of segment that appears in a particular string, you can leave out the ifs.

{{#t-split "translation.key" as |segment|~}}
  <a href="#" {{action "didClickLink"}}>
    {{~#segment.content as |innerSegment|~}}
      <strong>{{innerSegment.content}}</strong>
    {{~/segment.content~}}
  </a>
{{~/t-split}}