@silexlabs/silex 3.4.0 → 3.5.1-1

package/src/ts/client/grapesjs/cms/site-settings.ts

@@ -0,0 +1,79 @@
+import { ClientConfig } from '../../config'
+import { CMS_SETTINGS_SECTION_ID, EleventyPluginOptions, Silex11tyPluginWebsiteSettings } from './index'
+import { html } from 'lit-html'
+import { addDataSource, createDataSource } from '@silexlabs/grapesjs-data-source'
+import { Editor } from 'grapesjs'
+import { cmdAddSection } from '../settings'
+
+export default function(editor: Editor, opts: EleventyPluginOptions): void {
+  editor.runCommand(cmdAddSection, {
+    section: {
+      id: CMS_SETTINGS_SECTION_ID,
+      label: 'CMS',
+      render: () => {
+        const settings = (editor.getModel().get('settings') || {}) as Silex11tyPluginWebsiteSettings
+        return html`
+          <style>
+          #settings-${CMS_SETTINGS_SECTION_ID} label {
+            display: block;
+            margin-bottom: 10px;
+          }
+          .add-ds-btn {
+            width: 30px;
+            height: 30px;
+            margin-left: auto;
+            font-size: 24px;
+            background-color: var(--gjs-main-light-color);
+          }
+          </style>
+          <div id="settings-${CMS_SETTINGS_SECTION_ID}" class="silex-hideable silex-hidden">
+            <div class="gjs-sm-sector-title">Silex CMS</div>
+            <div class="silex-help">
+              <p>The <a target="_blank" href="https://github.com/silexlabs/silex-cms">Silex CMS feature</a> integrates with your favorite headless CMS, API or database.</p>
+              <p>By adding data sources to your website you activate <a target="_blank" href="https://www.11ty.dev/docs/">11ty static site generator</a> integration. When you wil publish your website, the generated files assume you build the site with 11ty and possibly with Gitlab pages.</p>
+            </div>
+            <div class="gjs-sm-sector-title">
+              Data Sources
+              <button
+                class="silex-button add-ds-btn"
+                title="Add a new data source"
+                @click=${async () => {
+    const newDataSource = createDataSource()
+    addDataSource(newDataSource)
+    try {
+      await newDataSource.connect()
+    } catch (error) {
+      console.error('🟡 [site-settings] Data source connection failed:', error)
+    }
+  }}>
+                +
+                </button>
+            </div>
+            ${opts.view?.settingsEl ? (opts.view.settingsEl as () => HTMLElement)() : ''}
+            <div class="gjs-sm-sector-title">11ty Config</div>
+            <div class="silex-help">
+              <p>These settings are used to configure the <a target="_blank" href="https://www.11ty.dev/docs/">11ty static site generator</a> integration.</p>
+              <p>Depending on your 11ty configuration, you may need to adjust these settings, it will enable or disable features in Silex.</p>
+            </div>
+            <div class="silex-help">
+              <p>⚠️ You need to reload Silex for these settings to take effect.</p>
+            </div>
+            <label>
+              I18N Plugin
+              <input id="i18n-checkbox" type="checkbox" name="eleventyI18n" ?checked=${settings.eleventyI18n || opts.i18nPlugin} ?disabled=${typeof opts.i18nPlugin !== 'undefined'}>
+            </label>
+            <label>
+              Fetch Plugin
+              <input type="checkbox" name="eleventyFetch" ?checked=${settings.eleventyFetch || !!opts.fetchPluginSettings} ?disabled=${typeof opts.fetchPluginSettings !== 'undefined'}>
+            </label>
+            <div class="silex-form__group col2">
+            </div>
+          </div>
+          </div>
+          `
+      }
+    },
+    siteOrPage: 'site',
+    position: 'last'
+  })
+}

package/src/ts/client/grapesjs/cms/states.ts

@@ -0,0 +1,125 @@
+import { removeState, setState, COMPONENT_NAME_PREFIX, Property, toExpression, StoredFilter, State, StoredState, StoredToken, Expression } from '@silexlabs/grapesjs-data-source'
+import { Silex11tyPluginWebsiteSettings } from './index'
+import { Component, Editor, Page } from 'grapesjs'
+
+export default function(editor: Editor/*, opts: EleventyPluginOptions */): void {
+  editor.on('page:select page:update', () => updatePaginationStates(editor))
+  editor.on('settings:save:start', () => updatePaginationStates(editor))
+}
+
+/**
+ * Update pagination states for a page with the ability to control which page index to show
+ * @param editor - The GrapesJS editor instance
+ * @param pageIndex - The current page index (0-based) for pagination preview. Use 0 for publication.
+ */
+export function updatePaginationStates(editor: Editor, pageIndex = 0, preventTrigger = false) {
+  const page = editor.Pages.getSelected()
+  const body: Component = page?.getMainComponent() as Component
+  if (!body) return // This happens when the current page is deleted
+
+  // Do not show "Body's " prefix for states on the body
+  body.attributes.COMPONENT_NAME_PREFIX = ''
+
+  // Store pagination data in the body component
+  // This is for the GraphQL query to include it
+  const settings = page?.get('settings') as Silex11tyPluginWebsiteSettings | undefined
+  const pageData = toExpression(settings?.eleventyPageData) as (Property[] | null)
+
+  if (pageData && pageData.length > 0) {
+    try {
+      // Taken from the pagination object https://www.11ty.dev/docs/pagination/
+      // Apply pagination size limit using slice filter
+      const pageSize = parseInt(settings?.eleventyPageSize || '1')
+      const startIndex = pageIndex * pageSize
+      const endIndex = startIndex + pageSize
+
+      const slice = {
+        type: 'filter',
+        id: 'slice',
+        label: 'slice',
+        options: {
+          start: startIndex,
+          end: endIndex,
+        },
+      } as StoredFilter
+
+      const itemsExpression = [
+        ...pageData,
+        slice,
+      ]
+
+      if (preventTrigger) {
+        const itemsState: StoredState = body.attributes.publicStates.find((state: StoredFilter) => state.id === 'items')
+        if (!itemsState) {
+          if (!body.attributes.publicStates) body.attributes.publicStates = []
+          body.attributes.publicStates.push({
+            hidden: true,
+            label: 'pagination.items',
+            expression: itemsExpression,
+          })
+        } else {
+          itemsState.expression = itemsExpression
+        }
+
+        // Add or update pagination state in publicStates
+        const paginationState: StoredState = body.attributes.publicStates.find((state: StoredFilter) => state.id === 'pagination')
+        const paginationExpression = [{
+          label: 'Unused pagination label',
+          type: 'property',
+          propType: 'field',
+          fieldId: 'pagination',
+          dataSourceId: 'eleventy',
+          typeIds: ['pagination'],
+          kind: 'object',
+        }] as Expression
+        if (!paginationState) {
+          body.attributes.publicStates.push({
+            hidden: true,
+            label: 'pagination',
+            expression: paginationExpression,
+          })
+        } else {
+          paginationState.expression = paginationExpression
+        }
+      } else {
+        // FIXME: should we let UndoManager save?
+        editor.UndoManager.skip(() => {
+          setState(body, 'items', {
+            hidden: true,
+            label: 'pagination.items',
+            expression: itemsExpression,
+          }, true, 1)
+
+          // Update body states with the new settings
+          setState(body, 'pagination', {
+            hidden: true,
+            label: 'pagination',
+            expression: [{
+              label: 'Unused pagination label',
+              type: 'property' as const,
+              propType: 'field' as const,
+              fieldId: 'pagination',
+              dataSourceId: 'eleventy',
+              typeIds: ['pagination'],
+              kind: 'object' as const,
+            }]
+          }, true, 0)
+        })
+      }
+    } catch (e) {
+      console.error('Invalid JSON for eleventyPageData', e)
+      removeState(body, 'pagination', true)
+      removeState(body, 'items', true)
+      editor.runCommand('notifications:add', {
+        type: 'error',
+        message: 'Invalid JSON for eleventyPageData',
+        group: 'Errors in your settings',
+        componentId: body.id,
+      })
+      return
+    }
+  } else {
+    removeState(body, 'pagination', true)
+    removeState(body, 'items', true)
+  }
+}

package/src/ts/client/grapesjs/cms/traits.ts

@@ -0,0 +1,95 @@
+import { Editor } from 'grapesjs'
+import { ClientConfig } from '../../config'
+import { html, render } from 'lit-html'
+
+/**
+ * @fileoverview
+ * This adds these traits to all components:
+ *   - unwrap the component
+ */
+
+export const UNWRAP_ID = 'plugin-unwrap'
+const LABEL = 'Unwrap content'
+const LABEL_DETAILS = 'Remove the component and keep its content'
+
+export default function(editor: Editor/*, opts: EleventyPluginOptions */): void {
+  // Add the new trait to all component types
+  editor.DomComponents.getTypes().map(type => {
+    editor.DomComponents.addType(type.id, {
+      model: {
+        defaults: {
+          traits: [
+            // Keep the type original traits
+            ...(editor.DomComponents.getType(type.id)?.model.prototype.defaults.traits || []),
+            // Add the new trait
+            {
+              label: LABEL,
+              type: UNWRAP_ID,
+              name: UNWRAP_ID,
+              //type: 'checkbox',
+            },
+          ]
+        }
+      }
+    })
+  })
+
+  function doRender(el: HTMLElement, remove: boolean) {
+    render(html`
+      <label
+        for=${UNWRAP_ID}
+        class="gjs-field gjs-field-checkbox silex-label"
+        title=${LABEL_DETAILS}
+        style="width: 100%; background: var(--primaryColor);"
+      >
+        <input
+          type="checkbox"
+          id=${UNWRAP_ID}
+          @change=${(event: Event) => doRender(el, (event.target as HTMLInputElement)?.checked)}
+            ?checked=${remove}
+            style="
+            display: initial;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            "
+            >
+          <i
+            class="gjs-chk-icon"
+            style="
+            position: absolute;
+            z-index: 1;
+            "
+          ></i>
+      </label>
+      `, el)
+  }
+  function doRenderCurrent(el: HTMLElement) {
+    doRender(el, editor.getSelected()?.get(UNWRAP_ID))
+  }
+
+  // inspired by https://github.com/olivmonnier/grapesjs-plugin-header/blob/master/src/components.js
+  editor.TraitManager.addType(UNWRAP_ID, {
+    createInput() {
+      // Create a new element container and add some content
+      const el = document.createElement('div')
+      // update the UI when a page is added/renamed/removed
+      editor.on('page', () => doRenderCurrent(el))
+      doRenderCurrent(el)
+      // this will be the element passed to onEvent and onUpdate
+      return el
+    },
+    // Update the component based on UI changes
+    // `elInput` is the result HTMLElement you get from `createInput`
+    onEvent({ elInput, component }) {
+      const value = (elInput.querySelector(`#${UNWRAP_ID}`) as HTMLInputElement)?.checked
+      component.set(UNWRAP_ID, value)
+    },
+    // Update UI on the component change
+    onUpdate({ elInput, component }) {
+      const value = component.get(UNWRAP_ID)
+      doRender(elInput, value)
+    },
+  })
+}

package/src/ts/client/grapesjs/flex.ts

@@ -42,47 +42,67 @@ const FLEX_ITEM_PROPS = [
 export default (editor: Editor) => {
   editor.on('load', () => {
     const sector = editor.StyleManager.getSector('flex')
-    // Add missing sectors
-    // FIXME: this makes grapesjs bug, all other props disappear
-    // FLEX_PROPS
-    //   .concat(FLEX_ITEM_PROPS)
-    //   .forEach(id => {
-    //     if (!sector.getProperty(id)) {
-    //       editor.StyleManager.addProperty('flex', {
-    //         id,
-    //       })
-    //     }
-    //   })
+
+    let showSector = false
+    let visibleProps: string[] = []
+
+    // Update visibility depending on selected component
+    function updateVisibility(comp: Component) {
+      const computedDisplay = comp?.view?.el && getComputedStyle(comp.view.el)['display'] as string || ''
+      const isFlex = computedDisplay === 'flex' || computedDisplay === 'inline-flex'
+      const parent = comp.parent()
+      const parentComputedDisplay = parent?.view?.el && getComputedStyle(parent.view.el)['display'] as string || ''
+      const parentIsFlex = parentComputedDisplay === 'flex' || parentComputedDisplay === 'inline-flex'
+
+      // Determine which props should be visible
+      const newVisibleProps: string[] = []
+      if (isFlex) newVisibleProps.push(...FLEX_PROPS)
+      if (parentIsFlex) newVisibleProps.push(...FLEX_ITEM_PROPS)
+
+      // Set sector visibility
+      showSector = parentIsFlex || isFlex
+      sector.set('visible', showSector)
+
+      // Set property visibility
+      visibleProps = newVisibleProps
+      sector.getProperties().forEach(p => {
+        p.set('visible', visibleProps.includes(p.getId()))
+      })
+    }
+
     // Listen to the events that should trigger a visibility check
-    editor.on('component:selected', comp => applyVisibility(comp))
-    // `change:visible` is a workaround grapesjs behavior: https://github.com/GrapesJS/grapesjs/issues/3123
-    editor.on('change:visible', applyVisibility)
+    editor.on('component:selected', (comp: Component) => {
+      if (!comp) return
+      updateVisibility(comp)
+    })
+
     // `style:property:update` is useful for instantly display the flex sector when selecting display: inline-flex;
-    editor.on('style:property:update', () => applyVisibility())
-    function applyVisibility(comp: Component = editor.getSelected()) {
-      editor.off('change:visible', applyVisibility) // Avoid infinite loop
-      requestAnimationFrame(() => {
-        if(!comp) return // No selection yet
-        const computedDisplay = comp?.view?.el && getComputedStyle(comp.view.el)['display'] as string || ''
-        const isFlex = computedDisplay === 'flex' || computedDisplay === 'inline-flex'
-        const parent = comp.parent()
-        const parentComputedDisplay = parent?.view?.el && getComputedStyle(parent.view.el)['display'] as string || ''
-        const parentIsFlex = parentComputedDisplay === 'flex' || parentComputedDisplay === 'inline-flex'
-        if (parentIsFlex || isFlex) {
-          sector.set('visible', true)
-        }
-        if (parentIsFlex && isFlex) {
-          sector.getProperties()
-            .forEach(p => p.set('visible', true))
-        } else if (isFlex) {
-          sector.getProperties()
-            .forEach(p => p.set('visible', FLEX_PROPS.includes(p.getId())))
-        } else if (parentIsFlex) {
-          sector.getProperties()
-            .forEach(p => p.set('visible', FLEX_ITEM_PROPS.includes(p.getId())))
-        }
-        editor.on('change:visible', applyVisibility)
-      })
+    editor.on('style:property:update', () => {
+      const comp = editor.getSelected()
+      if (comp) updateVisibility(comp)
+    })
+
+    // Watch changes made by grapesjs and revert them if needed
+    function doubleCheckSector() {
+      if (sector.get('visible') !== showSector) {
+        sector.off('change:visible', doubleCheckSector)
+        sector.set('visible', showSector)
+        sector.on('change:visible', doubleCheckSector)
+      }
     }
+    sector.on('change:visible', doubleCheckSector)
+
+    // Watch property visibility changes
+    sector.getProperties().forEach(p => {
+      function doubleCheckProp() {
+        const shouldBeVisible = visibleProps.includes(p.getId())
+        if (p.get('visible') !== shouldBeVisible) {
+          p.off('change:visible', doubleCheckProp)
+          p.set('visible', shouldBeVisible)
+          p.on('change:visible', doubleCheckProp)
+        }
+      }
+      p.on('change:visible', doubleCheckProp)
+    })
   })
 }

package/src/ts/client/grapesjs/img.ts

@@ -29,7 +29,7 @@ export default (editor: Editor, opts) => {
     placeholderSrc: '/assets/placeholder.png',
     // These default values will never be used,
     // as there is default values in config
-    replacedElements: ['img'],
+    replacedElements: ['img', 'li', 'video'],
     // Override with provided config
     ...opts,
   }

package/src/ts/client/grapesjs/index.ts

@@ -31,6 +31,7 @@ const notificationContainer = document.createElement('div')
 import blocksBasicPlugin from 'grapesjs-blocks-basic'
 import styleFilterPlugin from 'grapesjs-style-filter'
 import formPlugin from 'grapesjs-plugin-forms'
+// import tailwindPlugin from 'grapesjs-tailwind'
 import codePlugin from 'grapesjs-custom-code'
 import filterStyles from '@silexlabs/grapesjs-filter-styles'
 import symbolsPlugin from '@silexlabs/grapesjs-symbols'
@@ -51,6 +52,7 @@ import backgroundPlugin from 'grapesjs-style-bg'
 import resizePanelPlugin from './resize-panel'
 import notificationsPlugin, { NOTIFICATION_CHANGED } from '@silexlabs/grapesjs-notifications'
 import keymapsDialogPlugin, { cmdKeymapsDialog } from '@silexlabs/grapesjs-keymaps-dialog'
+import parserPostCSS from 'grapesjs-parser-postcss'
 
 import { pagePanelPlugin, cmdTogglePages, cmdAddPage } from './page-panel'
 import { newPageDialog, cmdOpenNewPageDialog } from './new-page-dialog'
@@ -68,6 +70,9 @@ import { API_PATH, API_WEBSITE_ASSETS_WRITE, API_WEBSITE_PATH, SILEX_VERSION } f
 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'
 
 const plugins = [
   {name: './project-bar', value: projectBarPlugin}, // has to be before panels and dialogs
@@ -84,6 +89,7 @@ const plugins = [
   {name: './rich-text', value: richTextPlugin},
   {name: 'grapesjs-style-filter', value: styleFilterPlugin},
   {name: 'grapesjs-plugin-forms', value: formPlugin},
+  // {name: 'grapesjs-tailwind', value: tailwindPlugin},
   {name: 'grapesjs-custom-code', value: codePlugin},
   {name: './internal-links', value: internalLinksPlugin},
   {name: './keymaps', value: keymapsPlugin},
@@ -105,6 +111,7 @@ const plugins = [
   {name: './resize-panel', value: resizePanelPlugin},
   {name: '@silexlabs/grapesjs-notifications', value: notificationsPlugin},
   {name: '@silexlabs/grapesjs-keymaps-dialog', value: keymapsDialogPlugin},
+  {name: 'grapesjs-parser-postcss', value: parserPostCSS},
   {name: './upload-progress', value: uploadProgress},
 ]
 // Check that all plugins are loaded correctly
@@ -136,6 +143,17 @@ const catComponents = 'Components'
 
 export function getEditorConfig(config: ClientConfig): EditorConfig {
   const { websiteId, storageId, rootUrl } = config
+
+  // Create dynamic plugins array with conditional CMS plugin
+  const dynamicPlugins = [...plugins]
+  const dynamicPluginsOpts: any = {}
+
+  // Add CMS plugin if enabled
+  if (config.cmsConfig?.enabled !== false) {
+    dynamicPlugins.push({name: './cms', value: cmsPlugin})
+    dynamicPluginsOpts[cmsPlugin.toString()] = config.cmsConfig
+  }
+
   return {
     container: '#gjs',
     height: '100%',
@@ -180,9 +198,10 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       escapeName: (name) => `${name}`,
     },
 
-    plugins: plugins.map(p => p.value),
+    plugins: dynamicPlugins.map(p => p.value),
 
     pluginsOpts: {
+      ...dynamicPluginsOpts,
       [blocksBasicPlugin.toString()]: {
         blocks: ['text', 'image', 'video', 'map'],
         category: catBasic,
@@ -248,6 +267,11 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
             name: 'Settings',
             attributes: { title: `Settings (${titleCase(defaultKms.kmOpenSettings.keys, '+')})` },
             command: cmdOpenSettings,
+          //}, {
+          //  id: 'tailwind-theme',
+          //  className: 'fa-solid fa-brush',
+          //  attributes: { title: 'Tailwind color theme' },
+          //  command: 'open-update-theme'
           }, {
             id: 'spacer',
             attributes: {},
@@ -310,6 +334,9 @@ export function getEditorConfig(config: ClientConfig): EditorConfig {
       [keymapsPlugin.toString()]: {
         disableKeymaps: false,
       },
+      // [tailwindPlugin.toString()]: {
+      //   tailwindPlayCdn: `${config.rootUrl}/tailwind-3.4.17.js`,
+      // },
       [codePlugin.toString()]: {
         blockLabel: 'HTML',
         blockCustomCode: {
@@ -381,11 +408,18 @@ export async function initEditor(config: EditorConfig) {
 
     editor.Commands.add('gjs-open-import-webpage', openImport(editor, {
       modalImportLabel: '',
-      modalImportContent: 'Paste a web page HTML code here.',
+      modalImportContent: 'Paste a web page HTML code here. This is an experiment, it might destroy the existing website.',
       modalImportButton: 'Import',
       modalImportTitle: 'Import from website',
     }))
 
+    // // Add tailwind css to the published site
+    // editor.on(ClientEvent.PUBLISH_DATA, ({ data }: { data: PublicationData }) => {
+    //   editor.runCommand('get-tailwindCss', {
+    //     callback: (css: string) => (data.files.find(f => f.type === 'css') as ClientSideFileWithContent).content += css,
+    //   })
+    // })
+
     // Detect loading errors
     // Display a useful notification
     const typeConfig = {
@@ -403,8 +437,35 @@ export async function initEditor(config: EditorConfig) {
         },
       },
     }
-    editor.DomComponents.addType('image', typeConfig)
-    editor.DomComponents.addType('iframe', typeConfig)
+    const dc = editor.DomComponents
+    dc.addType('image', typeConfig)
+    dc.addType('iframe', typeConfig)
+
+    dc.getTypes().map(type => {
+      const dcmp = dc.getType(type.id)?.model.prototype
+      dc.addType(type.id, {
+        model: {
+          defaults: {
+            traits: [
+              {
+                type: 'text',
+                label: 'ID',
+                name: 'id',
+              },
+              ...(dcmp.defaults.traits || []),
+            ]
+          },
+          init(...args) {
+            (dcmp.init.apply(this, args))
+            if (!this.getAttributes().id) {
+              this.addAttributes({ id: this.getId() })
+            }
+          }
+        },
+      })
+    })
+
+
 
     // Adjustments to do when the editor is ready
     editor.on('load', () => {
@@ -415,6 +476,18 @@ export async function initEditor(config: EditorConfig) {
       views.buttons.remove(cmdToggleBlocks)
       views.buttons.remove(cmdToggleLayers)
 
+      // Select body when changing pages
+      // This includes initial loading, as the 1st page is selected in storage
+      editor.on('page:select', () => {
+        // Only select wrapper if nothing else is selected
+        if (!editor.getSelected()) {
+          const wrapper = editor.getWrapper()
+          if (wrapper) {
+            editor.select(wrapper)
+          }
+        }
+      })
+
       // Remove useless buttons
       editor.Panels.getPanel('options').buttons.remove('export-template')
       editor.Panels.getPanel('options').buttons.remove('fullscreen')

package/src/ts/client/grapesjs/internal-links.ts

@@ -35,8 +35,10 @@ export const internalLinksPlugin = (editor, opts) => {
   function onAll(cbk) {
     editor.Pages.getAll()
       .forEach(page => {
-        page.getMainComponent()
-          .onAll(cbk)
+        const mainComponent = page.getMainComponent()
+        if (mainComponent) {
+          mainComponent.onAll(cbk)
+        }
       })
   }
   editor.on('page', ({ event, page }) => {

package/src/ts/client/grapesjs/page-panel.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Editor } from 'grapesjs'
+import { Component, Editor, Page } from 'grapesjs'
 import {html, render} from 'lit-html'
 import {ref} from 'lit-html/directives/ref.js'
 
@@ -30,10 +30,10 @@ export const cmdSelectNextPage = 'pages:select-next'
 export const cmdSelectPrevPage = 'pages:select-prev'
 export const cmdSelectFirstPage = 'pages:select-first'
 
-function selectPage(editor, page) {
+function selectPage(editor: Editor, page: Page) {
   editor.Pages.select(page)
 }
-function addPage(editor, config) {
+function addPage(editor: Editor, config: { newPageName: string, cmdOpenNewPageDialog: string }) {
   const pages = editor.Pages.getAll()
   // Get a name
   let idx = 1
@@ -50,7 +50,7 @@ function addPage(editor, config) {
   editor.runCommand(config.cmdOpenNewPageDialog, {page})
 }
 
-function clonePage(editor, page) {
+function clonePage(editor: Editor, page: Page) {
   const pages = editor.Pages.getAll()
   // Get a name
   let idx = 1
@@ -64,7 +64,7 @@ function clonePage(editor, page) {
   // Add page
   const newPage = editor.Pages.add({
     name: pageName,
-    component: body,
+    component: body.toJSON(),
   })
   // Select the new page
   editor.Pages.select(newPage)
@@ -145,8 +145,9 @@ function renderPages(editor, config) {
   return html`<section class="pages">
     <main class="pages__main ${pages.length === 1 ? 'pages__single-page' : ''}">
       <div class="pages__list">
-        ${ pages.map(page => {
-    const name = page.getName() || page.attributes.type
+        ${ pages.map((page: Page, index: number) => {
+    const type = page.get('type') || index === 0 ? 'main' : 'Untitled Page'
+    const name = page.getName() || type
     // keep the same structure as the layers panel
     return html`
            <div class="pages__page ${selected === page ? 'pages__page-selected' : ''}" data-page-id=${page.id} @click=${e => selectPage(editor, getPageFromEvent(e))}>