How to add custom data with Ju99ernaut/grapesjs-tailwind plugin?

[sergeynilov]

In laravel 8 app "jd-dotlogics/laravel-grapesjs": "^3" is used and https://github.com/Ju99ernaut/grapesjs-tailwind plugin is used to add custom block at grapejs editor, which looks like https://prnt.sc/cITyK6U2AKzM I need to add custom blocks based on data of our app at this area.

Reading https://github.com/Ju99ernaut/grapesjs-tailwind page I did not find any possibility to add custom blocks in sinilar way.

So in file config/laravel-grapesjs.php I replaced path to grapesjs-tailwind file :

[
    'name' => 'grapesjs-tailwind',
    'options' => [],
    'scripts' => [
        // 'https://unpkg.com/grapesjs-tailwind'
        'js/custom-grapesjs-tailwind.min.js'

    ]
]

I saved file as public/js/custom-grapesjs-tailwind.min.js and unpacking it try to this file manually. All these items are filled in big array like : https://prnt.sc/VihL339Z2-g1

I try to run request with axios, but I have a problem that I can not to import axios in plain js file:

    window.axios = require('axios');
    window.axios.get('pages/{page_id}/get-custom-blocks')
      .then(({data}) => {

I got error :

ReferenceError: require is not defined

With line :

import { axios } from 'axios'

I got error :

Uncaught SyntaxError: Cannot use import statement outside a module 

1) If there is a way to use axios in public/js/custom-grapesjs-tailwind.min.js ?
2) Are there some other similar decisions with grapesjs compatible with "jd-dotlogics/laravel-grapesjs" ?

Thanks!

[sergeynilov]

Are there some other tools/libraries to sent request to server from js file ?

[ghost]

Hi @sergeynilov, you can create your custom blocks easily, please have a look at here on templates

So why are you using the Axios? If you still need to use the Axios you can read their documentation you can go with the CDN way.

Closing this issue as it seems resolved. You can reopen it if you have different concerns.

Thanks.

[sergeynilov]

Could you please to show how can I import Axios with the CDN way, as I have only plain js file? Decisions I found use "require" or "import" which are not accessible in plain js file ...

[mjawad096]

@sergeynilov you can add it in by below way -- And the axios global variable will be available in your custom-grapesjs-tailwind.min.js file

[
      'name' => 'grapesjs-tailwind',
      'options' => [],
      'scripts' => [
          'https://unpkg.com/axios',
          'js/custom-grapesjs-tailwind.min.js'
      ]
]