4 files changed, 22 insertions, 5 deletions
diff --git a/src/content/components/content-input.js b/src/content/components/content-input.js
index 0ba4bcb..3e70bbb 100644
--- a/src/content/components/content-input.js
+++ b/src/content/components/content-input.js
@@ -63,6 +63,10 @@ export default class ContentInputComponent {
   fromInput(e) {
     return e.target instanceof HTMLInputElement ||
       e.target instanceof HTMLTextAreaElement ||
-      e.target instanceof HTMLSelectElement;
+      e.target instanceof HTMLSelectElement ||
+      e.target instanceof HTMLElement &&
+      e.target.hasAttribute('contenteditable') && (
+          e.target.getAttribute('contenteditable').toLowerCase() === 'true' ||
+          e.target.getAttribute('contenteditable').toLowerCase() === '');
   }
 }
diff --git a/src/content/components/follow.js b/src/content/components/follow.js
index c87424d..eb453a5 100644
--- a/src/content/components/follow.js
+++ b/src/content/components/follow.js
@@ -4,6 +4,10 @@ import Hint from 'content/hint';
 import HintKeyProducer from 'content/hint-key-producer';
 
 const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';
+const TARGET_SELECTOR = [
+  'a', 'button', 'input', 'textarea',
+  '[contenteditable=true]', '[contenteditable=""]'
+].join(',');
 
 const inWindow = (window, element) => {
   let {
@@ -130,6 +134,9 @@ export default class FollowComponent {
       return element.focus();
     case 'button':
       return element.click();
+    default:
+      // it may contenteditable
+      return element.focus();
     }
   }
 
@@ -154,7 +161,7 @@ export default class FollowComponent {
   }
 
   static getTargetElements(doc) {
-    let all = doc.querySelectorAll('a,button,input,textarea');
+    let all = doc.querySelectorAll(TARGET_SELECTOR);
     let filtered = Array.prototype.filter.call(all, (element) => {
       let style = window.getComputedStyle(element);
       return style.display !== 'none' &&
diff --git a/test/content/components/follow.html b/test/content/components/follow.html
index 6bd8f87..eb0decd 100644
--- a/test/content/components/follow.html
+++ b/test/content/components/follow.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html>
   <body>
-    <a href='#' >link</a>
+    <a id='visible_a' href='#' >link</a>
     <a href='#' style='display:none'>invisible 1</a>
     <a href='#' style='visibility:hidden'>invisible 2</a>
     <i>not link<i>
+    <div id='editable_div_1' contenteditable>link</div>
+    <div id='editable_div_2' contenteditable='true'>link</div>
+    <div id='x' contenteditable='false'>link</div>
   </body>
 </html>
diff --git a/test/content/components/follow.test.js b/test/content/components/follow.test.js
index 9c00c79..5c3e1d5 100644
--- a/test/content/components/follow.test.js
+++ b/test/content/components/follow.test.js
@@ -8,8 +8,11 @@ describe('FollowComponent', () => {
     });
 
     it('returns visible links', () => {
-      let links = FollowComponent.getTargetElements(window.document);
-      expect(links).to.have.lengthOf(1);
+      let targets = FollowComponent.getTargetElements(window.document);
+      expect(targets).to.have.lengthOf(3);
+
+      let ids = Array.prototype.map.call(targets, (e) => e.id);
+      expect(ids).to.include.members(['visible_a', 'editable_div_1', 'editable_div_2']);
     });
   });
 });