Make inputStyle an option, move relevant logic into TextareaInput
Add a dummy ContentEditableInput

Add a dummy ContentEditableInput
Wire up some actual logic to ContentEditableInput
Simple things work.
codemirror · marijnh · marijnh · marijnh · marijnh · marijnh
diff --git a/addon/edit/matchbrackets.js b/addon/edit/matchbrackets.js
@@ -81,7 +81,7 @@
     if (marks.length) {
       // Kludge to work around the IE bug from issue #1193, where text
       // input stops going to the textare whever this fires.
-      if (ie_lt8 && cm.state.focused) cm.display.input.focus();
+      if (ie_lt8 && cm.state.focused) cm.focus();
 
       var clear = function() {
         cm.operation(function() {
diff --git a/bin/release b/bin/release
@@ -42,5 +42,5 @@ rewrite("doc/compress.html", function(cmp) {
 
 rewrite("index.html", function(index) {
   return index.replace(/\.zip">\d+\.\d+<\/a>/,
-                       ".zip>" + simple + "</a>");
+                       ".zip\">" + simple + "</a>");
 });
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "codemirror",
-  "version":"4.13.0",
+  "version":"5.0.0",
   "main": ["lib/codemirror.js", "lib/codemirror.css"],
   "ignore": [
     "**/.*",
diff --git a/doc/compress.html b/doc/compress.html
@@ -36,6 +36,7 @@
       <input type="hidden" id="download" name="download" value="codemirror-compressed.js"/>
       <p>Version: <select id="version" onchange="setVersion(this);" style="padding: 1px;">
         <option value="http://codemirror.net/">HEAD</option>
+        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=5.0.0;f=">5.0</option>
         <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=4.13.0;f=">4.13</option>
         <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=4.12.0;f=">4.12</option>
         <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=4.11.0;f=">4.11</option>
diff --git a/doc/manual.html b/doc/manual.html
@@ -63,7 +63,7 @@
 <section class=first id=overview>
     <h2 style="position: relative">
       User manual and reference guide
-      <span style="color: #888; font-size: 1rem; position: absolute; right: 0; bottom: 0">version 4.13.0</span>
+      <span style="color: #888; font-size: 1rem; position: absolute; right: 0; bottom: 0">version 5.0.0</span>
     </h2>
 
     <p>CodeMirror is a code-editor component that can be embedded in
@@ -333,6 +333,17 @@ <h3 id=modloader>Module loaders</h3>
       option is set to true, it will be covered by an element with
       class <code>CodeMirror-gutter-filler</code>.</dd>
 
+      <dt id="option_inputStyle"><code><strong>inputStyle</strong>: string</code></dt>
+      <dd>Selects the way CodeMirror handles input and focus. The core
+      library defines the <code>"textarea"</code>
+      and <code>"contenteditable"</code> input models. On mobile
+      browsers, the default is <code>"contenteditable"</code>. On
+      desktop browsers, the default is <code>"textarea"</code>.
+      Support for IME and screen readers is better in
+      the <code>"contenteditable"</code> model. The intention is to
+      make it the default on modern desktop browsers in the
+      future.</dd>
+
       <dt id="option_readOnly"><code><strong>readOnly</strong>: boolean|string</code></dt>
       <dd>This disables editing of the editor content by the user. If
       the special value <code>"nocursor"</code> is given (instead of
@@ -1965,8 +1976,11 @@ <h3 id="api_misc">Miscellaneous methods</h3>
       <dt id="focus"><code><strong>cm.focus</strong>()</code></dt>
       <dd>Give the editor focus.</dd>
 
-      <dt id="getInputField"><code><strong>cm.getInputField</strong>() → TextAreaElement</code></dt>
-      <dd>Returns the hidden textarea used to read input.</dd>
+      <dt id="getInputField"><code><strong>cm.getInputField</strong>() → Element</code></dt>
+      <dd>Returns the input field for the editor. Will be a textarea
+      or an editable div, depending on the value of
+      the <a href="#option_inputStyle"><code>inputStyle</code></a>
+      option.</dd>
       <dt id="getWrapperElement"><code><strong>cm.getWrapperElement</strong>() → Element</code></dt>
       <dd>Returns the DOM node that represents the editor, and
       controls its size. Remove this from your tree to delete an
diff --git a/doc/releases.html b/doc/releases.html
@@ -29,6 +29,16 @@
 
   <h2>Version 4.x</h2>
 
+  <p class="rel">20-02-2015: <a href="http://codemirror.net/codemirror-5.0.zip">Version 5.0</a>:</p>
+
+  <ul class="rel-note">
+    <li>Experimental mobile support (tested on iOS, Android Chrome, stock Android browser)</li>
+    <li>New option <a href="manual.html#option_inputStyle"><code>inputStyle</code></a> to switch between hidden textarea and contenteditable input.</li>
+    <li>The <a href="manual.html#getInputField"><code>getInputField</code></a>
+    method is no longer guaranteed to return a textarea.</li>
+    <li>Full <a href="https://github.com/codemirror/CodeMirror/compare/4.12.0...4.13.0">list of patches</a>.</li>
+  </ul>
+
   <p class="rel">20-02-2015: <a href="http://codemirror.net/codemirror-4.13.zip">Version 4.13</a>:</p>
 
   <ul class="rel-note">
diff --git a/index.html b/index.html
@@ -96,7 +96,7 @@
       </div>
     </div>
     <div class=actionsleft>
-      Get the current version: <a href="http://codemirror.net/codemirror.zip>4.13</a>.<br>
+      Get the current version: <a href="http://codemirror.net/codemirror.zip">5.0</a>.<br>
       You can see the <a href="https://github.com/codemirror/codemirror" title="Github repository">code</a> or<br>
       read the <a href="doc/releases.html">release notes</a>.<br>
       There is a <a href="doc/compress.html">minification helper</a>.
@@ -188,9 +188,9 @@
     <tr><th style="padding-right: 1em;">Internet Explorer</th><td>version 8 and up</td></tr>
     <tr><th>Opera</th><td>version 9 and up</td></tr>
   </table>
-  <p>Modern mobile browsers tend to partly work. Bug reports and
-  patches for mobile support are welcome, but the maintainer does not
-  have the time or budget to actually work on it himself.</p>
+  <p>Support for modern mobile browsers is experimental. Recent
+  versions of the iOS browser and Chrome on Android should work
+  pretty well.</p>
 </section>
 
 </article>
diff --git a/lib/codemirror.css b/lib/codemirror.css
@@ -4,6 +4,7 @@
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   height: 300px;
+  color: black;
 }
 
 /* PADDING */
@@ -139,11 +140,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
    the editor. You probably shouldn't touch them. */
 
 .CodeMirror {
-  line-height: 1;
   position: relative;
   overflow: hidden;
   background: white;
-  color: black;
 }
 
 .CodeMirror-scroll {
@@ -215,6 +214,11 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   cursor: default;
   z-index: 4;
 }
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
 .CodeMirror-lines {
   cursor: text;
@@ -235,6 +239,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   z-index: 2;
   position: relative;
   overflow: visible;
+  -webkit-tap-highlight-color: transparent;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -256,6 +261,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
+.CodeMirror-code {
+  outline: none;
+}
+
 .CodeMirror-measure {
   position: absolute;
   width: 100%;
@@ -283,6 +292,8 @@ div.CodeMirror-cursors {
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 .CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror ::selection { background: #d7d4f0; }
+.CodeMirror ::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {
   background: #ffa;