GrapesJS / preset-newsletter

GrapesJS preset configuration for the newsletter editor.
https://grapesjs.com/demo-newsletter-editor.html
BSD 3-Clause "New" or "Revised" License
189 stars 143 forks source link

Unable to set panels' switcher buttons position #133

Open Bran72 opened 1 year ago

Bran72 commented 1 year ago

Hi,

Until i upgrade my versions, I've never had this problem. Before, I'm using grapesjs:0.19.4 and grapesjs-preset-newsletter:0.2.21. Here's the result: image

Now, I'm using grapesjs:0.21.4 and grapesjs-preset-newsletter:1.0.2. And that's what I have now: image

Of course, the code I'm using is the same between both of this images.

When I setup the editor, I pass the panels: { default: [....] } option to editor init' function. It's working well when I'm not using the Preset Newsletter, but when I'm using it, I can't moove anymore when I want.

That's what I'm doing: HTML (VUE) template

    <div>
      <div>
    <div class="editor-row">
          <div class="editor-canvas">
            <div :id="'gjs_tab-'+idaccordeon"></div>
          </div>
          <div :class="['options-container-'+idaccordeon]"></div>
        </div>
      </div>
    </div>
    <div :class="['right-part is-flex', ['preview', 'disabled'].includes(mode) ? 'has-blur' : '']">
      <div :class="['overlay', ['preview', 'disabled'].includes(mode) ? 'is-visible' : '']"></div>
      <div :class="['panel__right-'+idaccordeon]">
        <div :class="['traits-container-'+idaccordeon]" style="display: none"></div>
        <div :class="['styles-container-'+idaccordeon]" style="display: none"></div>
        <div :class="['layers-container-'+idaccordeon]" style="display: none"></div>
        <div :class="['blocks-container-'+idaccordeon]"></div>
      </div>
      <div class="panel__btn">
        <div class="panel__basic-actions"></div>
        <div :class="['panel__switcher-'+idaccordeon]"></div>
      </div>
    </div>

And my JS config:

const instance = this
this.editor = grapesjs.init({
    container: '#gjs_tab-' + this.idaccordeon,
    ...this.config,
    canvas: {
        styles: ['https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700,700i' +
        '|Roboto:300,300i,400,400i,500,500i,700,700i&subset=latin,latin-ext']
    },
    i18n: {
        locale: 'fr',
        messages: { fr }
    },
    plugins: [grapesPreset, TextableType, TextableLinkType, TableMultipleType, GedType, ColumnType, PjType],
    panels: {
        defaults: [
            {
                id: 'layers',
                el: '.panel__right-' + instance.idaccordeon
            },
            {
                id: 'options',
                el: '.options-container-' + instance.idaccordeon,
                buttons: [
                    {
                        id: 'undo',
                        className: 'fa fa-undo',
                        command: 'undo',
                        attributes: { title: 'Annuler' }
                    },
                    {
                        id: 'redo',
                        className: 'fa fa-repeat',
                        command: 'redo',
                        attributes: { title: 'Refaire' }
                    },
                    {
                        id: 'export-template',
                        className: 'fas fa-upload',
                        command: 'export-template',
                        context: 'export-template', // For grouping context of buttons from the same panel,
                        attributes: { title: 'Voir le code' }
                    }, {
                        active: true,
                        id: 'sw-visibility',
                        className: 'fas fa-square',
                        command: 'sw-visibility',
                        context: 'sw-visibility',
                        attributes: { title: 'Voir les composants' }
                    }, {
                        id: 'preview',
                        className: 'fa fa-eye',
                        command: 'preview',
                        context: 'preview',
                        attributes: { title: 'Preview' }
                    }, {
                        id: 'fullscreen',
                        className: 'fa fa-arrows-alt',
                        command: 'fullscreen',
                        context: 'fullscreen',
                        attributes: { title: 'Fullscreen' }
                    }
                ]
            },
            {
                id: 'views',
                el: '.panel__switcher-' + instance.idaccordeon,
                buttons: [
                    {
                        id: 'open-traits',
                        className: 'fa fa-cog',
                        command: 'open-traits',
                        togglable: 0,
                        active: true,
                        attributes: { title: 'Ouvrir les Paramètres' }
                    },
                    {
                        id: 'open-sm',
                        className: 'fa fa-paint-brush',
                        command: 'open-sm',
                        togglable: 0,
                        active: false,
                        attributes: { title: 'Ouvrir les Styles' }
                    },
                    {
                        id: 'open-tm',
                        className: 'fa fa-cog hidden',
                        command: 'open-tm',
                        togglable: 0,
                        active: false,
                        attributes: { title: 'Paramètres' }
                    },
                    {
                        id: 'open-layers',
                        className: 'fa fa-bars',
                        command: 'open-layers',
                        togglable: 0,
                        active: false,
                        attributes: { title: 'Voir les Couches' }
                    },
                    {
                        id: 'open-blocks',
                        className: 'fa fa-th-large',
                        command: 'open-blocks',
                        togglable: 0,
                        active: true,
                        attributes: { title: 'Ouvrir les Blocks' }
                    }]
            }]
    }
})

I also tried the next plugin config to disable customTheme, without any success:

   pluginsOpts: {
    grapesPreset: {
        useCustomTheme: false,
        updateStyleManager: false
    },
},

Thank you !! :)

Bran72 commented 9 months ago

Hi @artf , some news about this ? Thanks !

Bran72 commented 6 months ago

Hi again @artf , I'm still dealing with this problem. Any suggestion for a solution? :/