Localize domComponents module

src/dom_components/model/Component.js

@@ -865,12 +865,18 @@ const Component = Backbone.Model.extend(Styleable).extend(
      * @return {String}
      * */
     getName() {
-      let customName = this.get('name') || this.get('custom-name');
-      let tag = this.get('tagName');
+      const { em } = this;
+      const { type, tagName } = this.attributes;
+      const customName = this.get('name') || this.get('custom-name');
+      let tag = tagName;
       tag = tag == 'div' ? 'box' : tag;
-      let name = this.get('type') || tag;
+      let name = type || tag;
       name = name.charAt(0).toUpperCase() + name.slice(1);
-      return customName || name;
+      const i18nPfx = 'domComponents.names.';
+      const i18nStr =
+        em && (em.t(`${i18nPfx}${type}`) || em.t(`${i18nPfx}${tagName}`));
+      console.log({ i18nStr, type });
+      return i18nStr || customName || name;
     },
 
     /**

src/i18n/locale/en.js

@@ -17,6 +17,25 @@ export default {
       // 'category-id': 'Category Label',
     }
   },
+  domComponents: {
+    names: {
+      '': 'Box',
+      wrapper: 'Body',
+      text: 'Text',
+      comment: 'Comment',
+      image: 'Image',
+      video: 'Video',
+      label: 'Label',
+      link: 'Link',
+      map: 'Map',
+      tfoot: 'Table foot',
+      tbody: 'Table body',
+      thead: 'Table head',
+      table: 'Table',
+      row: 'Table row',
+      cell: 'Table cell'
+    }
+  },
   deviceManager: {
     device: 'Device',
     devices: {