Translations of custom toolbar items

[Sumanth K S]

Hello,

We have added 2 custom items to the toolbar and we are not able to translate these items with ej2-locale library.

in the above snapshot, you can see that all the syncfusion provided toolbar items have been translated into french.

[Balamurugan Shanmugam]

Hi Sumanth,

We have prepared a sample to meet your requirements.

Sample - Fzrcmu (forked) - StackBlitz

In this sample,

We have added a key with a value-pair object locale for French.

public defaultLocale: Object = {

    InsertField: 'Insérer un champ',

    InsertCondition: 'Insérer une condition',

  };

public localObj: L10n = new L10n('documenteditor', this.defaultLocale, 'fr');

And use the added locale constant in the InsertField and InsertCondition

    {

      prefixIcon: 'sf-icon-InsertMergeField',

      tooltipText: 'Insert Field',

      text: this.onWrapText(this.localObj.getConstant('InsertField')),

      id: 'InsertField',

    },

    {

      prefixIcon: 'sf-icon-FinishMerge',

      tooltipText: 'Insert Condition',

      text: this.onWrapText(this.localObj.getConstant('InsertCondition')),

      id: 'InsertCondition',

    },

Output:

If you are using more than one language, you could refer to the attached sample. Otherwise, you can directly access the text of a custom toolbar item like below:

Code snippet:

    {

      prefixIcon: 'sf-icon-FinishMerge',

      tooltipText: 'Insérer un champ',

      text: onWrapText('Insérer un champ'),

      id: 'InsertField',

    },

Regards,

Balamurugan S

[Sumanth K S]

Hello Balamurugan,

Thank you for the update. However, this solution is not working for us as expected. The translation does not happen when we switch the language in the parent component.  we set the "locale" property of documenteditor component when the changeLanguage event is triggered from the parent component.

 Could you please help us with an example of having translations switch between 2 languages?

[Balamurugan Shanmugam]

Hi Sumanth,

Sorry for the inconvenience. We have attached a modified sample to meet your requirements. Please find the below attached for your reference. And also we have attached a video for your reference.

Sample - Fzrcmu (forked) - StackBlitz

In this sample,

Added button; change locale.

After clicking the button, the locale is changed to French like below.

Again, click and the locale changed to Arabic.

You can see both languages have their own locale in the custom toolbar.

Regards,

Balamurugan S

Attachment: Locale_dc37e5aa.zip

[Sumanth K S]

Hello Balamurugan,

Thank you so much for the detailed demo. Much appreciated.

However, there is one more blocking issue with this implementation. The editor content is being reset to empty on setting the locale to the document editor component. The issue can be reproducible in the sample you have attached.

Is there any workaround to avoid this?


Before switching the language.

After switching the language.

[Balamurugan Shanmugam]

Hi Sumanth,

We can reproduce the reported "Blank document opened while switching locale" issue with the provided details. Currently, we are validating and will get back to you by October 27, 2023.

Regards,

Balamurugan S

[Balamurugan Shanmugam]

Hi Sumanth,

We need an additional timeline to validate this and will get back to you by November 1, 2023.

Regards,

Balamurugan S

[Sumanth K S]

Hello Balamurugan,

Could you please update me on this?

Regards,

-Sumanth K S

[Sumanth K S]

Gentle reminder!

[Suriya Murugan]

Sumanth, we will update details shortly.

[Suriya Murugan]

Sumanth, 

Currently, the document editor doesn’t provide support for state persistence (when you change locally entire control will rerender and  will remain in the previous state). We have logged this as a feature request and this feature will be included in any of our upcoming releases. You can track the feature status from the below link.    

 https://www.syncfusion.com/feedback/5211/add-state-persistence-support-in-document-editor 

  

we will update the status of the feedback link once it is taken for implementation. We will update, once implemented. 

[Sumanth K S]

Thanks for the update Suriya.