Translate 'htmlelement' component i18n

I have form contains html element how can translate this component For Example :

`

Formio.createForm(document.getElementById(‘formio’), { components: [ { type: ‘textfield’, key: ‘firstName’, label: ‘First Name’, placeholder: ‘Enter your first name’, input: true }, { type: ‘textfield’, key: ‘lastName’, label: ‘Last Name’, placeholder: ‘Enter your last name’, input: true }, { type: ‘survey’, key: ‘questions’, label: ‘Survey’, values: [ { label: ‘Great’, value: ‘great’ }, { label: ‘Good’, value: ‘good’ }, { label: ‘Poor’, value: ‘poor’ } ], questions: [ { label: ‘How would you rate the Form.io platform?’, value: ‘howWouldYouRateTheFormIoPlatform’ }, { label: ‘How was Customer Support?’, value: ‘howWasCustomerSupport’ }, { label: ‘Overall Experience?’, value: ‘overallExperience’ } ] }, { label: ‘Hello’, className: ‘’, content: ‘<div class="well">Hello</div>’, refreshOnChange: false, mask: false, tableView: true, alwaysEnabled: false, type: ‘htmlelement’, input: false, key: ‘html’, placeholder: ‘’ }, { type: ‘button’, action: ‘submit’, label: ‘Submit’, theme: ‘primary’ } ] }, { language: ‘sp’, i18n: { sp: { ‘Hello’:‘Hola Mundo’, ‘First Name’: ‘Nombre de pila’, ‘Last Name’: ‘Apellido’, ‘Enter your first name’: ‘Ponga su primer nombre’, ‘Enter your last name’: ‘Introduce tu apellido’, ‘How would you rate the Form.io platform?’: ‘¿Cómo calificaría la plataforma Form.io?’, ‘How was Customer Support?’: ‘¿Cómo fue el servicio de atención al cliente?’, ‘Overall Experience?’: ‘¿Experiencia general?’, Survey: ‘Encuesta’, Excellent: ‘Excelente’, Great: ‘Estupendo’, Good: ‘Bueno’, Average: ‘Promedio’, Poor: ‘Pobre’, ‘Submit’: ‘Enviar’ }, ch: {

  'Hello':'你好，世界',
  'First Name': '名字',
  'Last Name': '姓',
  'Enter your first name': '输入你的名字',
  'Enter your last name': '输入你的姓氏',
  'How would you rate the Form.io platform?': '你如何评价Form.io平台？',
  'How was Customer Support?': '客户支持如何？',
  'Overall Experience?': '总体体验？',
   Survey: '调查',
  Excellent: '优秀',
  Great: '大',
  Good: '好',
  Average: '平均',
  Poor: '错',
  'Submit': '提交'
}

} }).then(function(form) { window.setLanguage = function(lang) { form.language = lang; }; });`

i want translate Hello but didn’t work

[airarrazaval]

I had the same problem and also thought of creating a pull request to include translations, but at the end when you are managing translations it does not make sense to include html code. What I do is simply using instance.t() to apply translations where it is necessary.

Imagine having a Content component with images using data URIs or more complex HTMLs. It will have a severe impact in your application. So instead of applying this.t() in all the html string I suggest these options:

Use existing interpolation in the components content / html:

<h1>{{ instance.t('My Title')</h1>
<p>{{ instance.t('This is a paragraph in my HTML component.') }}</p>

Applying this.t() only on text nodes

Modifying setHTML(): https://github.com/formio/formio.js/blob/06c128ddf799c2088429404eafc48fcbf7a3127c/src/components/html/HTML.js#L32-L34

To something like this:

setHTML() {
    this.htmlElement.innerHTML = this.interpolate(this.component.content);
    const walker = document.createTreeWalker(this.htmlElement, NodeFilter.SHOW_TEXT, null, false);
    let node = walker.nextNode();
    while (node) {
        const text = node.parentNode.nodeName !== 'SCRIPT') ? node.nodeValue.trim() : false;
        if (text)  {
          node.nodeValue = this.t(text);
        }
        node = walk.nextNode();
    }
}

The reason why I would suggest the first option is because of this:

Imagine you have the following content in the HTML component:

<p>
    By submitting this form you agree to our <a href="somelink">terms and conditions</a>.
</p>

Here you have three potential elements to translate:

• By submitting this form you agree to our
• somelink
• terms and conditions

Option 2 can translate all text nodes, but will miss the html attributes. You can elaborate option 2 to check for different cases, etc but is way more simple to have something like this:

<p>
    {{ instance.t('By submitting this form you agree to our') }} <a href="{{ instance.t('somelink') }}">{{ instance.t('terms and conditions')</a>.
</p>

Using interpolation gives you more flexibility and allows you to apply translation to what really needs to be translated (avoiding special characters, spaces, end of lines, etc).

[AnasHijazi]

@travist @airarrazaval i make pull request please review it