@silexlabs/silex 3.0.0-alpha.96 → 3.0.0

package/src/css/grapesjs-plugins.scss

@@ -0,0 +1,34 @@
+@use "variables" as *;
+
+// grapesjs-style-bg
+@use "grapick/dist/grapick.min.css";
+
+// grapesjs-style-border
+@mixin square-borders-before {
+  display: block;
+  content: '' !important;
+  border: 2px solid $tertiaryColor;
+  width: 10px;
+  height: 10px;
+  margin: auto;
+}
+.fa-arrows::before {
+  @include square-borders-before;
+  border-color: $secondaryColor;
+}
+.fa-long-arrow-up::before {
+  @include square-borders-before;
+  border-top-color: $secondaryColor;
+}
+.fa-long-arrow-down::before {
+  @include square-borders-before;
+  border-bottom-color: $secondaryColor;
+}
+.fa-long-arrow-left::before {
+  @include square-borders-before;
+  border-left-color: $secondaryColor;
+}
+.fa-long-arrow-right::before {
+  @include square-borders-before;
+  border-right-color: $secondaryColor;
+}

package/src/css/grapesjs.scss

@@ -1,4 +1,5 @@
 @use "variables" as *;
+@use "grapesjs-plugins";
 
 #gjs {
   flex: 1 1 auto;
@@ -35,7 +36,7 @@
   left: auto;
 }
 .#{$cv-prefix}canvas {
-  width: calc(100% - $viewsPanelWidth - $projectBarWidth);
+  width: calc(100% - var(--viewsPanelWidth) - $projectBarWidth);
 }
 .#{$pn-prefix}devices-c {
   display: flex;
@@ -44,7 +45,6 @@
   }
 }
 .#{$pn-prefix}views-container {
-  width: $viewsPanelWidth;
 }
 
 .gjs-editor {
@@ -52,6 +52,17 @@
   font-size: 0.75rem;
 }
 
+// Dialogs
+.gjs-mdl-header {
+  background-color: $primaryColor;
+  color: $secondaryColor;
+  padding: 20px;
+  border-bottom: 1px solid $lighterPrimaryColor;
+  .gjs-mdl-btn-close {
+    top: 15px;
+  }
+}
+
 // Inside the canvas
 .gjs-toolbar {
   background-color: $tertiaryColor;
@@ -66,6 +77,19 @@
     outline: 1px solid $tertiaryColor;
 }
 
+// Property panels
+.gjs-pn-buttons {
+  justify-content: unset;
+}
+
+.gjs-pn-views-container, .gjs-pn-views {
+  width: var(--viewsPanelWidth);
+}
+
+.gjs-pn-options {
+  right: var(--viewsPanelWidth);
+}
+
 /*
 */
 // Font awesome 5 fix
@@ -141,12 +165,3 @@
 .fa-diamond:before {
   content: "\f3a5";
 }
-/*
-.fa-plus:before {
-	content: "+";
-  font-size: 35px;
-}
-// .fa-plus {
-//   background-image: svg(<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>);
-// }
-*/

package/src/css/index.scss

@@ -10,6 +10,7 @@
 @use "loader";
 @use "footer";
 @use "dialog";
+@use "fonts";
 @use "project-bar";
 @use "page-panel";
 @use "website-info";

package/src/css/project-bar.scss

@@ -1,14 +1,17 @@
 @use "variables" as *;
 
 // squeeze the stage iframe when panel is open
-iframe.enable-squeeze.gjs-frame {
-  transition: width $transitionSpeedMedium, height $transitionSpeedMedium, left $transitionSpeedMedium;
-}
-iframe.enable-squeeze.silex-squeeze-left {
-  --project-panel-width: max(150px, 15.7%); /* Why 16? Also sass vars do not work here */
-  left: var(--project-panel-width);
-  width: calc(100% - var(--project-panel-width));
+//.silex-squeeze-left .gjs-frame-wrapper {
+//  margin-left: 18%;
+//  width: auto;
+//}
+.silex-squeeze-left .gjs-cv-canvas {
+  left: calc(13% + 35px);
+  width: auto;
+  right: var(--viewsPanelWidth);
 }
+
+
 // button bar
 .#{$pn-prefix}project-bar-panel {
   width: $projectBarWidth;
@@ -35,6 +38,7 @@ iframe.enable-squeeze.silex-squeeze-left {
     background-repeat: no-repeat;
     background-position: center center;
     background-color: transparent;
+    background-size: contain;
   }
 }
 

package/src/css/silex.scss

@@ -29,11 +29,34 @@
   width: 100%;
 }
 
+// Resize options panel button
+.silex-workspace {
+  .gjs-pn-viewsOptions {
+      z-index: $z-views-options-buttons;
+      right: 0;
+      left: auto;
+
+      .viewsOptions__size-btn::before {
+        content: '←';
+      }
+    }
+}
+
+.silex-hidden {
+  /* do not really hide, because it breaks the code editor init in the site settings + for animation */
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
 // full screen settings
 .settings-dialog > div {
   max-width: none;
   width: 100%;
-  max-height: 100vh;
+  height: 100vh;
   overflow: auto;
   form.silex-form {
     padding-bottom: 100px; // leave space for fixed footer
@@ -63,6 +86,10 @@
       font-size: x-small;
     }
   }
+  .CodeMirror {
+    min-height: 400px;
+    height: auto;
+  }
 }
 
 button.silex-button,
@@ -83,6 +110,7 @@ input.silex-button[type="submit"] {
   padding: 5px;
 }
 
+.silex-button.disabled,
 .silex-button[disabled] {
   opacity: .8;
   cursor: unset;
@@ -98,6 +126,7 @@ input.silex-button[type="submit"] {
 
 .silex-button--size {
   max-height: 30px;
+  margin: 0 10px;
 }
 
 .silex-button--small {
@@ -113,11 +142,15 @@ input.silex-button[type="submit"] {
   display: block;
 }
 
+.silex-sidebar-dialog,
 .silex-bar {
   display: flex;
   &>* {
     margin: 5px;
   }
+  main {
+    width: 100%;
+  }
 }
 
 ol.silex-list,
@@ -125,15 +158,15 @@ ul.silex-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  background-color: #575757;
+  //background-color: #575757;
   &>li {
     padding: 5px;
-    border-bottom: 1px solid #575757;
-    background-color: #444;
+    border-bottom: 1px solid $lighterPrimaryColor;
+    //background-color: #444;
     margin: 5px;
   }
   fieldset {
-    border-color: #575757;
+    border-color: $lighterPrimaryColor;
   }
   h4 { // badge-like
     display: inline-block;
@@ -158,6 +191,26 @@ ul.silex-list {
   }
 }
 
+ol.silex-list--menu,
+ul.silex-list--menu {
+  &>li {
+    padding: 15px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-bottom-color: $lighterPrimaryColor;
+    text-align: center;
+    cursor: pointer;
+  }
+  &>li:first-child {
+    border-top-color: $lighterPrimaryColor;
+  }
+  .active,
+  &>li:hover {
+    color: $tertiaryColor;
+    background-color: $darkerPrimaryColor;
+  }
+}
+
 form.silex-form {
   display: flex;
   flex-direction: column;

package/src/html/index.pug

@@ -34,6 +34,6 @@ html(lang="en", translate="no")
       script(src='js/main.js')
 
     block silex-start
-      // Here you can use silex.config to hook into silex options before silex starts
       script.
-        window.silex.start()
+        silex.start()
+        // From here silex.config is available and Silex is getting started

package/src/ts/client/api.ts

@@ -15,8 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE } from '../constants'
-import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError } from '../types'
+import { API_CONNECTOR_LIST, API_CONNECTOR_USER, API_CONNECTOR_LOGOUT, API_CONNECTOR_PATH, API_PATH, API_PUBLICATION_PATH, API_PUBLICATION_PUBLISH, API_PUBLICATION_STATUS, API_WEBSITE_ASSET_READ, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_DELETE, API_WEBSITE_LIST, API_WEBSITE_PATH, API_WEBSITE_READ, API_WEBSITE_WRITE, API_WEBSITE_META_READ, API_WEBSITE_META_WRITE, API_WEBSITE_CREATE, API_WEBSITE_DUPLICATE } from '../constants'
+import { ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorId, JobData, JobId, PublicationJobData, WebsiteId, ApiConnectorListResponse, ApiConnectorListQuery, ConnectorData, ConnectorType, ApiWebsiteReadQuery, ApiWebsiteReadResponse, WebsiteData, ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse, ApiWebsiteDeleteQuery, ApiWebsiteAssetsReadQuery, ApiWebsiteAssetsReadResponse, ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse, ClientSideFile, PublicationData, ApiConnectorUserResponse, ConnectorUser, WebsiteMeta, ApiConnectorLogoutQuery, ApiConnectorUserQuery, ApiWebsiteListResponse, ApiWebsiteListQuery, WebsiteMetaFileContent, ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse, ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse, ApiWebsiteMetaReadQuery, ApiWebsiteMetaReadResponse, ConnectorOptions, ApiError, ApiWebsiteDuplicateQuery } from '../types'
 
 export enum ApiRoute {
   PUBLICATION_PUBLISH = API_PATH + API_PUBLICATION_PATH + API_PUBLICATION_PUBLISH,
@@ -27,6 +27,7 @@ export enum ApiRoute {
   WEBSITE_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_READ,
   WEBSITE_WRITE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_WRITE,
   WEBSITE_DELETE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DELETE,
+  WEBSITE_DUPLICATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_DUPLICATE,
   WEBSITE_CREATE = API_PATH + API_WEBSITE_PATH + API_WEBSITE_CREATE,
   WEBSITE_LIST = API_PATH + API_WEBSITE_PATH + API_WEBSITE_LIST,
   WEBSITE_ASSETS_READ = API_PATH + API_WEBSITE_PATH + API_WEBSITE_ASSET_READ,
@@ -83,23 +84,27 @@ export async function websiteList({connectorId}: {connectorId?: ConnectorId}): P
 }
 
 export async function websiteLoad({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteData> {
-  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId: connectorId }) as Promise<WebsiteData>
+  return api<ApiWebsiteReadQuery, null, ApiWebsiteReadResponse>(ApiRoute.WEBSITE_READ, 'GET', { websiteId, connectorId }) as Promise<WebsiteData>
 }
 
 export async function websiteSave({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteData, connectorId?: ConnectorId}): Promise<void> {
-  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId: connectorId }, data)
+  const { message } = await api<ApiWebsiteWriteQuery, ApiWebsiteWriteBody, ApiWebsiteWriteResponse>(ApiRoute.WEBSITE_WRITE, 'POST', { websiteId, connectorId }, data)
 }
 
 export async function websiteDelete({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId: connectorId })
+  await api<ApiWebsiteDeleteQuery, null, null>(ApiRoute.WEBSITE_DELETE, 'DELETE', { websiteId, connectorId })
+}
+
+export async function websiteDuplicate({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<void> {
+  await api<ApiWebsiteDuplicateQuery, null, null>(ApiRoute.WEBSITE_DUPLICATE, 'POST', { websiteId, connectorId })
 }
 
 export async function websiteCreate({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId: connectorId }, data)
+  await api<ApiWebsiteCreateQuery, ApiWebsiteCreateBody, ApiWebsiteCreateResponse>(ApiRoute.WEBSITE_CREATE, 'PUT', { connectorId }, data)
 }
 
 export async function websiteMetaWrite({websiteId, data, connectorId}: {websiteId: WebsiteId, data: WebsiteMetaFileContent, connectorId?: ConnectorId}): Promise<void> {
-  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId: connectorId }, data)
+  await api<ApiWebsiteMetaWriteQuery, ApiWebsiteMetaWriteBody, ApiWebsiteMetaWriteResponse>(ApiRoute.WEBSITE_META_WRITE, 'POST', { websiteId, connectorId }, data)
 }
 
 export async function websiteMetaRead({websiteId, connectorId}: {websiteId: WebsiteId, connectorId?: ConnectorId}): Promise<WebsiteMeta> {
@@ -107,7 +112,7 @@ export async function websiteMetaRead({websiteId, connectorId}: {websiteId: Webs
 }
 
 export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: string, websiteId: WebsiteId, connectorId: ConnectorId}): Promise<string> {
-  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId: connectorId })
+  return api<ApiWebsiteAssetsReadQuery, null, ApiWebsiteAssetsReadResponse>(`${ApiRoute.WEBSITE_ASSETS_READ}/${path}`, 'GET', { websiteId, connectorId })
 }
 
 /**
@@ -115,7 +120,7 @@ export async function websiteAssetsLoad({path, websiteId, connectorId}: {path: s
  * @see assetManager in src/ts/client/grapesjs/index.ts
  */
 export async function websiteAssetsSave({websiteId, connectorId, files}: {websiteId: WebsiteId, connectorId: ConnectorId, files: ClientSideFile[]}): Promise<string[]> {
-  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId: connectorId }, files)
+  const { data } = await api<ApiWebsiteAssetsWriteQuery, ApiWebsiteAssetsWriteBody, ApiWebsiteAssetsWriteResponse>(ApiRoute.WEBSITE_ASSETS_WRITE, 'POST', { websiteId, connectorId }, files)
   return data
 }
 

package/src/ts/client/assetUrl.test.ts

@@ -1,55 +1,64 @@
 import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+import { removeTempDataFromStyles } from './assetUrl'
 
 describe('assetUrl', () => {
   beforeEach(() => {
     jest.resetModules()
-  })
-
-  //it('store url to display url', async () => {
-  //  const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
-  //  // Convert a valid URL as stored
-  //  expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
-  //    .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
-  //  // Convert a URL which is already as displayed
-  //  expect(storedToDisplayed('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
-  //    .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
-  //})
-
-  //it('display url to store url', async () => {
-  //  const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
-  //  // Convert a valid URL as displayed
-  //  expect(displayedToStored('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
-  //    .toBe('/assets/test.webp')
-  //  // Convert a URL which is already as stored
-  //  expect(displayedToStored('/assets/test.webp'))
-  //    .toBe('/assets/test.webp')
-  //})
-
-  //it('store url to display url with a root path', async () => {
-  //  Object.defineProperty(window, 'location', {
-  //    value: {
-  //      href: 'http://localhost:6800/silex',
-  //      pathname: '/silex',
-  //      origin: 'http://localhost:6800',
-  //    },
-  //  });
-  //  const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
-  //  // Convert a valid URL as stored
-  //  expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
-  //    .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
-  //  // Convert a URL which is already as displayed
-  //  expect(storedToDisplayed('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
-  //    .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
-  //})
-
-  it('display url to store url with a root path', async () => {
     Object.defineProperty(window, 'location', {
       value: {
-        href: 'http://localhost:6800/silex',
-        pathname: '/silex',
+        href: 'http://localhost:6800/',
+        pathname: '',
         origin: 'http://localhost:6800',
       },
     })
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/',
+      pathname: '',
+      origin: 'http://localhost:6800',
+    })
+  })
+
+  it('store url to display url', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('display url to store url', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('store url to display url with a root path', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex',
+      pathname: '/silex',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('display url to store url with a root path', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex',
+      pathname: '/silex',
+      origin: 'http://localhost:6800',
+    })
     const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
     // Convert a valid URL as displayed
     expect(displayedToStored('/silex/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
@@ -58,4 +67,98 @@ describe('assetUrl', () => {
     expect(displayedToStored('/assets/test.webp'))
       .toBe('/assets/test.webp')
   })
+
+  it('store url to display url with escapable chars', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex%20with%20spaces',
+      pathname: '/silex%20with%20spaces',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('display url to store url with escapable chars', async () => {
+    Object.assign(window.location, {
+      href: 'http://localhost:6800/silex%20with%20spaces',
+      pathname: '/silex%20with%20spaces',
+      origin: 'http://localhost:6800',
+    })
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
+      .toBe('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex%20with%20spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+    expect(storedToDisplayed('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector', 'test-id', 'test-connector'))
+      .toBe('/silex with spaces/api/website/assets/test.webp?websiteId=test-id&connectorId=test-connector')
+  })
+
+  it('store url to display url with escapable website id and connector id', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    // Convert a valid URL as displayed
+    expect(displayedToStored('/api/website/assets/test.webp?websiteId=test%20id&connectorId=test%20connector'))
+      .toBe('/assets/test.webp')
+    // Convert a URL which is already as stored
+    expect(displayedToStored('/assets/test.webp'))
+      .toBe('/assets/test.webp')
+  })
+
+  it('display url to store url with escapable  website id and connector id', async () => {
+    const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
+    const websiteId = 'test id'
+    const websiteIdEncoded = 'test+id'
+    const connectorId = 'test connector'
+    const connectorIdEncoded = 'test+connector'
+    // Convert a valid URL as stored
+    expect(storedToDisplayed('/assets/test.webp', websiteId, connectorId))
+      .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
+    // Convert a URL which is already as displayed
+    expect(storedToDisplayed(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`, websiteId, connectorId))
+      .toBe(`/api/website/assets/test.webp?websiteId=${websiteIdEncoded}&connectorId=${connectorIdEncoded}`)
+  })
+
+  it('multiple backgrounds', async () => {
+    // // FIXME: this should mock the functions but it doesnt
+    // const mocked = {
+    //   displayedToStored: jest.fn((url: string) => url),
+    //   storedToDisplayed: jest.fn((url: string) => url),
+    // }
+    // jest.mock('./assetUrl', () => (mocked))
+    //addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId)
+    //expect(mocked.displayedToStored).toBeCalledTimes(1)
+    const { addTempDataToStyles } = await import('./assetUrl')
+
+    const websiteId = 'test-id'
+    const connectorId = 'test-connector'
+    const bgImageDisplayed = `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=${websiteId}&connectorId=${connectorId}'), linear-gradient(#0ca311 0%, #0ca311 100%)`
+    const bgImageStored = 'linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url(\'/assets/qIg7JPRc.webp\'), linear-gradient(#0ca311 0%, #0ca311 100%)'
+    const selectors = ['body']
+    function toStyle(bgImage: string) {
+      return {
+        style: {
+          'background-image': bgImage,
+        },
+        selectors,
+      }
+    }
+    // From stored to displayed
+    expect(addTempDataToStyles([toStyle(bgImageStored)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to displayed (error case)
+    expect(addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId))
+      .toEqual([toStyle(bgImageDisplayed)])
+    // From displayed to stored
+    expect(removeTempDataFromStyles([toStyle(bgImageDisplayed)]))
+      .toEqual([toStyle(bgImageStored)])
+    //// From stored to stored (error case)
+    expect(removeTempDataFromStyles([toStyle(bgImageStored)]))
+      .toEqual([toStyle(bgImageStored)])
+  })
 })

package/src/ts/client/assetUrl.ts

@@ -15,7 +15,6 @@ const baseUrl = window.location.pathname.replace(/\/$/, '')
 
 // Orging and path, should we use config.rootUrl?
 const SERVER_URL = window.location.origin
-console.log('SERVER_URL', SERVER_URL)
 
 /**
  * Function to convert a path from it stored version to the displayed version
@@ -36,11 +35,17 @@ export function storedToDisplayed(path: string, websiteId: WebsiteId, storageId:
     url.searchParams.set('websiteId', websiteId)
     url.searchParams.set('connectorId', storageId)
     // Back to a relative URL, keep the path but not the origin
-    const encodedPath = '/' + url.toString() // add a leading slash
-      .replace(new RegExp(`^${SERVER_URL}`), '')
-      .replace(/^\//, '') // remove the first slash if it exists
-    return decodeURIComponent(encodedPath)
+    return `${decodeURIComponent(url.pathname)}${url.search}`
+    //const encodedPath = '/' + url.toString() // add a leading slash
+    //  .replace(new RegExp(`^${SERVER_URL}`), '')
+    //  .replace(/^\//, '') // remove the first slash if it exists
+    //return decodeURIComponent(encodedPath)
   } else {
+    if(path.startsWith('<svg') || path.startsWith('data:image')) {
+      // SVG or data URL
+      return path
+    }
+    // Not a stored path, is there a problem?
     console.warn('storedToDisplayed: path is not a stored path', path)
     return path
   }
@@ -69,6 +74,10 @@ export function displayedToStored(path: string): string {
       .replace(/^\//, '') // remove the first slash if it exists
     return decodeURIComponent(encodedPath)
   } else {
+    if(path.startsWith('<svg') || path.startsWith('data:image')) {
+      // SVG or data URL
+      return path
+    }
     console.warn('displayedToStored: path is not a displayed path', path)
     return path
   }
@@ -196,17 +205,22 @@ export function removeTempDataFromPages(pages: Page[]): Page[] {
 
 /**
  * Add data to stylesheets
+ *   e.g. linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/assets/qIg7JPRc.webp'), linear-gradient(#0ca311 0%, #0ca311 100%)
  */
 export function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, storageId: ConnectorId): Style[] {
-  const pattern = /url\((["']?)([^"']+?)\1\)/g
+  const regex = new RegExp(/(.*)(url\((["']?)([^"']+?)\1\))*(.*)/, 'g')
+
   return styles.map((style: Style) => {
     if (style.style && style.style['background-image']) {
-      const urls = [...style.style['background-image'].matchAll(pattern)].map(match => storedToDisplayed(match[2], websiteId, storageId))
+      const bgImage = style.style['background-image']
+        .replace(/url\((['"]?)([^'"]+)\1\)/g, (match, quote, url) => {
+          return `url(${quote}${storedToDisplayed(url, websiteId, storageId)}${quote})`
+        })
       return {
         ...style,
         style: {
           ...style.style,
-          'background-image': urls.map(url => `url('${url}')`).join(', '),
+          'background-image': bgImage,
         },
       }
     }
@@ -216,17 +230,22 @@ export function addTempDataToStyles(styles: Style[], websiteId: WebsiteId, stora
 
 /**
  * Remove temp data from stylesheets
+ * The property `background-image` contains the URLs of the assets and other values,
+ *   e.g. `linear-gradient(to right, #1fb101 0%, #df1313 67%, rgba(234, 97, 97, 255) 78%, white 100%), url('/api/website/assets/qIg7JPRc.webp?websiteId=default&connectorId=fs-storage'), linear-gradient(#0ca311 0%, #0ca311 100%)`
  */
 export function removeTempDataFromStyles(styles: Style[]): Style[] {
   const pattern = /url\((["']?)([^"']+?)\1\)/g
   return styles.map((style: Style) => {
     if (style.style && style.style['background-image']) {
-      const urls = [...style.style['background-image'].matchAll(pattern)].map(match => displayedToStored(match[2]))
+      const bgImage = style.style['background-image']
+        .replace(/url\((['"]?)([^'"]+)\1\)/g, (match, quote, url) => {
+          return `url(${quote}${displayedToStored(url)}${quote})`
+        })
       return {
         ...style,
         style: {
           ...style.style,
-          'background-image': urls.map(url => `url('${url}')`).join(', '),
+          'background-image': bgImage,
         },
       }
     }