@silexlabs/silex 3.0.1-alpha.0 → 3.0.2

package/src/ts/client/grapesjs/project-bar.ts

@@ -1,92 +1,153 @@
+/*
+ * 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 { Editor, Panel } from 'grapesjs'
 import {html, render} from 'lit-html'
 
-const panelId = 'project-bar-panel'
-const containerPanelId = 'project-bar-container'
+export const PROJECT_BAR_PANEL_ID = 'project-bar-panel'
+export const containerPanelId = 'project-bar-container'
+
+export interface PanelObject {
+  command: string | ((editor: Editor) => void)
+  text: string
+  className: string
+  name?: string
+  attributes: {
+    title?: string
+    containerClassName?: string
+  }
+  buttons?: {
+    command: string
+    text: string
+    className: string
+  }[]
+  onClick?: (editor: Editor) => void
+}
 
 export const projectBarPlugin = (editor, opts) => {
   // create the panels container for all panels in grapesjs
   const containerPanel = editor.Panels.addPanel({
     id: containerPanelId,
-    visible  : false,
+    visible: false,
+    // resize project panel button
+    buttons: [{
+      id: 'resizeBlocks',
+      className: 'viewsOptionsProjectPanel__size-btn',
+      command: 'resize-ProjectPanel',
+      attributes: { title: 'Resize Project Panel' },
+    }],
+  })
+  // resize project panel command
+  editor.Commands.add('resize-ProjectPanel', {
+    run: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsProjectPanelWidth', '26%')
+    },
+    stop: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsProjectPanelWidth', '13%')
+    },
   })
   // create the project bar panel in grapesjs
-  const projectBarPanel = editor.Panels.addPanel({
-    id: panelId,
+  editor.Panels.addPanel({
+    id: PROJECT_BAR_PANEL_ID,
     buttons: opts.panels,
-    visible  : true,
+    visible: true,
   })
-  const panelsEl = opts.panels.map(panel => {
-    const el = document.createElement('div')
+  // add the panels to the container
+  opts.panels.map(panel => addButton(editor, panel))
 
-    // create container for panel
-    if(panel.attributes.containerClassName) {
-      el.classList.add('project-bar__panel', panel.attributes.containerClassName, 'gjs-hidden')
+  // Handle the preview mode which behaves oddly
+  editor.on('stop:preview', () => {
+    containerPanel.set('visible', false)
+    updateSqueez(editor)
+  })
 
-      // 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)
-      }
+  // All other events where the canvas is resized
+  editor.on('load device:select page', () => {
+    updateSqueez(editor)
+  })
+}
 
-      // temporarily attach it to the body
-      // this lets the block manager and other plugins attach to their container
-      document.body.appendChild(el)
+function updateSqueez(editor: Editor) {
+  const containerPanel = editor.Panels.getPanel(containerPanelId)
+  // make sure the squeez corresponds to the state (reset when change page)
+  if(containerPanel.get('visible')) document.body.classList.add('silex-squeeze-left')
+  else document.body.classList.remove('silex-squeeze-left')
+  editor.refresh()
+}
 
-      // 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)
-      })
+export function addButton(editor: Editor, panel: PanelObject) {
+  const containerPanel = editor.Panels.getPanel(containerPanelId)
+  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
+    const title = panel.name ?? panel.attributes.title
+    if(title) {
+      render(html`
+        <header class="project-bar__panel-header">
+          <h3 class="project-bar__panel-header-title">${ 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)
     }
-
-    // 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')
-        }
-      },
+    // 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)
     })
-  })
-  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()
+  // 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')
+        document.body.classList.add('silex-squeeze-left')
+        editor.refresh()
+      }
+      // Call the onClick function if it exists
+      if(panel.onClick) panel.onClick(editor)
+      // Remove the dirty flag
+      el.classList.remove('project-bar__dirty')
+    },
+    stop() {
+      if(panel.attributes.containerClassName) {
+        containerPanel.set('visible', false)
+        el.classList.add('gjs-hidden')
+        document.body.classList.remove('silex-squeeze-left')
+        editor.refresh()
+      }
+      // Call the onClick function if it exists
+      if(panel.onClick) panel.onClick(editor)
+      // Remove the dirty flag
+      el.classList.remove('project-bar__dirty')
+    },
   })
 }

package/src/ts/client/grapesjs/resize-panel.ts

@@ -0,0 +1,20 @@
+export default function(editor) {
+  editor.Panels.addPanel({
+    id: 'viewsOptions',
+    buttons: [{
+      id: 'resize',
+      // icon for arrow left
+      className: 'viewsOptions__size-btn',
+      command: 'resize-panel',
+      attributes: { title: 'Resize panel' },
+    }],
+  })
+  editor.Commands.add('resize-panel', {
+    run: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsPanelWidth', '40%')
+    },
+    stop: (editor, sender) => {
+      document.documentElement.style.setProperty('--viewsPanelWidth', '20%')
+    },
+  })
+}

package/src/ts/client/grapesjs/rich-text.ts

@@ -1,16 +1,41 @@
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+/*
+ * 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 { RichTextEditorAction } from 'grapesjs'
 
 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'),
-  })
-})
+export const orderedList: RichTextEditorAction = {
+  name: 'orderedList',
+  icon: '1.',
+  attributes: { title: 'Ordered List' },
+  result: rte => rte.exec('insertOrderedList'),
+}
+
+export const unorderedList: RichTextEditorAction = {
+  name: 'unorderedList',
+  icon: '•',
+  //icon: '<i class="fa fa-list-ul"></i>',
+  attributes: { title: 'Unordered List' },
+  result: rte => rte.exec('insertUnorderedList'),
+}
+
+export const richTextPlugin = (editor, opts) => {
+  // This doesn't work, it is now added in the editor config
+  //editor.RichTextEditor.add('orderedList', orderedList)
+  //editor.RichTextEditor.add('unorderedList', unorderedList)
+}

package/src/ts/client/grapesjs/semantic.ts

@@ -1,6 +1,22 @@
+/*
+ * 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'
@@ -31,7 +47,7 @@ const tags = [
 ]
 
 // plugin code
-export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+export const semanticPlugin = (editor, opts) => {
   // Add the new trait to all component types
   editor.DomComponents.getTypes().map(type => {
     editor.DomComponents.addType(type.id, {
@@ -44,6 +60,7 @@ export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =>
             {
               label: 'Tag name',
               type: 'tag-name',
+              name: 'tag-name',
             },
           ]
         }
@@ -94,4 +111,4 @@ export const semanticPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =>
       doRender(elInput, tagName)
     },
   })
-})
+}

package/src/ts/client/grapesjs/settings-sections.ts

@@ -0,0 +1,117 @@
+import {live} from 'lit-html/directives/live.js'
+import {html, TemplateResult} from 'lit-html'
+import { WebsiteSettings } from '../../types'
+
+// ID of the code editor wrapper
+export const idCodeWrapper = 'settings-head-wrapper'
+
+// Is the model a site or a page?
+export function isSite(model: any) { return !!model.getHtml }
+
+export interface SettingsSection {
+  id: string
+  label: string
+  render: (settings: WebsiteSettings, model: Backbone.Model) => TemplateResult
+}
+
+/**
+ * This is the settings dialog default sections
+ * Each section has an entry in the sidebar
+ * Each section render as part of the settings form
+ * The form is submitted to save the settings with all FormData
+ */
+export const defaultSections: SettingsSection[] = [{
+  id: 'general',
+  label: 'General',
+  render: (settings, model) => html`
+    <div id="settings-general" class="silex-hideable">
+      <div class="gjs-sm-sector-title">General</div>
+      <div class="silex-form__group col2">
+        <label class="silex-form__element">
+          <h3>${isSite(model) ? 'Site name' : 'Page name'}</h3>
+          <p class="silex-help">${isSite(model) ? 'The project name in the editor, for you to remember what it is about.' : 'Label of the page in the editor, and file name of the published HTML page.'}</p>
+          <input type="text" name="name" .value=${live(model.get('name') || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Website language</h3>
+          <p class="silex-help">This is the default language code for this website. Example: en, fr, es...</p>
+          <input type="text" name="lang" .value=${live(settings.lang || '')}/>
+        </label>
+      </div>
+    </div>
+  `,
+}, {
+  id: 'seo',
+  label: 'SEO',
+  render: (settings, model) => html`
+    <div id="settings-seo" class="silex-hideable silex-hidden">
+      <div class="gjs-sm-sector-title">SEO</div>
+      <div class="silex-form__group col2">
+        <label class="silex-form__element">
+          <h3>Title</h3>
+          <p class="silex-help">Title of the browser window, and title in the search engines results. It is used by search engines to find out what your site is talking about. The title should be a maximum of 70 characters long, including spaces.</p>
+          <input type="text" name="title" .value=${live(settings.title || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Description</h3>
+          <p class="silex-help">Description displayed by the search engines in search results. It is used by search engines to find out what your site is talking about. It is best to keep meta descriptions between 150 and 160 characters.</p>
+          <input type="text" name="description" .value=${live(settings.description || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Favicon</h3>
+          <p class="silex-help">Small image displayed in the browser's address bar and in tabs. The recommended size is 16×16 or 32×32 pixels. This can be a URL or a relative path.</p>
+          <input type="text" name="favicon" .value=${live(settings.favicon || '')}/>
+        </label>
+      </div>
+    </div>
+  `,
+}, {
+  id: 'social',
+  label: 'Social',
+  render: (settings, model) => html`
+    <div id="settings-social" class="silex-hideable silex-hidden">
+      <div class="gjs-sm-sector-title">Social</div>
+      <div class="silex-help">
+        <p>Once your website is live, you can use these tools to test sharing:&nbsp;<a target="_blank" href="https://developers.facebook.com/tools/debug/">Facebook</a>,
+        <a target="_blank" href="https://cards-dev.twitter.com/validator">Twitter</a>,
+        <a target="_blank" href="https://www.linkedin.com/post-inspector/inspect/">Linkedin</a></p>
+      </div>
+      <div class="silex-form__group col2">
+        <label class="silex-form__element">
+          <h3>Title</h3>
+          <p class="silex-help">The title of your website displayed when a user shares your website on a social network.
+        Do not include any branding in this title, just eye-catching phrase, e.g. "Learn everything about fishing".
+        Title should be between 60 and 90 characters long.</p>
+          <input type="text" name="og:title" .value=${live(settings['og:title'] || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Description</h3>
+          <p class="silex-help">Description displayed when a user shares your website on a social network. Make it catchy, and invite readers to visit your website too, e.g. "Sam's website about fishing, check it out!" Title should be between 60 and 90 characters long.</p>
+          <input type="text" name="og:description" .value=${live(settings['og:description'] || '')}/>
+        </label>
+        <label class="silex-form__element">
+          <h3>Image</h3>
+          <div class="silex-help">
+            <p>Thumbnail image which is displayed when your website is shared on a social network. The optimal size is 1200×627 pixels. At this size, your thumbnail will be big and stand out from the crowd. But do not exceed the 5MB size limit. If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail.</p>
+            <p>Please enter the full URL here, e.g. "http://mysite.com/path/to/image.jpg"</p>
+          </div>
+          <input type="text" name="og:image" .value=${live(settings['og:image'] || '')}/>
+        </label>
+      </div>
+    </div>
+  `,
+}, {
+  id: 'code',
+  label: 'Code',
+  render: (settings, model) => html`
+    <div id="settings-code" class="silex-hideable silex-hidden">
+      <div class="gjs-sm-sector-title">Code</div>
+      <div class="silex-form__group">
+        <label class="silex-form__element" id="${idCodeWrapper}">
+          <h3>HTML head</h3>
+          <p class="silex-help">HTML code which will be inserted in the HEAD tag.</p>
+        </label>
+      </div>
+    </div>
+  `,
+}]