Plugin grapesjs-custom-code not found

[andrewryan1906]

I SWEAR I tried to figure this out for an hour before posting; I'm sure I'm missing something silly here, but I can't figure out what I'm doing wrong.

I've done an npm install to get the custom code dist into my application.

I'm using the grapesjs-preset-webpage and the ckeditor pl;ugin, no problem, in my Angular app. I declare all three in my app:

import 'grapesjs-custom-code'; import 'grapesjs-preset-webpage'; import 'grapesjs-plugin-ckeditor';

And then, in my initialization, I reference the plugins:

` plugins: ['gjs-plugin-ckeditor', 'gjs-preset-webpage', 'rs-components','grapesjs-custom-code'], pluginsOpts: { 'gjs-preset-webpage': {

    // disable the preset behavior that always opens the styles panel whenever a component is selected (annoying)
    showStylesOnChange: false
  },
  'gjs-plugin-ckeditor': {
    extraPlugins: 'sourcearea'
  },
  'rs-components': {designerInputs},
  'grapesjs-custom-code': {
    // options
  }
},`

And yet still, I get the message on initialization:

grapes.min.js:12 Plugin grapesjs-custom-code not found

Not sure what I'm doing wrong. Looking around in the code, it looks like the preset and the ckeditor are doing a grapesjs.plugins.add ... whereas the export from the custom-code is just the function (there's no plugins.add happening). But when I try and use the export as a function to run my own grapesjs.plugins.add, I get a Javascript error that the module is not a function.

So I'm at a loss as to how to get custom-code working.

I also went looking for the example code that you have on your website, but it doesn't look like there's a repo for it. There's a repo for the Newletter sample (which doesn't have the custom code component) but not for the web page sample.

Help?

[andrewryan1906]

Literally 5 minutes after posting I figured it out. You have to add the plugin yourself.... so in my Angular, I have this:

import customCodePlugin from 'grapesjs-custom-code'; grapesjs.plugins.add('grapesjs-custom-code',customCodePlugin);

At the top of my Typescript file. And that works.

Is this what I should be doing?

[artf]

Hi @andrewryan1906 unfortunately, this confusion is due to how the plugin is created. For example, the grapesjs-preset-webpage plugin still uses the "old" way (using the grapesjs.plugins.add API): https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/index.js#L16

This is why this works:

import 'grapesjs-plugin-old-api';

grapesjs.init({
      plugins: ['grapesjs-plugin-old-api'],
      pluginsOpts: {
        'grapesjs-plugin-old-api': {...}
      }
  });

Now, we recommend using a simple function to define the plugin, like in grapesjs-custom-code https://github.com/artf/grapesjs-custom-code/blob/4011d40fc8b5ef8852d9c908e390c53f87d09b25/src/index.js#L5

This is the correct way to load it

import GjsPluginAsFn from 'grapesjs-plugin-as-function';

grapesjs.init({
      plugins: [GjsPluginAsFn],
      pluginsOpts: {
        [GjsPluginAsFn]: {...}
      }
  });

import customCodePlugin from 'grapesjs-custom-code'; grapesjs.plugins.add('grapesjs-custom-code',customCodePlugin);

We don't deprecate grapesjs.plugins.add so your approach is totally valid