Skip to content
Browse files

Add examples to v3 upgrade guide

  • Loading branch information...
1 parent a7c53fd commit 99ed2b4f2676553422d24fecb4ea2e0b3953130e @marijnh marijnh committed
Showing with 54 additions and 3 deletions.
  1. +54 −3 doc/upgrade_v3.html
57 doc/upgrade_v3.html
@@ -35,9 +35,9 @@ <h2 id=dom>DOM structure</h2>
structure of the editor has changed quite a lot, mostly to implement a
new scrolling model.</p>
-<p>Editor height is now set on the outer wrapper (CSS
-class <code>CodeMirror</code>) element, not on the scroller
-(<code>CodeMirror-scroll</code>) element.</p>
+<p>Editor height is now set on the outer wrapper element (CSS
+class <code>CodeMirror</code>), not on the scroller element
<p>Other nodes were moved, dropped, and added. If you have any code
that makes assumptions about the internal DOM structure of the editor,
@@ -64,6 +64,22 @@ <h2 id=gutters>Gutter model</h2>
The <code>fixedGutter</code> option was removed (since it is now the
only behavior).</p>
+ /* Define a gutter style */
+ .note-gutter { width: 3em; background: cyan; }
+ // Create an instance with two gutters -- line numbers and notes
+ var cm = new CodeMirror(document.body, {
+ gutters: ["note-gutter", "CodeMirror-linenumbers"],
+ lineNumbers: true
+ });
+ // Add a note to line 0
+ cm.setGutterMarker(0, "note-gutter", document.createTextNode("hi"));
<h2 id=events>Event handling</h2>
<p>Most of the <code>onXYZ</code> options have been removed. The same
@@ -78,6 +94,12 @@ <h2 id=events>Event handling</h2>
which act more as hooks than as event handlers, are still there in
their old form.)</p>
+cm.on("change", function(cm, change) {
+ console.log("something changed! (" + change.origin + ")");
<h2 id=marktext>markText method arguments</h2>
<p>The <a href="manual.html#markText"><code>markText</code></a> method
@@ -86,6 +108,15 @@ <h2 id=marktext>markText method arguments</h2>
takes the CSS class name as a separate argument, but makes it an
optional field in the options object instead.</p>
+// Style first ten lines, and forbid the cursor from entering them
+cm.markText({line: 0, ch: 0}, {line: 10, ch: 0}, {
+ className: "magic-text",
+ inclusiveLeft: true,
+ atomic: true
<h2 id=folding>Line folding</h2>
<p>The interface for hiding lines has been
@@ -95,6 +126,19 @@ <h2 id=folding>Line folding</h2>
<p>The <a href="../demo/folding.html">folding script</a> has been
updated to use the new interface, and should now be more robust.</p>
+// Fold a range, replacing it with the text "??"
+var range = cm.markText({line: 4, ch: 2}, {line: 8, ch: 1}, {
+ replacedWith: document.createTextNode("??"),
+ // Auto-unfold when cursor moves into the range
+ clearOnEnter: true
+// Get notified when auto-unfolding
+CodeMirror.on(range, "clear", function() {
+ console.log("boom");
<h2 id=lineclass>Line CSS classes</h2>
<p>The <code>setLineClass</code> method has been replaced
@@ -102,6 +146,13 @@ <h2 id=lineclass>Line CSS classes</h2>
and <a href="manual.html#removeLineClass"><code>removeLineClass</code></a>,
which allow more modular control over the classes attached to a line.</p>
+var marked = cm.addLineClass(10, "background", "highlighted-line");
+setTimeout(function() {
+ cm.removeLineClass(marked, "background", "highlighted-line");
<h2 id=positions>Position properties</h2>
<p>All methods that take or return objects that represent screen

0 comments on commit 99ed2b4

Please sign in to comment.
Something went wrong with that request. Please try again.