Custom selectorManager option to Tailwind responsive classes working properly

[insssomniac]

Hi JD,

I'm trying to use grapesjs-tailwind module, which adds all blocks from here: https://tailblocks.cc/. They all using Tailwind classes, some of which contains "/" symbol, like this: lg:w-1/3. Problem is what grapesJS with default selectorManager settings changes "/" to "-" and these tailwind classes doesn't work. So it is need to add the function like this:

escapeName = (name) =>
  `${name}`.trim().replace(/([^a-z0-9\w-:/]+)/gi, "-")

to the selectorManager option. You can see the example there: https://codepen.io/ju99ernaut/pen/BaKGadb

If you remove string "selectorManager: {escapeName}," from the editor initialization code, all the blocks which using classes like "lg:w-1/3" will not work, example is Blogs -- any element with three columns.

So is it possible to pass somehow the js function "escapeName" to the editor config selectorManager section?

Here is some screenshots:

with custom selectorManager setting:

with default selectorManager setting:

[ghost]

Hi @insssomniac,

Create a new js file (e.g. public/vendor/laravel-grapesjs/assets/modify-config.js) and paste the code below into it.

(function(w){
    try{
        if(w.editorConfig){
            let selectorManager = (editorConfig.selectorManager = editorConfig.selectorManager || {});

            selectorManager.escapeName = (name) => `${name}`.trim().replace(/([^a-z0-9\w-:/]+)/gi, "-")
        }
    }catch(e){}
})(window)

Now load this js file before the editor.js via config file laravel-grapesjs.php

    /*
    |--------------------------------------------------------------------------
    | Global Scripts
    |--------------------------------------------------------------------------
    |
    | Global scripts for the editor blade file.
    */

    'scripts' => [
        'vendor/laravel-grapesjs/assets/modify-config.js'
        'vendor/laravel-grapesjs/assets/editor.js'
    ],

And your problem should be resolved.

Note: load modify-config.js before editor.js

[insssomniac]

Wow, it is really cool! Thanks a lot! With such "open config" approach the laravel-grapesjs plugin is really flexible.