diff --git a/src/dom_components/model/ComponentLink.js b/src/dom_components/model/ComponentLink.js index 7d71f26ee8..39f91d7ef8 100644 --- a/src/dom_components/model/ComponentLink.js +++ b/src/dom_components/model/ComponentLink.js @@ -1,12 +1,12 @@ -var Component = require('./ComponentText'); +const Component = require('./ComponentText'); module.exports = Component.extend({ - defaults: _.extend({}, Component.prototype.defaults, { + defaults: { ...Component.prototype.defaults, type: 'link', tagName: 'a', traits: ['title', 'href', 'target'], - }), + }, /** * Returns object of attributes for HTML @@ -14,26 +14,39 @@ module.exports = Component.extend({ * @private */ getAttrToHTML(...args) { - var attr = Component.prototype.getAttrToHTML.apply(this, args); + const attr = Component.prototype.getAttrToHTML.apply(this, args); delete attr.onmousedown; return attr; }, -},{ +}, { - /** - * Detect if the passed element is a valid component. - * In case the element is valid an object abstracted - * from the element will be returned - * @param {HTMLElement} - * @return {Object} - * @private - */ isComponent(el) { - var result = ''; - if(el.tagName == 'A'){ - result = {type: 'link'}; + let result; + let avoidEdit; + + if (el.tagName == 'A') { + result = { + type: 'link', + editable: 0, + }; + + // The link is editable only if, at least, one of its + // children is a text node (not empty one) + const children = el.childNodes; + const len = children.length; + if (!len) delete result.editable; + + for (let i = 0; i < len; i++) { + const child = children[i]; + + if (child.nodeType == 3 && child.textContent.trim() != '') { + delete result.editable; + break; + } + } } + return result; }, diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js index 8b8b837f7e..10412401a9 100644 --- a/test/specs/dom_components/model/Component.js +++ b/test/specs/dom_components/model/Component.js @@ -200,12 +200,39 @@ module.exports = { describe('Link Component', () => { - it('Component parse a element', () => { - var el = document.createElement('a'); - obj = ComponentLink.isComponent(el); + const aEl = document.createElement('a'); + + it('Component parse link element', () => { + obj = ComponentLink.isComponent(aEl); + expect(obj).toEqual({type: 'link'}); + }); + + it('Component parse link element with text content', () => { + aEl.innerHTML = 'some text here '; + obj = ComponentLink.isComponent(aEl); expect(obj).toEqual({type: 'link'}); }); + it('Component parse link element with not only text content', () => { + aEl.innerHTML = '
Some
text
here
'; + obj = ComponentLink.isComponent(aEl); + expect(obj).toEqual({type: 'link'}); + }); + + it('Component parse link element with only not text content', () => { + aEl.innerHTML = `
Some
+
text
+
here
`; + obj = ComponentLink.isComponent(aEl); + expect(obj).toEqual({type: 'link', editable: 0}); + }); + + it('Link element with only an image inside is not editable', () => { + aEl.innerHTML = ''; + obj = ComponentLink.isComponent(aEl); + expect(obj).toEqual({type: 'link', editable: 0}); + }); + }); describe('Map Component', () => {