0.14.43 update causes ckeditor focus to stop reacting in mjml
Question
@art, I realize you stopped supporting your MJML project, but if you don't mind, I noticed an issue that the latest update causes.
To reproduce:
- Go to https://grapesjs.com/demo-mjml.html
- Double click in the middle of a text element
- The text area will highlight and possible one of the words will get selected.
- click again anywhere in the middle of the text. For example, try selecting a word.
You will see that it is not possible anymore to select where in the text to position the blinking text cursor or select parts of the text.
This issue is not present in version 0.14.40 and below
Answers (3)
Resolved:
The issue happens with the functions enableEditing and disableEditing in the mjml components.
To fix, replace those functions with the new ones, however, I also update the pointerEvents to none on disable and all on enable.
This can be applied to any component you need to enable and disable editing on.
// place inside gjs-mjml/components/Text.js
...
events: { // We need this to listen to the double click event
dblclick: 'onActive',
},
onActive(e) {
// We place this before stopPropagation in case of nested
// text components will not block the editing (#1394)
if (this.rteEnabled || !this.model.get('editable')) {
return;
}
e && e.stopPropagation && e.stopPropagation();
const rte = this.rte;
if (rte) {
try {
this.activeRte = rte.enable(this, this.activeRte);
} catch (err) {
console.error(err);
}
}
this.rteEnabled = 1;
this.toggleEvents(1);
this.getChildrenContainer().style.pointerEvents = 'all';
},
disableEditing() {
const model = this.model;
const editable = model.get('editable');
const rte = this.rte;
const contentOpt = { fromDisable: 1 };
if (rte && editable) {
try {
rte.disable(this, this.activeRte);
} catch (err) {
console.error(err);
}
const content = this.getChildrenContainer().innerHTML;
const comps = model.get('components');
comps.length && comps.reset();
model.set('content', '', contentOpt);
// If there is a custom RTE the content is just baked staticly
// inside 'content'
if (rte.customRte) {
// Avoid double content by removing its children components
// and force to trigger change
model.set('content', content, contentOpt);
} else { // Not in use since we use a custom rte
const clean = model => {
const selectable = !['text', 'default', ''].some(type =>
model.is(type)
);
model.set({
editable: selectable && model.get('editable'),
highlightable: 0,
removable: 0,
draggable: 0,
copyable: 0,
selectable: selectable,
hoverable: selectable,
toolbar: ''
});
model.get('components').each(model => clean(model));
};
// Avoid re-render on reset with silent option
model.trigger('change:content', model, '', contentOpt);
comps.add(content);
comps.each(model => clean(model));
comps.trigger('resetNavigator');
}
}
this.rteEnabled = 0;
this.toggleEvents();
this.getChildrenContainer().style.pointerEvents = 'none';
},
...
The same version of grapesjs with the same CKEditor plugin works fine here, so it seems not related to the latest version
Let me demonstrate. I am going to double click a text field and then move around and try to click inside.
This is v0.14.40 - Works

This is v0.14.43 - Has the issue.

And same issue on https://grapesjs.com/demo-mjml.html. v0.14.43 - has the issue

Related Questions and Answers
Continue research with similar issue discussions.
Issue #1872
Clicking enter inside a text components many times
Something goes crazy when the text area extend beyond a certain point. I don't know exactly how to describe it so I'm including a screen re...
Issue #1394
[Bug]: Pasting multiple paragraphs aren't editable until Grapes reloads
https://grapesjs.com/demo.htmlIn the double click into the text "All text blocks could..." to trigger editing mode.Paste this text in: The...
Issue #1812
[Bug]: 404 when trying to add background image (reproducible in demo)
Visit https://grapesjs.com/demo.html in Chrome IncognitoClick the "Header" elementClick Decorations > BackgroundDelete Layer 2Click Layer 1...
Issue #1735
Vuejs components builder
Hi, it would be nice to have vue components builder like mjml.. This user started project: https://github.com/Patrick-Spiegel/vue-grapesjs...
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.