Use custom-name on layer name edit

src/dom_components/model/Component.js

@@ -867,7 +867,8 @@ const Component = Backbone.Model.extend(Styleable).extend(
     getName() {
       const { em } = this;
       const { type, tagName } = this.attributes;
-      const customName = this.get('name') || this.get('custom-name');
+      const customName = this.get('custom-name');
+      const cName = this.get('name');
       let tag = tagName;
       tag = tag == 'div' ? 'box' : tag;
       let name = type || tag;
@@ -875,7 +876,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const i18nPfx = 'domComponents.names.';
       const i18nStr =
         em && (em.t(`${i18nPfx}${type}`) || em.t(`${i18nPfx}${tagName}`));
-      return i18nStr || customName || name;
+      return customName || i18nStr || cName || name;
     },
 
     /**

src/navigator/view/ItemView.js

@@ -160,7 +160,7 @@ export default Backbone.View.extend({
     const name = inputEl.textContent;
     inputEl.scrollLeft = 0;
     inputEl[inputProp] = false;
-    this.model.set({ name });
+    this.model.set({ 'custom-name': name });
     em && em.setEditing(0);
     $el
       .find(`.${this.inputNameCls}`)