Reject Tribute attachment to non-editable elements

README.md

@@ -108,10 +108,10 @@ var tribute = new Tribute({
 Once initialized, Tribute can be attached to an `input`, `textarea`, or an element that supports `contenteditable`.
 
 ```html
-<div id="caaanDo">I'm Mr. Meeseeks, look at me!</div>
+<div id="caaanDo" contenteditable="true">I'm Mr. Meeseeks, look at me!</div>
 
-<div class="mentionable">Some text here.</div>
-<div class="mentionable">Some more text over here.</div>
+<div class="mentionable" contenteditable="true">Some text here.</div>
+<div class="mentionable" contenteditable="true">Some more text over here.</div>
 
 <script>
   tribute.attach(document.getElementById("caaanDo"));

dist/tribute.esm.js

@@ -1570,7 +1570,7 @@ class Tribute {
 
   ensureEditable(element) {
     if (Tribute.inputTypes().indexOf(element.nodeName) === -1) {
-      if (!element.contentEditable) {
+      if (!element.isContentEditable) {
         throw new Error("[Tribute] Cannot bind to " + element.nodeName + ", not contentEditable");
       }
     }

dist/tribute.js

@@ -1417,7 +1417,7 @@
       key: "ensureEditable",
       value: function ensureEditable(element) {
         if (Tribute.inputTypes().indexOf(element.nodeName) === -1) {
-          if (!element.contentEditable) {
+          if (!element.isContentEditable) {
             throw new Error("[Tribute] Cannot bind to " + element.nodeName + ", not contentEditable");
           }
         }

example/tribute.js

@@ -1417,7 +1417,7 @@
       key: "ensureEditable",
       value: function ensureEditable(element) {
         if (Tribute.inputTypes().indexOf(element.nodeName) === -1) {
-          if (!element.contentEditable) {
+          if (!element.isContentEditable) {
             throw new Error("[Tribute] Cannot bind to " + element.nodeName + ", not contentEditable");
           }
         }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tributejs",
   "packageManager": "yarn@4.13.0",
-  "version": "5.1.3",
+  "version": "5.1.4",
   "description": "Native ES6 @mentions",
   "main": "dist/tribute.js",
   "module": "dist/tribute.esm.js",

src/Tribute.js

@@ -254,7 +254,7 @@ class Tribute {
 
   ensureEditable(element) {
     if (Tribute.inputTypes().indexOf(element.nodeName) === -1) {
-      if (!element.contentEditable) {
+      if (!element.isContentEditable) {
         throw new Error("[Tribute] Cannot bind to " + element.nodeName + ", not contentEditable");
       }
     }

test/spec/test.js

@@ -25,6 +25,61 @@ describe("Tribute instantiation", function() {
   });
 });
 
+describe("Tribute attachment eligibility", function() {
+  let container, element, tribute;
+
+  beforeEach(function() {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    element = document.createElement("div");
+    container.appendChild(element);
+    tribute = new Tribute({ values: [] });
+  });
+
+  afterEach(function() {
+    if (element.hasAttribute("data-tribute")) tribute.detach(element);
+    container.remove();
+  });
+
+  it("rejects a plain non-editable div", function() {
+    expect(() => tribute.attach(element)).toThrowError(
+      "[Tribute] Cannot bind to DIV, not contentEditable"
+    );
+    expect(element.hasAttribute("data-tribute")).toBe(false);
+  });
+
+  it("rejects explicit non-editability inside an editable parent", function() {
+    container.contentEditable = "true";
+    element.contentEditable = "false";
+    expect(() => tribute.attach(element)).toThrowError(
+      "[Tribute] Cannot bind to DIV, not contentEditable"
+    );
+    expect(element.hasAttribute("data-tribute")).toBe(false);
+  });
+
+  it("accepts an explicitly editable div", function() {
+    element.contentEditable = "true";
+    tribute.attach(element);
+    expect(element.hasAttribute("data-tribute")).toBe(true);
+  });
+
+  it("accepts editability inherited from a parent", function() {
+    container.contentEditable = "true";
+    tribute.attach(element);
+    expect(element.hasAttribute("data-tribute")).toBe(true);
+  });
+
+  ["input", "textarea"].forEach(tag => {
+    it(`accepts ${tag} without contenteditable`, function() {
+      element.remove();
+      element = document.createElement(tag);
+      container.appendChild(element);
+      tribute.attach(element);
+      expect(element.hasAttribute("data-tribute")).toBe(true);
+    });
+  });
+});
+
 describe("Tribute @mentions cases", function() {
   afterEach(function() {
     clearDom();
@@ -797,4 +852,4 @@ describe("Tribute loadingItemTemplate", function() {
       }, 1000);
     });
   });
-});
+});