Permalink
Browse files

Merge remote-tracking branch 'upstream/master' into pflynn/merge-upst…

…ream-sprint-11

* upstream/master: (52 commits)
  use default cursor on gutter text
  Add Brackets to real-world uses
  Re-sort real-world uses by sexiness
  Add Light Table and prose.io to real-world uses
  treat mac+ctrl+click as right-click
  #589 Address problems with improper identification of tag to be closed following a void tag.
  Make multiplexing mode combinator more powerful
  [clike mode] Add support for builtins, extend c# mode
  Fix fullscreen demo for new scrolling model
  Add multiplexer demo to front page
  Mark release 2.3
  Fix description in demo/multiplex.html
  Fix mistake in getScrollInfo
  Added more readable selection color.
  Make themes lesse-dark and ambiance *less big* when switching between themes.
  Add visible selection color.
  Add getScrollInfo() method
  Add vibrant-ink theme
  Accept namespaces in XML tag folder
  Fix typo in manual section id
  ...

Conflicts:
	lib/codemirror.js
  • Loading branch information...
2 parents 9fa9ea7 + 09f4659 commit d93521f8f59c7bac6fe9b53825b3a3d34391e6a6 @peterflynn peterflynn committed Jun 27, 2012
View
@@ -1,6 +1,8 @@
# CodeMirror 2
-CodeMirror 2 is a rewrite of [CodeMirror
-1](http://github.com/marijnh/CodeMirror). The docs live
-[here](http://codemirror.net/doc/manual.html), and the project page is
-[http://codemirror.net/](http://codemirror.net/).
+CodeMirror is a JavaScript component that provides a code editor in
+the browser. When a mode is available for the language you are coding
+in, it will color your code, and optionally help with indentation.
+
+The project page is http://codemirror.net
+The manual is at http://codemirror.net/doc/manual.html
View
@@ -9,20 +9,13 @@
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
- .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
- .CodeMirror-fullscreen {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
- margin: 0;
- padding: 0;
- border: 0px solid #BBBBBB;
- opacity: 1;
- }
+ .CodeMirror-fullscreen {
+ display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%;
+ z-index: 9999;
+ }
</style>
</head>
<body>
@@ -109,44 +102,45 @@ <h1>CodeMirror: Full Screen Editing</h1>
</dl></dd>
</textarea></form>
- <script>
+ <script>
+ function isFullScreen(cm) {
+ return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
+ }
+ function winHeight() {
+ return window.innerHeight || (document.documentElement || document.body).clientHeight;
+ }
+ function setFullScreen(cm, full) {
+ var wrap = cm.getWrapperElement(), scroll = cm.getScrollerElement();
+ if (full) {
+ wrap.className += " CodeMirror-fullscreen";
+ scroll.style.height = winHeight() + "px";
+ document.documentElement.style.overflow = "hidden";
+ } else {
+ wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
+ scroll.style.height = "";
+ document.documentElement.style.overflow = "";
+ }
+ cm.refresh();
+ }
+ CodeMirror.connect(window, "resize", function() {
+ var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
+ if (!showing) return;
+ showing.CodeMirror.getScrollerElement().style.height = winHeight() + "px";
+ });
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
- lineNumbers: true,
- theme: "night",
- extraKeys: {
- "F11": function() {
- var scroller = editor.getScrollerElement();
- if (scroller.className.search(/\bCodeMirror-fullscreen\b/) === -1) {
- scroller.className += " CodeMirror-fullscreen";
- scroller.style.height = "100%";
- scroller.style.width = "100%";
- editor.refresh();
- } else {
- scroller.className = scroller.className.replace(" CodeMirror-fullscreen", "");
- scroller.style.height = '';
- scroller.style.width = '';
- editor.refresh();
- }
- },
- "Esc": function() {
- var scroller = editor.getScrollerElement();
- if (scroller.className.search(/\bCodeMirror-fullscreen\b/) !== -1) {
- scroller.className = scroller.className.replace(" CodeMirror-fullscreen", "");
- scroller.style.height = '';
- scroller.style.width = '';
- editor.refresh();
- }
- }
+ lineNumbers: true,
+ theme: "night",
+ extraKeys: {
+ "F11": function(cm) {
+ setFullScreen(cm, !isFullScreen(cm));
+ },
+ "Esc": function(cm) {
+ if (isFullScreen(cm)) setFullScreen(cm, false);
}
+ }
});
-
-</script>
+ </script>
<p>Press <strong>F11</strong> when cursor is in the editor to toggle full screen editing. <strong>Esc</strong> can also be used to <i>exit</i> full screen editing.</p>
-
- <p><strong>Note:</strong> Does not currently work correctly in IE
- 6 and 7, where setting the height of something
- to <code>100%</code> doesn't make it full screen.</p>
-
</body>
</html>
View
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+ <head>
+ <title>CodeMirror: Multiplexing Parser Demo</title>
+ <link rel="stylesheet" href="../lib/codemirror.css">
+ <script src="../lib/codemirror.js"></script>
+ <script src="../lib/util/multiplex.js"></script>
+ <script src="../mode/xml/xml.js"></script>
+ <link rel="stylesheet" href="../doc/docs.css">
+
+ <style type="text/css">
+ .CodeMirror {border: 1px solid black;}
+ .cm-delimit {color: #fa4;}
+ </style>
+ </head>
+ <body>
+ <h1>CodeMirror: Multiplexing Parser Demo</h1>
+
+ <form><textarea id="code" name="code">
+<html>
+ <body style="<<magic>>">
+ <h1><< this is not <html >></h1>
+ <<
+ multiline
+ not html
+ at all : &amp;amp; <link/>
+ >>
+ <p>this is html again</p>
+ </body>
+</html>
+</textarea></form>
+
+ <script>
+CodeMirror.defineMode("demo", function(config) {
+ return CodeMirror.multiplexingMode(
+ CodeMirror.getMode(config, "text/html"),
+ {open: "<<", close: ">>",
+ mode: CodeMirror.getMode(config, "text/plain"),
+ delimStyle: "delimit"}
+ // .. more multiplexed styles can follow here
+ );
+});
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+ mode: "demo",
+ lineNumbers: true,
+ lineWrapping: true
+});
+</script>
+
+ <p>Demonstration of a multiplexing mode, which, at certain
+ boundary strings, switches to one or more inner modes. The out
+ (HTML) mode does not get fed the content of the <code>&lt;&lt;
+ >></code> blocks. See
+ the <a href="../doc/manual.html#util_multiplex">manual</a> and
+ the <a href="../lib/util/multiplex.js">source</a> for more
+ information.</p>
+
+ </body>
+</html>
View
@@ -42,7 +42,7 @@ <h1>{{title}}</h1>
return null;
}
};
- return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
+ return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
</script>
View
@@ -16,11 +16,12 @@
<link rel="stylesheet" href="../theme/xq-dark.css">
<link rel="stylesheet" href="../theme/ambiance.css">
<link rel="stylesheet" href="../theme/blackboard.css">
+ <link rel="stylesheet" href="../theme/vibrant-ink.css">
<script src="../mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
- .CodeMirror {border: 1px solid black;}
+ .CodeMirror {border: 1px solid black; font-size:13px}
</style>
</head>
<body>
@@ -53,6 +54,7 @@ <h1>CodeMirror: Theme demo</h1>
<option>neat</option>
<option>night</option>
<option>rubyblue</option>
+ <option>vibrant-ink</option>
<option>xq-dark</option>
</select>
</p>
View
@@ -27,6 +27,7 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<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/codemirror2?a=blob_plain;hb=v2.3;f=">2.3</option>
<option value="http://marijnhaverbeke.nl/git/codemirror2?a=blob_plain;hb=v2.25;f=">2.25</option>
<option value="http://marijnhaverbeke.nl/git/codemirror2?a=blob_plain;hb=v2.24;f=">2.24</option>
<option value="http://marijnhaverbeke.nl/git/codemirror2?a=blob_plain;hb=v2.23;f=">2.23</option>
View
@@ -441,8 +441,7 @@ <h2 id="styling">Customized Styling</h2>
by <code>pre</code> elements. By default no text styling (such as
bold) that might change line height is applied. If you do want
such effects, you'll have to give <code>CodeMirror pre</code> a
- fixed height. Also, you must still take care that character width
- is constant.</p>
+ fixed height.</p>
<p>If your page's style sheets do funky things to
all <code>div</code> or <code>pre</code> elements (you probably
@@ -487,6 +486,10 @@ <h2 id="api">Programming API</h2>
<dd>Scroll the editor to a given (pixel) position. Both
arguments may be left as <code>null</code>
or <code>undefined</code> to have no effect.</dd>
+ <dt id="getScrollInfo"><code>getScrollInfo()</code></dt>
+ <dd>Get an <code>{x, y, width, height}</code> object that
+ represents the current scroll position and scrollable area size
+ of the editor.</dd>
<dt id="setOption"><code>setOption(option, value)</code></dt>
<dd>Change the configuration of the editor. <code>option</code>
@@ -535,7 +538,7 @@ <h2 id="api">Programming API</h2>
<dt id="getTokenAt"><code>getTokenAt(pos) → object</code></dt>
<dd>Retrieves information about the token the current mode found
- at the given position (a <code>{line, ch}</code> object). The
+ before the given position (a <code>{line, ch}</code> object). The
returned object has the following properties:
<dl>
<dt><code>start</code></dt><dd>The character (on the given line) at which the token starts.</dd>
@@ -821,6 +824,31 @@ <h2 id="addons">Add-ons</h2>
actually opening an editor instance.
See <a href="../demo/runmode.html">the demo</a> for an
example.</dd>
+ <dt id="util_overlay"><a href="../lib/util/overlay.js"><code>overlay.js</code></a></dt>
+ <dd>Mode combinator that can be used to extend a mode with an
+ 'overlay' — a secondary mode is run over the stream, along with
+ the base mode, and can color specific pieces of text without
+ interfering with the base mode.
+ Defines <code>CodeMirror.overlayMode</code>, which is used to
+ create such a mode. See <a href="../demo/mustache.html">this
+ demo</a> for a detailed example.</dd>
+ <dt id="util_multiplex"><a href="../lib/util/multiplex.js"><code>multiplex.js</code></a></dt>
+ <dd>Mode combinator that can be used to easily 'multiplex'
+ between several modes.
+ Defines <code>CodeMirror.multiplexingMode</code> which, when
+ given as first argument a mode object, and as other arguments
+ any number of <code>{open, close, mode [, delimStyle]}</code>
+ objects, will return a mode object that starts parsing using the
+ mode passed as first argument, but will switch to another mode
+ as soon as it encounters a string that occurs in one of
+ the <code>open</code> fields of the passed objects. When in a
+ sub-mode, it will go back to the top mode again when
+ the <code>close</code> string is encountered.
+ When <code>delimStyle</code> is specified, it will be the token
+ style returned for the delimiter tokens. The outer mode will not
+ see the content between the delimiters.
+ See <a href="../demo/multiplex.html">this demo</a> for an
+ example.</dd>
<dt id="util_simple-hint"><a href="../lib/util/simple-hint.js"><code>simple-hint.js</code></a></dt>
<dd>Provides a framework for showing autocompletion hints.
Defines <code>CodeMirror.simpleHint</code>, which takes a
View
@@ -16,6 +16,22 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
</pre>
+ <p class="rel">26-09-2011: <a href="http://codemirror.net/codemirror-2.15.zip">Version 2.15</a>:</p>
+ <p class="rel-note">Fix bug that snuck into 2.14: Clicking the
+ character that currently has the cursor didn't re-focus the
+ editor.</p>
+
+ <p class="rel">26-09-2011: <a href="http://codemirror.net/codemirror-2.14.zip">Version 2.14</a>:</p>
+ <ul class="rel-note">
+ <li>Add <a href="../mode/clojure/index.html">Clojure</a>, <a href="../mode/pascal/index.html">Pascal</a>, <a href="../mode/ntriples/index.html">NTriples</a>, <a href="../mode/jinja2/index.html">Jinja2</a>, and <a href="../mode/markdown/index.html">Markdown</a> modes.</li>
+ <li>Add <a href="../theme/cobalt.css">Cobalt</a> and <a href="../theme/eclipse.css">Eclipse</a> themes.</li>
+ <li>Add a <a href="manual.html#option_fixedGutter"><code>fixedGutter</code></a> option.</li>
+ <li>Fix bug with <code>setValue</code> breaking cursor movement.</li>
+ <li>Make gutter updates much more efficient.</li>
+ <li>Allow dragging of text out of the editor (on modern browsers).</li>
+ </ul>
+
+
<p class="rel">23-08-2011: <a href="http://codemirror.net/codemirror-2.13.zip">Version 2.13</a>:</p>
<ul class="rel-note">
<li>Add <a href="../mode/ruby/index.html">Ruby</a>, <a href="../mode/r/index.html">R</a>, <a href="../mode/coffeescript/index.html">CoffeeScript</a>, and <a href="../mode/velocity/index.html">Velocity</a> modes.</li>
View
@@ -87,9 +87,10 @@ <h2 style="margin-top: 0">Usage demos:</h2>
<ul>
<li><a href="demo/complete.html">Autocompletion</a></li>
- <li><a href="demo/mustache.html">Mode overlays</a></li>
<li><a href="demo/search.html">Search/replace</a></li>
<li><a href="demo/folding.html">Code folding</a></li>
+ <li><a href="demo/mustache.html">Mode overlays</a></li>
+ <li><a href="demo/multiplex.html">Mode multiplexer</a></li>
<li><a href="demo/preview.html">HTML editor with preview</a></li>
<li><a href="demo/resize.html">Auto-resizing editor</a></li>
<li><a href="demo/marker.html">Setting breakpoints</a></li>
@@ -111,25 +112,27 @@ <h2>Real-world uses:</h2>
<ul>
<li><a href="http://jsbin.com">jsbin.com</a> (JS playground)</li>
- <li><a href="http://buzzard.ups.edu/">Sage demo</a> (math system)</li>
- <li><a href="http://www.sourcelair.com/">sourceLair</a> (online IDE)</li>
- <li><a href="http://eloquentjavascript.net/chapter1.html">Eloquent JavaScript</a> (book)</a></li>
+ <li><a href="http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/">Light Table</a> (experimental IDE)</li>
+ <li><a href="http://brackets.io">Adobe Brackets</a> (code editor)</li>
<li><a href="http://www.mergely.com/">Mergely</a> (interactive diffing)</li>
+ <li><a href="https://developers.google.com/apps-script/guide">Google Docs script editor</a></li>
+ <li><a href="http://eloquentjavascript.net/chapter1.html">Eloquent JavaScript</a> (book)</a></li>
<li><a href="http://paperjs.org/">Paper.js</a> (graphics scripting)</li>
+ <li><a href="http://tour.golang.org">Go language tour</a></li>
+ <li><a href="http://enjalot.com/tributary/2636296/sinwaves.js">Tributary</a> (augmented editing)</li>
+ <li><a href="http://prose.io/">Prose.io</a> (github content editor)</li>
<li><a href="http://www.wescheme.org/">WeScheme</a> (learning tool)</li>
<li><a href="http://webglplayground.net/">WebGL playground</a></li>
<li><a href="http://ql.io/">ql.io</a> (http API query helper)</li>
<li><a href="http://elm-lang.org/Examples.elm">Elm language examples</a></li>
+ <li><a href="https://thefiletree.com">The File Tree</a> (collab editor)</li>
<li><a href="http://bluegriffon.org/">BlueGriffon</a> (HTML editor)</li>
<li><a href="http://www.jshint.com/">JSHint</a> (JS linter)</li>
<li><a href="http://kl1p.com/cmtest/1">kl1p</a> (paste service)</li>
<li><a href="http://sqlfiddle.com">SQLFiddle</a> (SQL playground)</li>
- <li><a href="http://tour.golang.org">Go language tour</a></li>
<li><a href="http://cssdeck.com/">CSSDeck</a> (CSS showcase)</li>
<li><a href="http://www.ckwnc.com/">CKWNC</a> (UML editor)</li>
<li><a href="http://www.sketchpatch.net/labs/livecodelabIntro.html">sketchPatch Livecodelab</a></li>
- <li><a href="https://thefiletree.com">The File Tree</a> (collab editor)</li>
- <li><a href="http://enjalot.com/tributary/2636296/sinwaves.js">Tributary</a> (augmented editing)</li>
</ul>
</div></div>
@@ -250,6 +253,18 @@ <h2>Reading material</h2>
<h2>Releases</h2>
+ <p class="rel">22-06-2012: <a href="http://codemirror.net/codemirror-2.3.zip">Version 2.3</a>:</p>
+
+ <ul class="rel-note">
+ <li><strong>New scrollbar implementation</strong>. Should flicker less. Changes DOM structure of the editor.</li>
+ <li>New theme: <a href="demo/theme.html?vibrant-ink">vibrant-ink</a>.</li>
+ <li>Many extensions to the VIM keymap (including text objects).</li>
+ <li>Add <a href="demo/multiplex.html">mode-multiplexing</a> utility script.</li>
+ <li>Fix bug where right-click paste works in read-only mode.</li>
+ <li>Add a <a href="doc/manual.html#getScrollInfo"><code>getScrollInfo</code></a> method.</li>
+ <li>Lots of other <a href="https://github.com/marijnh/CodeMirror2/compare/v2.25...v2.3">fixes</a>.</li>
+ </ul>
+
<p class="rel">23-05-2012: <a href="http://codemirror.net/codemirror-2.25.zip">Version 2.25</a>:</p>
<ul class="rel-note">
@@ -389,21 +404,6 @@ <h2>Releases</h2>
<li>Fix editing code with tabs in Internet Explorer.</li>
</ul>
- <p class="rel">26-09-2011: <a href="http://codemirror.net/codemirror-2.15.zip">Version 2.15</a>:</p>
- <p class="rel-note">Fix bug that snuck into 2.14: Clicking the
- character that currently has the cursor didn't re-focus the
- editor.</p>
-
- <p class="rel">26-09-2011: <a href="http://codemirror.net/codemirror-2.14.zip">Version 2.14</a>:</p>
- <ul class="rel-note">
- <li>Add <a href="mode/clojure/index.html">Clojure</a>, <a href="mode/pascal/index.html">Pascal</a>, <a href="mode/ntriples/index.html">NTriples</a>, <a href="mode/jinja2/index.html">Jinja2</a>, and <a href="mode/markdown/index.html">Markdown</a> modes.</li>
- <li>Add <a href="theme/cobalt.css">Cobalt</a> and <a href="theme/eclipse.css">Eclipse</a> themes.</li>
- <li>Add a <a href="doc/manual.html#option_fixedGutter"><code>fixedGutter</code></a> option.</li>
- <li>Fix bug with <code>setValue</code> breaking cursor movement.</li>
- <li>Make gutter updates much more efficient.</li>
- <li>Allow dragging of text out of the editor (on modern browsers).</li>
- </ul>
-
<p><a href="doc/oldrelease.html">Older releases...</a></p>
</div></div>
Oops, something went wrong.

0 comments on commit d93521f

Please sign in to comment.