@silexlabs/silex 3.0.0-alpha.49 → 3.0.0-alpha.51

package/dist/plugins/client/client/grapesjs/internal-links.d.ts

@@ -0,0 +1 @@
+export declare const internalLinksPlugin: any;

package/dist/plugins/client/client/grapesjs/internal-links.js

@@ -0,0 +1,220 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import { html, render } from 'lit-html';
+import { map } from 'lit-html/directives/map.js';
+import grapesjs from 'grapesjs/dist/grapes.min.js';
+import { getPageLink } from '../../page';
+// constants
+const pluginName = 'internal-links';
+const options = [
+    { id: '', name: '-' },
+    { id: 'url', name: 'URL' },
+    { id: 'email', name: 'Email' },
+    { id: 'page', name: 'Page' },
+];
+// plugin code
+export const internalLinksPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+    // update links when a page link changes
+    function onAll(cbk) {
+        editor.Pages.getAll()
+            .forEach(page => {
+            page.getMainComponent()
+                .onAll(cbk);
+        });
+    }
+    editor.on('page', ({ event, page }) => {
+        if (!page)
+            return; // fixes UT
+        switch (event) {
+            case 'change:name':
+                // update all links to this page
+                onAll(component => {
+                    if (component.getAttributes().href === getPageLink(page.previous('name'))) {
+                        component.setAttributes({
+                            href: getPageLink(page.get('name')),
+                        });
+                    }
+                });
+                break;
+            case 'remove':
+                // mark all links as issues
+                const issues = [];
+                onAll(component => {
+                    console.log(component.getAttributes().href, getPageLink(page.previous('name')), page.previous('name'));
+                    if (component.getAttributes().href === getPageLink(page.previous('name'))) {
+                        issues.push(component);
+                    }
+                });
+                opts?.onError(issues);
+                break;
+        }
+    });
+    // utility functions to render the UI
+    function getUi(type, href) {
+        switch (type) {
+            case 'email':
+                const mailTo = href.replace('mailto:', '').split('?');
+                const email = mailTo[0];
+                const params = (mailTo[1] || '').split('&').reduce((acc, item) => {
+                    const items = item.split('=');
+                    acc[items[0]] = items[1];
+                    return acc;
+                }, {});
+                return html `<div class="href-next__email-inputs">
+            <label for="href-next__email" class="gjs-one-bg silex-label">Email address</label>
+            <input class="href-next__email" placeholder="Insert email" type="email" value=${email || ''}/>
+            <label for="href-next__email-subject" class="gjs-one-bg silex-label">Subject</label>
+            <input class="href-next__email-subject" placeholder="Insert subject" value=${params.subject || ''}/>
+          </div>`;
+            case 'page':
+                return html `<div class="href-next__page-inputs">
+            <label for="href-next__page" class="gjs-one-bg silex-label">Page name</label>
+            <select id="href-next__page" class="href-next__page">
+              ${map(editor.Pages.getAll(), page => html `<option
+                  ?selected=${getPageLink(page.getName()) === href}
+                  value=${getPageLink(page.getName())}>
+                    ${page.getName() || 'Main'}
+                </option>`)}
+            </select>
+          </div>`;
+            case 'url':
+                return html `<div class="href-next__url-inputs">
+          <label for="href-next__url" class="gjs-one-bg silex-label">URL</label>
+          <input class="href-next__url" placeholder="Insert URL" type="url" value=${href}/>
+        </div>`;
+            default:
+                return '';
+        }
+    }
+    function getDefaultHref(type) {
+        switch (type) {
+            case 'email': return 'mailto:';
+            case 'page': return getPageLink();
+            case 'url': return 'https://';
+        }
+    }
+    function doRender(el, href = '') {
+        const type = getType(href);
+        const ui = getUi(type, href);
+        render(html `
+      <label for="href-next__type" class="gjs-one-bg silex-label">Type</label>
+      <select id="href-next__type" class="href-next__type" @change=${event => doRender(el, getDefaultHref(event.target.value))}>
+        ${map(options, opt => html `
+          <option value="${opt.id}" ?selected=${type === opt.id}>${opt.name}</option>
+        `)}
+      </select>
+      ${ui}
+    `, el);
+    }
+    function getType(href) {
+        if (href.indexOf('mailto:') === 0) {
+            return 'email';
+        }
+        else if (href.indexOf('./') === 0) {
+            return 'page';
+        }
+        else if (href) {
+            return 'url';
+        }
+        return '';
+    }
+    function doRenderCurrent(el) {
+        doRender(el, editor.getSelected()?.getAttributes().href || '');
+    }
+    // Add the new trait to all component types
+    editor.DomComponents.getTypes().map(type => {
+        editor.DomComponents.addType(type.id, {
+            model: {
+                defaults: {
+                    traits: [
+                        // Keep the type original traits
+                        ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits
+                            // Filter original href trait
+                            .filter(trait => trait.name ? trait.name !== 'href' : trait !== 'href'),
+                        // Add the new trait
+                        {
+                            label: 'Link',
+                            type: 'href-next',
+                            name: 'href',
+                        },
+                    ]
+                }
+            }
+        });
+    });
+    editor.TraitManager.addType('href-next', {
+        createInput({ trait }) {
+            // Create a new element container and add some content
+            const el = document.createElement('div');
+            // update the UI when a page is added/renamed/removed
+            editor.on('page', () => doRenderCurrent(el));
+            doRenderCurrent(el);
+            // this will be the element passed to onEvent and onUpdate
+            return el;
+        },
+        // Update the component based on UI changes
+        // `elInput` is the result HTMLElement you get from `createInput`
+        onEvent({ elInput, component, event }) {
+            const inputType = elInput.querySelector('.href-next__type');
+            let href = '';
+            // Compute the new HREF value
+            switch (inputType.value) {
+                case 'page':
+                    const valPage = elInput.querySelector('.href-next__page')?.value;
+                    href = valPage || getDefaultHref('page');
+                    break;
+                case 'url':
+                    const valUrl = elInput.querySelector('.href-next__url')?.value;
+                    href = valUrl || getDefaultHref('url');
+                    break;
+                case 'email':
+                    const valEmail = elInput.querySelector('.href-next__email')?.value;
+                    const valSubj = elInput.querySelector('.href-next__email-subject')?.value;
+                    href = valEmail ? `mailto:${valEmail}${valSubj ? `?subject=${valSubj}` : ''}` : getDefaultHref('email');
+                    break;
+                default:
+                    href = '';
+            }
+            // Store the new HREF value
+            component.addAttributes({ href });
+            // Handle the tag name
+            if (href === '') {
+                // Not a link
+                if (component.get('tagName').toUpperCase() === 'A') {
+                    // Retrieve the original stored value
+                    const original = component.get('originalTagName') ?? 'DIV';
+                    // Case of the inline A tags inserted by the text bar
+                    const value = original.toUpperCase() === 'A' ? 'SPAN' : original;
+                    component.set('tagName', value);
+                }
+            }
+            else {
+                // Link
+                if (component.get('tagName').toUpperCase() !== 'A') {
+                    component.set('originalTagName', component.get('tagName'));
+                    component.set('tagName', 'A');
+                }
+            }
+        },
+        // Update UI on the component change
+        onUpdate({ elInput, component }) {
+            const href = component.getAttributes().href || '';
+            doRender(elInput, href);
+        },
+    });
+});
+//# sourceMappingURL=internal-links.js.map

package/dist/plugins/client/client/grapesjs/internal-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-links.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/internal-links.ts"],"names":[],"mappings":"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"}

package/dist/plugins/client/client/grapesjs/new-page-dialog.d.ts

@@ -0,0 +1,2 @@
+export declare const cmdOpenNewPageDialog = "new-page-dialog";
+export declare const newPageDialog: any;

package/dist/plugins/client/client/grapesjs/new-page-dialog.js

@@ -0,0 +1,83 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import * as grapesjs from 'grapesjs/dist/grapes.min.js';
+import { html, render } from 'lit-html';
+import { live } from 'lit-html/directives/live.js';
+const name = 'new-page-dialog';
+const el = document.createElement('div');
+let modal;
+export const cmdOpenNewPageDialog = 'new-page-dialog';
+export const newPageDialog = grapesjs.plugins.add(name, (editor, opts) => {
+    editor.Commands.add(cmdOpenNewPageDialog, {
+        run: (_, sender, { page }) => {
+            modal = editor.Modal.open({
+                title: 'New Page',
+                content: '',
+                attributes: { class: 'new-page-dialog' },
+            })
+                .onceClose(() => {
+                editor.stopCommand(cmdOpenNewPageDialog); // apparently this is needed to be able to run the command several times
+            });
+            displayDialog(editor, opts, page);
+            modal.setContent(el);
+            const form = el.querySelector('form');
+            form.onsubmit = event => {
+                event.preventDefault();
+                saveDialog(editor, opts, page);
+                editor.stopCommand(cmdOpenNewPageDialog);
+            };
+            form.querySelector('input')?.focus();
+            return modal;
+        },
+        stop: () => {
+            modal.close();
+            // el.innerHTML = ''
+        },
+    });
+});
+function onImport(editor, page) {
+    editor.Pages.select(page);
+    editor.runCommand('gjs-open-import-webpage');
+}
+function displayDialog(editor, config, page) {
+    render(html `
+    <form class="silex-form">
+      <label class="silex-form__element">
+        <h3>Name</h3>
+        <input type="text" name="name" .value=${live(page.getName() || '')}/>
+      </label>
+      <footer>
+        <input class="silex-button" type="button" @click=${e => onImport(editor, page)} value="Import from website">
+        <input class="silex-button" type="button" @click=${e => editor.stopCommand(cmdOpenNewPageDialog)} value="Cancel">
+        <input class="silex-button" type="submit" value="Ok">
+      </footer>
+    </form>
+  `, el);
+}
+function saveDialog(editor, config, page) {
+    const form = el.querySelector('form');
+    const formData = new FormData(form);
+    const data = Array.from(formData)
+        .reduce((aggregate, [key, value]) => {
+        aggregate[key] = value;
+        return aggregate;
+    }, {});
+    page.set(data);
+    // save if auto save is on
+    editor.getModel().set('changesCount', editor.getDirtyCount() + 1);
+}
+//# sourceMappingURL=new-page-dialog.js.map

package/dist/plugins/client/client/grapesjs/new-page-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"new-page-dialog.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/new-page-dialog.ts"],"names":[],"mappings":"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"}

package/dist/plugins/client/client/grapesjs/openImport.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @fileoverview Import feature
+ * Let the user import HTML code when she creates a new page
+ *
+ */
+export default function openImport(editor: any, config: any): {
+    run(_: any): void;
+    stop(): void;
+};

package/dist/plugins/client/client/grapesjs/openImport.js

@@ -0,0 +1,74 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * @fileoverview Import feature
+ * Let the user import HTML code when she creates a new page
+ *
+ */
+// from https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/commands/openImport.js
+export default function openImport(editor, config) {
+    const pfx = editor.getConfig('stylePrefix');
+    const modal = editor.Modal;
+    const codeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
+    const container = document.createElement('div');
+    const importLabel = config.modalImportLabel;
+    const importCnt = config.modalImportContent;
+    let viewerEditor = codeViewer.editor;
+    // Init import button
+    const btnImp = document.createElement('button');
+    btnImp.type = 'button';
+    btnImp.innerHTML = config.modalImportButton;
+    btnImp.className = `${pfx}btn-prim ${pfx}btn-import`;
+    btnImp.onclick = e => {
+        editor.setComponents(viewerEditor.getValue().trim());
+        modal.close();
+    };
+    // Init code viewer
+    codeViewer.set({ ...{
+            codeName: 'htmlmixed',
+            theme: 'hopscotch',
+            readOnly: 0
+        }, ...config.importViewerOptions });
+    return {
+        run(_) {
+            if (!viewerEditor) {
+                const txtarea = document.createElement('textarea');
+                if (importLabel) {
+                    const labelEl = document.createElement('div');
+                    labelEl.className = `${pfx}import-label`;
+                    labelEl.innerHTML = importLabel;
+                    container.appendChild(labelEl);
+                }
+                container.appendChild(txtarea);
+                container.appendChild(btnImp);
+                codeViewer.init(txtarea);
+                viewerEditor = codeViewer.editor;
+            }
+            modal.setTitle(config.modalImportTitle);
+            modal.setContent(container);
+            const cnt = typeof importCnt === 'function' ? importCnt(editor) : importCnt;
+            codeViewer.setContent(cnt || '');
+            modal.open().getModel()
+                .once('change:open', () => editor.stopCommand(this.id));
+            viewerEditor.refresh();
+        },
+        stop() {
+            modal.close();
+        }
+    };
+}
+//# sourceMappingURL=openImport.js.map

package/dist/plugins/client/client/grapesjs/openImport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"openImport.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/openImport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH;;;;GAIG;AACH,gIAAgI;AAChI,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,MAAM,EAAE,MAAM;IAC/C,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;IAC1B,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAA;IACrE,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAA;IAC3C,MAAM,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAA;IAC3C,IAAI,YAAY,GAAG,UAAU,CAAC,MAAM,CAAA;IAEpC,qBAAqB;IACrB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAA;IACtB,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,iBAAiB,CAAA;IAC3C,MAAM,CAAC,SAAS,GAAG,GAAG,GAAG,YAAY,GAAG,YAAY,CAAA;IACpD,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE;QACnB,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QACpD,KAAK,CAAC,KAAK,EAAE,CAAA;IACf,CAAC,CAAA;IAED,mBAAmB;IACnB,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG;YAClB,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,CAAC;SACZ,EAAE,GAAG,MAAM,CAAC,mBAAmB,EAAC,CAAC,CAAA;IAElC,OAAO;QACL,GAAG,CAAC,CAAC;YACH,IAAI,CAAC,YAAY,EAAE;gBACjB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;gBAElD,IAAI,WAAW,EAAE;oBACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;oBAC7C,OAAO,CAAC,SAAS,GAAG,GAAG,GAAG,cAAc,CAAA;oBACxC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAA;oBAC/B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;iBAC/B;gBAED,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;gBAC9B,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;gBAC7B,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;gBACxB,YAAY,GAAG,UAAU,CAAC,MAAM,CAAA;aACjC;YAED,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;YACvC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA;YAC3B,MAAM,GAAG,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC3E,UAAU,CAAC,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC,CAAA;YAChC,KAAK,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE;iBACpB,IAAI,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;YACzD,YAAY,CAAC,OAAO,EAAE,CAAA;QACxB,CAAC;QAED,IAAI;YACF,KAAK,CAAC,KAAK,EAAE,CAAA;QACf,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/plugins/client/client/grapesjs/page-panel.d.ts

@@ -0,0 +1,3 @@
+export declare const cmdTogglePages = "pages:open-panel";
+export declare const cmdAddPage = "pages:add";
+export declare const pagePanelPlugin: any;

package/dist/plugins/client/client/grapesjs/page-panel.js

@@ -0,0 +1,113 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import * as grapesjs from 'grapesjs/dist/grapes.min.js';
+import { html, render } from 'lit-html';
+const pluginName = 'page-panel';
+let open;
+export const cmdTogglePages = 'pages:open-panel';
+export const cmdAddPage = 'pages:add';
+function selectPage(editor, page) {
+    editor.Pages.select(page);
+}
+function addPage(editor, config) {
+    const pages = editor.Pages.getAll();
+    let idx = 1;
+    const newPageName = config.newPageName || 'New page';
+    let pageName = newPageName;
+    while (pages.find(p => p.getName() === pageName)) {
+        pageName = `${newPageName} ${idx++}`;
+    }
+    const page = editor.Pages.add({ name: pageName });
+    editor.runCommand(config.cmdOpenNewPageDialog, { page });
+}
+function removePage(editor, page) {
+    if (editor.Pages.getAll().length === 1) {
+        console.error('can not delete the only page');
+    }
+    else {
+        const isMain = page.get('type') === 'main';
+        const isSelected = editor.Pages.getSelected() === page;
+        editor.Pages.remove(page.id);
+        const firstPage = editor.Pages.getAll()[0];
+        if (isMain)
+            firstPage.set('type', 'main');
+        if (isSelected)
+            selectPage(editor, firstPage);
+    }
+}
+function settingsPage(editor, config, page) {
+    editor.runCommand(config.cmdOpenSettings, { page });
+}
+function renderPages(editor, config) {
+    const pages = editor.Pages.getAll();
+    const selected = editor.Pages.getSelected();
+    const getPageFromEvent = (e) => {
+        const el = e.target.hasAttribute('data-page-id') ? e.target : e.target.parentNode;
+        e.stopPropagation();
+        return editor.Pages.get(el.getAttribute('data-page-id'));
+    };
+    return html `<section class="pages">
+    <main class="pages__main ${pages.length === 1 ? 'pages__single-page' : ''}">
+      <div class="pages__list">
+        ${pages.map(page => {
+        const name = page.getName() || page.attributes.type;
+        // keep the same structure as the layers panel
+        return html `
+           <div class="pages__page ${selected === page ? 'pages__page-selected' : ''}" data-page-id=${page.id} @click=${e => selectPage(editor, getPageFromEvent(e))}>
+             <div class="pages__page-name">
+               ${name}
+             </div>
+             <i class="pages__icon pages__remove-btn fa fa-trash" @click=${e => removePage(editor, getPageFromEvent(e))}></i>
+             <i class="pages__icon fa fa-cog" @click=${e => settingsPage(editor, config, getPageFromEvent(e))}></i>
+           </div>
+          </div>
+          `;
+    })}
+      </div>
+      ${pages.length ? '' : html `<div class="flex-row">
+        No page yet.
+      </div>
+    `}
+    </main></section>`;
+}
+export const pagePanelPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+    // create wrapper
+    const el = document.createElement('div');
+    el.classList.add('pages__wrapper');
+    // update
+    const doRender = () => render(renderPages(editor, opts), el);
+    editor.on('page', () => {
+        doRender();
+    });
+    editor.on('load', () => {
+        open = false;
+        document.querySelector(opts.appendTo)
+            .appendChild(el);
+        doRender();
+        // click anywhere close it
+        // const close = (event) => {
+        //   if(open) {
+        //     editor.stopCommand(cmdTogglePages)
+        //     //event.preventDefault()
+        //   }
+        // }
+        // document.addEventListener('mousedown', close)
+        // add command to add pages
+        editor.Commands.add(cmdAddPage, () => addPage(editor, opts));
+    });
+});
+//# sourceMappingURL=page-panel.js.map

package/dist/plugins/client/client/grapesjs/page-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-panel.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/page-panel.ts"],"names":[],"mappings":"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"}

package/dist/plugins/client/client/grapesjs/project-bar.d.ts

@@ -0,0 +1 @@
+export declare const projectBarPlugin: (editor: any, opts: any) => void;

package/dist/plugins/client/client/grapesjs/project-bar.js

@@ -0,0 +1,106 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import { html, render } from 'lit-html';
+const panelId = 'project-bar-panel';
+const containerPanelId = 'project-bar-container';
+export const projectBarPlugin = (editor, opts) => {
+    // create the panels container for all panels in grapesjs
+    const containerPanel = editor.Panels.addPanel({
+        id: containerPanelId,
+        visible: false,
+    });
+    // create the project bar panel in grapesjs
+    const projectBarPanel = editor.Panels.addPanel({
+        id: panelId,
+        buttons: opts.panels,
+        visible: true,
+    });
+    const panelsEl = opts.panels.map(panel => {
+        const el = document.createElement('div');
+        // create container for panel
+        if (panel.attributes.containerClassName) {
+            el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden');
+            // add header
+            if (panel.attributes.title) {
+                render(html `
+          <header class="project-bar__panel-header">
+            <h3 class="project-bar__panel-header-title">${panel.attributes.title}</h3>
+            ${panel.buttons?.map(button => {
+                    return html `
+                <div
+                  class="project-bar__panel-header-button ${button.className}"
+                  @click=${e => editor.runCommand(button.command)}
+                ><span>${button.text}</span></div>
+              `;
+                })}
+          </header>
+        `, el);
+            }
+            // temporarily attach it to the body
+            // this lets the block manager and other plugins attach to their container
+            document.body.appendChild(el);
+            // on load attach the panels to the main container
+            // this is when the main containerPanel has an element
+            editor.on('load', () => {
+                const containerPanelEl = containerPanel.view.el;
+                containerPanelEl.appendChild(el);
+            });
+        }
+        // commands for show / hide panels
+        editor.Commands.add(panel.command, {
+            run() {
+                if (panel.link) {
+                    window.open(panel.link);
+                }
+                if (panel.attributes.containerClassName) {
+                    containerPanel.set('visible', true);
+                    el.classList.remove('gjs-hidden');
+                    editor.Canvas.getFrameEl().classList.add('silex-squeeze-left');
+                }
+            },
+            stop() {
+                if (panel.attributes.containerClassName) {
+                    containerPanel.set('visible', false);
+                    el.classList.add('gjs-hidden');
+                    editor.Canvas.getFrameEl().classList.remove('silex-squeeze-left');
+                }
+            },
+        });
+    });
+    function updateSqueez() {
+        const containerPanelEl = containerPanel.view.el;
+        const iframe = editor.Canvas.getFrameEl();
+        iframe.classList.remove('enable-squeeze');
+        setTimeout(() => {
+            const left = iframe.getClientRects()[0]?.left;
+            const right = containerPanelEl.getClientRects()[0]?.right;
+            if (left < right || !right)
+                iframe.classList.add('enable-squeeze');
+            else
+                iframe.classList.remove('enable-squeeze');
+        }, 400); // More than the transition duration
+        // make sure the squeez corresponds to the state (reset when change page)
+        if (containerPanel.get('visible'))
+            iframe.classList.add('silex-squeeze-left');
+        else
+            iframe.classList.remove('silex-squeeze-left');
+    }
+    editor.on('load device:select page', () => {
+        updateSqueez();
+    });
+};
+//# sourceMappingURL=project-bar.js.map