Issue #1649Opened December 11, 2018by kickbk2 reactions

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:

  1. Go to https://grapesjs.com/demo-mjml.html
  2. Double click in the middle of a text element
  3. The text area will highlight and possible one of the words will get selected.
  4. 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)

kickbkFebruary 5, 20192 reactions

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';
},
...
artfDecember 12, 20180 reactions

The same version of grapesjs with the same CKEditor plugin works fine here, so it seems not related to the latest version

kickbkDecember 13, 20180 reactions

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 v0 14 40

This is v0.14.43 - Has the issue. v0 14 43

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

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.