@silexlabs/silex 3.7.0 → 3.9.0-canary.2

package/{src/ts/client → editor}/assetUrl.test.ts

@@ -4,18 +4,7 @@ import { removeTempDataFromStyles, isExternalUrl } from './assetUrl'
 describe('assetUrl', () => {
   beforeEach(() => {
     jest.resetModules()
-    Object.defineProperty(window, 'location', {
-      value: {
-        href: 'http://localhost:6800/',
-        pathname: '',
-        origin: 'http://localhost:6800',
-      },
-    })
-    Object.assign(window.location, {
-      href: 'http://localhost:6800/',
-      pathname: '',
-      origin: 'http://localhost:6800',
-    })
+    window.history.replaceState({}, '', '/')
   })
 
   it('store url to display url', async () => {
@@ -39,11 +28,7 @@ describe('assetUrl', () => {
   })
 
   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',
-    })
+    window.history.replaceState({}, '', '/silex')
     const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
     // Convert a valid URL as stored
     expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
@@ -54,11 +39,7 @@ describe('assetUrl', () => {
   })
 
   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',
-    })
+    window.history.replaceState({}, '', '/silex')
     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'))
@@ -69,11 +50,7 @@ describe('assetUrl', () => {
   })
 
   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',
-    })
+    window.history.replaceState({}, '', '/silex%20with%20spaces')
     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'))
@@ -84,11 +61,7 @@ describe('assetUrl', () => {
   })
 
   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',
-    })
+    window.history.replaceState({}, '', '/silex%20with%20spaces')
     const { displayedToStored, storedToDisplayed } = await import('./assetUrl')
     // Convert a valid URL as stored
     expect(storedToDisplayed('/assets/test.webp', 'test-id', 'test-connector'))
@@ -168,7 +141,7 @@ describe('assetUrl', () => {
     // }
     // jest.mock('./assetUrl', () => (mocked))
     //addTempDataToStyles([toStyle(bgImageDisplayed)], websiteId, connectorId)
-    //expect(mocked.displayedToStored).toBeCalledTimes(1)
+    //expect(mocked.displayedToStored).toHaveBeenCalledTimes(1)
     const { addTempDataToStyles } = await import('./assetUrl')
 
     const websiteId = 'test-id'

package/{src/ts/client → editor}/assetUrl.ts

@@ -1,5 +1,5 @@
-import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '../constants'
-import { Asset, ClientSideFileType, ConnectorId, Style, WebsiteId } from '../types'
+import { API_PATH, API_WEBSITE_ASSET_READ, API_WEBSITE_PATH } from '~/common/constants'
+import { Asset, ClientSideFileType, ConnectorId, Style, WebsiteId } from '~/common/types'
 
 /**
  * @fileoverview Helpers to manage assets URL

package/{src/ts/client → editor}/config.ts

@@ -15,10 +15,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Config } from '@silexlabs/silex-plugins'
+import { Config } from '~/common/silex-plugins'
 import { getEditor, getEditorConfig } from './grapesjs'
-import { CLIENT_CONFIG_FILE_NAME, DEFAULT_LANGUAGE, DEFAULT_WEBSITE_ID, SILEX_VERSION } from '../constants'
-import { ConnectorId, WebsiteId } from '../types'
+import { CLIENT_CONFIG_FILE_NAME, DEFAULT_LANGUAGE, DEFAULT_WEBSITE_ID, SILEX_VERSION } from '~/common/constants'
+import { ConnectorId, WebsiteId } from '~/common/types'
 import { Editor, EditorConfig, Page } from 'grapesjs'
 import { PublicationTransformer, publicationTransformerDefault, validatePublicationTransformer } from './publication-transformers'
 import * as api from './api'

package/{src/css/theme-modern.scss → editor/css/design-system.scss}

@@ -1,6 +1,7 @@
 /**
- * THEME-MODERN.SCSS
- * Modern Dark Theme 2025 for Silex
+ * DESIGN-SYSTEM.SCSS
+ * The Silex editor design system (there is no theme-switching — this is THE
+ * look): --silex-* semantic tokens + the styling of the editor's UI components.
  *
  * Design Philosophy:
  * - Minimalisme structuré
@@ -342,15 +343,16 @@ textarea {
 
 // Composite properties (margin, padding) — tinted purple sub-group
 .gjs-sm-property.gjs-sm-composite {
-  background-color: rgba(136, 115, 254, 0.04);
-  border: 1px solid rgba(136, 115, 254, 0.08);
+  background-color: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--silex-border-color);
   border-radius: 6px;
   padding: 8px;
   margin-top: 4px;
 
-  // Composite label (e.g., "Margin", "Padding") — purple uppercase
+  // Composite label (e.g., "Margin", "Padding") — neutral, not accent
+  // (purple is reserved for active states — issue #1711)
   > .gjs-sm-label {
-    color: var(--silex-accent-primary);
+    color: var(--silex-text-secondary);
     text-transform: uppercase;
     font-size: 9px;
     font-weight: 700;
@@ -364,34 +366,34 @@ textarea {
 
   // Inner fields — no extra border inside composite
   .gjs-field {
-    border-color: rgba(136, 115, 254, 0.12);
+    border-color: var(--silex-border-color);
   }
 }
 
-// Sliders — purple accent
+// Sliders — neutral, not accent (purple is reserved for active states, #1711)
 .gjs-field-range input[type="range"] {
-  accent-color: var(--silex-accent-primary);
+  accent-color: var(--silex-text-secondary);
 
   &::-webkit-slider-thumb {
-    background-color: var(--silex-accent-primary);
+    background-color: var(--silex-text-primary);
   }
 
   &::-webkit-slider-runnable-track {
-    background-color: var(--silex-accent-primary);
+    background-color: var(--silex-text-secondary);
     opacity: 0.4;
   }
 
   &::-moz-range-thumb {
-    background-color: var(--silex-accent-primary);
+    background-color: var(--silex-text-primary);
   }
 
   &::-moz-range-track {
-    background-color: var(--silex-accent-primary);
+    background-color: var(--silex-text-secondary);
     opacity: 0.4;
   }
 
   &::-moz-range-progress {
-    background-color: var(--silex-accent-primary);
+    background-color: var(--silex-text-secondary);
   }
 }
 
@@ -401,6 +403,13 @@ textarea {
   color: var(--silex-text-secondary);
 }
 
+// ...but a MODIFIED property (grapesjs adds .gjs-four-color) keeps the accent,
+// so the accent means "this property is set" — not decoration (issue #1711)
+.gjs-sm-sector .gjs-sm-label.gjs-four-color,
+.gjs-sm-property.gjs-sm-composite > .gjs-sm-label.gjs-four-color {
+  color: var(--gjs-quaternary-color);
+}
+
 // Tighter property spacing
 .gjs-sm-property {
   margin-bottom: 2px;
@@ -479,6 +488,12 @@ textarea {
   padding: 3px 10px;
 }
 
+// GrapesJS renders an empty trait-category label bar; hide it (the data-source
+// section labels carry text and live in shadow DOM, so they're unaffected)
+.gjs-traits-label:empty {
+  display: none;
+}
+
 // Trait category titles — match sector style
 .gjs-trait-category .gjs-title {
   background-color: var(--silex-active-bg);

package/{src → editor}/css/index.scss

@@ -6,7 +6,7 @@
 
 /* Theme system */
 @use "theme-base";
-@use "theme-modern";
+@use "design-system";
 
 /* Silex styles imports */
 @use "silex";
@@ -21,8 +21,6 @@
 @use "panels";
 @use "dialogs";
 
-//@use "grapesjs-light";
-
 // Ubuntu Fonts
 @use "@fontsource/ubuntu";
 

package/{src → editor}/css/project-bar.scss

@@ -36,6 +36,11 @@
       background-color: var(--silex-accent-secondary);
       color: var(--silex-text-inverse);
     }
+
+    // the "+" (fa-plus) reads thinner than the filled icons — bump it up
+    .#{$pn-prefix}btn.block-manager-btn {
+      font-size: 22px;
+    }
   }
 
   .logo {

package/{src/ts/client → editor}/expose.ts

@@ -18,11 +18,11 @@
 export * from './grapesjs/index'
 export * from './config'
 
-export * as constants from '../constants'
+export * as constants from '~/common/constants'
 export * as utils from './utils'
 export * as api from './api'
 export * as events from './events'
-export * as page from '../page'
-export * as types from '../types'
+export * as page from '~/common/page'
+export * as types from '~/common/types'
 export * as dataSource from '@silexlabs/grapesjs-data-source'
 export * as advancedSelector from '@silexlabs/grapesjs-advanced-selector'

package/{src/ts/client → editor}/grapesjs/LoginDialog.ts

@@ -1,9 +1,9 @@
 import { html, render } from 'lit-html'
 import { Editor } from 'grapesjs'
-import { ApiConnectorLoggedInPostMessage, ConnectorData, ConnectorId, ConnectorType, ConnectorUser } from '../../types'
+import { ApiConnectorLoggedInPostMessage, ConnectorData, ConnectorId, ConnectorType, ConnectorUser } from '~/common/types'
 import { connectorList, getUser, logout } from '../api'
-import { WebsiteId } from '../../types'
-import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH } from '../../constants'
+import { WebsiteId } from '~/common/types'
+import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH } from '~/common/constants'
 
 export const cmdLogin = 'silex:auth:login'
 export const cmdLogout = 'silex:auth:logout'

package/{src/ts/client → editor}/grapesjs/PublicationManager.ts

@@ -15,12 +15,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { getPageSlug } from '../../page'
-import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ClientSideFile, ClientSideFileType, ConnectorData, ConnectorType, ConnectorUser, JobStatus, Initiator, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types'
+import { getPageSlug } from '~/common/page'
+import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ClientSideFile, ClientSideFileType, ConnectorData, ConnectorType, ConnectorUser, JobStatus, Initiator, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '~/common/types'
 import { Editor } from 'grapesjs'
 import { PublicationUi } from './PublicationUi'
 import { getUser, logout, publicationStatus, publish } from '../api'
-import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH, SILEX_VERSION } from '../../constants'
+import { API_CONNECTOR_LOGIN, API_CONNECTOR_PATH, API_PATH, SILEX_VERSION } from '~/common/constants'
 import { ClientEvent } from '../events'
 import { resetRenderComponents, resetRenderCssRules, transformPermalink, transformFiles, transformPath, renderComponents, renderCssRules } from '../publication-transformers'
 import { hashString } from '../utils'

package/{src/ts/client → editor}/grapesjs/PublicationUi.ts

@@ -19,7 +19,7 @@ import { html, nothing, render, TemplateResult } from 'lit-html'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
 //import { map } from 'lit-html/directives/map.js'
 import { cmdPublicationLogin, cmdPublicationLogout, cmdPublicationStart, PublicationStatus, PublishableEditor } from './PublicationManager'
-import { ConnectorData, ConnectorType, PublicationJobData, PublicationSettings } from '../../types'
+import { ConnectorData, ConnectorType, PublicationJobData, PublicationSettings } from '~/common/types'
 import { connectorList } from '../api'
 import { defaultKms } from './keymaps'
 import { titleCase } from '../utils'

package/{src/ts/client → editor}/grapesjs/cms/index.ts

@@ -7,7 +7,7 @@ import siteSettings from './site-settings'
 import states from './states'
 import DataSource from './DataSource'
 import merge from 'deepmerge'
-import { WebsiteSettings } from '../../../types'
+import { WebsiteSettings } from '~/common/types'
 import blocks from './blocks'
 import buttons from './buttons'
 import traits from './traits'

package/{src/ts/client → editor}/grapesjs/cms/page-settings.ts

@@ -2,7 +2,7 @@ import { removeState, setState, toExpression } from '@silexlabs/grapesjs-data-so
 import { CMS_SETTINGS_SECTION_ID, EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index'
 import { html, TemplateResult } from 'lit-html'
 import { Page, Editor, Component } from 'grapesjs'
-import { WebsiteSettings } from '../../../types'
+import { WebsiteSettings } from '~/common/types'
 import { ClientEvent } from '../../events'
 import { cmdAddSection } from '../settings'
 import { createRef, ref } from 'lit-html/directives/ref.js'

package/{src/ts/client → editor}/grapesjs/cms/publication.ts

@@ -8,7 +8,7 @@ import { ClientConfig } from '../../config'
 import { UNWRAP_ID } from './traits'
 import { EleventyDataSourceId } from './DataSource'
 import { ClientEvent } from '../../events'
-import { WebsiteSettings, ClientSideFile, ClientSideFileType, ClientSideFileWithContent, PublicationData  } from '../../../types'
+import { WebsiteSettings, ClientSideFile, ClientSideFileType, ClientSideFileWithContent, PublicationData  } from '~/common/types'
 
 const ATTRIBUTE_MULTIPLE_VALUES = ['class', 'style']
 

package/{src/ts/client → editor}/grapesjs/eleventy.ts

@@ -23,7 +23,7 @@
 console.warn('This plugin is deprecated. Use the publication renderer plugin instead.')
 throw 'This plugin is deprecated. Use the publication renderer plugin instead.'
 
-import { getPageSlug } from '../../page'
+import { getPageSlug } from '~/common/page'
 import { ClientEvent } from '../events'
 import { Page } from 'grapesjs'
 

package/{src/ts/client → editor}/grapesjs/index.ts

@@ -40,6 +40,7 @@ import fontsDialogPlugin from '@silexlabs/grapesjs-fonts'
 import cssVariablesPlugin from '@silexlabs/grapesjs-css-variables'
 import selectorPlugin from '@silexlabs/grapesjs-advanced-selector'
 import bodyRemapPlugin from './body-remap'
+import websiteInfoPlugin from './website-info'
 import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
 import loginDialogPlugin, { LoginDialogOptions, cmdLogout } from './LoginDialog'
 import footerPlugin from './footer'
@@ -70,18 +71,19 @@ import aiCapabilitiesPlugin from '@silexlabs/grapesjs-ai-capabilities'
 import coreCommandsPlugin from './core-commands'
 import ViewButtons from './view-buttons'
 import { storagePlugin } from './storage'
-import { API_PATH, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_PATH, SILEX_VERSION } from '../../constants'
+import { API_PATH, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_PATH, SILEX_VERSION } from '~/common/constants'
 import { ClientConfig } from '../config'
 import { titleCase } from '../utils'
 import uploadProgress from './upload-progress'
 import cmsPlugin from './cms'
 import { ClientEvent } from '../events'
-import { ClientSideFileWithContent, PublicationData } from '../../types'
+import { ClientSideFileWithContent, PublicationData } from '~/common/types'
 
 const plugins = [
   {name: './project-bar', value: projectBarPlugin}, // has to be before panels and dialogs
   {name: 'grapesjs-style-bg', value: backgroundPlugin},
   {name: './settings', value: settingsDialog},
+  {name: './website-info', value: websiteInfoPlugin},
   {name: '@silexlabs/grapesjs-fonts', value: fontsDialogPlugin},
   {name: '@silexlabs/grapesjs-css-variables', value: cssVariablesPlugin},
   {name: '@silexlabs/grapesjs-advanced-selector', value: selectorPlugin},
@@ -175,7 +177,7 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       messages: {
         en: {
           traitManager: {
-            label: 'Element settings',
+            label: '',
           },
           styleManager: {
             sectors: {

package/{src/ts/client → editor}/grapesjs/internal-links.ts

@@ -18,7 +18,7 @@
 import {html, render} from 'lit-html'
 import {map} from 'lit-html/directives/map.js'
 import grapesjs from 'grapesjs/dist/grapes.min.js'
-import { getPageLink } from '../../page'
+import { getPageLink } from '~/common/page'
 
 // constants
 const pluginName = 'internal-links'
@@ -186,7 +186,7 @@ export const internalLinksPlugin = (editor, opts) => {
     // `elInput` is the result HTMLElement you get from `createInput`
     onEvent({ elInput, component, event }) {
       const inputType = elInput.querySelector('.href-next__type')
-      let href = ''
+      let href: string
       // Compute the new HREF value
       switch (inputType.value) {
       case 'page':

package/{src/ts/client → editor}/grapesjs/resize-panel.ts

@@ -14,7 +14,8 @@ export default function(editor) {
       document.documentElement.style.setProperty('--viewsPanelWidth', '40%')
     },
     stop: (editor, sender) => {
-      document.documentElement.style.setProperty('--viewsPanelWidth', '20%')
+      // restore the default width (from CSS) instead of forcing a smaller one
+      document.documentElement.style.removeProperty('--viewsPanelWidth')
     },
   })
 }

package/{src/ts/client → editor}/grapesjs/settings-sections.ts

@@ -1,6 +1,6 @@
 import {live} from 'lit-html/directives/live.js'
 import {html, TemplateResult, nothing} from 'lit-html'
-import { WebsiteMeta, WebsiteSettings } from '../../types'
+import { WebsiteMeta, WebsiteSettings } from '~/common/types'
 import { websiteMetaRead } from '../api' // Adjust as needed
 import { ClientConfig, config } from '..'
 import { Editor } from 'grapesjs'

package/{src/ts/client → editor}/grapesjs/settings.ts

@@ -22,9 +22,9 @@ import {defaultSections, idCodeWrapper, isSite, SettingsSection, updateInfo} fro
  * @fileoverview This file contains the settings dialog. The config API lets plugins add sections to the settings dialog.
  */
 
-import { WebsiteData, WebsiteSettings } from '../../types'
+import { WebsiteData, WebsiteSettings } from '~/common/types'
 import { ClientEvent } from '../events'
-import { SILEX_VERSION } from '../../constants'
+import { SILEX_VERSION } from '~/common/constants'
 import { Button, Editor } from 'grapesjs'
 
 const sectionsSite: SettingsSection[] = [...defaultSections]

package/{src/ts/client → editor}/grapesjs/storage.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ConnectorId, WebsiteId, WebsiteData, ConnectorUser, ConnectorType, ApiError } from '../../types'
+import { ConnectorId, WebsiteId, WebsiteData, ConnectorUser, ConnectorType, ApiError } from '~/common/types'
 import { websiteLoad, websiteSave } from '../api'
 import { cmdLogin, eventLoggedIn, eventLoggedOut, getCurrentUser, updateUser } from './LoginDialog'
 import { addTempDataToAssetUrl, addTempDataToStyles, removeTempDataFromAssetUrl, removeTempDataFromStyles } from '../assetUrl'

package/editor/grapesjs/website-info.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 type { Editor } from 'grapesjs'
+import { WebsiteMeta } from '~/common/types.js'
+
+// GrapesJS plugin: shows the website name + current page in the top bar.
+// Added to the editor plugin list in ./index.ts. The Silex config (api, ids) is read
+// from the editor model — set on it after init — only inside event handlers (lazy).
+export default function websiteInfoPlugin(editor: Editor) {
+  let websiteMeta: WebsiteMeta | null = null
+  const getConfig = () => editor.getModel().get('config')
+
+  editor.on('storage:end:load', async () => {
+    const config = getConfig()
+    websiteMeta = await config.api.websiteMetaRead({ websiteId: config.websiteId, connectorId: config.storageId })
+    displayWebsiteMeta()
+  })
+
+  // Refresh when the page changes
+  editor.on('page:select', () => displayWebsiteMeta())
+
+  function displayWebsiteMeta() {
+    const container = document.querySelector('#gjs-website-meta') ?? (function () {
+      const c = document.createElement('div')
+      c.id = 'gjs-website-meta'
+      c.classList.add('gjs-website-meta')
+      // Add the website name in the top bar
+      document.querySelector('.gjs-pn-devices-c')?.appendChild(c)
+      return c
+    })()
+    const currentPage = editor.Pages?.getSelected()
+    container.innerHTML = `
+        ${websiteMeta?.imageUrl ? `<div class="gjs-website-meta-image" style="background: url(${websiteMeta?.imageUrl});"></div>` : ''}
+        <div class="gjs-website-meta-name">${websiteMeta?.name ?? 'Unknown'} | ${currentPage?.get('name') ?? currentPage?.get('type')}</div>
+      `
+  }
+}

package/{src/ts/client → editor}/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { Editor } from 'grapesjs'
-import { DEV_MESSAGE } from '../constants'
+import { DEV_MESSAGE } from '~/common/constants'
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'

package/{src/ts/client → editor}/publication-transformers.test.ts

@@ -11,7 +11,7 @@ import {
 } from './publication-transformers'
 import { ClientConfig } from './config'
 import grapesjs, { Component, Editor, StyleProps, Page } from 'grapesjs'
-import { ClientSideFile, ClientSideFileType, PublicationData } from '../types'
+import { ClientSideFile, ClientSideFileType, PublicationData } from '~/common/types'
 
 describe('publication-transformers', () => {
   let mockConfig: ClientConfig
@@ -66,7 +66,7 @@ describe('publication-transformers', () => {
     renderComponent.mockReturnValue('mockHtml')
     renderComponents(editor)
     const html = editor.getHtml()
-    expect(renderComponent).toBeCalledTimes(6)
+    expect(renderComponent).toHaveBeenCalledTimes(6)
     const results = renderComponent.mock.calls.map(call => call[0] as Component)
     const parent = results.find(c => c.getClasses()[0] === 'parent')
     expect(parent).not.toBeUndefined()
@@ -80,7 +80,7 @@ describe('publication-transformers', () => {
     renderComponents(editor)
     resetRenderComponents(editor)
     const html = editor.getHtml()
-    expect(renderComponent).toBeCalledTimes(0)
+    expect(renderComponent).toHaveBeenCalledTimes(0)
     expect(html).toContain('Hello world')
   })
 
@@ -91,7 +91,7 @@ describe('publication-transformers', () => {
     })
     renderCssRules(editor)
     const css = editor.getCss()
-    expect(transformCssRule).toBeCalledTimes(2)
+    expect(transformCssRule).toHaveBeenCalledTimes(2)
     const results = transformCssRule.mock.results.map(r => r.value as StyleProps)
     const parent = results.find(c => c.color === 'testred')
     expect(parent).not.toBeUndefined()
@@ -108,7 +108,7 @@ describe('publication-transformers', () => {
     renderCssRules(editor)
     resetRenderCssRules(editor)
     const css = editor.getCss()
-    expect(renderCssRule).toBeCalledTimes(0)
+    expect(renderCssRule).toHaveBeenCalledTimes(0)
     expect(css).toContain('color:blue')
   })
 
@@ -120,7 +120,7 @@ describe('publication-transformers', () => {
     if (mockData.files?.length) { // To avoid ! operator on mockData.files and make the lint happy
       expect(mockData.files[0]).toBe(mockFile)
       transformFiles(editor, mockData)
-      expect(transformFile).toBeCalledTimes(1)
+      expect(transformFile).toHaveBeenCalledTimes(1)
       expect(mockData.files[0]).toBe(returned)
     }
   })
@@ -133,7 +133,7 @@ describe('publication-transformers', () => {
     transformPermalink.mockReturnValue(transformedSrc)
     renderComponents(editor)
     const html = editor.getHtml()
-    expect(transformPermalink).toBeCalledTimes(2) // 2x because of c.attributes.src and c.attributes.attributes.src
+    expect(transformPermalink).toHaveBeenCalledTimes(2) // 2x because of c.attributes.src and c.attributes.attributes.src
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
   })
@@ -165,7 +165,7 @@ describe('publication-transformers', () => {
     transformPermalink.mockReturnValue(transformedSrc)
     renderComponents(editor)
     const css = editor.getCss()
-    expect(transformPermalink).toBeCalledTimes(1)
+    expect(transformPermalink).toHaveBeenCalledTimes(1)
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
     expect(css).toContain('url("test.png")')
@@ -184,7 +184,7 @@ describe('publication-transformers', () => {
     transformPermalink.mockReturnValue(transformedSrc)
     renderCssRules(editor)
     const css = editor.getCss()
-    expect(transformPermalink).toBeCalledTimes(1)
+    expect(transformPermalink).toHaveBeenCalledTimes(1)
     expect(transformPermalink.mock.calls[0][0]).toBe('test.png')
     expect(transformPermalink.mock.calls[0][1]).toBe('asset')
     expect(css).toContain(`url("${transformedSrc}")`)
@@ -198,7 +198,7 @@ describe('publication-transformers', () => {
     transformPermalink.mockReturnValue(transformedPermalink)
     renderComponents(editor)
     const html = editor.getHtml()
-    expect(transformPermalink).toBeCalledTimes(1)
+    expect(transformPermalink).toHaveBeenCalledTimes(1)
     expect((transformPermalink.mock.calls[0][0])).toBe('./index.html')
     expect((transformPermalink.mock.calls[0][1])).toBe(ClientSideFileType.HTML)
     expect(html).not.toContain('href="./index.html"')

package/{src/ts/client → editor}/publication-transformers.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, CssRule, StyleProps, Editor } from 'grapesjs'
-import { ClientSideFile, ClientSideFileType, Initiator, PublicationData } from '../types'
+import { ClientSideFile, ClientSideFileType, Initiator, PublicationData } from '~/common/types'
 import { onAll } from './utils'
 import { isExternalUrl } from './assetUrl'
 

package/{src/ts/client → editor}/publish-fonts.ts

@@ -15,8 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ClientSideFile, ClientSideFileType, ClientSideFileWithContent } from '../types'
-import { cmdGetHtml } from '@silexlabs/grapesjs-fonts/src/commands'
+import { ClientSideFile, ClientSideFileType, ClientSideFileWithContent } from '~/common/types'
+import { cmdGetHtml } from '~/grapesjs-plugins/grapesjs-fonts/src/commands'
 
 /**
  * @fileoverview Make sure custom script blocks include script tags when published

package/grapesjs-plugins/expression-input/.husky/pre-commit

@@ -0,0 +1,2 @@
+yarn run build
+yarn run lint

package/grapesjs-plugins/expression-input/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "always"
+}

package/grapesjs-plugins/expression-input/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": ["runem.lit-plugin"],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}