Issue #2771Opened May 13, 2020by antman335112 reactions

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

Question

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!

Answers (3)

0099FFFebruary 1, 20213 reactions

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

bogdanbsSeptember 15, 20213 reactions

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 .

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.