Add id in JSON if has symbols

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.17.5",
+  "version": "0.17.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.17.5",
+  "version": "0.17.6",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/dom_components/model/Component.js

@@ -574,18 +574,23 @@ const Component = Backbone.Model.extend(Styleable).extend(
 
       // Check if we need an ID on the component
       if (!has(attributes, 'id')) {
-        let hasStyle;
+        let addId;
 
         // If we don't rely on inline styling we have to check
         // for the ID selector
         if (avoidInline(em)) {
-          hasStyle = sm && sm.get(id, sm.Selector.TYPE_ID);
+          addId = sm && sm.get(id, sm.Selector.TYPE_ID);
         } else if (!isEmpty(this.getStyle())) {
-          hasStyle = 1;
+          addId = 1;
         }
 
-        if (hasStyle) {
-          attributes.id = this.getId();
+        // Symbols should always have an id
+        if (this.__getSymbol() || this.__getSymbols()) {
+          addId = 1;
+        }
+
+        if (addId) {
+          attributes.id = id;
         }
       }