Integration of Existing Grapesjs Plugins

fahim74

According to the documentation, Importing any Grapesjs plugin and adding it via config.grapesJsConfig.plugins.push should active/load the plugin but I am getting an error!

https://docs.silex.me/en/dev/config#grapesjs-plugins-example

Silex failed to load and stuck in a "Loading" state with an error message in the console

main.js:362 Uncaught (in promise) TypeError: Failed to resolve module specifier "grapesjs-blocks-flexbox". Relative references must start with either "/", "./", or "../".

Here is what I am trying,

// my .silex-client config file
import Eleventy from './js/silex-cms/client.js'
import blocksFlexbox from 'grapesjs-blocks-flexbox';
import websiteInfoPlugin from './plugins/client/website-info.js'
//import basicBlock from './plugin/basic-block.js';
export default function(config, options) {
  config.addPlugin(websiteInfoPlugin, {})

  config.addPlugin(blocksFlexbox, {})

  // CMS Plugin
  config.addPlugin(Eleventy, {
    dataSources: [],
    //fetchPlugin : { duration: '1d', type: 'json', removeUrlQueryParams: true } // https://www.11ty.dev/docs/plugins/fetch/
  })
  config.on('silex:startup:end', () => {
    const editor = config.getEditor()
    editor.on('storage:end:store', async () => {
      editor.runCommand('publish')
    })
  })
}

Also tried loading it via "CMS plugin" style

const StaticPlugin = require('@silexlabs/silex/dist/plugins/server/plugins/server/StaticPlugin').default
const node_modules = require('node_modules-path')
console.log('node_modules ->', node_modules('@silexlabs/silex-cms'))
console.log('node_modules ->', node_modules('grapesjs-blocks-flexbox'))
module.exports = async function(config, options) {
  await config.addPlugin(StaticPlugin, {
    routes: [
      {
        route: '/js/silex-cms/',
        path: node_modules('@silexlabs/silex-cms') + '/@silexlabs/silex-cms/dist/',
      },
      {
        route: '/js/grapesjs-blocks-flexbox/',
        path: node_modules('grapesjs-blocks-flexbox') + '/grapesjs-blocks-flexbox/dist/'
      }
    ],
  })
}

but it couldn't find /js/grapesjs-blocks-flexbox/index.js ! when I try to import it in the client.js. What am I doing wrong here?

lexoyo

fahim74

Ok that's interesting, the docs probably need clearer instructions

You can't load a grapesjs plugin by its name because there is no build step. You need to provide a URL from which you can just import it in ypur config file. For example in the docs of the plugin you're trying to import there is the CDN URL. But I would advise to npm install it to your project, then make it available to the client side with the static plugin like I do here then import it on the client side from your server

fahim74

@lexoyo can you please take a look? Here is the repo I am testing.

https://github.com/sh0umik/silex-strapi-11ty/blob/main/.silex-client.js

fahim74

lexoyo Here is the update,

I have created a Silex client plugin using the Silex plugin starter kit. I added the block there and everything works on the plugin side. I can confirm via the screenshot below. I have added the flexbox and Grapesjs Basic Block.

https://www.npmjs.com/package/silex-blocks-extra

Plugin Development

Next, installed and added the package in client-config and exposed via server static file plugin just like the cms.

// my .silex-client config file
import SilexCMS from './js/silex-cms/client.js'
import BlockExtra from './js/silex-blocks-extra/client.js'
export default function(config, options) {
  config.addPlugin(BlockExtra, {})

  // CMS Plugin
  config.addPlugin(SilexCMS, {
    dataSources: [],
  })
  config.on('silex:startup:end', () => {
    const editor = config.getEditor()
    editor.on('storage:end:store', async () => {
      editor.runCommand('publish')
    })
  })
}

// my .silex-server.js config file
const StaticPlugin = require('@silexlabs/silex/dist/plugins/server/plugins/server/StaticPlugin').default
const node_modules = require('node_modules-path')
//console.log('node_modules ->', node_modules('@silexlabs/silex-cms'))
module.exports = async function(config, options) {
  await config.addPlugin(StaticPlugin, {
    routes: [
      {
        route: '/js/silex-cms/',
        path: node_modules('@silexlabs/silex-cms') + '/@silexlabs/silex-cms/dist/',
      },
      {
        route: '/js/silex-blocks-extra/',
        path: node_modules('silex-blocks-extra') + '/silex-blocks-extra/dist/',
      },
    ],
  })
}

The plugin loads fine as there is no loading error! But the blocks are not showing! Any idea how to debug the plugin
load ?

lexoyo

fahim74 I have created a Silex client plugin using the Silex plugin starter kit. I added the block there and everything works on the plugin side. I can confirm via the screenshot below. I have added the flexbox and Grapesjs Basic Block.

fahim74 The plugin loads fine as there is no loading error! But the blocks are not showing! Any idea how to debug the plugin
load ?

I don't understand :-/

I see the block in the "+" menu so everything is fine right?

fahim74

Also, it seems silex-client-config.js which is serving via the loaded silex failed to recognize any import! Other than exposing by the StaticPlugin in silex-server-config.js!

main.js:362 Uncaught (in promise) TypeError: Failed to resolve module specifier "@silexlabs/silex/src/ts/client/grapesjs/project-bar". Relative references must start with either "/", "./", or "../".

I am a bit confused about how this example works btw!

import { addButton } from '@silexlabs/silex/src/ts/client/grapesjs/project-bar'

export default function (config, options) {
  const editor = config.getEditor()
  config.on('silex:startup:end', () => {
    addButton(editor, {
      id: 'database',
      className: 'font-manager-btn fa-solid fa-database',
      attributes: { title: 'Database' },
      command: () => {
        console.log('Run command to open a dialog or panel')
      },
    })
  })
}

lexoyo

fahim74 ok that's interesting
I don't think you need to create a silex plugin, you probably can use the grapesjs plugin directly. Yoy u could even create a grapesjs plugin inside the silex config directly

Anyway I will look into it, did you share the Code of silex-blocks-extra ?

You could start by adding a few console.log or breakpoints in the browser console

lexoyo

fahim74

fahim74 I am a bit confused about how this example works btw!

import { addButton } from '@silexlabs/silex/src/ts/client/grapesjs/project-bar'

export default function (config, options) {
const editor = config.getEditor()
config.on('silex:startup:end', () => {
addButton(editor, {
id: 'database',
className: 'font-manager-btn fa-solid fa-database',
attributes: { title: 'Database' },
command: () => {
console.log('Run command to open a dialog or panel')
},
})
})
}

when silex has started, it adds a button to the project bar (the vertical bar on the left)

and when the user clicks on the button it logs the message in the browser's console

fahim74

lexoyo here is the repository.

https://github.com/sh0umik/silex-blocks-extra

tried to find the blocks via core API but. Seems like the blocks didn't load.

config.on('silex:startup:end', () => {
    const editor = config.getEditor()
    // Use the API
    const blockManager = editor.Blocks;
    const blocks = blockManager.getAll();
    console.log(JSON.stringify(blocks));
    editor.on('storage:end:store', async () => {
      editor.runCommand('publish')
    })
  })

The only block I can add is this

config.on('silex:startup:end', () => {
    const editor = config.getEditor()
    // Use the API
    const blockManager = editor.Blocks;
    blockManager.add('h1-block', {
      label: 'Heading',
      content: '<h1>Put your title here</h1>',
      category: 'Basic',
      attributes: {
        title: 'Insert h1 block'
      }
    });
    //console.log(JSON.stringify(blocks));
    editor.on('storage:end:store', async () => {
      editor.runCommand('publish')
    })
  })

fahim74

lexoyo like I said you can't import anything like this in client.js file it gives a syntax error.

import { addButton } from '@silexlabs/silex/src/ts/client/grapesjs/project-bar'

fahim74

lexoyo Sorry for the confusion. The screenshot is from the plugin development repository (silex-blocks-extra) where it runs fine. But, when I import the plugin into another project the bloc doesn't show.

So, If import silex-blocks-extra into any silex v3 project as a plugin, you won't be able to see the blocks. that's what I am trying to say.

lexoyo

fahim74

fahim74 import { addButton } from '@silexlabs/silex/src/ts/client/grapesjs/project-bar'

I'm sorry if i miss the point but where does this line come from? It should be a relative path to work in a silex config

lexoyo

oh i think it's a problem with the docs

Here is an example that works for sure (i use it)
https://gitlab.com/lexoyo/11ty_silex.me-2024/-/blob/main/client.js?ref_type=heads

// silex/client.js
import Eleventy from './js/silex-cms/client.js'

export default function(config, options) {
  config.addPlugin(Eleventy, {
    enable11ty: true,
    dataSources: [{
      id: 'squidex',
      type: 'graphql',
      name: 'Squidex',
      url: 'https://cloud.squidex.io/api/content/silex-me/graphql',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjlTZWo3eXJYdGo1TzNDVV9JeG5EU2ciLCJ0eXAiOiJhdCtqd3QifQ.eyJzdWIiOiJzaWxleC1tZTpzaWxleDExdHkiLCJvaV9wcnN0Ijoic2lsZXgtbWU6c2lsZXgxMXR5IiwiY2xpZW50X2lkIjoic2lsZXgtbWU6c2lsZXgxMXR5Iiwib2lfdGtuX2lkIjoiOWE5YjdmNzEtZDJjOC00NjJjLWE2MWUtMTMzMTJiZjBmODQxIiwiYXVkIjoic2NwOnNxdWlkZXgtYXBpIiwic2NvcGUiOiJzcXVpZGV4LWFwaSIsImp0aSI6IjljNWYxM2ZjLWJlYzktNGE5YS04MTJiLTY2YWI5ZmI4MzYyMiIsImV4cCI6MTcwNjQzOTA4MCwiaXNzIjoiaHR0cHM6Ly9jbG91ZC5zcXVpZGV4LmlvLyIsImlhdCI6MTcwMzg0NzA4MH0.VqUUgNjmFb1J6gStqvT0uB0zs3VrpP92_7-S6bKafOX_-BdFEZPw1R2YKH5PuB-X8MXiSNxRpjPsRLRg-6JJ5J2F_5hoIOW8dZkNtwA3MEy8j2tdwAWorPDs4HRkpISQSPCBYiz3L5gnipMMEkpIT_5nfsaztDd6yK0HY28RwfIACdmp9PlTQ9ZQaCyIkPxZh6yAGCpcF2d-2KDxxY0vZ7YFrV4eMzqUxVhvQ07ouGzE15y-K3cfO2I3nmQg5ULQGXmpI4SoXtAptIpLwSjeFJzh2KczQ7XQQU04EO7jh7ceoUjhxvvxhurE_OTh3d3ovAxIPdfvJhv_29wCfTAIiQ`,
        'X-Languages': '${data.lang}',
      },
    }],
    imagePlugin: false,
    i18nPlugin: true,
  })
}

and the server config
https://gitlab.com/lexoyo/11ty_silex.me-2024/-/blob/main/server.js?ref_type=heads

// silex/server.js
const StaticPlugin = require('@silexlabs/silex/dist/plugins/server/plugins/server/StaticPlugin').default
const node_modules = require('node_modules-path')

module.exports = function(config, options) {
  config.addPlugin(StaticPlugin, {
    routes: [
      {
        route: '/js/silex-cms/',
        path: node_modules('@silexlabs/silex-cms') + '/@silexlabs/silex-cms/dist/',
      },
    ],
  })
}

I thought I took this from the docs but maybe not :-/

lexoyo

Note that the server side config can require modules from local node_modules/ but client side config needs relative paths or URLs

fahim74

lexoyo in your // silex/client.js file can you share an example of importing this package below? It's an official GrapesJS Plugin.

https://github.com/GrapesJS/blocks-flexbox

and share your code, please. This will clear the whole confusion for Our team and we tried hard but we are stuck! It would be better if you could share both the client.js and the server.js as well

lexoyo

Yes of course

The code I shared above is in this repo
https://gitlab.com/lexoyo/11ty_silex.me-2024/

lexoyo

To import this plugin
https://github.com/GrapesJS/blocks-flexbox

You can

Use it's cdn URL (https://unpkg.com/grapesjs-blocks-flexbox)
Or install it in your project (npm i grapesjs-blocks-flexbox) and do the same as I did in the repo I provided (https://gitlab.com/lexoyo/11ty_silex.me-2024/) : serve the plugin files from the server side config, then include them from the client config

lexoyo

Another example is this code
https://github.com/silexlabs/editor.silex.me/

It is the code behind v3.silex.me

lexoyo

If you are stuck we can meet online

fahim74

lexoyo

If you are stuck we can meet online

sure why not, any idea how to get access to chat.silex.me

Finally, made it to work! [v0.0.7] As a plugin, I had to copy the Flexbox source code into the plugin client side and import it there. Also passed the options parameter down the tree ( previously missed this one ) I don't know what happened, changed a lot of things! Javascript is weird.

https://github.com/sh0umik/silex-blocks-extra/tree/v0.0.7

I am considering adding a bootstrap or Tailwind support to the editor and blocks. and I have no idea how!

lexoyo

fahim74 sure why not, any idea how to get access to chat.silex.me

sure 🙂
https://short.silex.me/chat

fahim74 Finally, made it to work! [v0.0.7] As a plugin, I had to copy the Flexbox source code into the plugin client side and import it there. Also passed the options parameter down the tree ( previously missed this one ) I don't know what happened, changed a lot of things! Javascript is weird.

haha ok !!! well done !!!
if you spot anything please fix the docs directly (you have access with a gitlab account)

fahim74 I am considering adding a bootstrap or Tailwind support to the editor and blocks. and I have no idea how!

Nice ! It is not trivial but maybe you'll find an easy way with grapesjs plugin?
Check this
https://roadmap.silex.me/posts/2/tailwind-css-support