From e1b9e5ba6f3c1d2bdd7f321c0447430a768a96b3 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 10 Feb 2022 16:00:41 +0100
Subject: [PATCH] Update component getName

---
 src/dom_components/model/Component.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 442236c2c..60f0493a1 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -1336,24 +1336,21 @@ export default class Component extends Model.extend(Styleable) {
    * */
   getName() {
     const { em } = this;
-    const { type, tagName } = this.attributes;
-    const cName = this.get('name');
-    const isDiv = tagName == 'div';
-    const tag = isDiv ? 'box' : tagName;
-    const defName = type || tag;
-    const nameTag = !type && tagName && !isDiv && tagName;
+    const { type, tagName, name } = this.attributes;
+    const defName = type || tagName;
+    const nameTag = !type && tagName;
     const i18nPfx = 'domComponents.names.';
-    const i18nName = cName && em && em.t(`${i18nPfx}${cName}`);
-    const i18nNameTag = nameTag && em && em.t(`${i18nPfx}${nameTag}`);
+    const i18nName = name && em?.t(`${i18nPfx}${name}`);
+    const i18nNameTag = nameTag && em?.t(`${i18nPfx}${nameTag}`);
     const i18nDefName = em && (em.t(`${i18nPfx}${type}`) || em.t(`${i18nPfx}${tagName}`));
     return (
       this.get('custom-name') || // Used in Layers (when the user changes the name)
-      i18nName ||
-      cName || // Component name (check if there is a i18n string for it)
-      i18nNameTag ||
-      capitalize(nameTag) || // Try name by tag if there is no valid type
-      i18nDefName ||
-      capitalize(defName) // Use the default name
+      i18nName || // Use local component `name` key (eg. `domComponents.names.myComponentName`)
+      name || // Use component `name` key
+      i18nNameTag || // Use local component `tagName` key (eg. `domComponents.names.div`)
+      capitalize(nameTag) || // Use component `tagName` key
+      i18nDefName || // Use local component `type` key (eg. `domComponents.names.image`)
+      capitalize(defName) // Use component `type` key
     );
   }