grapesjs: [BUG] component with textable:1 not working since version 0.16.12

I’m leaving here a working example of a textable component https://jsfiddle.net/artur_arseniev/0b9ox72g/

Hope this gets resolved at a later date. Came to the same conclusion as @bogdanbs, that it can’t find the activeRte component when it runs (activeRte does however show up if I do a console.log(), but when using breakpoints in Visual Studio, it doesn’t exists when dragging directly into a text?). I tried making some work-arounds directly in the .JS-file, but with no luck so far.

I have rolled back to v0.16.3, where it doesn’t have the same issue, as this is very needed in the current project I am working on, but it would be sweet to be up to date on the rest of the code - i’ll keep my eyes open for further updates 😃

My 2 ct to this. The problem lies on mixing asynchronous and synchronous code. The enabling of the rte: enable(view, rte) as well as the ComponentTextView.onActive and ComponentTextView.disableEditing are now, since the fix for issue #3475, asynchronous methods. In the Sorter class the rich text editor is activated synchronously (line 1133)

activeTextModel.trigger('active');

but the activeRte instance is not yet fully initialized by the time it is accessed on line 1140:

activeRte.insertHTML && activeRte.insertHTML(outerHTML);

Here is the full snippet

if (isTextableActive) {
  const viewActive = activeTextModel.getView();
  activeTextModel.trigger('active');
  const { activeRte } = viewActive;
  const modelEl = model.getEl();
  delete model.opt.temporary;
  model.getView().render();
  modelEl.setAttribute('data-gjs-textable', 'true');
  const { outerHTML } = modelEl;
  activeRte.insertHTML && activeRte.insertHTML(outerHTML);
} else {
  created = targetCollection.add(modelToDrop, opts);
}

The solution in this case will be to make the above methods synchronous while checking again the issue #3475 .

Looks to have been introduced in 9c24108dadf2ded39e8805b6c4a5f00c626c468b.

As pointed out by @antman3351 the model.getView().render(); call is the trouble maker. A little further down the call stack we attempt to update the view’s attributes, however the model property is undefined when we try to access it. If you place a break-point in the ComponentView.remove() method you can see the model property is being cleared before we attempt to use it in updateAttributes().

In Sorter.js line 1119 model.getView().render(); is causing the problem I’m guessing the component hasn’t yet been rendered so getView doesn’t work?

 if (isTextableActive) {
        const viewActive = activeTextModel.getView();
        activeTextModel.trigger('active');
        const { activeRte } = viewActive;
        const modelEl = model.getEl();
        delete model.opt.temporary;
        // model.getView().render(); // Prevents components being inserted in textable
        modelEl.setAttribute('data-gjs-textable', 'true');
        const { outerHTML } = modelEl;
        activeRte.insertHTML && activeRte.insertHTML(outerHTML);
      } else {
        created = targetCollection.add(modelToDrop, opts);
      }

As you can see from the gif below with the line commented I can move a rendered component into the text area but not a new one (I already had this problem in version 0.16.3)

@artf What’s your thoughts? I’m not very domesticated with the core of grapes.

Thanks, Antonio

I’m getting this same error. I’ve created a custom component based loosely off https://github.com/artf/grapesjs/issues/481. This no longer works. The console shows: ComponentView.js?434e:290 Uncaught TypeError: Cannot read property 'attributes' of undefined at child.updateAttributes (ComponentView.js?434e:290) at child.renderAttributes (ComponentView.js?434e:504) at child.render (ComponentView.js?434e:509) at child.move (Sorter.js?e5e1:1125) at eval (Sorter.js?e5e1:1045) at Array.forEach (<anonymous>) at child.endMove (Sorter.js?e5e1:1044) at executeBound (index.js?e609:759) at HTMLDocument.eval (index.js?e609:772) at HTMLDocument.eval (index.js?e609:113)