How to use the grapesjs.init function in grapesjs

public firstUpdated() {
    this._editor = gjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: this.shadowRoot!.querySelector('#gjs'),
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      components: this._initialValue,
      // Size of the editor
      height: '300px',
      width: 'auto',
      // Disable the storage manager for the moment
      storageManager: { type: null },
      // Avoid any default panel
      panels: { defaults: [] },

      rte: {
        actions: ['bold', 'italic', 'underline', 'strikethrough']
      },

componentDidMount() {
    createjs.Ticker.framerate = 13

    const editor = grapesjs.init({
      container: this.ref.current,

      components: '',
      fromElement: false,

      height: '100vh',
      width: 'auto',

      autorender: 0,

      storageManager: {
        id: '',
        type: 'redux',
        stepsBeforeSave: 0
      },

componentDidMount () {
    const editor = grapesjs.init({
      container: this.editor.current,

      components: '',
      fromElement: false,

      height: '100vh',
      width: 'auto',

      autorender: 0,

      storageManager: {
        id: '',
        type: 'redux',
        stepsBeforeSave: 1
      },

initBuilder: function() {
            this.builder = GrapesJS.init(_.extend(
                {}
                , {
                    avoidInlineStyle: 1,
                    container: this.getContainer()
                }
                , this._prepareBuilderOptions()));

            mediator.trigger('grapesjs:created', this.builder);

            this.builderDelegateEvents();

            GrapesJSModules.call('components', {
                builder: this.builder
            });
        },

useEffect(() => {
      if (!editor) {

        let plugins = [
          gjsBasicBlocks,
          ...props.plugins
        ];
        if (webpage) {
          plugins = [...plugins, gjsPresetWebpage];
        }
        if (newsletter) {
          plugins = [...plugins, gjsPresetNewsletter];
        }

        const e = GrapesJS.init({
          blockManager,
          container: `#${id}`,
          fromElement: true,
          plugins,
          storageManager
        });

        const defaultType = e.DomComponents.getType('default');
        const defaultModel = defaultType.model;
        const defaultView = defaultType.view;
        components.forEach((component: GComponent) => {
          e.DomComponents.addType(component.type, {
            model: defaultModel.extend(
              {
                defaults: Object.assign({}, defaultModel.prototype.defaults)
              },

'  }\n' +
                '  .grid-item-cell2-r{\n' +
                '    vertical-align:top;\n' +
                '    padding-left:10px;\n' +
                '    width:50%;\n' +
                '  }';

            config.plugins.push('gjs-preset-newsletter');
        }

        config.components = props.initialSource ? base(props.initialSource, this.props.tagLanguage, trustedUrlBase, sandboxUrlBase, publicUrlBase) : defaultSource;
        config.style = props.initialStyle ? base(props.initialStyle, this.props.tagLanguage, trustedUrlBase, sandboxUrlBase, publicUrlBase) : defaultStyle;

        config.plugins.push('mailtrain-remove-buttons');

        this.editor = grapesjs.init(config);
    }

() => {
        if (!editor) {
          const newEditor = GrapesJS.init({
            container: `#${id}`,
            fromElement: true,
            blockManager,
            styleManager,
            storageManager,
            width,
            height,
            plugins: [
              presets[presetType],
              ...propPlugins,
            ],
          });
          setEditor(newEditor);
          if (onInit) {
            onInit(editor);
          }