Make the link component not editable if all its children are not text…

…nodes. Closes GrapesJS#418
artlantis · Oct 13, 2017 · 822ab5a · 822ab5a
1 parent 9e8f7cc
commit 822ab5a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 19 deletions.
diff --git a/src/dom_components/model/ComponentLink.js b/src/dom_components/model/ComponentLink.js
@@ -1,39 +1,52 @@
-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
    * @return {Object}
    * @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
@@ -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 = '<div>Some</div> text <div>here </div>';
+        obj = ComponentLink.isComponent(aEl);
+        expect(obj).toEqual({type: 'link'});
+      });
+
+      it('Component parse link element with only not text content', () => {
+        aEl.innerHTML = `<div>Some</div>
+        <div>text</div>
+        <div>here </div>`;
+        obj = ComponentLink.isComponent(aEl);
+        expect(obj).toEqual({type: 'link', editable: 0});
+      });
+
+      it('Link element with only an image inside is not editable', () => {
+        aEl.innerHTML = '<img src="##"/>';
+        obj = ComponentLink.isComponent(aEl);
+        expect(obj).toEqual({type: 'link', editable: 0});
+      });
+
     });
 
     describe('Map Component', () => {