@silexlabs/silex 3.5.0 → 3.5.1-2

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
@@ -59,13 +59,27 @@ function clonePage(editor, page) {
   while(pages.find(p => p.getName() === pageName)) {
     pageName = `${newPageName} ${idx++}`
   }
-  // Clone components
-  const body = page.getMainComponent().clone()
-  // Add page
+
+  // Clone components using Backbone approach
+  const sourceBody = page.getMainComponent()
+  const clonedComponents = sourceBody.clone()
+
+  // Get custom props but exclude frames (Backbone collection) using toJSON and delete
+  const customProps = { ...page.toJSON() }
+  delete customProps.frames
+  delete customProps.id
+  delete customProps._undo
+
+  // Create new page with custom props (but not frames collection)
   const newPage = editor.Pages.add({
+    ...customProps,
     name: pageName,
-    component: body,
   })
+
+  // Reset components with cloned ones
+  const targetBody = newPage.getMainComponent()
+  targetBody.components().reset(clonedComponents.components().models)
+
   // Select the new page
   editor.Pages.select(newPage)
 }
@@ -142,15 +156,116 @@ function renderPages(editor, config) {
     e.stopPropagation()
     return editor.Pages.get(el.getAttribute('data-page-id'))
   }
+
+  // Drag and drop handlers
+  let draggedPage: Page | null = null
+  let draggedPageElement: HTMLElement | null = null
+
+  const handleDragStart = (e: DragEvent, page: Page) => {
+    e.stopPropagation()
+    draggedPage = page
+    // Find the parent page element
+    draggedPageElement = (e.target as HTMLElement).closest('.pages__page') as HTMLElement
+    if (e.dataTransfer && draggedPageElement) {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.setData('text/html', draggedPageElement.innerHTML)
+      draggedPageElement.classList.add('pages__page-dragging')
+    }
+  }
+
+  const handleDragEnd = (e: DragEvent) => {
+    if (draggedPageElement) {
+      draggedPageElement.classList.remove('pages__page-dragging')
+    }
+    draggedPage = null
+    draggedPageElement = null
+  }
+
+  const handleDragOver = (e: DragEvent) => {
+    if (!draggedPage) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move'
+    }
+    return false
+  }
+
+  const handleDragEnter = (e: DragEvent, page: Page) => {
+    if (draggedPage && draggedPage !== page) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+
+  const handleDragLeave = (e: DragEvent) => {
+    // No-op: visual indicator removed
+  }
+
+  const handleDrop = (e: DragEvent, targetPage: Page) => {
+    e.stopPropagation()
+    e.preventDefault()
+
+    if (draggedPage && draggedPage !== targetPage) {
+      const pages = editor.Pages.getAll()
+      const fromIndex = pages.indexOf(draggedPage)
+      const toIndex = pages.indexOf(targetPage)
+
+      if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+        // Access the internal Backbone collection
+        const pagesCollection = (editor.Pages as any).pages
+
+        // Assign temporary order attributes for sorting
+        pages.forEach((page, idx) => {
+          let newOrder = idx
+          if (idx === fromIndex) {
+            newOrder = toIndex
+          } else if (fromIndex < toIndex && idx > fromIndex && idx <= toIndex) {
+            newOrder = idx - 1
+          } else if (fromIndex > toIndex && idx >= toIndex && idx < fromIndex) {
+            newOrder = idx + 1
+          }
+          page.set('_tempOrder', newOrder, { silent: true })
+        })
+
+        // Sort the collection by the temporary order
+        const originalComparator = pagesCollection.comparator
+        pagesCollection.comparator = (page: Page) => page.get('_tempOrder')
+        pagesCollection.sort()
+        pagesCollection.comparator = originalComparator
+
+        // Clean up temporary attributes
+        pages.forEach(page => page.unset('_tempOrder', { silent: true }))
+      }
+    }
+
+    return false
+  }
+
   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))}>
+           <div
+             class="pages__page ${selected === page ? 'pages__page-selected' : ''}"
+             data-page-id=${page.id}
+             @click=${e => selectPage(editor, getPageFromEvent(e))}
+             @dragover=${handleDragOver}
+             @dragenter=${(e: DragEvent) => handleDragEnter(e, page)}
+             @dragleave=${handleDragLeave}
+             @drop=${(e: DragEvent) => handleDrop(e, page)}
+           >
              <div class="pages__page-name">
+               <i
+                 class="pages__icon pages__drag-handle fa fa-grip-vertical"
+                 draggable="true"
+                 @dragstart=${(e: DragEvent) => handleDragStart(e, page)}
+                 @dragend=${handleDragEnd}
+               ></i>
                ${ name }
              </div>
              <i class="pages__icon pages__remove-btn fa fa-trash" @click=${e => removePage(editor, getPageFromEvent(e))}></i>

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/semantic.ts

@@ -39,6 +39,10 @@ const tagCategories = [
     label: 'Content grouping',
     tags: ['ADDRESS', 'BLOCKQUOTE', 'PRE'],
   },
+  {
+    label: 'Lists',
+    tags: ['UL', 'OL', 'LI'],
+  },
   {
     label: 'Interactive/form',
     tags: ['BUTTON', 'LABEL', 'DETAILS', 'SUMMARY'],