Add first contenteditable tests

Author: marijnh

src/input/ContentEditableInput.js

@@ -34,9 +34,7 @@ export default class ContentEditableInput {
     on(div, "paste", e => {
       if (signalDOMEvent(cm, e) || handlePaste(e, cm)) return
       // IE doesn't fire input events, so we schedule a read for the pasted content in this way
-      if (ie_version <= 11) setTimeout(operation(cm, () => {
-        if (!input.pollContent()) regChange(cm)
-      }), 20)
+      if (ie_version <= 11) setTimeout(operation(cm, () => this.updateFromDOM()), 20)
     })
 
     on(div, "compositionstart", e => {
@@ -303,7 +301,7 @@ export default class ContentEditableInput {
     if (!this.composing) return
     clearTimeout(this.readDOMTimeout)
     this.composing = null
-    if (!this.pollContent()) regChange(this.cm)
+    this.updateFromDOM()
     this.div.blur()
     this.div.focus()
   }
@@ -315,11 +313,15 @@ export default class ContentEditableInput {
         if (this.composing.done) this.composing = null
         else return
       }
-      if (this.cm.isReadOnly() || !this.pollContent())
-        runInOp(this.cm, () => regChange(this.cm))
+      this.updateFromDOM()
     }, 80)
   }
 
+  updateFromDOM() {
+    if (this.cm.isReadOnly() || !this.pollContent())
+      runInOp(this.cm, () => regChange(this.cm))
+  }
+
   setUneditable(node) {
     node.contentEditable = "false"
   }

test/contenteditable_test.js

@@ -0,0 +1,68 @@
+(function() {
+  "use strict";
+
+  namespace = "contenteditable_";
+  var Pos = CodeMirror.Pos
+
+  function findTextNode(dom, text) {
+    if (dom instanceof CodeMirror) dom = dom.getInputField()
+    if (dom.nodeType == 1) {
+      for (var ch = dom.firstChild; ch; ch = ch.nextSibling) {
+        var found = findTextNode(ch, text)
+        if (found) return found
+      }
+    } else if (dom.nodeType == 3 && dom.nodeValue == text) {
+      return dom
+    }
+  }
+
+  function lineElt(node) {
+    for (;;) {
+      var parent = node.parentNode
+      if (/CodeMirror-code/.test(parent.className)) return node
+      node = parent
+    }
+  }
+
+  testCM("insert_text", function(cm) {
+    findTextNode(cm, "foobar").nodeValue = "foo bar"
+    cm.display.input.updateFromDOM()
+    eq(cm.getValue(), "foo bar")
+  }, {inputStyle: "contenteditable", value: "foobar"})
+
+  testCM("split_line", function(cm) {
+    cm.setSelection(Pos(2, 3))
+    var node = findTextNode(cm, "foobar")
+    node.nodeValue = "foo"
+    var lineNode = lineElt(node)
+    lineNode.parentNode.insertBefore(document.createElement("pre"), lineNode.nextSibling).textContent = "bar"
+    cm.display.input.updateFromDOM()
+    eq(cm.getValue(), "one\ntwo\nfoo\nbar\nthree\nfour\n")
+  }, {inputStyle: "contenteditable", value: "one\ntwo\nfoobar\nthree\nfour\n"})
+
+  testCM("join_line", function(cm) {
+    cm.setSelection(Pos(2, 3))
+    var node = findTextNode(cm, "foo")
+    node.nodeValue = "foobar"
+    var lineNode = lineElt(node)
+    lineNode.parentNode.removeChild(lineNode.nextSibling)
+    cm.display.input.updateFromDOM()
+    eq(cm.getValue(), "one\ntwo\nfoobar\nthree\nfour\n")
+  }, {inputStyle: "contenteditable", value: "one\ntwo\nfoo\nbar\nthree\nfour\n"})
+
+  testCM("delete_multiple", function(cm) {
+    cm.setSelection(Pos(1, 3), Pos(4, 0))
+    var text = findTextNode(cm, "two"), startLine = lineElt(text)
+    for (var i = 0; i < 3; i++)
+      startLine.parentNode.removeChild(startLine.nextSibling)
+    text.nodeValue = "twothree"
+    cm.display.input.updateFromDOM()
+    eq(cm.getValue(), "one\ntwothree\nfour\n")
+  }, {inputStyle: "contenteditable", value: "one\ntwo\nfoo\nbar\nthree\nfour\n"})
+
+  testCM("force_redraw", function(cm) {
+    findTextNode(cm, "foo").parentNode.appendChild(document.createElement("hr")).className = "inserted"
+    cm.display.input.updateFromDOM()
+    eq(byClassName(cm.getInputField(), "inserted").length, 0)
+  }, {inputStyle: "contenteditable", value: "foo"})
+})();

test/index.html

@@ -103,6 +103,7 @@ <h2>Test Suite</h2>
     <script src="test.js"></script>
     <script src="doc_test.js"></script>
     <script src="multi_test.js"></script>
+    <script src="contenteditable_test.js"></script>
     <script src="scroll_test.js"></script>
     <script src="comment_test.js"></script>
     <script src="search_test.js"></script>