Doubts on internationalization and overall customization of the editor and components

[sandenson]

Hello! I've just recently started using GrapesJS along with a team of fellow developers, and we've all been struggling with documentation and finding information.

Edit: I've since managed to resolve a few of these issues by myself, but if there are better solutions, please let me know.

The main thing I've been working on is with internationalization of the editor and its components. I was pretty pleased to find out that GrapesJS has built-in internationalization with i18n. I've downloaded the locales from the repository and managed to get most things done, but couldn't figure out how to do some things, and I'm not sure if I can do some of them with the means I'm using, either.

I have three major doubts, at the moment:

1. (Resolved by myself) Internationalization of plugin component's names when hovering over them in the editor.

   I've noticed that the components are tracked by the internalization features through the data-gjs-type property found in the main div element of the components. Taking the Body component as an example, which represents the background of the editor, and has the "wrapper" value in the data-gjs-type. In Portuguese, "Body" translates to "Corpo". Here we can see it at work.
   

   This makes for a problem with plugin components. Most of them have the data-gjs-type property set as default, while their actual names are within their respective classlists. Take the "1 Column" component from the basic plugin, for example. It is made out of a Cell component inside of a Row component. Both the "Row" and "Cell" types are translated within the locale object, but they aren't translated when the editor is run.
   

   I then tried to manually change either the data-gjs-type values or the hover text of each component, but couldn't figure out how to do that, either.

   Edit: Upon closer inspection, I've noticed that some components which do have values other than default for their data-gjs-type, such as textarea, input and label, and have been set up in the locale file still aren't translated, which makes me unsure about how the internationalization features work.

   Edit 2: I've been fiddling with the Form component from the Forms plugin and even when I manually insert the data-gjs-type attribute in the children components, the DOM hover tooltip still doesn't show up, further debunking my former theory.
   
   (The t() functions are from the i18n module)

   Edit 3 (problem resolved): I've just found out about the data-gjs-custom-name property, which is what I was looking for.

2. Internationalize items of selectors in the UI

   This isn't a major concern for what I'm working on, but it'd be great if I could do it. I was wondering if there's a way to translate these (I'm using the font-weight setting as an example):
   

   If someone could help me with this, I'd appreciate it very much. Thank you in advance.

   Edit: By the way, I'm working with ReactJS and Typescript. I don't know if that's an important piece of information, but I figure I should share it.

   Edit: Allow only one h1 tag on every page #2515 (comment)

   There you go, @artf, have your discussion.

[ronaldohoch]

I would like to have the possibility to translate the options from UI too.