Merge branch 'next'

index.html

@@ -48,7 +48,13 @@
         showOffsets: true,
         fromElement: true,
         noticeOnUnload: false,
-        storageManager: true,
+        storageManager: false,
+        selectorManager: {
+          componentFirst: true,
+        },
+        canvas: {
+          styles: ['https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap-grid.min.css']
+        },
         plugins: [
           'gjs-blocks-basic',
           'grapesjs-plugin-forms',
@@ -66,7 +72,7 @@
           'grapesjs-templates'
         ],
         pluginsOpts: {
-          'gjs-blocks-basic': { flexGrid: true },
+          'gjs-blocks-basic': { flexGrid: true, blocks: ['text', 'link', 'image', 'video', 'map'] },
           'grapesjs-tui-image-editor': {
             script: [
               // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',

src/index.js

@@ -7,6 +7,7 @@ import en from './locale/en'
 import templates from './templates'
 import loadShortCode from './shortcode'
 import loadShortCodes from './shortcodes'
+import loadLayouts from './layouts'
 
 import './styles/main.scss'
 
@@ -65,6 +66,8 @@ export default (editor, opts = {}) => {
   // Add Short Code
   loadShortCode(editor, options)
 
+  loadLayouts(editor, options)
+
   // Load Short Codes
   if (options?.shortCodes) {
     loadShortCodes(editor, options)

src/layouts/blocks.js

@@ -0,0 +1,11 @@
+import { columnBlock } from './column'
+import { containerBlock } from './container'
+import { rowBlock } from './row'
+
+export default (editor, options = {}) => {
+  const { BlockManager } = editor
+
+  containerBlock(BlockManager, options)
+  rowBlock(BlockManager, options)
+  columnBlock(BlockManager, options)
+}

src/layouts/column.js

@@ -0,0 +1,41 @@
+import { colTraits, isComponent } from '../utils'
+
+const type = 'column'
+const componentName = 'Column'
+
+export default (cm, options = {}) => {
+  // Define custom component properties and traits
+  cm.addType(type, {
+    // You can update the isComponent logic or leave the one from `some-component`
+    isComponent: (el) => {
+      if (isComponent(el, type)) {
+        return { type }
+      }
+    },
+    extend: 'default',
+    model: {
+      defaults: {
+        name: componentName,
+        tagName: 'div',
+        droppable: true,
+        draggable: '.row',
+        traits: [...colTraits],
+        attributes: { class: 'col-sm-12' },
+        components: `<p style="margin: 15px 0px">col-sm-12</p>`
+      }
+    }
+  })
+}
+
+export const columnBlock = (bm, options = {}) => {
+  const { category } = options.layout
+
+  // Create a block for the Plans component
+  bm.add(`${type}-block`, {
+    label: componentName,
+    media:
+      '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0 2v12h16v-12h-16zM7 13h-6v-10h6v10zM15 13h-6v-10h6v10z"></path> <path d="M10 4h4v1h-4v-1z"></path> <path d="M2 4h4v1h-4v-1z"></path> <path d="M2 6h4v1h-4v-1z"></path> <path d="M2 8h4v1h-4v-1z"></path> </g></svg>',
+    content: { type: type },
+    category: category
+  })
+}

src/layouts/container.js

@@ -0,0 +1,46 @@
+import { containerTraits, isComponent } from '../utils'
+
+const type = 'container'
+const componentName = 'Container'
+
+export default (cm, options = {}) => {
+  // Define custom component properties and traits
+  cm.addType(type, {
+    // You can update the isComponent logic or leave the one from `some-component`
+    isComponent: (el) => {
+      if (isComponent(el, type)) {
+        return { type }
+      }
+    },
+    extend: 'default',
+    model: {
+      defaults: {
+        name: componentName,
+        tagName: 'div',
+        droppable: true,
+        attributes: { class: type },
+        traits: containerTraits,
+        components: `<p style="margin: 15px 0px">Container</p>`,
+        styles: `
+          .${type}, [class^="${type}-"] {
+            padding: 15px;
+          }
+        `
+      }
+    }
+  })
+}
+
+export const containerBlock = (bm, options = {}) => {
+  const { category } = options.layout
+
+  // Create a block for the Plans component
+  bm.add(type, {
+    label: componentName,
+    media:
+      '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M501.333,96H10.667C4.779,96,0,100.779,0,106.667v298.667C0,411.221,4.779,416,10.667,416h490.667 c5.888,0,10.667-4.779,10.667-10.667V106.667C512,100.779,507.221,96,501.333,96z M490.667,394.667H21.333V117.333h469.333 V394.667z"></path> </g> </g> </g></svg>',
+    content: { type: type },
+    select: true,
+    category: category
+  })
+}

src/layouts/index.js

@@ -0,0 +1,25 @@
+import blocks from './blocks'
+import column from './column'
+import container from './container'
+import row from './row'
+import traits from './traits'
+
+export const layout = {
+  id: 'layout',
+  category: 'Layout',
+  block: {},
+  classPrefix: 'layout'
+}
+
+export default (editor, options = {}) => {
+  const { Components } = editor
+
+  const opts = { layout, ...options, defaultModel: Components.getType('default').model }
+
+  traits(editor, opts)
+  container(Components, opts)
+  column(Components, opts)
+  row(Components, opts)
+
+  blocks(editor, opts)
+}

src/layouts/row.js

@@ -0,0 +1,54 @@
+import { isComponent, rowTraits } from '../utils'
+
+const type = 'row'
+const componentName = 'Row'
+
+export default (cm, options = {}) => {
+  // Define custom component properties and traits
+  cm.addType(type, {
+    // You can update the isComponent logic or leave the one from `some-component`
+    isComponent: (el) => {
+      if (isComponent(el, type)) {
+        return { type }
+      }
+    },
+    extend: 'default',
+    model: {
+      defaults: {
+        name: componentName,
+        droppable: true,
+        attributes: { class: type },
+        traits: [...rowTraits]
+      }
+    }
+  })
+}
+
+export const rowBlock = (bm, options = {}) => {
+  const { layout } = options
+  const { category } = layout
+
+  // Create a block for the Plans component
+  bm.add(type, {
+    label: componentName,
+    media:
+      '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 482.033 482.033" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M217.764,80.987H12.126C5.442,80.987,0,86.429,0,93.113v124.718c0,6.687,5.442,12.127,12.126,12.127h205.632 c6.679,0,12.126-5.44,12.126-12.127V93.113C229.89,86.429,224.442,80.987,217.764,80.987z M218.101,217.831 c0,0.186-0.154,0.337-0.343,0.337H12.126c-0.184,0-0.342-0.151-0.342-0.337V93.113c0-0.186,0.153-0.336,0.342-0.336h205.632 c0.184,0,0.343,0.151,0.343,0.336V217.831z M469.913,80.987H264.274c-6.687,0-12.125,5.442-12.125,12.126v124.718 c0,6.687,5.438,12.127,12.125,12.127h205.633c6.682,0,12.126-5.44,12.126-12.127V93.113 C482.038,86.429,476.589,80.987,469.913,80.987z M470.252,217.831c0,0.186-0.153,0.337-0.345,0.337H264.274 c-0.184,0-0.338-0.151-0.338-0.337V93.113c0-0.186,0.154-0.336,0.338-0.336h205.633c0.183,0,0.345,0.151,0.345,0.336V217.831z M217.764,252.074H12.126C5.442,252.074,0,257.514,0,264.2v124.718c0,6.688,5.442,12.128,12.126,12.128h205.632 c6.679,0,12.126-5.439,12.126-12.128V264.2C229.89,257.514,224.442,252.074,217.764,252.074z M218.101,388.918 c0,0.186-0.154,0.339-0.343,0.339H12.126c-0.184,0-0.342-0.153-0.342-0.339V264.2c0-0.186,0.153-0.339,0.342-0.339h205.632 c0.184,0,0.343,0.153,0.343,0.339V388.918z M469.913,252.074H264.274c-6.687,0-12.125,5.439-12.125,12.126v124.718 c0,6.688,5.438,12.128,12.125,12.128h205.633c6.682,0,12.126-5.439,12.126-12.128V264.2 C482.038,257.514,476.589,252.074,469.913,252.074z M470.252,388.918c0,0.186-0.153,0.339-0.345,0.339H264.274 c-0.184,0-0.338-0.153-0.338-0.339V264.2c0-0.186,0.154-0.339,0.338-0.339h205.633c0.183,0,0.345,0.153,0.345,0.339V388.918z"></path> </g> </g></svg>',
+    content: {
+      type: type,
+      components: [
+        {
+          type: 'column',
+          classes: ['col-sm-3'],
+          components: `<p style="margin: 15px">3/12</p>`
+        },
+        {
+          type: 'column',
+          classes: ['col-sm-9'],
+          components: `<p style="margin: 15px">9/12</p>`
+        }
+      ]
+    },
+    select: true,
+    category: category
+  })
+}

src/layouts/traits.js

@@ -0,0 +1,45 @@
+export default (editor, config = {}) => {
+  const { TraitManager } = editor
+
+  // Define the new trait type 'select-class'
+  TraitManager.addType('select-class', {
+    events: {
+      change: 'onChange'
+    },
+    createInput({ trait }) {
+      const md = this.model
+      const opts = md.get('options') || []
+      const input = document.createElement('select')
+      const classList = Array.from(this.target.view.el.classList)
+
+      for (let i = 0; i < opts.length; i++) {
+        const option = document.createElement('option')
+        option.text = opts[i].label
+        option.value = opts[i].id
+
+        if (classList.includes(opts[i].id)) {
+          option.setAttribute('selected', 'selected')
+        }
+
+        input.append(option)
+      }
+
+      return input
+    },
+    onUpdate({ elInput, component }) {
+      // No specific update needed for this trait
+    },
+    onEvent({ elInput, component, event }) {
+      const classes = this.model.get('options').map((opt) => opt.id)
+
+      // Remove all classes listed in the options from the component
+      classes.forEach((cls) => component.removeClass(cls))
+
+      // Add the currently selected class to the component
+      const value = this.model.get('value')
+      if (value) {
+        component.addClass(value)
+      }
+    }
+  })
+}

src/shortcode.js

@@ -62,7 +62,7 @@ export default (editor, options = {}) => {
       render() {
         const shortcode = this.model.get('shortcode')
         if (typeof onLoadShortCode === 'function') {
-          onLoadShortCode(this)
+          onLoadShortCode(this.el, shortcode)
         } else {
           this.el.innerHTML = shortcode
         }

src/styles/main.scss

@@ -1,6 +1,8 @@
 /* Class names prefixes */
 $prefix: 'gjs-' !default;
 
+// @import 'bootstrap/scss/bootstrap-grid';
+
 #popper-container {
   display: none;
 }