AkibDeraiya123 commented 5 years ago

Hello, @artf @NicoEngler,

I have one strange issues.

I am using grapes.js and grapes.min.css with version of 0.14.50.

While i am selecting any component then i can change it's css properties through editor side pane. But i can see two times dropdown Typography and Decorations. I see into demo of the grapes.js it shows like another dropdown likes Extra and Flex which are not showing into my pane. This is from the grapes.js demo

capture

And this is from my demo, capture-own

Can you please help to figure out this strange issue? Am i missing some configuration while i init grapes.js or after it?

NicoEngler commented 5 years ago

Please show how you initialize grapesjs. Chances are the problem can be found there.

no-response[bot] commented 5 years ago

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

AkibDeraiya123 commented 5 years ago

Hello @artf , @NicoEngler , Sorry for the delay to respond here.

Here is how am i integrate,

editor = grapesjs.init({
      height: '899px',
      cssComposer: { important: true },
      showOffsets: 1,
      noticeOnUnload: 0,
      storageManager: {
        autoload: 0
      },
      components: '<div>Hello world!</div>',
      container: '#gjs',
      fromElement: true,
      allowScripts: flagScript,
      jsInHtml: false,
      plugins: [
        'gjs-preset-webpage',
        'grapesjs-lory-slider',
        'grapesjs-tabs',
        'grapesjs-custom-code',
        'grapesjs-touch',
        'grapesjs-parser-postcss',
      ],
      canvas: {
        styles: [
          'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
          "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
          "https://fengyuanchen.github.io/cropperjs/css/cropper.css"
        ],
        scripts: [
          'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js',
          'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
          "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js",
          "https://maps.googleapis.com/maps/api/js?&sensor=false",
          "https://fengyuanchen.github.io/cropperjs/js/cropper.js"
        ]
      },
      assetManager: {
        assets: images,
        upload: 'api/grapes/image-upload',
        uploadFile: function (e) {
          var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
          var formData = new FormData();
          for (var i in files) {
            formData.append('file-' + i, files[i]) //containing all the selected images from local
          }
          var file = e.target.files[0];
          var siteName = factory.websiteName;
          file.upload = Upload.upload({
            url: 'api/grapes/image-upload',
            data: { file: file, websiteName: siteName },
          });
          file.upload.then(function (response) {

            editor.AssetManager.add(response.data);

          });
        },
      },
      layerManager: {
        appendTo: '#layers-container'
      },
      blockManager: {
        appendTo: '#blocks',
      },
      'grapesjs-tabs': {
        tabsBlock: {
          category: 'Extra'
        }
      },
      selectorManager: {
        appendTo: '#selectors-container',
      },
      traitManager: {
        appendTo: '#traits-container',
      },
      panels: {
        defaults: [{
          id: 'devices-b',
          el: '#devices-b',
          visible: true,
          buttons: [{
            id: 'set-device-desktop',
            command: function (editor, Model, Options) { editor.setDevice('Desktop') },
            label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M21 15.998H3v-12h18m0-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2z" fill="#ffffff"/></svg>',
            active: true
          }, {
            id: 'set-device-tablet',
            command: function (editor, Model, Options) { editor.setDevice('Tablet') },
            label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 408 512"><path d="M352 0q22 0 37.5 15.5T405 53v406q0 22-15.5 37.5T352 512H53q-22 0-37.5-15.5T0 459V53q0-22 15.5-37.5T53 0h299zM202.5 491q13.5 0 23-9.5t9.5-23-9.5-22.5-23-9-22.5 9-9 22.5 9 23 22.5 9.5zM363 405V64H43v341h320z" fill="#ffffff"/></svg>'
          }, {
            id: 'set-device-mobile',
            command: function (editor, Model, Options) { editor.setDevice('Mobile portrait') },
            label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 768 1280"><path d="M464 1152q0-33-23.5-56.5T384 1072t-56.5 23.5T304 1152t23.5 56.5T384 1232t56.5-23.5T464 1152zm208-160V288q0-13-9.5-22.5T640 256H128q-13 0-22.5 9.5T96 288v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5T672 992zM480 144q0-16-16-16H304q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h512q52 0 90 38t38 90z" fill="#ffffff"/></svg>'
          }, {
            id: 'set-device-desktop',
            command: function (editor, Model, Options) { editor.setDevice('Desktop') },
            label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M21 15.998H3v-12h18m0-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2z" fill="#ffffff"/></svg>',
            active: true
          }, {
            id: 'canvas-b',
            el: '#canvas-b',
            className: 'fa fa-trash',
            command: function (editor, Model, Options) {
              if (confirm('Areeee you sure to clean the canvas?')) {
                var comps = editor.DomComponents.clear();
                // setTimeout(function () { localStorage.clear() }, 0)
              }
            },

          }]
        }, {
          id: 'styles',
          el: '#style-manager',
          resizable: {
            tc: 0,
            cr: 0,
            cl: 1,
            bc: 0,
            keyWidth: 'flex-basis',
          },
        }
      ]
      },

    });

artf commented 5 years ago

@AkibDeraiya123 the configuration seems ok, can you create a reproducible demo?

no-response[bot] commented 5 years ago

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.