Unable to set panels' switcher buttons position

[Bran72]

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:

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

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]

Hi @artf , some news about this ?
Thanks !

[Bran72]

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