@silexlabs/silex 3.0.2 → 3.0.4

package/src/ts/client/grapesjs/storage.ts

@@ -18,12 +18,19 @@
 import { ConnectorId, WebsiteId, WebsiteData, ConnectorUser, ConnectorType, ApiError } from '../../types'
 import { websiteLoad, websiteSave } from '../api'
 import { cmdLogin, eventLoggedIn, eventLoggedOut, getCurrentUser, updateUser } from './LoginDialog'
-import { addTempDataToPages, addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl, removeTempDataFromPages, removeTempDataFromStyles } from '../assetUrl'
-import { PublicationStatus } from './PublicationManager'
+import { addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl, removeTempDataFromStyles } from '../assetUrl'
+import { PublicationStatus, PublishableEditor } from './PublicationManager'
 import { ClientEvent } from '../events'
+import { ProjectData } from 'grapesjs'
 
 export const cmdPauseAutoSave = 'pause-auto-save'
 
+// Wait for the next frame to avoid blocking the main thread
+function nextFrame(): Promise<void> {
+  const fn = window.requestIdleCallback ?? window.requestAnimationFrame
+  return new Promise(resolve => fn(() => resolve()))
+}
+
 // Mechanism to keep only the last save during publication
 let lastPendingSaving: WebsiteData = null
 
@@ -31,7 +38,7 @@ let lastPendingSaving: WebsiteData = null
 // Note: there is already such a mechanism in grapesjs but it fails when the save is delayed by the publication
 let isSaving = false
 
-export const storagePlugin = (editor) => {
+export const storagePlugin = (editor: PublishableEditor) => {
   // Add useful commands
   editor.Commands.add(cmdPauseAutoSave, {
     run: () => {
@@ -46,25 +53,24 @@ export const storagePlugin = (editor) => {
   })
   // Add the storage connector
   editor.Storage.add('connector', {
-    async load(options: { id: WebsiteId, connectorId: ConnectorId }): Promise<WebsiteData> {
+    async load(options: { id: WebsiteId, connectorId: ConnectorId }): Promise<ProjectData> {
       try {
         const user: ConnectorUser = await getCurrentUser(editor) ?? await updateUser(editor, ConnectorType.STORAGE, options.connectorId)
         if (!user) throw new ApiError('Not logged in', 401)
         const data = await websiteLoad({ websiteId: options.id, connectorId: user.storage.connectorId }) as WebsiteData
         if (data.assets) data.assets = addTempDataToAssetUrl(data.assets, options.id, user.storage.connectorId)
-        if (data.pages) data.pages = addTempDataToPages(data.pages, options.id, user.storage.connectorId)
         if (data.styles) data.styles = addTempDataToStyles(data.styles, options.id, user.storage.connectorId)
-        return data
-
+        //setTimeout(() => progressiveLoadPages(editor, data))
+        await progressiveLoadPages(editor, data)
+        return {}
       } catch (err) {
         editor.UndoManager.clear()
         if (err.httpStatusCode === 401) {
           editor.once(eventLoggedIn, async () => {
             try {
               editor.runCommand(cmdPauseAutoSave)
-              const data = await editor.Storage.load(options)
+              await editor.Storage.load(options)
               editor.once('canvas:frame:load', () => editor.stopCommand(cmdPauseAutoSave))
-              editor.loadProjectData(data)
             } catch (err) {
               console.error('connectorPlugin load error', err)
               throw err
@@ -94,7 +100,7 @@ export const storagePlugin = (editor) => {
     },
 
     async doStore(data, options) {
-      if (editor.PublicationManager?.status === PublicationStatus.STATUS_PENDING) {
+      if (editor.PublicationManager.status === PublicationStatus.STATUS_PENDING) {
         // Publication is pending, save is delayed
         return new Promise((resolve) => {
           editor.once(ClientEvent.PUBLISH_END, () => {
@@ -115,7 +121,6 @@ export const storagePlugin = (editor) => {
             const user = await getCurrentUser(editor)
             if (user) {
               data.assets = removeTempDataFromAssetUrl(data.assets)
-              data.pages = removeTempDataFromPages(data.pages)
               data.styles = removeTempDataFromStyles(data.styles)
               await websiteSave({ websiteId: options.id, connectorId: user.storage.connectorId, data })
               isSaving = false
@@ -123,7 +128,7 @@ export const storagePlugin = (editor) => {
               // Not logged in save is delayed
               editor.once(eventLoggedIn, () => {
                 isSaving = false
-                return editor.Storage.store()
+                return editor.Storage.store(data, options)
               })
               editor.Commands.run(cmdLogin)
             }
@@ -185,3 +190,24 @@ export const storagePlugin = (editor) => {
     }
   }
 }
+
+async function progressiveLoadPages(editor: PublishableEditor, data: ProjectData) {
+  editor.Pages.getAll().forEach(page => editor.Pages.remove(page))
+  let i = 0
+  for (const page of data.pages) {
+    document.querySelector('.silex-loader').innerHTML = `Loading page ${++i} / ${data.pages.length}`
+    await nextFrame()
+    const newPage = editor.Pages.add({
+      ...page,
+    })
+  }
+
+  // Charger les styles, assets, etc. après les pages
+  document.querySelector('.silex-loader').innerHTML = 'Loading styles and assets'
+  if (data.styles) editor.setStyle(data.styles)
+  if (data.assets) editor.AssetManager.add(data.assets)
+
+  // Sélectionner la première page
+  const firstPage = editor.Pages.getAll()[0]
+  if (firstPage) editor.Pages.select(firstPage)
+}

package/src/ts/client/index.ts

@@ -21,11 +21,13 @@
  *
  */
 
+import { Component, ComponentView } from 'grapesjs'
 import { DEV_MESSAGE } from '../constants'
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
 import { cmdPauseAutoSave } from './grapesjs/storage'
+import { displayedToStored, storedToDisplayed } from './assetUrl'
 
 // Expose API to calling app as window.silex
 export * from './expose'
@@ -83,6 +85,42 @@ export async function start(options = {}): Promise<void> {
   // Add default plugins
   await config.addDefaultPlugins()
 
+  const domc = editor.DomComponents
+  const imgType = domc.getType('image')
+  domc.addType('image', {
+    ...imgType,
+    view: {
+      ...imgType.view,
+      onRender() {
+        const view = this as ComponentView
+        imgType.view.onRender && imgType.view.onRender.call(this) // call original
+        const el = view.el
+        const elImg = view.el as HTMLImageElement
+        const src = this.model.getAttributes().src
+        if (src && !src.startsWith('http')) {
+          elImg.src = storedToDisplayed(src, config.websiteId, config.storageId)
+        }
+      },
+    },
+    model: {
+      ...imgType.model,
+      init() {
+        const model = this as Component
+        imgType.model.init && imgType.model.init.call(this) // call original
+        // Handle changes by the AssetManager
+        model.on('change', () => {
+          if(model.get('src')) {
+            const newSrc = displayedToStored(model.get('src'))
+            if(newSrc !== model.get('src')) {
+              model.set('src', newSrc)
+              model.view.render()
+            }
+          }
+        })
+      },
+    },
+  })
+
   // Load the site
   try {
     editor.runCommand(cmdPauseAutoSave)

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

@@ -139,26 +139,26 @@ describe('publication-transformers', () => {
   })
 
   it('should transform a style rule with background image', () => {
-    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': 'url(test.png)' })
+    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': 'url("test.png")' })
     const transformPermalink = transformer.transformPermalink as Mock
     const transformedSrc = 'transformed.png'
     const transformedSrc2 = 'transformed2.png'
     transformPermalink.mockImplementation((url, type) => (url as string).replace('test.png', transformedSrc).replace('test2.png', transformedSrc2))
-    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': `url(${transformedSrc})` })
-    expect(transformBgImage(editor, { 'background-image': 'url("test.png")' })).toEqual({ 'background-image': `url(${transformedSrc})` })
+    expect(transformBgImage(editor, { 'background-image': 'url(test.png)' })).toEqual({ 'background-image': `url("${transformedSrc}")` })
+    expect(transformBgImage(editor, { 'background-image': 'url("test.png")' })).toEqual({ 'background-image': `url("${transformedSrc}")` })
     expect(transformBgImage(editor, {
       'background-image': 'linear-gradient(to right, rgb(30 75 115 / 100%), url(test.png), linear-gradient(to left, rgb(30 75 115 / 10%), url(test2.png), rgb(255 255 255 / 0%));',
     })).toEqual({
-      'background-image': `linear-gradient(to right, rgb(30 75 115 / 100%), url(${transformedSrc}), linear-gradient(to left, rgb(30 75 115 / 10%), url(${transformedSrc2}), rgb(255 255 255 / 0%));`,
+      'background-image': `linear-gradient(to right, rgb(30 75 115 / 100%), url("${transformedSrc}"), linear-gradient(to left, rgb(30 75 115 / 10%), url("${transformedSrc2}"), rgb(255 255 255 / 0%));`,
     })
   })
 
   it('should transform permalinks of background images in inline css', () => {
     const el = document.createElement('div')
     const [comp] = editor.addComponents(el)
-    comp.setStyle({ 'background-image': 'url(test.png)' })
+    comp.setStyle({ 'background-image': 'url("test.png")' })
     //editor.addComponents(`
-    //  <div style="color: black; background-image: url(test.png);"></div>
+    //  <div style="color: black; background-image: url("test.png");"></div>
     //`)
     const transformPermalink = transformer.transformPermalink as Mock
     const transformedSrc = 'transformed.png'
@@ -168,7 +168,7 @@ describe('publication-transformers', () => {
     expect(transformPermalink).toBeCalledTimes(1)
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
-    expect(css).toContain('url(test.png)')
+    expect(css).toContain('url("test.png")')
   })
   it('should transform permalinks of background images in styles', () => {
     editor.addComponents(`
@@ -176,7 +176,7 @@ describe('publication-transformers', () => {
     `)
     editor.addStyle(`
       .test {
-        background-image: url(test.png);
+        background-image: url("test.png");
       }
     `)
     const transformPermalink = transformer.transformPermalink as Mock
@@ -187,7 +187,7 @@ describe('publication-transformers', () => {
     expect(transformPermalink).toBeCalledTimes(1)
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
-    expect(css).toContain(`url(${transformedSrc})`)
+    expect(css).toContain(`url("${transformedSrc}")`)
   })
   it('should transform links to pages to match permalinks ', () => {
     editor.addComponents(`

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

@@ -188,7 +188,7 @@ function doTransformPermalink(editor: Editor, cssValue: string): string {
     // Transform URLs
     const newUrl = transformPermalink(editor, cleanUrl, ClientSideFileType.ASSET, Initiator.CSS)
     // Return the new URL with url keyword
-    return `url(${newUrl})`
+    return `url("${newUrl}")`
   })
 }
 
@@ -198,7 +198,18 @@ function doTransformPermalink(editor: Editor, cssValue: string): string {
 export function transformBgImage(editor: Editor, style: StyleProps): StyleProps {
   const cssValue = style['background-image']
   if (cssValue) {
-    const newCssValue = typeof cssValue === 'string' ? doTransformPermalink(editor, cssValue) : cssValue.map(value => doTransformPermalink(editor, value))
+    let newCssValue
+    if (Array.isArray(cssValue)) {
+      newCssValue = cssValue
+        .map(value => doTransformPermalink(editor, value))
+        .join(', ')
+    } else if (typeof cssValue === 'string') {
+      newCssValue = doTransformPermalink(editor, cssValue)
+    } else if (newCssValue === cssValue) {
+      // No change
+      return style
+    }
+    // Set the new value
     return {
       ...style,
       'background-image': newCssValue,

package/src/ts/plugins/server/GitlabConnector.ts

@@ -22,6 +22,7 @@ import { ApiError, ConnectorType, ConnectorUser, WebsiteData, WebsiteId, Website
 import fetch from 'node-fetch'
 import crypto, { createHash } from 'crypto'
 import { join } from 'path'
+import { Agent } from 'https'
 
 /**
  * Gitlab connector
@@ -247,6 +248,7 @@ export default class GitlabConnector implements StorageConnector {
     // Call the API
     const url = `${this.options.domain}/api/v4/projects/${websiteId}/repository/files/${safePath}?ref=${this.options.branch}&access_token=${this.getSessionToken(session).token?.access_token}`
     const response = await fetch(url, {
+      agent: this.getAgent(),
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
@@ -305,10 +307,12 @@ export default class GitlabConnector implements StorageConnector {
     let response
     try {
       response = await fetch(url, body && method !== 'GET' ? {
+        agent: this.getAgent(),
         method,
         headers,
         body: body ? JSON.stringify(body) : undefined
       } : {
+        agent: this.getAgent(),
         method,
         headers,
       })
@@ -332,6 +336,7 @@ export default class GitlabConnector implements StorageConnector {
           client_secret: this.options.clientSecret,
         }
         const response = await fetch(this.options.domain + '/oauth/token', {
+          agent: this.getAgent(),
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -399,6 +404,16 @@ export default class GitlabConnector implements StorageConnector {
     return `${this.config.url}${API_PATH}${API_CONNECTOR_PATH}${API_CONNECTOR_LOGIN_CALLBACK}?${params}`
   }
 
+  // Force IPv4 when running locally
+  private getAgent(): Agent | undefined {
+    if (this.config.url.startsWith('http://localhost')) {
+      return new Agent({
+        family: 4,
+      })
+    }
+    return undefined
+  }
+
   /**
    * Get the OAuth URL to redirect the user to
    * The URL should look like
@@ -471,6 +486,7 @@ export default class GitlabConnector implements StorageConnector {
     }
 
     const response = await fetch(this.options.domain + '/oauth/token', {
+      agent: this.getAgent(),
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -489,8 +505,8 @@ export default class GitlabConnector implements StorageConnector {
 
     // Store the token in the session
     this.setSessionToken(session, {
-      token,
       ...this.getSessionToken(session),
+      token,
     })
 
     // We need to get the user ID for listWebsites

package/src/ts/server/api/connectorApi.ts

@@ -49,17 +49,24 @@ export default function(config: ServerConfig) {
  * Method to validate HTTP status codes
  * Returns a suitable error code if it is not valid
  */
-function validateStatus(status: number, _default = 500): number {
+function validateStatus(status: number | string, _default = 500): number {
   if(!status) {
     console.warn(`Status code is undefined, returning default ${_default}`)
     return _default
   }
-  // Make sure it is a string
-  status = parseInt(status.toString())
+  switch (status) {
+  case 'ETIMEDOUT':
+  case 'ECONNREFUSED':
+  case 'ECONNRESET':
+    console.warn(`Connection error ${status}, returning default ${_default}`)
+    return _default
+  }
+  // Make sure it is a number
+  const statusNum = parseInt(status.toString())
   // Check the status code
-  if (status >= 100 && status < 600) return status
+  if (statusNum >= 100 && statusNum < 600) return statusNum
   // Invalid status code
-  console.warn(`Invalid status code ${status}, returning default ${_default}}`)
+  console.warn(`Invalid status code ${statusNum} (${status.toString()}, ${status}), returning default ${_default}`)
   return _default
 }
 
@@ -241,7 +248,7 @@ async function routeLogin(req: Request, res: Response) {
 async function routeLoginSuccess(req: Request, res: Response) {
   try {
     const query = req.query as ApiConnectorLoginCbkQuery
-    if(query.error) throw new Error(query.error)
+    if (query.error) throw new Error(query.error)
 
     const body = req.body as ApiConnectorLoginCbkBody
     const session = requiredParam(req['session'], 'Session object')
@@ -265,9 +272,10 @@ async function routeLoginSuccess(req: Request, res: Response) {
     // End the auth flow
     res.send(getEndAuthHtml('Logged in', false, connectorId, type, connector.getOptions(body)))
   } catch (error) {
+    console.error('Error in the login callback', error, error?.code, error?.httpStatusCode)
     res
       .status(validateStatus(error?.code ?? error?.httpStatusCode, 500))
-      .send(getEndAuthHtml(error.message, true, req.query.connectorId as ConnectorId, req.query.type as ConnectorType))
+      .send(getEndAuthHtml(`${error?.message} ${error?.code ?? error?.httpStatusCode}`, true, req.query.connectorId as ConnectorId, req.query.type as ConnectorType))
   }
 }