[Question]: CSS properties set on id elements not saved v0.14.50

[ateebahmed]

When I try to put background color on a 1 column row element, it is inlined in the editor and not bind with id, it has unique id, and when I save the HTML and styles json and render it back then its not saved either and the final HTML, if I open the Export option, it is there in CSS bonded with id but somehow the styles json does not have it as I put HTML and styles json back into the editor when I get it from DB.

I tried to reproduce the issue on demo page but there whenever I set a property on an id element, it is already bonded with id and even on refresh it persists.

this is my configuration

    var geditor  = grapesjs.init({

      height: '720px',
      width: '1280px',
      container : '#gjs',
      fromElement: 1,
      showOffsets: 1,
      assetManager: {
        embedAsBase64: 1,
        assets: ''
      },
      styleManager: { clearProperties: 1 },
      plugins: [
        'gjs-preset-webpage',
        'grapesjs-lory-slider',
        'grapesjs-tabs',
        'grapesjs-custom-code',
        'grapesjs-touch',
        'grapesjs-parser-postcss',
      ],
      pluginsOpts: {
        'grapesjs-lory-slider': {
          sliderBlock: {
            category: 'Extra'
          }
        },
        'grapesjs-tabs': {
          tabsBlock: {
            category: 'Extra'
          }
        },
        'gjs-preset-webpage': {
          modalImportTitle: 'Import Template',
          modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
          modalImportContent: function(editor) {
            return editor.getHtml() + '<style>'+editor.getCss()+'</style>'
          },
          filestackOpts: null, //{ key: 'AYmqZc2e8RLGLE7TGkX3Hz' },
          aviaryOpts: false,
          blocksBasicOpts: { flexGrid: 1 },
          customStyleManager: [{
            name: 'General',
            buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
            properties:[{
                name: 'Alignment',
                property: 'float',
                type: 'radio',
                defaults: 'none',
                list: [
                  { value: 'none', className: 'fa fa-times'},
                  { value: 'left', className: 'fa fa-align-left'},
                  { value: 'right', className: 'fa fa-align-right'}
                ],
              },
              { property: 'position', type: 'select'}
            ],
          },{
              name: 'Dimension',
              open: false,
              buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
              properties: [{
                id: 'flex-width',
                type: 'integer',
                name: 'Width',
                units: ['px', '%'],
                property: 'flex-basis',
                toRequire: 1,
              },{
                property: 'margin',
                properties:[
                  { name: 'Top', property: 'margin-top'},
                  { name: 'Right', property: 'margin-right'},
                  { name: 'Bottom', property: 'margin-bottom'},
                  { name: 'Left', property: 'margin-left'}
                ],
              },{
                property  : 'padding',
                properties:[
                  { name: 'Top', property: 'padding-top'},
                  { name: 'Right', property: 'padding-right'},
                  { name: 'Bottom', property: 'padding-bottom'},
                  { name: 'Left', property: 'padding-left'}
                ],
              }],
            },{
              name: 'Typography',
              open: false,
              buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'],
              properties:[
                { name: 'Font', property: 'font-family'},
                { name: 'Weight', property: 'font-weight'},
                { name:  'Font color', property: 'color'},
                {
                  property: 'text-align',
                  type: 'radio',
                  defaults: 'left',
                  list: [
                    { value : 'left',  name : 'Left',    className: 'fa fa-align-left'},
                    { value : 'center',  name : 'Center',  className: 'fa fa-align-center' },
                    { value : 'right',   name : 'Right',   className: 'fa fa-align-right'},
                    { value : 'justify', name : 'Justify',   className: 'fa fa-align-justify'}
                  ],
                },{
                  property: 'text-decoration',
                  type: 'radio',
                  defaults: 'none',
                  list: [
                    { value: 'none', name: 'None', className: 'fa fa-times'},
                    { value: 'underline', name: 'underline', className: 'fa fa-underline' },
                    { value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough'}
                  ],
                },{
                  property: 'text-shadow',
                  properties: [
                    { name: 'X position', property: 'text-shadow-h'},
                    { name: 'Y position', property: 'text-shadow-v'},
                    { name: 'Blur', property: 'text-shadow-blur'},
                    { name: 'Color', property: 'text-shadow-color'}
                  ],
              }],
            },{
              name: 'Decorations',
              open: false,
              buildProps: ['opacity', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
              properties: [{
                type: 'slider',
                property: 'opacity',
                defaults: 1,
                step: 0.01,
                max: 1,
                min:0,
              },{
                property: 'border-radius',
                properties  : [
                  { name: 'Top', property: 'border-top-left-radius'},
                  { name: 'Right', property: 'border-top-right-radius'},
                  { name: 'Bottom', property: 'border-bottom-left-radius'},
                  { name: 'Left', property: 'border-bottom-right-radius'}
                ],
              },{
                property: 'box-shadow',
                properties: [
                  { name: 'X position', property: 'box-shadow-h'},
                  { name: 'Y position', property: 'box-shadow-v'},
                  { name: 'Blur', property: 'box-shadow-blur'},
                  { name: 'Spread', property: 'box-shadow-spread'},
                  { name: 'Color', property: 'box-shadow-color'},
                  { name: 'Shadow type', property: 'box-shadow-type'}
                ],
              },{
                property: 'background',
                properties: [
                  { name: 'Image', property: 'background-image'},
                  { name: 'Repeat', property:   'background-repeat'},
                  { name: 'Position', property: 'background-position'},
                  { name: 'Attachment', property: 'background-attachment'},
                  { name: 'Size', property: 'background-size'}
                ],
              },],
            },{
              name: 'Extra',
              open: false,
              buildProps: ['transition', 'perspective', 'transform'],
              properties: [{
                property: 'transition',
                properties:[
                  { name: 'Property', property: 'transition-property'},
                  { name: 'Duration', property: 'transition-duration'},
                  { name: 'Easing', property: 'transition-timing-function'}
                ],
              },{
                property: 'transform',
                properties:[
                  { name: 'Rotate X', property: 'transform-rotate-x'},
                  { name: 'Rotate Y', property: 'transform-rotate-y'},
                  { name: 'Rotate Z', property: 'transform-rotate-z'},
                  { name: 'Scale X', property: 'transform-scale-x'},
                  { name: 'Scale Y', property: 'transform-scale-y'},
                  { name: 'Scale Z', property: 'transform-scale-z'}
                ],
              }]
            },{
              name: 'Flex',
              open: false,
              properties: [{
                name: 'Flex Container',
                property: 'display',
                type: 'select',
                defaults: 'block',
                list: [
                  { value: 'block', name: 'Disable'},
                  { value: 'flex', name: 'Enable'}
                ],
              },{
                name: 'Flex Parent',
                property: 'label-parent-flex',
                type: 'integer',
              },{
                name      : 'Direction',
                property  : 'flex-direction',
                type    : 'radio',
                defaults  : 'row',
                list    : [{
                          value   : 'row',
                          name    : 'Row',
                          className : 'icons-flex icon-dir-row',
                          title   : 'Row',
                        },{
                          value   : 'row-reverse',
                          name    : 'Row reverse',
                          className : 'icons-flex icon-dir-row-rev',
                          title   : 'Row reverse',
                        },{
                          value   : 'column',
                          name    : 'Column',
                          title   : 'Column',
                          className : 'icons-flex icon-dir-col',
                        },{
                          value   : 'column-reverse',
                          name    : 'Column reverse',
                          title   : 'Column reverse',
                          className : 'icons-flex icon-dir-col-rev',
                        }],
              },{
                name      : 'Justify',
                property  : 'justify-content',
                type    : 'radio',
                defaults  : 'flex-start',
                list    : [{
                          value   : 'flex-start',
                          className : 'icons-flex icon-just-start',
                          title   : 'Start',
                        },{
                          value   : 'flex-end',
                          title    : 'End',
                          className : 'icons-flex icon-just-end',
                        },{
                          value   : 'space-between',
                          title    : 'Space between',
                          className : 'icons-flex icon-just-sp-bet',
                        },{
                          value   : 'space-around',
                          title    : 'Space around',
                          className : 'icons-flex icon-just-sp-ar',
                        },{
                          value   : 'center',
                          title    : 'Center',
                          className : 'icons-flex icon-just-sp-cent',
                        }],
              },{
                name      : 'Align',
                property  : 'align-items',
                type    : 'radio',
                defaults  : 'center',
                list    : [{
                          value   : 'flex-start',
                          title    : 'Start',
                          className : 'icons-flex icon-al-start',
                        },{
                          value   : 'flex-end',
                          title    : 'End',
                          className : 'icons-flex icon-al-end',
                        },{
                          value   : 'stretch',
                          title    : 'Stretch',
                          className : 'icons-flex icon-al-str',
                        },{
                          value   : 'center',
                          title    : 'Center',
                          className : 'icons-flex icon-al-center',
                        }],
              },{
                name: 'Flex Children',
                property: 'label-parent-flex',
                type: 'integer',
              },{
                name:     'Order',
                property:   'order',
                type:     'integer',
                defaults :  0,
                min: 0
              },{
                name    : 'Flex',
                property  : 'flex',
                type    : 'composite',
                properties  : [{
                        name:     'Grow',
                        property:   'flex-grow',
                        type:     'integer',
                        defaults :  0,
                        min: 0
                      },{
                        name:     'Shrink',
                        property:   'flex-shrink',
                        type:     'integer',
                        defaults :  0,
                        min: 0
                      },{
                        name:     'Basis',
                        property:   'flex-basis',
                        type:     'integer',
                        units:    ['px','%',''],
                        unit: '',
                        defaults :  'auto',
                      }],
              },{
                name      : 'Align',
                property  : 'align-self',
                type      : 'radio',
                defaults  : 'auto',
                list    : [{
                          value   : 'auto',
                          name    : 'Auto',
                        },{
                          value   : 'flex-start',
                          title    : 'Start',
                          className : 'icons-flex icon-al-start',
                        },{
                          value   : 'flex-end',
                          title    : 'End',
                          className : 'icons-flex icon-al-end',
                        },{
                          value   : 'stretch',
                          title    : 'Stretch',
                          className : 'icons-flex icon-al-str',
                        },{
                          value   : 'center',
                          title    : 'Center',
                          className : 'icons-flex icon-al-center',
                        }],
              }]
            }
          ],
        },
      },

    });

    var pn = geditor.Panels;
    var modal = geditor.Modal;
    geditor.Commands.add('canvas-clear', function() {
      if(confirm('Areeee you sure to clean the canvas?')) {
        var comps = geditor.DomComponents.clear();
        setTimeout(function(){ localStorage.clear()}, 0)
      }
    });

    // Add info command
    var cmdm = geditor.Commands;
    var mdlClass = 'gjs-mdl-dialog-sm';
    var infoContainer = document.getElementById('info-panel');
    cmdm.add('open-info', function() {
      var mdlDialog = document.querySelector('.gjs-mdl-dialog');
      mdlDialog.className += ' ' + mdlClass;
      infoContainer.style.display = 'block';
      modal.setTitle('About this demo');
      modal.setContent(infoContainer);
      modal.open();
      modal.getModel().once('change:open', function() {
        mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
      })
    });
    pn.addButton('options', {
      id: 'open-info',
      className: 'fa fa-question-circle',
      command: function() { geditor.runCommand('open-info') },
      attributes: {
        'title': 'About',
        'data-tooltip-pos': 'bottom',
      },
    });

    // Simple warn notifier
    var origWarn = console.warn;
    toastr.options = {
      closeButton: true,
      preventDuplicates: true,
      showDuration: 250,
      hideDuration: 150
    };
    console.warn = function (msg) {
      if (msg.indexOf('[undefined]') == -1) {
        toastr.warning(msg);
      }
      origWarn(msg);
    };

    // Add and beautify tooltips
    [['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'],
     ['export-template', 'Export'], ['undo', 'Undo'], ['redo', 'Redo'],
     ['gjs-open-import-webpage', 'Import'], ['canvas-clear', 'Clear canvas']]
    .forEach(function(item) {
      pn.getButton('options', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
    });
    [['open-sm', 'Style Manager'], ['open-layers', 'Layers'], ['open-blocks', 'Blocks']]
    .forEach(function(item) {
      pn.getButton('views', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
    });
    var titles = document.querySelectorAll('*[title]');

    for (var i = 0; i < titles.length; i++) {
      var el = titles[i];
      var title = el.getAttribute('title');
      title = title ? title.trim(): '';
      if(!title)
        break;
      el.setAttribute('data-tooltip', title);
      el.setAttribute('title', '');
    }

    // Show borders by default
    pn.getButton('options', 'sw-visibility').set('active', 1);

    // Store and load events
    geditor.on('storage:load', function(e) { console.log('Loaded ', e) });
    geditor.on('storage:store', function(e) { console.log('Stored ', e) });

    // Do stuff on load
    geditor.on('load', function() {
      var $ = grapesjs.$;

      // Load and show settings and style manager
      var openTmBtn = pn.getButton('views', 'open-tm');
      openTmBtn && openTmBtn.set('active', 1);
      var openSm = pn.getButton('views', 'open-sm');
      openSm && openSm.set('active', 1);

      // Add Settings Sector
      var traitsSector = $('<div class="gjs-sm-sector no-select">'+
        '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' +
        '<div class="gjs-sm-properties" style="display: none;"></div></div>');
      var traitsProps = traitsSector.find('.gjs-sm-properties');
      traitsProps.append($('.gjs-trt-traits'));
      $('.gjs-sm-sectors').before(traitsSector);
      traitsSector.find('.gjs-sm-title').on('click', function(){
        var traitStyle = traitsProps.get(0).style;
        var hidden = traitStyle.display == 'none';
        if (hidden) {
          traitStyle.display = 'block';
        } else {
          traitStyle.display = 'none';
        }
      });

      // Open block manager
      var openBlocksBtn = geditor.Panels.getButton('views', 'open-blocks');
      openBlocksBtn && openBlocksBtn.set('active', 1);
    });
    document.getElementById('form')
      .onsubmit = function (e) {
      var scriptTag = document.getElementById('gjs-styles-json')
      if (!scriptTag) {
        scriptTag = document.createElement('script')
        scriptTag.setAttribute('type', 'application/json')
        scriptTag.setAttribute('id', 'gjs-styles-json')
        scriptTag.setAttribute('readonly', true)
        scriptTag.setAttribute('hidden', true)
      }
      scriptTag.innerHTML = JSON.stringify(geditor.getStyle())
        .trim()
      var gjsContent = document.getElementById('gjs-content')
        gjsContent.innerHTML = geditor.getHtml()
          .trim() + scriptTag.outerHTML
      return true
    }

    var gjsContent = document.getElementById('gjs-content')
    gjsContent.setAttribute('hidden', true)
    var body = document.createElement('body')
    body.innerHTML = gjsContent.value.trim()
    geditor.setComponents(body.innerHTML)
    var styles = (body.getElementsByTagName('script')[0] && body.getElementsByTagName('script')[0]
      .innerHTML) || '{}'
    geditor.setStyle(JSON.parse(styles))

    var images = {$images}
    var assetManager = geditor.AssetManager
    assetManager.add(images)

Used the default configurations that I found on demo page.

[ateebahmed]

in editor config, set avoidInlineStyle to 1.

From demo page latest configurations, I updated the library but saw this change on demo page now.

Thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.