diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index cd8a7c86c..9a814b049 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.js @@ -114,6 +114,7 @@ export default ComponentView.extend({ !['text', 'default', ''].some(type => model.is(type)) || textable; model.set( { + _innertext: !selectable, editable: selectable && model.get('editable'), selectable: selectable, hoverable: selectable, diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 1231ef0ea..db75c58d0 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -30,7 +30,11 @@ export default Backbone.View.extend({ this.attr = model.get('attributes'); this.classe = this.attr.class || []; this.listenTo(model, 'change:style', this.updateStyle); - this.listenTo(model, 'change:attributes', this.renderAttributes); + this.listenTo( + model, + 'change:attributes change:_innertext', + this.renderAttributes + ); this.listenTo(model, 'change:highlightable', this.updateHighlight); this.listenTo(model, 'change:status', this.updateStatus); this.listenTo(model, 'change:script', this.reset); @@ -205,11 +209,14 @@ export default Backbone.View.extend({ * @private * */ updateStyle() { - const em = this.em; - const model = this.model; + const { model, em, el } = this; if (em && em.getConfig('avoidInlineStyle')) { - this.el.id = model.getId(); + if (model.get('_innertext')) { + el.removeAttribute('id'); + } else { + el.id = model.getId(); + } const style = model.getStyle(); !isEmpty(style) && model.setStyle(style); } else { @@ -260,12 +267,12 @@ export default Backbone.View.extend({ updateAttributes() { const attrs = []; const { model, $el, el, config } = this; - const { highlightable, textable, type } = model.attributes; + const { highlightable, textable, type, _innertext } = model.attributes; const { draggableComponents } = config; const defaultAttr = { 'data-gjs-type': type || 'default', - ...(draggableComponents ? { draggable: true } : {}), + ...(draggableComponents && !_innertext ? { draggable: true } : {}), ...(highlightable ? { 'data-highlightable': 1 } : {}), ...(textable ? {