Added `optsHtml` and `optsCss` options to main config

src/code_manager/model/HtmlGenerator.js

@@ -2,22 +2,49 @@ import Backbone from 'backbone';
 
 export default Backbone.Model.extend({
   build(model, opts = {}) {
-    const models = model.get('components');
+    const models = model.components();
+    const htmlOpts = {};
+    const { em } = opts;
+
+    // Remove unnecessary IDs
+    if (opts.cleanId && em) {
+      const rules = em.get('CssComposer').getAll();
+      const idRules = rules
+        .toJSON()
+        .map(rule => {
+          const sels = rule.selectors;
+          const sel = sels && sels.length === 1 && sels.models[0];
+          return sel && sel.isId() && sel.get('name');
+        })
+        .filter(i => i);
+
+      htmlOpts.attributes = (mod, attrs) => {
+        const { id } = attrs;
+        if (
+          id &&
+          id[0] === 'i' && // all autogenerated IDs start with 'i'
+          !mod.get('script') && // if the component has script, we have to leave the ID
+          idRules.indexOf(id) < 0 // we shouldn't have any rule with this ID
+        ) {
+          delete attrs.id;
+        }
+        return attrs;
+      };
+    }
 
     if (opts.exportWrapper) {
       return model.toHTML({
+        ...htmlOpts,
         ...(opts.wrapperIsBody && { tag: 'body' })
       });
     }
 
-    return this.buildModels(models);
+    return this.buildModels(models, htmlOpts);
   },
 
-  buildModels(models) {
+  buildModels(models, opts = {}) {
     let code = '';
-    models.each(model => {
+    models.forEach(mod => (code += mod.toHTML(opts)));
-      code += model.toHTML();
-    });
     return code;
   }
 });

src/editor/config/config.js

@@ -119,6 +119,12 @@ export default {
   // The wrapper, if visible, will be shown as a `<body>`
   wrapperIsBody: 1,
 
+  // Pass default available options wherever `editor.getHtml()` is called
+  optsHtml: {},
+
+  // Pass default available options wherever `editor.getCss()` is called
+  optsCss: {},
+
   // Usually when you update the `style` of the component this changes the
   // element's `style` attribute. Unfortunately, inline styling doesn't allow
   // use of media queries (@media) or even pseudo selectors (eg. :hover).

src/editor/index.js

@@ -198,7 +198,7 @@ export default (config = {}) => {
     /**
      * Returns configuration object
      * @param  {string} [prop] Property name
-     * @return {any} Returns the configuration object or
+     * @returns {any} Returns the configuration object or
      *  the value of the specified property
      */
     getConfig(prop) {
@@ -207,7 +207,9 @@ export default (config = {}) => {
 
     /**
      * Returns HTML built inside canvas
-     * @return {string} HTML string
+     * @param {Object} [opts={}] Options
+     * @param {Boolean} [opts.cleanId=false] Remove unnecessary IDs (eg. those created automatically)
+     * @returns {string} HTML string
      */
     getHtml(opts) {
       return em.getHtml(opts);
@@ -217,7 +219,7 @@ export default (config = {}) => {
      * Returns CSS built inside canvas
      * @param {Object} [opts={}] Options
      * @param {Boolean} [opts.avoidProtected=false] Don't include protected CSS
-     * @return {string} CSS string
+     * @returns {string} CSS string
      */
     getCss(opts) {
       return em.getCss(opts);
@@ -225,7 +227,7 @@ export default (config = {}) => {
 
     /**
      * Returns JS of all components
-     * @return {string} JS string
+     * @returns {string} JS string
      */
     getJs() {
       return em.getJs();

src/editor/model/Editor.js

@@ -493,18 +493,22 @@ export default Backbone.Model.extend({
 
   /**
    * Returns HTML built inside canvas
-   * @return {string} HTML string
+   * @param {Object} [opts={}] Options
+   * @returns {string} HTML string
    * @private
    */
-  getHtml() {
+  getHtml(opts = {}) {
     const config = this.config;
+    const { optsHtml } = config;
     const exportWrapper = config.exportWrapper;
     const wrapperIsBody = config.wrapperIsBody;
     const js = config.jsInHtml ? this.getJs() : '';
     var wrp = this.get('DomComponents').getComponent();
     var html = this.get('CodeManager').getCode(wrp, 'html', {
       exportWrapper,
-      wrapperIsBody
+      wrapperIsBody,
+      ...optsHtml,
+      ...opts
     });
     html += js ? `<script>${js}</script>` : '';
     return html;
@@ -513,11 +517,12 @@ export default Backbone.Model.extend({
   /**
    * Returns CSS built inside canvas
    * @param {Object} [opts={}] Options
-   * @return {string} CSS string
+   * @returns {string} CSS string
    * @private
    */
   getCss(opts = {}) {
     const config = this.config;
+    const { optsCss } = config;
     const wrapperIsBody = config.wrapperIsBody;
     const avoidProt = opts.avoidProtected;
     const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles)
@@ -532,7 +537,8 @@ export default Backbone.Model.extend({
       this.get('CodeManager').getCode(wrp, 'css', {
         cssc,
         wrapperIsBody,
-        keepUnusedStyles
+        keepUnusedStyles,
+        ...optsCss
       })
     );
   },

src/selector_manager/model/Selector.js

@@ -48,6 +48,14 @@ const Selector = Model.extend(
       this.em = config.em;
     },
 
+    isId() {
+      return this.get('type') === TYPE_ID;
+    },
+
+    isClass() {
+      return this.get('type') === TYPE_CLASS;
+    },
+
     /**
      * Get full selector name
      * @return {string}