@silexlabs/silex 3.0.3 → 3.0.4

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.ts

@@ -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))
   }
 }