[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)
I'm leaving here a working example of a textable component https://jsfiddle.net/artur_arseniev/0b9ox72g/
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().
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.
Issue #2681
[BUG]: destroy() method didn't fully remove events
version: latest: v-0.16.3. important: update from v-0.15.9 to v-0.16.3 while keep everything same, the error will show in console: This err...
Issue #2498
[Bug] Error when trying to move cell from row.
Bug #2478 after release still exists. Repeat steps and you will get error Uncaught TypeError: Cannot read property 'indexEl' of undefined....
Issue #761
Text component problem
Hi. I wish a text component that do not create new components every time I press "Enter" key to create new paragraphs (this is a bad usabil...
Issue #2044
Npm start to develop on local server didn't work
Did the procedure to start the local server using dev branch as described on README, it worked on the console, but fails on chrome and the...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.