@silexlabs/silex 3.0.1-0 → 3.0.1

package/src/ts/client/grapesjs/symbolDialogs.ts

@@ -15,12 +15,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
 import { cmdAddSymbol } from '@silexlabs/grapesjs-symbols'
 
 export const cmdPromptAddSymbol = 'symbol-prompt-add'
 
-export default grapesjs.plugins.add(name, (editor, opts) => {
+export default (editor, opts) => {
   function getNext(prefix) {
     let idx = 1
     while(editor.Symbols.find(s => s.get('label') === prefix + idx)) {
@@ -31,8 +30,8 @@ export default grapesjs.plugins.add(name, (editor, opts) => {
   editor.Commands.add(cmdPromptAddSymbol, {
     run: (_, sender) => {
       const label = prompt('Label', getNext('Symbol '))
-      const icon = prompt('Icon', 'fa-list')
+      const icon = 'fa-gem'
       editor.runCommand(cmdAddSymbol, { label, icon })
     }
   })
-})
+}

package/src/ts/{plugins/server/AuthPlugin.ts → client/grapesjs/view-buttons.ts}

@@ -13,26 +13,30 @@
  *
  * 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 express from 'express'
-import { Directus } from '@directus/sdk'
+const pasteBtnClass = 'fa fa-fw fa-paste silex-button'
+const disabledClass = ' disabled'
+
+export default function(editor) {
+  // Add copy/paste buttons in the top bar
+  const [copyBtn, pasteBtn] = editor.Panels.addButton('options', [{
+    id: 'copy',
+    className: 'fa fa-fw fa-copy',
+    command: 'core:copy',
+    attributes: { title: 'Copy (Ctrl+C)' },
+  }, {
+    id: 'paste',
+    className: pasteBtnClass + disabledClass,
+    command: 'core:paste',
+    attributes: { title: 'Paste (Ctrl+V)' },
+    active: false,
+  }])
 
-export default async function(config, opts = {}) {
-//  config.on('silex:startup:start', ({app}) => {
-//    const router = express.Router()
-//    router.post(['/publish', '/website', '/assets'], async function(req, res, next) {
-//      try {
-//        const token = req.body.token || opts.directusToken
-//        const directus = new Directus(opts.directusUrl)
-//        directus.storage.auth_token = token
-//        const me = await directus.users.me.read()
-//        next()
-//      } catch(err) {
-//        console.error('Publish failed in auth module. Did you provide a directus token?', err.message)
-//        res.status(403).json({ message: err.message })
-//      }
-//    })
-//    app.use(router)
-//  })
+  // Disable paste button if clipboard is empty
+  editor.EditorModel.on('change:clipboard', (model, value) => {
+    const hasClipboard = value && value.length > 0
+    pasteBtn.set('className', pasteBtnClass + (hasClipboard ? '' : disabledClass))
+  })
 }

package/src/ts/client/index.ts

@@ -21,18 +21,28 @@
  *
  */
 
+import { DEV_MESSAGE } from '../constants'
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
+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 ClientConfig()
+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 may be generated by the server
@@ -50,6 +60,8 @@ export async function start(options = {}) {
   config.initGrapesConfig()
 
   // Start grapesjs
+  // Here you can change the config before passing it to grapesjs
+  config.emit(ClientEvent.GRAPESJS_START)
   try{
     await initEditor(config.grapesJsConfig)
   } catch(e) {
@@ -57,18 +69,25 @@ export async function start(options = {}) {
     throw e
   }
 
-  config.emit(ClientEvent.GRAPESJS_START)
   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
   editor.I18n.setLocale(config.lang)
 
+  // Add default plugins
+  await config.addDefaultPlugins()
+
   // Load the site
-  editor.StorageManager.setAutosave(false)
-  console.log('before load')
   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
@@ -76,16 +95,16 @@ export async function start(options = {}) {
       // Will display an error message, see in storage.ts
     }
   } finally {
-    console.log('after load')
-    setTimeout(() => {
-      // This needs time for grapesjs
-      editor.editor.set('changesCount', 0)
-      editor.StorageManager.setAutosave(true)
-
-      // This needs time for the loader to be hidden
-      document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
-      document.querySelector('#gjs').classList.remove('silex-dialog-hide')
-      config.emit(ClientEvent.STARTUP_END, { editor, config })
-    }, 100)
+    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/{dist/plugins/client/client/utils.js → src/ts/client/publish-custom-code-block.ts}

@@ -14,12 +14,18 @@
  * 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/>.
  */
-// Browse all elements of all pages
-export function onAll(editor, cbk) {
-    editor.Pages.getAll()
-        .forEach(page => {
-        page.getMainComponent()
-            .onAll(c => cbk(c));
-    });
+
+/**
+ * @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()
+    },
+  })
 }
-//# sourceMappingURL=utils.js.map