diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index 1f307b24d..d3bdb9353 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.js @@ -25,26 +25,45 @@ export default ComponentView.extend({ !opts.fromDisable && this.disableEditing(); }, + canActivate() { + const { model, rteEnabled, em } = this; + const modelInEdit = em?.getEditing(); + const sameInEdit = modelInEdit === model; + let result = true; + let isInnerText = false; + let delegate; + + if (rteEnabled || !model.get('editable') || sameInEdit || (isInnerText = model.isChildOf('text'))) { + result = false; + // If the current is inner text, select the closest text + if (isInnerText && !model.get('textable')) { + let parent = model.parent(); + + while (parent && !parent.isInstanceOf('text')) { + parent = parent.parent(); + } + + delegate = parent; + } + } + + return { result, delegate }; + }, + /** * Enable element content editing * @private * */ async onActive(e) { - const { rte, em, model } = this; + const { rte, em } = this; + const { result, delegate } = this.canActivate(); // We place this before stopPropagation in case of nested // text components will not block the editing (#1394) - if (this.rteEnabled || !model.get('editable') || model.get('_innertext') || em?.isEditing()) { - // If the current is inner text, select the closest text - if (model.get('_innertext')) { - let parent = model.parent(); - while (parent && !parent.get('__text')) { - parent = parent.parent(); - } - if (parent) { - em.setSelected(parent); - parent.trigger('active'); - } + if (!result) { + if (delegate) { + em.setSelected(delegate); + delegate.trigger('active', e); } return; } diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 499852b28..0fdb92613 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -221,7 +221,9 @@ export default Backbone.View.extend({ * @private * */ updateHighlight() { - const hl = this.model.get('highlightable'); + const { model } = this; + const isTextable = model.get('textable'); + const hl = model.get('highlightable') && (isTextable || !model.isChildOf('text')); this.setAttribute('data-gjs-highlightable', hl ? true : ''); }, @@ -287,7 +289,7 @@ export default Backbone.View.extend({ id: model.getId(), 'data-gjs-type': type || 'default', ...(this.__isDraggable() && { draggable: true }), - ...(textable && { contenteditable: 'false', 'data-gjs-textable': 'true' }), + ...(textable && { contenteditable: 'false' }), }; // Remove all current attributes