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

[antman3351]

Hello, I've just updated to the lasted version 0.16.12 and have a bug when trying to move a component that has the property textable:1 into a text component.

It works on the previous version 0.16.3.

When i move the component I get an error in the console Uncaught TypeError: Cannot read property 'attributes' of undefined - ComponentView.js:293

I made a basic example here: https://codepen.io/antman3351/pen/pojZWLe

Thanks!

[VojtechLanka]

Hello, still problem in v0.16.17. Any plans on resolving this?

[array-digital]

I'm also having an issue with the. The comp is fine if dragged onto the canvas but doesn't work if dragged onto a text comp. Been banging my head trying to fix thinking I'm doing something wrong. I get the error at line 2655 in grapes.js. Can't set e as this.model doesn't exist.

[Joshmamroud]

I'm also having this issue. Has anyone been able to solve this?

[array-digital]

I can't remember how I fixed it exactly but it was something to do with the body padding in the css that the iframe

[VojtechLanka]

I do have padding on the #wrapper element but after removing it I still get the error. Specifically I get Uncaught TypeError: Cannot read property 'attributes' of undefined.

[mwidner]

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)

[vmagalhaes]

Same here

I'm getting this same error. I've created a custom component based loosely off #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)

[antman3351]

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

[mosh-tudor]

Up

[OndrejLetacek]

Hi, I am having the same issue. Any plan on resolving this? Thanks

[artf]

At the moment, I'm not able to work on this, so, a PR is welcome

[hanna404]

@artf I would love to help, let me know what i can do, maybe we can talk privately

[0099FF]

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().

[bogdanbs]

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 .

[EmilIpsen]

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 😃

[artf]

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