@silexlabs/silex 3.0.0-alpha.97 → 3.0.0

package/src/ts/client/publication-transformers.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, CssRule, Editor, ObjectStrings, Page } from 'grapesjs'
-import { ClientSideFile, ClientSideFileType, ClientSideFileWithPermalink, PublicationData } from '../types'
+import { ClientSideFile, ClientSideFileType, ClientSideFileWithPermalink, Initiator, PublicationData } from '../types'
 import { onAll } from './utils'
 
 /**
@@ -47,11 +47,42 @@ export interface PublicationTransformer {
   // Transform files after they are rendered and before they are published
   transformFile?(file: ClientSideFile): ClientSideFile
   // Define files URLs
-  transformPermalink?(link: string, type: ClientSideFileType): string
+  transformPermalink?(link: string, type: ClientSideFileType, initiator: Initiator): string
   // Define where files are published
   transformPath?(path: string, type: ClientSideFileType): string
 }
 
+export const publicationTransformerDefault: PublicationTransformer = {
+  // Override how components render at publication by grapesjs
+  renderComponent(component: Component, toHtml: () => string): string | undefined {
+    return toHtml()
+  },
+  // Override how styles render at publication by grapesjs
+  renderCssRule(rule: CssRule, initialRule: () => ObjectStrings): ObjectStrings | undefined {
+    return initialRule()
+  },
+  // Define where files are published
+  transformPath(path: string, type: ClientSideFileType): string {
+    return path
+  },
+  // Define files URLs
+  transformPermalink(link: string, type: ClientSideFileType, initiator: Initiator): string {
+    switch(initiator) {
+    case Initiator.HTML:
+      return link
+    case Initiator.CSS:
+      // In case of a link from a CSS file, we need to go up one level
+      return `../${link.replace(/^\//, '')}`
+    default:
+      throw new Error(`Unknown initiator ${initiator}`)
+    }
+  },
+  // Define how files are named
+  transformFile(file: ClientSideFile): ClientSideFile {
+    return file
+  }
+}
+
 export function validatePublicationTransformer(transformer: PublicationTransformer): void {
   // List all the properties
   const allowedProperties = [
@@ -77,7 +108,6 @@ export function validatePublicationTransformer(transformer: PublicationTransform
   })
 }
 
-
 /**
  * Alter the components rendering
  * Exported for unit tests
@@ -97,7 +127,7 @@ export function renderComponents(editor: Editor) {
         c[ATTRIBUTE_METHOD_STORE_HREF] = href
         c.set('attributes', {
           ...c.get('attributes'),
-          href: transformPermalink(editor, href, ClientSideFileType.HTML),
+          href: transformPermalink(editor, href, ClientSideFileType.HTML, Initiator.HTML),
         })
       }
       // Handle both c.attributes.src and c.attributes.attributes.src
@@ -105,7 +135,7 @@ export function renderComponents(editor: Editor) {
       // Especially when the component is not on the current page, we need c.attributes.attributes.src
       if(c.get('attributes').src) {
         c[ATTRIBUTE_METHOD_STORE_SRC] = c.get('attributes').src
-        const src = transformPermalink(editor, c.get('attributes').src, ClientSideFileType.ASSET)
+        const src = transformPermalink(editor, c.get('attributes').src, ClientSideFileType.ASSET, Initiator.HTML)
         c.set('attributes', {
           ...c.get('attributes'),
           src,
@@ -113,17 +143,12 @@ export function renderComponents(editor: Editor) {
       }
       if(c.get('src')) {
         c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC] = c.get('src')
-        const src = transformPermalink(editor, c.get('src'), ClientSideFileType.ASSET)
+        const src = transformPermalink(editor, c.get('src'), ClientSideFileType.ASSET, Initiator.HTML)
         c.set('src', src)
       }
       c.toHTML = () => {
         return config.publicationTransformers.reduce((html: string, transformer: PublicationTransformer) => {
-          try {
-            return transformer.renderComponent ? transformer.renderComponent(c, () => html) ?? html : html
-          } catch (e) {
-            console.error('Publication transformer: error rendering component', c, e)
-            return html
-          }
+          return transformer.renderComponent ? transformer.renderComponent(c, () => html) ?? html : html
         }, initialToHTML())
       }
       c.getStyle = () => transformBgImage(editor, initialGetStyle())
@@ -144,17 +169,13 @@ export function renderCssRules(editor: Editor) {
       const initialGetStyle = style.getStyle.bind(style)
       style[ATTRIBUTE_METHOD_STORE_CSS] = style.getStyle
       style.getStyle = () => {
-        try {
-          const result = config.publicationTransformers.reduce((s: CssRule, transformer: PublicationTransformer) => {
-            return {
-              ...transformer.renderCssRule ? transformer.renderCssRule(s, initialGetStyle) ?? s : s,
-            }
-          }, transformBgImage(editor, initialGetStyle()))
-          return result
-        } catch (e) {
-          console.error('Publication transformer: error rendering style', style, e)
-          return initialGetStyle()
-        }
+        const initialStyle = transformBgImage(editor, initialGetStyle())
+        const result = config.publicationTransformers.reduce((s: CssRule, transformer: PublicationTransformer) => {
+          return {
+            ...transformer.renderCssRule ? transformer.renderCssRule(s, () => initialStyle) ?? s : s,
+          }
+        }, initialStyle)
+        return result
       }
     }
   })
@@ -164,12 +185,19 @@ export function renderCssRules(editor: Editor) {
  * Transform background image url according to the transformed path of assets
  */
 export function transformBgImage(editor: Editor, style: ObjectStrings): ObjectStrings {
-  const url = style['background-image']
-  const bgUrl = url?.match(/url\(["']?(.*?)["']?\)/)?.pop()
-  if (bgUrl) {
+  const cssValue = style['background-image']
+  if (cssValue) {
+    const newCssValue = cssValue.replace(/url\(([^)]+)\)/g, (match, url) => {
+      // Support URLs with or without quotes
+      const cleanUrl = url.replace(/['"]/g, '')
+      // Transform URLs
+      const newUrl = transformPermalink(editor, cleanUrl, ClientSideFileType.ASSET, Initiator.CSS)
+      // Return the new URL with url keyword
+      return `url(${newUrl})`
+    })
     return {
       ...style,
-      'background-image': `url(${transformPermalink(editor, bgUrl, ClientSideFileType.ASSET)})`,
+      'background-image': newCssValue,
     }
   }
   return style
@@ -183,13 +211,8 @@ export function transformFiles(editor: Editor, data: PublicationData) {
   const config = editor.getModel().get('config')
   data.files = config.publicationTransformers.reduce((files: ClientSideFile[], transformer: PublicationTransformer) => {
     return files.map((file, idx) => {
-      try {
-        const page = data.pages[idx] ?? null
-        return transformer.transformFile ? transformer.transformFile(file) as ClientSideFile ?? file : file
-      } catch (e) {
-        console.error('Publication transformer: error transforming file', file, e)
-        return file
-      }
+      const page = data.pages[idx] ?? null
+      return transformer.transformFile ? transformer.transformFile(file) as ClientSideFile ?? file : file
     })
   }, data.files)
 }
@@ -198,27 +221,17 @@ export function transformFiles(editor: Editor, data: PublicationData) {
  * Transform files paths
  * Exported for unit tests
  */
-export function transformPermalink(editor: Editor, path: string, type: ClientSideFileType): string {
+export function transformPermalink(editor: Editor, path: string, type: ClientSideFileType, initiator: Initiator): string {
   const config = editor.getModel().get('config')
   return config.publicationTransformers.reduce((result: string, transformer: PublicationTransformer) => {
-    try {
-      return transformer.transformPermalink ? transformer.transformPermalink(result, type) ?? result : result
-    } catch (e) {
-      console.error('Publication transformer: error transforming path', result, e)
-      return result
-    }
+    return transformer.transformPermalink ? transformer.transformPermalink(result, type, initiator) ?? result : result
   }, path)
 }
 
 export function transformPath(editor: Editor, path: string, type: ClientSideFileType): string {
   const config = editor.getModel().get('config')
   return config.publicationTransformers.reduce((result: string, transformer: PublicationTransformer) => {
-    try {
-      return transformer.transformPath ? transformer.transformPath(result, type) ?? result : result
-    } catch (e) {
-      console.error('Publication transformer: error transforming path', result, e)
-      return result
-    }
+    return transformer.transformPath ? transformer.transformPath(result, type) ?? result : result
   }, path)
 }
 

package/{dist/plugins/client/client/utils.js → src/ts/client/publish-custom-code-block.ts}

@@ -14,12 +14,18 @@
  * 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/>.
  */
-// Browse all elements of all pages
-export function onAll(editor, cbk) {
-    editor.Pages.getAll()
-        .forEach(page => {
-        page.getMainComponent()
-            .onAll(c => cbk(c));
-    });
+
+/**
+ * @fileoverview Make sure custom script blocks include script tags when published
+ */
+
+export default async function (config) {
+  config.addPublicationTransformers({
+    renderComponent(component, toHtml) {
+      if (component.get('type') === 'custom-code' && component.get('custom-code-plugin__code')) {
+        return component.get('custom-code-plugin__code')
+      }
+      return toHtml()
+    },
+  })
 }
-//# sourceMappingURL=utils.js.map

package/{dist/plugins/client/page.js → src/ts/client/publish-fonts.ts}

@@ -14,18 +14,23 @@
  * 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/>.
  */
-// Page related functions
-// This is used on the client and the server
-export function getPageSlug(pageName) {
-    return (pageName || 'index')
-        .toLowerCase()
-        .replace(/[^a-z0-9 -]/g, '')
-        // Collapse whitespace and replace by -
-        .replace(/\s+/g, '-')
-        // Collapse dashes
-        .replace(/-+/g, '-');
-}
-export function getPageLink(pageName) {
-    return `./${getPageSlug(pageName)}.html`;
+
+import { ClientSideFile, ClientSideFileType, ClientSideFileWithContent } from '../types'
+import { cmdGetHtml } from '@silexlabs/grapesjs-fonts'
+
+/**
+ * @fileoverview Make sure custom script blocks include script tags when published
+ */
+
+export default async function (config) {
+  config.addPublicationTransformers({
+    transformFile(file: ClientSideFile): ClientSideFile {
+      const fileWithContent = file as ClientSideFileWithContent
+      if(fileWithContent.type === ClientSideFileType.HTML && fileWithContent.content) {
+        const htmlLinks = config.getEditor().runCommand(cmdGetHtml)
+        fileWithContent.content = fileWithContent.content.replace(/<\/head>/, `${htmlLinks}</head>`)
+      }
+      return file
+    },
+  })
 }
-//# sourceMappingURL=page.js.map

package/src/ts/client/utils.ts

@@ -26,3 +26,21 @@ export function onAll(editor: Editor, cbk: (c: Component) => void) {
         .onAll(c => cbk(c))
     })
 }
+
+/**
+ * SHA256 hash a string
+ */
+export async function hashString(str: string): Promise<string> {
+  // Convert the string to an ArrayBuffer
+  const encoder = new TextEncoder()
+  const data = encoder.encode(str)
+
+  // Hash the data with SHA-256
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+
+  // Convert the ArrayBuffer to hex string
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
+
+  return hashHex
+}

package/src/ts/constants.ts

@@ -45,6 +45,7 @@ export const API_WEBSITE_READ = '/'
 export const API_WEBSITE_WRITE = '/'
 export const API_WEBSITE_CREATE = '/'
 export const API_WEBSITE_DELETE = '/'
+export const API_WEBSITE_DUPLICATE = '/duplicate'
 export const API_WEBSITE_LIST = '/'
 export const API_WEBSITE_ASSET_READ = '/assets'
 export const API_WEBSITE_ASSETS_WRITE = '/assets'

package/src/ts/plugins/client/template.ts

@@ -33,9 +33,43 @@ const pluginName = 'template'
 const templateType = 'templateType'
 const templateKey = 'template'
 
+function createCodeEditor(editor, mode = 'htmlmixed', singleLine = false) {
+  const options = {
+    readOnly: false,
+    codeName: mode,
+  } as any
+  if(singleLine) {
+    options.lineWrapping = false
+    options.lineNumbers = false
+    options.indentWithTabs = false
+  } else {
+    options.lineNumbers = true
+    options.lineWrapping = true
+  }
+
+  return editor.CodeManager.createViewer(options)
+}
+
 export default async (config, opts: any = {}) => {
   config.on(ClientEvent.GRAPESJS_END, () => {
     const editor = silex.getEditor()
+    // Get the necessary code editors
+    const editors = {
+      before: createCodeEditor(editor),
+      replace: createCodeEditor(editor),
+      after: createCodeEditor(editor),
+      attributes: createCodeEditor(editor, 'text', true),
+      classname: createCodeEditor(editor, 'text', true),
+      style: createCodeEditor(editor, 'css', true),
+    }
+    const is1line = {
+      before: false,
+      replace: false,
+      after: false,
+      attributes: true,
+      classname: true,
+      style: true,
+    }
     // Add the new trait to all component types
     editor.DomComponents.getTypes().map(type => {
       const originalType = editor.DomComponents.getType(type.id)
@@ -60,7 +94,7 @@ export default async (config, opts: any = {}) => {
     function doRender(el) {
       const template = editor.getSelected()?.get(templateKey) || {}
       const taStyle = opts.styles?.textarea ?? styleMap({
-        backgroundColor: 'var(--darkerPrimaryColor)',
+        xxbackgroundColor: 'var(--darkerPrimaryColor)',
       })
       const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' })
       const labels = {
@@ -72,31 +106,61 @@ export default async (config, opts: any = {}) => {
         style: html`CSS styles`,
       }
       render(html`
+      <style>
+        .CodeMirror {
+          height: 100%;
+        }
+      </style>
       <div>
         <h3>Template</h3>
         <p>This will be inserted in the published version</p>
       </div>
-      ${['classname', 'attributes', 'style'].map(id => html`
-      <label>
+      ${[
+    'classname',
+    'attributes',
+    'style',
+    'before',
+    'replace',
+    'after',
+  ].map(id => html`
+      <label data-contain="${id}" class="template-wrapper-${id}">
         ${labels[id]}
-        <input
-          id="template-${id}"
-          .value=${template[id] || ''}
-          style=${taStyle}
-          />
       </label>
       `)}
-      ${['before', 'replace', 'after'].map(id => html`
-        <label
-          for="template-${id}"
-          >${labels[id]}</label>
-        <textarea
-          id="template-${id}"
-          style=${taStyle}
-          .value=${template[id] || ''}
-          ></textarea>
-      `)}
     `, el)
+      el.querySelectorAll('[data-contain]').forEach(container => {
+        const id = container.getAttribute('data-contain')
+        const codeEditor = editors[id]
+        container.appendChild(codeEditor.getElement())
+        codeEditor.getElement().style.display = 'block'
+        codeEditor.getElement().style.height = is1line[id] ? '' : '200px'
+        codeEditor.getElement().style.width = '100%'
+        codeEditor.setContent(template[id] ?? '')
+        codeEditor.refresh()
+      })
+      // Make sure we apply the changes when the user presses any key
+      // The events should be triggered by the trait manager (call onEvent) but it doesn't work for "delete" key for example
+      el.onkeyup = () => {
+        applyChanges(editor.getSelected())
+      }
+    }
+
+    function applyChanges(component) {
+      const template = {
+        before: editors.before.getContent(),
+        replace: editors.replace.getContent(),
+        after: editors.after.getContent(),
+        attributes: editors.attributes.getContent(),
+        classname: editors.classname.getContent(),
+        style: editors.style.getContent(),
+      }
+
+      // Store the new template
+      if (Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
+        component.set(templateKey, template)
+      } else {
+        component.set(templateKey)
+      }
     }
 
     editor.TraitManager.addType(templateType, {
@@ -113,21 +177,7 @@ export default async (config, opts: any = {}) => {
       // Update the component based on UI changes
       // `elInput` is the result HTMLElement you get from `createInput`
       onEvent({ elInput, component, event }) {
-        const template = {
-          before: elInput.querySelector('#template-before').value,
-          replace: elInput.querySelector('#template-replace').value,
-          after: elInput.querySelector('#template-after').value,
-          attributes: elInput.querySelector('#template-attributes').value,
-          classname: elInput.querySelector('#template-classname').value,
-          style: elInput.querySelector('#template-style').value,
-        }
-
-        // Store the new template
-        if (Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
-          component.set(templateKey, template)
-        } else {
-          component.set(templateKey)
-        }
+        applyChanges(component)
       },
       // Update UI on the component change
       onUpdate({ elInput, component }) {
@@ -154,39 +204,41 @@ export default async (config, opts: any = {}) => {
         // put back together
         .join('\n')
     }
-    editor.on(ClientEvent.PUBLISH_START, () => {
-      // Insert templates
-      onAll(editor, c => {
-        const template = c.get(templateKey)
-        const toHTML = c.toHTML
-        const classes = c.getClasses()
-        const before = cleanup(template?.before || '')
-        const replace = cleanup(template?.replace || '')
-        const after = cleanup(template?.after || '')
-        const classname = cleanup(template?.classname || '')
-        const style = cleanup(template?.style || '')
-        const attributes = cleanup(template?.attributes || '')
-        // Store the initial method
-        if (!c.has('tmpHtml')) c.set('tmpHtml', toHTML)
-        // Override the method
-        c.toHTML = () => {
-          return `${before
-          }${c.get('tagName') ? `<${c.get('tagName')}
+    if (opts.publication !== false) {
+      editor.on(ClientEvent.PUBLISH_START, () => {
+        // Insert templates
+        onAll(editor, c => {
+          const template = c.get(templateKey)
+          const toHTML = c.toHTML
+          const classes = c.getClasses()
+          const before = cleanup(template?.before || '')
+          const replace = cleanup(template?.replace || '')
+          const after = cleanup(template?.after || '')
+          const classname = cleanup(template?.classname || '')
+          const style = cleanup(template?.style || '')
+          const attributes = cleanup(template?.attributes || '')
+          // Store the initial method
+          if (!c.has('tmpHtml')) c.set('tmpHtml', toHTML)
+          // Override the method
+          c.toHTML = () => {
+            return `${before
+            }${c.get('tagName') ? `<${c.get('tagName')}
             ${Object.entries(c.get('attributes') as object).map(([key, value]) => makeAttribute(key, value)).join(' ')}
             ${classes.length || classname ? `class="${classes.join(' ')} ${classname}"` : ''}
             ${attributes}
             ${style ? `style="${style}"` : ''}
             >` : ''}${replace || c.getInnerHTML()
-          }${c.get('tagName') ? `</${c.get('tagName')}>` : ''}${after
-          }`
-        }
+            }${c.get('tagName') ? `</${c.get('tagName')}>` : ''}${after
+            }`
+          }
+        })
       })
-    })
-    editor.on(ClientEvent.PUBLISH_END, () => {
-      onAll(editor, c => {
-        // Restore the original method
-        c.toHTML = c.get('tmpHtml')
+      editor.on(ClientEvent.PUBLISH_END, () => {
+        onAll(editor, c => {
+          // Restore the original method
+          c.toHTML = c.get('tmpHtml')
+        })
       })
-    })
+    }
   })
 }

package/src/ts/plugins/server/FtpConnector.ts

@@ -23,9 +23,10 @@ import { WEBSITE_DATA_FILE, WEBSITE_META_DATA_FILE } from '../../constants'
 import { ConnectorType, ConnectorUser, WebsiteMeta, FileMeta, JobData, JobStatus, WebsiteId, PublicationJobData, WebsiteMetaFileContent, defaultWebsiteData, WebsiteData, ConnectorOptions } from '../../types'
 import { ServerConfig } from '../../server/config'
 import { join } from 'path'
-import { type } from 'os'
+import { tmpdir } from 'os'
 import { v4 as uuid } from 'uuid'
 import { JobManager } from '../../server/jobs'
+import { mkdtemp } from 'fs/promises'
 
 /**
  * @fileoverview FTP connector for Silex
@@ -338,7 +339,6 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
 
   async getLoginForm(session: FtpSession, redirectTo: string): Promise<string | null> {
     const { host, user, pass, port, secure, publicationPath, storageRootPath, websiteUrl } = this.sessionData(session)
-    requiredParam(type, 'connector type')
     return `
         <style>
           ${formCss}
@@ -491,6 +491,18 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     this.closeClient(ftp)
   }
 
+  async duplicateWebsite(session: FtpSession, websiteId: string): Promise<void> {
+    const newWebsiteId = uuid()
+    const storageRootPath = this.rootPath(session)
+    const ftp = await this.getClient(this.sessionData(session))
+    const websitePath = join(storageRootPath, websiteId)
+    const newWebsitePath = join(storageRootPath, newWebsiteId)
+    const tempDir = await mkdtemp(tmpdir())
+    await ftp.downloadToDir(websitePath, tempDir)
+    await ftp.uploadFromDir(tempDir, newWebsitePath)
+    this.closeClient(ftp)
+  }
+
   async writeAssets(
     session: any,
     id: WebsiteId,