shortcode block

silexlabs · Jan 11, 2024 · 493e39f · 493e39f
1 parent 5983370
commit 493e39f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/src/client/blocks.ts b/src/client/blocks.ts
@@ -3,32 +3,52 @@ import { ClientConfig } from '@silexlabs/silex'
 export default function(config: ClientConfig/*, opts: EleventyPluginOptions */): void {
   config.on('silex:grapesjs:end', () => {
     const editor = config.getEditor()
-    editor.BlockManager.add('eleventy-select', {
-      label: 'select',
+    // **
+    // Shortcode
+    editor.BlockManager.add('eleventy-shortcode', {
+      label: 'Shortcode',
       category: 'Eleventy',
-      media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M18.5 13l1.5-2h-3zM4 11.5h11v1H4z"></path></svg>',
-      content: { type: 'eleventy-select' },
+      content: { type: 'eleventy-shortcode' },
+      media: '<span style="font-size: 50px;">{%</span>',
     })
-    editor.DomComponents.addType('eleventy-select', {
+    editor.DomComponents.addType('eleventy-shortcode', {
       model: {
         defaults: {
-          tagName: 'select',
-          droppable: true,
-          // Prevent the drop down from opening on click
-          script: function() {
-            console.log('script', this)
-            this.addEventListener('mousedown', event => {
-              event.preventDefault()
-            })
-          },
+          traits: [{
+            type: 'shortcode-name',
+            label: 'Shortcode name',
+            name: 'shortcode_name',
+            placeholder: 'shortcode_name',
+          }, {
+            type: 'shortcode-attributes',
+            label: 'Shortcode attributes',
+            name: 'shortcode_attributes',
+            placeholder: 'param1, "example param 2"',
+          }],
         },
       },
     })
-    editor.BlockManager.add('eleventy-option', {
-      label: 'option',
+    function updateShortcode(component) {
+      const { shortcode_attributes, shortcode_name } = component.get('attributes')
+      component.components(`{% ${shortcode_name} ${shortcode_attributes} %}`)
+    }
+    editor.TraitManager.addType('shortcode-name', {
+      onEvent({ component }) {
+        updateShortcode(component)
+      },
+    })
+    editor.TraitManager.addType('shortcode-attributes', {
+      onEvent({ component }) {
+        updateShortcode(component)
+      },
+    })
+    // **
+    // Select element
+    editor.BlockManager.add('eleventy-select', {
+      label: 'select',
       category: 'Eleventy',
-      media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
-      content: { type: 'eleventy-option' },
+      media: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 9c0-.6-.5-1-1.3-1H3.4C2.5 8 2 8.4 2 9v6c0 .6.5 1 1.3 1h17.4c.8 0 1.3-.4 1.3-1V9zm-1 6H3V9h18v6z"></path><path d="M18.5 13l1.5-2h-3zM4 11.5h11v1H4z"></path></svg>',
+      content: { type: 'eleventy-select' },
     })
     editor.DomComponents.addType('eleventy-select', {
       model: {
@@ -37,14 +57,15 @@ export default function(config: ClientConfig/*, opts: EleventyPluginOptions */):
           droppable: true,
           // Prevent the drop down from opening on click
           script: function() {
-            console.log('script', this)
             this.addEventListener('mousedown', event => {
               event.preventDefault()
             })
           },
         },
       },
     })
+    // **
+    // Option element
     editor.BlockManager.add('eleventy-option', {
       label: 'option',
       category: 'Eleventy',
@@ -74,6 +95,8 @@ export default function(config: ClientConfig/*, opts: EleventyPluginOptions */):
         },
       },
     })
+    // **
+    // Image web component
     editor.BlockManager.add('eleventy-img', {
       label: 'eleventy-img',
       category: 'Eleventy',

diff --git a/src/client/liquid.test.ts b/src/client/liquid.test.ts
@@ -188,7 +188,7 @@ test('loop block', () => {
   const dataTree = {
     filters: [],
     dataSources: [],
-    getType(typeId, dataSourceId?) {
+    getType() {
       return null
     },
   } as unknown as DataTree