@silexlabs/silex 3.0.1-alpha.0 → 3.0.1

package/src/ts/client/index.ts

@@ -1,25 +1,51 @@
+/*
+ * 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/>.
+ */
+
 /**
  * @fileoverview
  * Defines the entry point of Silex client side application
  *
  */
 
-import { SilexConfig } from './config'
+import { DEV_MESSAGE } from '../constants'
+import { ClientConfig } from './config'
+import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
-import { EVENT_STARTUP_START, EVENT_STARTUP_END } from '../events'
+import { cmdPauseAutoSave } from './grapesjs/storage'
+
+// Expose API to calling app as window.silex
+export * from './expose'
+
+/**
+ * Expose the config object
+ */
+export let config: ClientConfig
 
 /**
  * Start Silex, called from host HTML page with window.silex.start()
  */
-export async function start(options = {}) {
-  const config = new SilexConfig()
+export async function start(options = {}): Promise<void> {
+  // Log Silex version for devs - it is also displayed in te settings
+  console.info(DEV_MESSAGE)
+  // Create the config object
+  config = new ClientConfig()
   Object.assign(config, options)
 
-  // Config file in root folder which can be generated by the server
-  console.log('Loading config', config.clientConfigUrl)
-  //import(/* webpackIgnore: true */ config.clientConfigUrl)
-  //.then((configFile) => console.log('Config loaded', configFile))
-  //.catch((e) => console.error('Config error', config.clientConfigUrl, e))
+  // Config file in root folder which may be generated by the server
   await config.addPlugin(config.clientConfigUrl, {})
 
   // Debug mode
@@ -28,24 +54,57 @@ export async function start(options = {}) {
   }
 
   // Notify plugins that loading is over and Silex is starting
-  config.emit(EVENT_STARTUP_START)
+  config.emit(ClientEvent.STARTUP_START)
+
+  // Init GrapesJS config which depend on the config file properties
+  config.initGrapesConfig()
 
   // Start grapesjs
-  console.log('start', {config})
+  // Here you can change the config before passing it to grapesjs
+  config.emit(ClientEvent.GRAPESJS_START)
   try{
-    initEditor(config.editor, config.grapesJsPlugins)
+    await initEditor(config.grapesJsConfig)
   } catch(e) {
     console.error('Error starting Silex', e)
+    throw e
   }
 
+  const editor = getEditor()
+
+  // Store the config in the editor
+  editor.getModel().set('config', config)
+
+  // Notify plugins
+  config.emit(ClientEvent.GRAPESJS_END, { editor })
+
   // Init internationalization module
-  getEditor().I18n.setLocale(config.lang)
-
-  // End of loading
-  getEditor().on('load', () => {
-    console.log('Silex started')
-    document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
-    document.querySelector('#gjs').classList.remove('silex-dialog-hide')
-    config.emit(EVENT_STARTUP_END)
-  })
+  editor.I18n.setLocale(config.lang)
+
+  // Add default plugins
+  await config.addDefaultPlugins()
+
+  // Load the site
+  try {
+    editor.runCommand(cmdPauseAutoSave)
+    await editor.load(null)
+    editor.once('canvas:frame:load', () => editor.stopCommand(cmdPauseAutoSave))
+  } catch(e) {
+    if(e.httpStatusCode === 401) {
+      // Unauthorized, will try to login
+    } else {
+      // Will display an error message, see in storage.ts
+    }
+  } finally {
+    if(editor.getModel().getCurrentFrame().loaded) {
+      loaded(editor)
+    } else {
+      editor.once('canvas:frame:load', () => loaded(editor))
+    }
+  }
+}
+
+function loaded(editor) {
+  document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
+  document.querySelector('#gjs').classList.remove('silex-dialog-hide')
+  config.emit(ClientEvent.STARTUP_END, { editor, config })
 }

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

@@ -0,0 +1,207 @@
+import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+import { Mock } from 'jest-mock'
+import {
+  renderComponents,
+  renderCssRules,
+  resetRenderComponents,
+  resetRenderCssRules,
+  PublicationTransformer,
+  transformFiles,
+  transformBgImage
+} from './publication-transformers'
+import { ClientConfig } from './config'
+import grapesjs, { Component, Editor, StyleProps, Page } from 'grapesjs'
+import { ClientSideFile, ClientSideFileType, PublicationData } from '../types'
+
+describe('publication-transformers', () => {
+  let mockConfig: ClientConfig
+  let mockFile: ClientSideFile
+  let mockData: PublicationData
+  let transformer: PublicationTransformer
+
+  let editor: Editor
+
+  beforeEach(() => {
+    // Initialize your mocks here
+    /* @ts-ignore */
+    editor = grapesjs.init({
+      headless: true,
+      storageManager: { autoload: false },
+    })
+    expect(editor).not.toBeUndefined()
+    editor.addComponents(`
+      <nav class="parent">
+        <div class="child">Hello world</div>
+      <nav>
+    `)
+    editor.addStyle(`
+      .parent {
+        color: red;
+      }
+      .child {
+        color: blue;
+      }
+    `)
+    mockFile = {
+      path: 'test path',
+      content: 'test content',
+    } as ClientSideFile
+    mockData = {
+      files: [mockFile],
+      pages: [{} as Page],
+    } as any as PublicationData
+    transformer = {
+      renderComponent: jest.fn(),
+      renderCssRule: jest.fn(),
+      transformFile: jest.fn(),
+      transformPermalink: jest.fn(),
+      transformPath: jest.fn(),
+    } as PublicationTransformer
+    mockConfig = { getEditor: jest.fn(() => editor), publicationTransformers: [transformer] } as unknown as ClientConfig
+    editor.getModel().set('config', mockConfig)
+  })
+
+  it('should transform components', () => {
+    const renderComponent = transformer.renderComponent as Mock
+    renderComponent.mockReturnValue('mockHtml')
+    renderComponents(editor)
+    const html = editor.getHtml()
+    expect(renderComponent).toBeCalledTimes(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()
+    const child = results.find(c => c.getClasses()[0] === 'child')
+    expect(child).not.toBeUndefined()
+  })
+
+  it('should reset transformed pages', () => {
+    const renderComponent = transformer.renderComponent as Mock
+    renderComponent.mockReturnValue('mockHtml')
+    renderComponents(editor)
+    resetRenderComponents(editor)
+    const html = editor.getHtml()
+    expect(renderComponent).toBeCalledTimes(0)
+    expect(html).toContain('Hello world')
+  })
+
+  it('should transform styles', () => {
+    const transformCssRule = transformer.renderCssRule as Mock
+    transformCssRule.mockImplementation((rule: any) => {
+      return { color: 'test'+rule.color } as StyleProps
+    })
+    renderCssRules(editor)
+    const css = editor.getCss()
+    expect(transformCssRule).toBeCalledTimes(2)
+    const results = transformCssRule.mock.results.map(r => r.value as StyleProps)
+    const parent = results.find(c => c.color === 'testred')
+    expect(parent).not.toBeUndefined()
+    const child = results.find(c => c.color === 'testblue')
+    expect(child).not.toBeUndefined()
+    expect(css).toContain('color:test')
+    expect(css).not.toContain('color:blue')
+  })
+
+  it('should reset transformed styles', () => {
+    const renderCssRule = transformer.renderCssRule as Mock
+    const returned = {color: 'test'} as StyleProps
+    renderCssRule.mockReturnValue(returned)
+    renderCssRules(editor)
+    resetRenderCssRules(editor)
+    const css = editor.getCss()
+    expect(renderCssRule).toBeCalledTimes(0)
+    expect(css).toContain('color:blue')
+  })
+
+  it('should transform files', () => {
+    const transformFile = transformer.transformFile as Mock
+    const returned = {path: 'test path changed', content: 'test content changed'} as ClientSideFile
+    transformFile.mockReturnValue(returned)
+    expect(mockData.files?.length).toBe(1)
+    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(mockData.files[0]).toBe(returned)
+    }
+  })
+  it('should transform permalinks of images src', () => {
+    editor.addComponents(`
+      <img src="test.png">
+    `)
+    const transformPermalink = transformer.transformPermalink as Mock
+    const transformedSrc = 'transformed.png'
+    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.mock.calls[0][0]).toBe('test.png')
+    expect(transformPermalink.mock.calls[0][1]).toBe('asset')
+  })
+
+  it('should transform a style rule with background image', () => {
+    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': '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%));`,
+    })
+  })
+
+  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)' })
+    //editor.addComponents(`
+    //  <div style="color: black; background-image: url(test.png);"></div>
+    //`)
+    const transformPermalink = transformer.transformPermalink as Mock
+    const transformedSrc = 'transformed.png'
+    transformPermalink.mockReturnValue(transformedSrc)
+    renderComponents(editor)
+    const css = editor.getCss()
+    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)')
+  })
+  it('should transform permalinks of background images in styles', () => {
+    editor.addComponents(`
+      <div class="test"></div>
+    `)
+    editor.addStyle(`
+      .test {
+        background-image: url(test.png);
+      }
+    `)
+    const transformPermalink = transformer.transformPermalink as Mock
+    const transformedSrc = 'transformed.png'
+    transformPermalink.mockReturnValue(transformedSrc)
+    renderCssRules(editor)
+    const css = editor.getCss()
+    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})`)
+  })
+  it('should transform links to pages to match permalinks ', () => {
+    editor.addComponents(`
+      <a href="./index.html">test</a>
+    `)
+    const transformPermalink = transformer.transformPermalink as Mock
+    const transformedPermalink = './transformed-page.html'
+    transformPermalink.mockReturnValue(transformedPermalink)
+    renderComponents(editor)
+    const html = editor.getHtml()
+    expect(transformPermalink).toBeCalledTimes(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"')
+    expect(html).toContain(`href="${transformedPermalink}"`)
+  })
+})

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

@@ -0,0 +1,280 @@
+/*
+ * 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 { Component, CssRule, StyleProps, Editor } from 'grapesjs'
+import { ClientSideFile, ClientSideFileType, Initiator, PublicationData } from '../types'
+import { onAll } from './utils'
+
+/**
+ * @fileoverview Silex publication transformers are used to control how the site is rendered and published
+ * Here we call path the path on the connector (either storage or hosting)
+ * We call permalink the path at which the resource is served
+ * This is where pages and assets paths and permalinks are set
+ * Here we also update background images urls, assets url and links to match the new permalinks
+ */
+
+// Properties names used to store the original methods on the components and styles
+const ATTRIBUTE_METHOD_STORE_HTML = 'tmp-pre-publication-transformer-tohtml'
+const ATTRIBUTE_METHOD_STORE_SRC = 'tmp-pre-publication-transformer-src'
+const ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC = 'tmp-pre-publication-transformer-attributes-src'
+const ATTRIBUTE_METHOD_STORE_INLINE_CSS = 'tmp-pre-publication-transformer-inline-css'
+const ATTRIBUTE_METHOD_STORE_HREF = 'tmp-pre-publication-transformer-href'
+const ATTRIBUTE_METHOD_STORE_CSS = 'tmp-pre-publication-transformer-tocss'
+
+/**
+ * Interface for publication transformers
+ * They are added to the config object with config.addPublicationTransformer()
+ */
+export interface PublicationTransformer {
+  // Temporarily override how components render at publication by grapesjs
+  renderComponent?(component: Component, toHtml: () => string): string | undefined
+  // Temporarily override how styles render at publication by grapesjs
+  renderCssRule?(rule: CssRule, initialRule: () => StyleProps): StyleProps | undefined
+  // Transform files after they are rendered and before they are published
+  transformFile?(file: ClientSideFile): ClientSideFile
+  // Define files URLs
+  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: () => StyleProps): StyleProps | 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 = [
+    'renderComponent',
+    'renderCssRule',
+    'transformFile',
+    'transformPermalink',
+    'transformPath',
+  ]
+
+  // Check that there are no unknown properties
+  Object.keys(transformer).forEach(key => {
+    if(!allowedProperties.includes(key)) {
+      throw new Error(`Publication transformer: unknown property ${key}`)
+    }
+  })
+
+  // Check that the methods are functions
+  allowedProperties.forEach(key => {
+    if(typeof transformer[key] !== 'function' && transformer[key] !== undefined) {
+      throw new Error(`Publication transformer: ${key} must be a function`)
+    }
+  })
+}
+
+/**
+ * Alter the components rendering
+ * Exported for unit tests
+ */
+export function renderComponents(editor: Editor) {
+  const config = editor.getModel().get('config')
+  onAll(editor, (c: Component) => {
+    if (c.get(ATTRIBUTE_METHOD_STORE_HTML)) {
+      console.warn('Publication transformer: HTML transform already altered', c)
+    } else {
+      const initialToHTML = c.toHTML.bind(c)
+      c[ATTRIBUTE_METHOD_STORE_HTML] = c.toHTML
+      const initialGetStyle = c.getStyle.bind(c)
+      c[ATTRIBUTE_METHOD_STORE_INLINE_CSS] = c.getStyle
+      const href = c.get('attributes').href as string | undefined
+      if(href?.startsWith('./')) {
+        c[ATTRIBUTE_METHOD_STORE_HREF] = href
+        c.set('attributes', {
+          ...c.get('attributes'),
+          href: transformPermalink(editor, href, ClientSideFileType.HTML, Initiator.HTML),
+        })
+      }
+      // Handle both c.attributes.src and c.attributes.attributes.src
+      // For some reason we need both
+      // 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, Initiator.HTML)
+        c.set('attributes', {
+          ...c.get('attributes'),
+          src,
+        })
+      }
+      if(c.get('src')) {
+        c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC] = c.get('src')
+        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) => {
+          return transformer.renderComponent ? transformer.renderComponent(c, () => html) ?? html : html
+        }, initialToHTML())
+      }
+      c.getStyle = () => transformBgImage(editor, initialGetStyle())
+    }
+  })
+}
+
+/**
+ * Alter the styles rendering
+ * Exported for unit tests
+ */
+export function renderCssRules(editor: Editor) {
+  const config = editor.getModel().get('config')
+  editor.Css.getAll().forEach((style: CssRule) => {
+    if (style[ATTRIBUTE_METHOD_STORE_CSS]) {
+      console.warn('Publication transformer: CSS transform already altered', style)
+    } else {
+      const initialGetStyle = style.getStyle.bind(style)
+      style[ATTRIBUTE_METHOD_STORE_CSS] = style.getStyle
+      style.getStyle = () => {
+        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
+      }
+    }
+  })
+}
+
+function doTransformPermalink(editor: Editor, cssValue: string): string {
+  return 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})`
+  })
+}
+
+/**
+ * Transform background image url according to the transformed path of assets
+ */
+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))
+    return {
+      ...style,
+      'background-image': newCssValue,
+    }
+  }
+  return style
+}
+
+/**
+ * Transform files
+ * Exported for unit tests
+ */
+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) => {
+      const page = data.pages[idx] ?? null
+      return transformer.transformFile ? transformer.transformFile(file) as ClientSideFile ?? file : file
+    })
+  }, data.files)
+}
+
+/**
+ * Transform files paths
+ * Exported for unit tests
+ */
+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) => {
+    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) => {
+    return transformer.transformPath ? transformer.transformPath(result, type) ?? result : result
+  }, path)
+}
+
+export function resetRenderComponents(editor: Editor) {
+  onAll(editor, (c: Component) => {
+    if (c[ATTRIBUTE_METHOD_STORE_HTML]) {
+      c.toHTML = c[ATTRIBUTE_METHOD_STORE_HTML]
+      delete c[ATTRIBUTE_METHOD_STORE_HTML]
+    }
+    if (c[ATTRIBUTE_METHOD_STORE_INLINE_CSS]) {
+      c.getStyle = c[ATTRIBUTE_METHOD_STORE_INLINE_CSS]
+      delete c[ATTRIBUTE_METHOD_STORE_INLINE_CSS]
+    }
+    if(c[ATTRIBUTE_METHOD_STORE_SRC]) {
+      c.set('attributes', {
+        ...c.get('attributes'),
+        src: c[ATTRIBUTE_METHOD_STORE_SRC],
+      })
+      delete c[ATTRIBUTE_METHOD_STORE_SRC]
+    }
+    if(c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC]) {
+      c.set('src', c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC])
+      delete c[ATTRIBUTE_METHOD_STORE_ATTRIBUTES_SRC]
+    }
+    if(c[ATTRIBUTE_METHOD_STORE_HREF]) {
+      c.set('attributes', {
+        ...c.get('attributes'),
+        href: c[ATTRIBUTE_METHOD_STORE_HREF],
+      })
+      delete c[ATTRIBUTE_METHOD_STORE_HREF]
+    }
+  })
+}
+
+export function resetRenderCssRules(editor: Editor) {
+  editor.Css.getAll().forEach(c => {
+    if (c[ATTRIBUTE_METHOD_STORE_CSS]) {
+      c.getStyle = c[ATTRIBUTE_METHOD_STORE_CSS]
+      delete c[ATTRIBUTE_METHOD_STORE_CSS]
+    }
+  })
+}

package/src/ts/client/publish-custom-code-block.ts

@@ -0,0 +1,31 @@
+/*
+ * 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/>.
+ */
+
+/**
+ * @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()
+    },
+  })
+}

package/src/ts/client/publish-fonts.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { ClientSideFile, ClientSideFileType, ClientSideFileWithContent } from '../types'
+import { cmdGetHtml } from '@silexlabs/grapesjs-fonts/src/commands'
+
+/**
+ * @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
+    },
+  })
+}