@silexlabs/silex 3.0.0-alpha.100

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,104 @@
+/*
+ * 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
+    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
+        // handle the case where command is a normal command, then let the Panel handle it
+        typeof panel.command === 'string' && editor.Commands.add(panel.command, {
+            run() {
+                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

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

@@ -0,0 +1 @@
+{"version":3,"file":"project-bar.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/project-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,IAAI,EAAE,MAAM,EAAC,MAAM,UAAU,CAAA;AAErC,MAAM,OAAO,GAAG,mBAAmB,CAAA;AACnC,MAAM,gBAAgB,GAAG,uBAAuB,CAAA;AAEhD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;IAC/C,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC5C,EAAE,EAAE,gBAAgB;QACpB,OAAO,EAAI,KAAK;KACjB,CAAC,CAAA;IACF,2CAA2C;IAC3C,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;QACrB,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,IAAI,CAAC,MAAM;QACpB,OAAO,EAAI,IAAI;KAChB,CAAC,CAAA;IACF,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAExC,6BAA6B;QAC7B,IAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,EAAE;YACtC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,EAAE,KAAK,CAAC,UAAU,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAA;YAEzF,aAAa;YACb,IAAG,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE;gBACzB,MAAM,CAAC,IAAI,CAAA;;0DAEwC,KAAK,CAAC,UAAU,CAAC,KAAM;cACnE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE;oBACvC,OAAO,IAAI,CAAA;;4DAE8C,MAAM,CAAC,SAAU;2BACnD,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC;yBACvC,MAAM,CAAC,IAAK;eACvB,CAAA;gBACb,CAAC,CAAE;;SAEI,EAAE,EAAE,CAAC,CAAA;aACP;YAED,oCAAoC;YACpC,0EAA0E;YAC1E,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;YAE7B,kDAAkD;YAClD,sDAAsD;YACtD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE;gBACrB,MAAM,gBAAgB,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAA;gBAC/C,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;YAClC,CAAC,CAAC,CAAA;SACH;QAED,kCAAkC;QAClC,kFAAkF;QAClF,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE;YACtE,GAAG;gBACD,IAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,EAAE;oBACtC,cAAc,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;oBACnC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAA;oBACjC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;iBAC/D;YACH,CAAC;YACD,IAAI;gBACF,IAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,EAAE;oBACtC,cAAc,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;oBACpC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;oBAC9B,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAA;iBAClE;YACH,CAAC;SACF,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IACF,SAAS,YAAY;QACnB,MAAM,gBAAgB,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAA;QAC/C,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAA;QACzC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;QACzC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,IAAI,GAAG,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAA;YAC7C,MAAM,KAAK,GAAG,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAA;YACzD,IAAG,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK;gBAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;;gBAC5D,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAA;QAChD,CAAC,EAAE,GAAG,CAAC,CAAA,CAAC,oCAAoC;QAC5C,yEAAyE;QACzE,IAAG,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC;YAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;;YACvE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAA;IACpD,CAAC;IACD,MAAM,CAAC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACxC,YAAY,EAAE,CAAA;IAChB,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist/plugins/client/client/grapesjs/rich-text.d.ts

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

package/dist/plugins/client/client/grapesjs/rich-text.js

@@ -0,0 +1,31 @@
+/*
+ * 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';
+const pluginName = 'richText';
+export const richTextPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+    editor.RichTextEditor.add('orderedList', {
+        icon: '1.',
+        attributes: { title: 'Ordered List' },
+        result: rte => rte.exec('insertOrderedList'),
+    });
+    editor.RichTextEditor.add('unorderedList', {
+        icon: '<i class="fa fa-list-ul"></i>',
+        attributes: { title: 'Unordered List' },
+        result: rte => rte.exec('insertUnorderedList'),
+    });
+});
+//# sourceMappingURL=rich-text.js.map

package/dist/plugins/client/client/grapesjs/rich-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.js","sourceRoot":"","sources":["../../../../../src/ts/client/grapesjs/rich-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,QAAQ,MAAM,6BAA6B,CAAA;AAEvD,MAAM,UAAU,GAAG,UAAU,CAAA;AAE7B,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;IAC9E,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,EAAE;QACvC,IAAI,EAAE,IAAI;QACV,UAAU,EAAE,EAAC,KAAK,EAAE,cAAc,EAAC;QACnC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC;KAC7C,CAAC,CAAA;IACF,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,eAAe,EAAE;QACzC,IAAI,EAAE,+BAA+B;QACrC,UAAU,EAAE,EAAC,KAAK,EAAE,gBAAgB,EAAC;QACrC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC;KAC/C,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

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

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

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

@@ -0,0 +1,110 @@
+/*
+ * 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';
+// constants
+const pluginName = 'semantic';
+const tags = [
+    'DIV',
+    'P',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'SPAN',
+    'MAIN',
+    'ASIDE',
+    'SECTION',
+    'ADDRESS',
+    'ARTICLE',
+    'BUTTON',
+    'NAV',
+    'HEADER',
+    'FOOTER',
+    'DETAILS',
+    'SUMMARY',
+    'PRE',
+    'BLOCKQUOTE',
+];
+// plugin code
+export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+    // 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,
+                        // Add the new trait
+                        {
+                            label: 'Tag name',
+                            type: 'tag-name',
+                        },
+                    ]
+                }
+            }
+        });
+    });
+    function doRender(el, tagName) {
+        const tagsWithCurrent = tags.includes(tagName.toUpperCase()) ? tags : tags.concat(tagName.toUpperCase());
+        render(html `
+      <label for="semantic__select" class="gjs-one-bg silex-label">Type</label>
+      <select id="semantic__select" @change=${event => doRender(el, event.target.value)}>
+        ${map(tagsWithCurrent, tag => html `
+          <option value="${tag}" ?selected=${tagName.toUpperCase() === tag}>${tag}</option>
+        `)}
+      </select>
+    `, el);
+    }
+    function doRenderCurrent(el) {
+        doRender(el, editor.getSelected()?.get('tagName') || '');
+    }
+    // Add semantic traits
+    // inspired by https://github.com/olivmonnier/grapesjs-plugin-header/blob/master/src/components.js
+    editor.TraitManager.addType('tag-name', {
+        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 value = elInput.querySelector('#semantic__select').value;
+            if (component.get('tagName').toUpperCase() === value.toUpperCase()) {
+                // Already done
+            }
+            else {
+                component.set('tagName', value);
+            }
+        },
+        // Update UI on the component change
+        onUpdate({ elInput, component }) {
+            const tagName = component.get('tagName');
+            doRender(elInput, tagName);
+        },
+    });
+});
+//# sourceMappingURL=semantic.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare const cmdOpenSettings = "open-settings";
+export declare const settingsDialog: any;