How to use the grapesjs.plugins function in grapesjs

import grapesjs from 'grapesjs';

export default grapesjs.plugins.add('gjs-plugin-filestack', (editor, opts = {}) => {
  let c = opts;
  let config = editor.getConfig();
  let pfx = config.stylePrefix || '';
  let btnEl;

  let defaults = {
    // Filestack's API key
    key: '',

    // Custom button element which triggers Filestack modal
    btnEl: '',

    // Text for the button in case the custom one is not provided
    btnText: 'Add images',

    // Filestack's options

import grapesjs from 'grapesjs';
import pluginNavbar from 'grapesjs-navbar';
import pluginCountdown from 'grapesjs-component-countdown';
import pluginExport from 'grapesjs-plugin-export';
import pluginAviary from 'grapesjs-aviary';
import pluginFilestack from 'grapesjs-plugin-filestack';

import commands from './commands';
import blocks from './blocks';
import components from './components';
import traits from './traits';
import panels from './panels';
import styles from './styles';

export default grapesjs.plugins.add('gjs-mavo', (editor, opts = {}) => {
  let config = opts;

  let defaults = {
    // Which blocks to add
    //basic: 'column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map'
    //extra: 'link-block', 'quote', 'text-basic'
    //form: 'form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'
    blocks: ['column1', 'column2', 'column3', 'column3-7', 'divider', 'text', 'link', 'image', 'video', 'map', 'link-block', 'quote', 'text-basic', 'form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'],
    
    // Modal import title
    modalImportTitle: 'Import',

    // Modal import button text
    modalImportButton: 'Import',

    // Import description inside import modal

import grapesjs from 'grapesjs';

const stopPropagation = e => e.stopPropagation();

export default grapesjs.plugins.add('gjs-plugin-ckeditor', (editor, opts = {}) => {
  let c = opts;

  let defaults = {
    // CKEditor options
    options: {},

    // On which side of the element to position the toolbar
    // Available options: 'left|center|right'
    position: 'left',
  };

  // Load defaults
  for (let name in defaults) {
    if (!(name in c))
      c[name] = defaults[name];
  }

import grapesjs from 'grapesjs';
import loadCommands from './commands';
import loadTraits from './traits';
import loadComponents from './components';
import loadBlocks from './blocks';
import loadDevices from './devices';

export default grapesjs.plugins.add('grapesjs-blocks-bootstrap4', (editor, opts = {}) => {

  window.editor = editor;

  const opts_blocks = opts.blocks || {};
  const opts_labels = opts.labels || {};
  const opts_categories = opts.blockCategories || {};
  delete opts['blocks'];
  delete opts['labels'];
  delete opts['blockCategories'];

  const default_blocks = {
    default: true,
    text: true,
    link: true,
    image: true,
    // LAYOUT

import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';

import 'grapesjs-mjml';

import 'grapesjs-preset-newsletter';
import 'grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css';

import "./sandboxed-grapesjs.scss";

import axios from './axios';
import {GrapesJSSourceType} from "./sandboxed-grapesjs-shared";
import {withComponentMixins} from "./decorator-helpers";


grapesjs.plugins.add('mailtrain-remove-buttons', (editor, opts = {}) => {
    // This needs to be done in on-load and after gjs plugin because grapesjs-preset-newsletter tries to set titles to all buttons (including those we remove)
    // see https://github.com/artf/grapesjs-preset-newsletter/blob/e0a91636973a5a1481e9d7929e57a8869b1db72e/src/index.js#L248
    editor.on('load', () => {
        const panelManager = editor.Panels;
        panelManager.removeButton('options','fullscreen');
        panelManager.removeButton('options','export-template');
    });
});


@withComponentMixins([
    withTranslation
])
export class GrapesJSSandbox extends Component {
    constructor(props) {
        super(props);

import grapesjs from 'grapesjs';

export default grapesjs.plugins.add('custom', function (editor, opts) {

    var opt = opts || {};
    var config = editor.getConfig();
    var pfx = editor.getConfig().stylePrefix;
    var modal = editor.Modal;
    var $ = window.$ || grapesjs.$;

    config.showDevices = 0;

    var updateTooltip = function (coll, pos) {
        coll.each(function (item) {
            var attrs = item.get('attributes');
            attrs['data-tooltip-pos'] = pos || 'bottom';
            item.set('attributes', attrs);
        });
    }

import grapesjs from 'grapesjs'

import loadColumnContainer from './Components/ColumnContainer.js'
import loadRowContainer from './Components/RowContainer.js'
import loadItem from './Components/Item.js'

import generateClasses from './classes'
import generateStyles from './styles'
import resizers from './resizers'

export default grapesjs.plugins.add('gjs-blocks-flexblocks', (editor, config = {}) => {
  const classes = generateClasses('flexblocks')
  const styles = generateStyles(classes)

  const attr =  {
    columnContainer: {
      class: classes.columnContainer,
      'data-gjs-droppable': `.${classes.item}`,
      'data-gjs-resizable': resizers.columnContainer,
      'data-gjs-custom-name': 'Column container',
    },
    rowContainer: {
      class: classes.rowContainer,
      'data-gjs-droppable': `.${classes.item}`,
      'data-gjs-resizable': resizers.rowContainer,
      'data-gjs-custom-name': 'Row container',
    },

import grapesjs from 'grapesjs'

import configureStore from '@src/configureStore'

import { editorStorageStore } from '@actions/actions'

export default grapesjs.plugins.add('gjs-redux-storage', (editor, opts = {}) => {
  editor.StorageManager.add('redux', {
    load: (keys, clb) => {
      const {store} = configureStore()
      const state = store.getState()

      let data = {}
      keys.forEach(key => {
        if (state.editorStorage[key]) {
          data[key] = state.editorStorage[key]
        }
      })

      clb(data)
    },
    store: (data, clb) => {
      const {store} = configureStore()

import grapesjs from 'grapesjs';

export default grapesjs.plugins.add('gjs-blocks-basic', (editor, opts = {}) => {
  const config = {
    blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map'],
    flexGrid: 0,
    stylePrefix: 'gjs-',
    addBasicStyle: true,
    category: 'Basic',
    labelColumn1: '1 Column',
    labelColumn2: '2 Columns',
    labelColumn3: '3 Columns',
    labelColumn37: '2 Columns 3/7',
    labelText: 'Text',
    labelLink: 'Link',
    labelImage: 'Image',
    labelVideo: 'Video',
    labelMap: 'Map',
    ...opts

import grapesjs from 'grapesjs';

export default grapesjs.plugins.add('gjs-preset-newsletter', (editor, opts) => {
  let c = opts || {};
  let config = editor.getConfig();
  let pfx = config.stylePrefix;

  let defaults = {
    editor,
    pfx: pfx || '',
    cmdOpenImport: 'gjs-open-import-template',
    cmdTglImages: 'gjs-toggle-images',
    cmdInlineHtml: 'gjs-get-inlined-html',
    cmtTglImagesLabel: 'Toggle Images',
    cmdBtnMoveLabel: 'Move',
    cmdBtnUndoLabel: 'Undo',
    cmdBtnRedoLabel: 'Redo',
    cmdBtnDesktopLabel: 'Desktop',
    cmdBtnTabletLabel: 'Tablet',