@silexlabs/silex 3.4.0 → 3.5.1-1

package/src/ts/client/grapesjs/sectors.ts

@@ -43,17 +43,25 @@ export function registerSector(editor: Editor, config: SectorConfig, at?: number
     }
   })
 
-  async function applyVisibility(comp: Component = editor.getSelected()) {
+  // Update visibility depending on selected component
+  let showSector = false
+  editor.on('component:selected', async (comp: Component) => {
+    if (!comp) return // No selection yet
     const shouldShow = await config.shouldShow(comp)
-    if (sector.get('visible') !== shouldShow) {
-      sector.off('change:visible', applyVisibility)
-      sector.set('visible', shouldShow)
-      sector.on('change:visible', applyVisibility)
-      // sector.getProperties()
-      //   .forEach(p => p.set('visible', shouldShow))
+    showSector = shouldShow
+    sector.set('visible', shouldShow)
+    sector.getProperties().forEach(p => p.set('visible', shouldShow))
+  })
+
+  // Watch changes made by grapesjs and revert them if needed
+  function doubleCheck() {
+    if (sector.get('visible') !== showSector) {
+      sector.off('change:visible', doubleCheck)
+      sector.set('visible', showSector)
+      sector.getProperties().forEach(p => p.set('visible', showSector))
+      sector.on('change:visible', doubleCheck)
     }
   }
-
-  sector.on('change:visible', applyVisibility)
-  editor.on('component:selected', comp => applyVisibility(comp))
+  sector.on('change:visible', doubleCheck)
 }
+

package/src/ts/client/grapesjs/settings.ts

@@ -22,69 +22,221 @@ import {defaultSections, idCodeWrapper, isSite, SettingsSection} from './setting
  * @fileoverview This file contains the settings dialog. The config API lets plugins add sections to the settings dialog.
  */
 
-import { WebsiteSettings } from '../../types'
+import { WebsiteData, WebsiteSettings } from '../../types'
 import { ClientEvent } from '../events'
 import { SILEX_VERSION } from '../../constants'
+import { Button, Editor } from 'grapesjs'
 
-const sectionsSite = [...defaultSections]
-const sectionsPage = [...defaultSections]
+const sectionsSite: SettingsSection[] = [...defaultSections]
+const sectionsPage: SettingsSection[] = [...defaultSections]
 
-const el = document.createElement('div')
-let modal
+const el: HTMLDivElement = document.createElement('div')
+let modal: any | undefined // the modal var should be of type ModalModule, not Modal, but it is not exported from grapesjs
+let settingsState: {
+  isOpen: boolean
+  title: string
+  page: unknown
+  sectionId?: string
+  sender?: Button
+} | null = null
+let customSettingsDialog: HTMLDivElement | null = null
 
 export const cmdOpenSettings = 'open-settings'
+export const cmdAddSection = 'settings:add-section'
+export const cmdRemoveSection = 'settings:remove-section'
+
+export interface AddSectionOption {
+  section: SettingsSection,
+  siteOrPage: 'site' | 'page',
+  position: 'first' | 'last' | number
+}
+
+let headEditor: ReturnType<Editor['CodeManager']['createViewer']> | null = null
+
+
+function createCustomSettingsDialog(editor: Editor, opts: Record<string, unknown>, page: unknown, sectionId?: string): HTMLDivElement {
+  const dialog = document.createElement('div')
+  dialog.className = 'settings-dialog gjs-two-color'
+  dialog.innerHTML = `
+    <div class="settings-content" role="dialog" aria-modal="true" aria-labelledby="settings-title">
+      <div class="settings-header">
+        <h3 id="settings-title">${page ? 'Page settings' : 'Site Settings'}</h3>
+        <button type="button" class="settings-close" title="Close" aria-label="Close settings">×</button>
+      </div>
+      <div class="settings-body"></div>
+    </div>
+  `
+
+  // Handle close button
+  const closeButton = dialog.querySelector('.settings-close') as HTMLButtonElement
+  closeButton.addEventListener('click', () => {
+    closeCustomSettingsDialog(editor)
+  })
+
+  // Handle keyboard shortcuts
+  dialog.addEventListener('keydown', (e: KeyboardEvent) => {
+    // Close on Escape
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      closeCustomSettingsDialog(editor)
+      return
+    }
+
+    // Save on Ctrl/Cmd + Enter
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault()
+      const form = dialog.querySelector('form') as HTMLFormElement
+      if (form) {
+        form.requestSubmit()
+      }
+      return
+    }
+
+    // Handle Alt+C (Cancel) and Alt+A (Apply)
+    if (e.altKey) {
+      if (e.key.toLowerCase() === 'c') {
+        e.preventDefault()
+        closeCustomSettingsDialog(editor)
+        return
+      }
+      if (e.key.toLowerCase() === 'a') {
+        e.preventDefault()
+        const form = dialog.querySelector('form') as HTMLFormElement
+        if (form) {
+          form.requestSubmit()
+        }
+        return
+      }
+    }
+  })
+
+  // Add content
+  displaySettings(editor, opts, page, sectionId)
+  const body = dialog.querySelector('.settings-body') as HTMLDivElement
+  body.appendChild(el)
+
+  // Initialize focus when dialog opens
+  setTimeout(() => {
+    const firstTab = dialog.querySelector('.silex-list--menu li[role="button"]') as HTMLElement
+    if (firstTab) {
+      firstTab.focus()
+    }
+  }, 100)
+
+  // Handle form submission
+  const form = el.querySelector('form') as HTMLFormElement
+  form.onsubmit = (event: Event) => {
+    event.preventDefault()
+    editor.trigger(ClientEvent.SETTINGS_SAVE_START, page)
+    saveSettings(editor, opts, page)
+    editor.trigger(ClientEvent.SETTINGS_SAVE_END, page)
+    closeCustomSettingsDialog(editor, false)
+  }
+
+  return dialog
+}
+
+function closeCustomSettingsDialog(editor: Editor, fromCommand = false) {
+  if (customSettingsDialog) {
+    customSettingsDialog.remove()
+    customSettingsDialog = null
+  }
+  settingsState?.sender?.set && settingsState.sender.set('active', 0)
+
+  // Only call stopCommand if not already being called from the command's stop method
+  if (!fromCommand) {
+    editor.stopCommand(cmdOpenSettings)
+  }
+
+  settingsState = null
+  editor.trigger(ClientEvent.SETTINGS_CLOSE)
+}
+
+function reopenSettingsModal(editor: Editor, opts: Record<string, unknown>) {
+  if (!settingsState) {
+    return
+  }
+
+  modal = editor.Modal.open({
+    title: settingsState.title,
+    content: '',
+    attributes: { class: 'settings-dialog' },
+  })
+    .onceClose(() => {
+      settingsState?.sender?.set && settingsState.sender.set('active', 0)
+      editor.stopCommand(cmdOpenSettings)
+      settingsState = null
+    })
+
+  displaySettings(editor, opts, settingsState.page, settingsState.sectionId)
+  modal.setContent(el)
+
+  const form = el.querySelector('form') as HTMLFormElement
+  form.onsubmit = (event: Event) => {
+    event.preventDefault()
+    editor.trigger(ClientEvent.SETTINGS_SAVE_START, settingsState?.page)
+    saveSettings(editor, opts, settingsState?.page)
+    editor.trigger(ClientEvent.SETTINGS_SAVE_END, settingsState?.page)
+    editor.stopCommand(cmdOpenSettings)
+  }
+}
+
+export const settingsDialog = (
+  editor: Editor,
+  opts: Record<string, unknown>
+): void => {
+  // No need to override Modal system - we use custom dialog
 
-let headEditor = null
-export const settingsDialog = (editor, opts) => {
   editor.Commands.add(cmdOpenSettings, {
-    run: (_, sender, {page}) => {
-      modal = editor.Modal.open({
-        title: page ? 'Page settings' : 'Site Settings',
-        content: '',
-        attributes: { class: 'settings-dialog' },
-      })
-        .onceClose(() => {
-          sender?.set && sender.set('active', 0) // Deactivate the button to make it ready to be clicked again, only in case of a grapesjs button (not in the pages panel)
-          editor.stopCommand(cmdOpenSettings) // apparently this is needed to be able to run the command several times
-        })
-      displaySettings(editor, opts, page)
-      modal.setContent(el)
-      const form = el.querySelector('form')
-      form.onsubmit = event => {
-        event.preventDefault()
-        editor.trigger(ClientEvent.SETTINGS_SAVE_START, page)
-        saveSettings(editor, opts, page)
-        editor.trigger(ClientEvent.SETTINGS_SAVE_END, page)
-        editor.stopCommand(cmdOpenSettings)
+    run: (
+      _: Editor,
+      sender: Button,
+      {page, sectionId}: {page?: unknown, sectionId?: string}
+    ) => {
+      const title = page ? 'Page settings' : 'Site Settings'
+
+      // Store settings state
+      settingsState = {
+        isOpen: true,
+        title,
+        page,
+        sectionId,
+        sender
       }
-      form.querySelector('input')?.focus()
-      // Notify other plugins
+
+      // Create and show custom dialog instead of using GrapesJS modal
+      customSettingsDialog = createCustomSettingsDialog(editor, opts, page, sectionId)
+      document.body.appendChild(customSettingsDialog)
+
+      // Let the first focusable element get focus naturally
+
       editor.trigger(ClientEvent.SETTINGS_OPEN, page)
-      // Return the dialog
-      return modal
+      return customSettingsDialog
     },
-    stop: () => {
-      modal.close()
-      editor.trigger(ClientEvent.SETTINGS_CLOSE)
+    stop: (): void => {
+      closeCustomSettingsDialog(editor, true)
     },
   })
-  // add settings to the website
-  editor.on('storage:start:store', (data) => {
+  editor.Commands.add(cmdAddSection, (_editor: Editor, _sender: Button, options: AddSectionOption): void => {
+    addSection(options.section, options.siteOrPage, options.position)
+  })
+  editor.Commands.add(cmdRemoveSection, (_editor: Editor, _sender: Button, options: AddSectionOption): void => {
+    removeSection(options.section.id, options.siteOrPage)
+  })
+  editor.on('storage:start:store', (data: WebsiteData): void => {
     data.settings = editor.getModel().get('settings')
+    /* @ts-ignore FIXME: this should not be there? or is it used on the server side in the sotrage providers? */
     data.name = editor.getModel().get('name')
   })
-  editor.on('storage:end:load', (data) => {
+  editor.on('storage:end:load', (data: WebsiteData): void => {
     const model = editor.getModel()
     model.set('settings', data.settings || {})
-    model.set('name', data.name)
+    model.set('name', editor.getModel().get('name'))
   })
-  // Normal way to apply the head content to the DOM
-  // fix #1559 Custom <head> code must be reapplied
-  editor.on('canvas:frame:load', () => {
+  editor.on('canvas:frame:load', (): void => {
     updateDom(editor)
   })
-  // When the page changes, update the dom
-  editor.on('page', (e) => {
+  editor.on('page', (_e: unknown): void => {
     updateDom(editor)
   })
   headEditor = editor.CodeManager.createViewer({
@@ -96,9 +248,7 @@ export const settingsDialog = (editor, opts) => {
   })
 }
 
-function showSection(item: SettingsSection) {
-  // **
-  // Handle the side bar
+function showSection(item: SettingsSection): void {
   const aside = el.querySelector('aside.silex-bar') as HTMLElement
   const ul = aside.querySelector('ul.silex-list--menu') as HTMLUListElement
   const li = ul.querySelector('li#settings-sidebar-' + item.id) as HTMLLIElement
@@ -109,14 +259,12 @@ function showSection(item: SettingsSection) {
       console.error('Cannot find the default section in the side bar')
       return
     }
-    showSection(defaultSections[0]) // Fallback to the first section
+    showSection(defaultSections[0])
     return
   }
-  // Update active
   Array.from(ul.querySelectorAll('.active')).forEach(el => el.classList.remove('active'))
   li.classList.add('active')
-  // **
-  // Handle the main section
+
   const main = el.querySelector('main#settings__main') as HTMLElement
   const mainItem = main.querySelector(`#settings-${item.id}`)
   if(!mainItem) {
@@ -125,20 +273,19 @@ function showSection(item: SettingsSection) {
       console.error('Cannot find the default section in the settings dialog')
       return
     }
-    showSection(defaultSections[0]) // Fallback to the first section
+    showSection(defaultSections[0])
     return
   }
-  // Update hidden
   Array.from(main.querySelectorAll('.silex-hideable')).forEach(el => el.classList.add('silex-hidden'))
   mainItem.classList.remove('silex-hidden')
-  // This messes up with the save / cancel mechanism
-  // displaySettings(editor, config, model)
-  // Refresh the code editor just in case it went from hidden to visible
-  // This makes it ready to be used when the user clicks on the tab
-  headEditor.refresh()
+  headEditor?.refresh()
 }
 
-export function addSection(section, siteOrPage: 'site' | 'page', position: 'first' | 'last' | number) {
+export function addSection(
+  section: SettingsSection,
+  siteOrPage: 'site' | 'page',
+  position: 'first' | 'last' | number
+): void {
   const sections = siteOrPage === 'site' ? sectionsSite : sectionsPage
   if (position === 'first') {
     sections.unshift(section)
@@ -151,7 +298,10 @@ export function addSection(section, siteOrPage: 'site' | 'page', position: 'firs
   }
 }
 
-export function removeSection(id, siteOrPage: 'site' | 'page') {
+export function removeSection(
+  id: string,
+  siteOrPage: 'site' | 'page'
+): void {
   const sections = siteOrPage === 'site' ? sectionsSite : sectionsPage
   const index = sections.findIndex(section => section.id === id)
   if(index === -1) throw new Error(`Cannot find section with id ${id}`)
@@ -159,15 +309,18 @@ export function removeSection(id, siteOrPage: 'site' | 'page') {
 }
 
 
-let currentSection
-function displaySettings(editor, config, model = editor.getModel()) {
-  // Update the model with the current settings
-  const settings = model.get('settings') || {} as WebsiteSettings
+let currentSection: SettingsSection | undefined
+function displaySettings(
+  editor: Editor,
+  config: Record<string, unknown>,
+  model: any = editor.getModel(),
+  sectionId?: string
+): void {
+  const settings: WebsiteSettings = model.get('settings') || {} as WebsiteSettings
   model.set('settings', settings)
-  // Get the current sections for page or site
-  const menuItemsCurrent = isSite(model) ? sectionsSite : sectionsPage
-  // Init the current section selection
-  currentSection = currentSection || menuItemsCurrent[0]
+  const menuItemsCurrent: SettingsSection[] = isSite(model) ? sectionsSite : sectionsPage
+  const targetSection = !!sectionId && menuItemsCurrent.find(section => section.id === sectionId)
+  currentSection = targetSection || currentSection || menuItemsCurrent[0]
   const sections: TemplateResult[] = menuItemsCurrent.map(item => {
     try {
       return item.render(settings, model)
@@ -176,7 +329,6 @@ function displaySettings(editor, config, model = editor.getModel()) {
       return html`<div class="silex-error">Error rendering settings section ${item.id}</div>`
     }
   })
-  // Render the settings dialog
   render(html`
     <form class="silex-form">
       <div class="silex-help">
@@ -190,17 +342,24 @@ function displaySettings(editor, config, model = editor.getModel()) {
       </div>
       <section class="silex-sidebar-dialog">
         <aside class="silex-bar">
-          <ul class="silex-list silex-list--menu">
-            ${menuItemsCurrent.map(item => html`
+          <ul class="silex-list silex-list--menu" aria-label="Settings sections">
+            ${menuItemsCurrent.map((item, index) => html`
               <li
                 id="settings-sidebar-${item.id}"
-                class=${item.id === currentSection.id ? 'active' : ''}
-                @click=${e => {
+                class=${item.id === currentSection!.id ? 'active' : ''}
+                role="button"
+                tabindex="0"
+                @click=${(e: Event) => {
     e.preventDefault()
-    // Show the new section
     showSection(item)
-    // Notify other plugins
     editor.trigger(ClientEvent.SETTINGS_SECTION_CHANGE, item.id)
+  }}
+                @keydown=${(e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      showSection(item)
+      editor.trigger(ClientEvent.SETTINGS_SECTION_CHANGE, item.id)
+    }
   }}
               >
                 ${item.label}
@@ -212,47 +371,45 @@ function displaySettings(editor, config, model = editor.getModel()) {
             ${ sections }
         </main>
       </section>
-      <footer>
+      <footer role="contentinfo">
         <p class="silex-version">Silex ${SILEX_VERSION}</p>
-        <input class="silex-button" type="button" @click=${e => editor.stopCommand(cmdOpenSettings)} value="Cancel">
-        <input class="silex-button" type="submit" value="Apply">
+        <input class="silex-button" type="button" value="Cancel" @click=${() => editor.stopCommand(cmdOpenSettings)} accesskey="c">
+        <input class="silex-button" type="submit" value="Apply" accesskey="a">
       </footer>
     </form>
   `, el)
-  // Display the current section
-  showSection(currentSection)
-  // Init the code editor
-  el.querySelector(`#${idCodeWrapper}`)?.appendChild(headEditor.getElement())
-  headEditor.setContent(settings.head || '')
+  showSection(currentSection!)
+  el.querySelector(`#${idCodeWrapper}`)?.appendChild(headEditor!.getElement())
+  headEditor!.setContent(settings.head || '')
 }
 
-function saveSettings(editor, config, model = editor.getModel()) {
-  const form = el.querySelector('form')
+function saveSettings(
+  editor: Editor,
+  config: Record<string, unknown>,
+  model: any = editor.getModel()
+): void {
+  const form = el.querySelector('form') as HTMLFormElement
   const formData = new FormData(form)
-  const data = Array.from(formData as any)
-    .reduce((aggregate, [key, value]) => {
-      // Keep only the values that are set
+  const data = Array.from(formData)
+    .reduce((aggregate: {[key: string]: any}, [key, value]) => {
       if(value !== '') {
         aggregate[key] = value
       }
       return aggregate
-    }, {}) as {[key: string]: any}
-  // take the name out to the main model (by design in grapesjs pages)
+    }, {})
   const { name, ...settings } = data
   model.set({
     settings: {
       ...data,
-      head: headEditor.getContent(),
+      head: headEditor!.getContent(),
     },
     name,
   })
-  // save if auto save is on
   editor.getModel().set('changesCount', editor.getDirtyCount() + 1)
-  // update the DOM
   updateDom(editor)
 }
-function getHeadContainer(doc, className) {
-  const container = doc.head.querySelector(`.${className}`)
+function getHeadContainer(doc: Document, className: string): HTMLElement {
+  const container = doc.head.querySelector(`.${className}`) as HTMLElement | null
   if(container) {
     return container
   }
@@ -261,22 +418,16 @@ function getHeadContainer(doc, className) {
   doc.head.appendChild(newContainer)
   return newContainer
 }
-function updateDom(editor) {
+function updateDom(editor: Editor): void {
   const doc = editor.Canvas.getDocument()
   const settings = editor.getModel().get('settings')
-  const pageSettings = editor.Pages.getSelected().get('settings')
+  const pageSettings = editor.Pages.getSelected().get('settings') as WebsiteSettings
   if(doc && settings) {
-    // Delay the update to let the DOM be ready
     setTimeout(() => {
-      // Site head
       getHeadContainer(doc, 'site-head')
         .innerHTML = settings.head || ''
-      // Pages head
       getHeadContainer(doc, 'page-head')
         .innerHTML = pageSettings?.head || ''
     })
-  } else {
-    // No document??
   }
 }
-

package/src/ts/client/grapesjs/storage.ts

@@ -87,14 +87,18 @@ export const storagePlugin = (editor: PublishableEditor) => {
           return data
         } else {
           editor.runCommand(cmdPauseAutoSave)
-          const { pages, ...rest } = data
+          const { pages, pagesFolder, ...rest } = data
           // Load any additional project data, e.g. symbols, but not the ones we progressive load
           loader && render(getLoaderHtml('Loading styles, assets and symbols', 0, pages.length + 1), loader)
           // Add to the project, everything but pages
           editor.loadProjectData(rest)
+          editor.getModel().set('pagesFolder', pagesFolder)
           // Add the pages to the project
           await progressiveLoadPages(editor, pages)
           await nextFrame()
+          // Trigger symbol update to recount instances now that pages are loaded
+          editor.trigger('symbol')
+          await nextFrame()
           // Select the first page
           const firstPage = editor.Pages.getAll()[0]
           if (firstPage) editor.Pages.select(firstPage)
@@ -160,6 +164,7 @@ export const storagePlugin = (editor: PublishableEditor) => {
             if (user) {
               data.assets = removeTempDataFromAssetUrl(data.assets)
               data.styles = removeTempDataFromStyles(data.styles)
+              data.pagesFolder = editor.getModel().get('pagesFolder')
               await websiteSave({ websiteId: options.id, connectorId: user.storage.connectorId, data })
               isSaving = false
             } else {

package/src/ts/client/grapesjs/view-buttons.ts

@@ -16,12 +16,27 @@
  *
  */
 
+import { Editor } from 'grapesjs'
+
 const pasteBtnClass = 'fa fa-fw fa-paste silex-button'
+const undoBtnClass = 'fa fa-fw fa-rotate-left silex-button'
+const redoBtnClass = 'fa fa-fw fa-rotate-right silex-button'
 const disabledClass = ' disabled'
 
-export default function(editor) {
-  // Add copy/paste buttons in the top bar
-  const [copyBtn, pasteBtn] = editor.Panels.addButton('options', [{
+export default function(editor: Editor) {
+  // Add undo/redo and copy/paste buttons in the top bar
+  // Add undo/redo and copy/paste buttons in the top bar
+  editor.Panels.addButton('options', [{
+    id: 'undo',
+    className: undoBtnClass + disabledClass,
+    command: () => editor.UndoManager.undo(),
+    attributes: { title: 'Undo (Ctrl+Z)' },
+  }, {
+    id: 'redo',
+    className: redoBtnClass + disabledClass,
+    command: () => editor.UndoManager.redo(),
+    attributes: { title: 'Redo (Ctrl+Shift+Z)' },
+  }, {
     id: 'copy',
     className: 'fa fa-fw fa-copy',
     command: 'core:copy',
@@ -34,6 +49,27 @@ export default function(editor) {
     active: false,
   }])
 
+  // Get buttons after creation
+  const undoBtn = editor.Panels.getButton('options', 'undo')
+  const redoBtn = editor.Panels.getButton('options', 'redo')
+  const pasteBtn = editor.Panels.getButton('options', 'paste')
+
+  // Update undo/redo button states based on UndoManager
+  const updateUndoRedoButtons = () => {
+    const hasUndo = editor.UndoManager.hasUndo()
+    const hasRedo = editor.UndoManager.hasRedo()
+    undoBtn.set('className', undoBtnClass + (hasUndo ? '' : disabledClass))
+    redoBtn.set('className', redoBtnClass + (hasRedo ? '' : disabledClass))
+  }
+
+  // Listen for changes in the undo stack
+  editor.on('change:changesCount', updateUndoRedoButtons)
+  editor.on('undo', updateUndoRedoButtons)
+  editor.on('redo', updateUndoRedoButtons)
+
+  // Initial state
+  updateUndoRedoButtons()
+
   // Disable paste button if clipboard is empty
   editor.EditorModel.on('change:clipboard', (model, value) => {
     const hasClipboard = value && value.length > 0

package/src/ts/client/utils.ts

@@ -21,8 +21,10 @@ import { Component, Editor } from 'grapesjs'
 export function onAll(editor: Editor, cbk: (c: Component) => void) {
   editor.Pages.getAll()
     .forEach(page => {
-      page.getMainComponent()
-        .onAll(c => cbk(c))
+      const mainComponent = page.getMainComponent()
+      if (mainComponent) {
+        mainComponent.onAll(c => cbk(c))
+      }
     })
 }
 
@@ -76,3 +78,14 @@ export function titleCase(str: string, sep: string = ' '): string {
   const split = str.split(sep)
   return split.map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(sep)
 }
+
+export function debounce<T extends (...args: any[]) => any>(func: T, wait = 100): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+
+  return function(this: any, ...args: Parameters<T>) {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func.apply(this, args)
+    }, wait)
+  }
+}

package/src/ts/constants.ts

@@ -21,7 +21,8 @@
 
 export const WEBSITE_DATA_FILE = 'website.json'
 export const WEBSITE_META_DATA_FILE = 'meta.json'
-export const WEBSITE_PAGES_FOLDER = 'src'
+export const LEGACY_WEBSITE_PAGES_FOLDER = 'src' // This is used in legacy websites, check the value in EMPTY_WEBSITE
+export const WEBSITE_PAGES_FOLDER = 'pages' // This is the default now, if not specified in the website data
 
 export const DEFAULT_WEBSITE_ID = 'default'
 export const DEFAULT_LANGUAGE = 'en'

package/src/ts/plugins/client/template.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-throw new Error('This file is obsolete, templates have been replaced by Silex CMS plugin: https://github.com/silexlabs/silex-cms/')
+throw new Error('This file is obsolete, templates have been replaced by the built-in Silex CMS feature')
 
 // Silex serves /clients
 // @ts-ignore

package/src/ts/plugins/server/FtpConnector.test.ts

@@ -35,6 +35,7 @@ const dummySession = {
 const dummyId: WebsiteId = 'dummy id'
 const dummyWebsite: WebsiteData = {
   pages: [],
+  pagesFolder: 'pages/',
   assets: [],
   styles: [],
   settings: {},