90 changes: 42 additions & 48 deletions demo/fullscreen.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion demo/multiplex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h1>CodeMirror: Multiplexing Parser Demo</h1>

<form><textarea id="code" name="code">
<html>
<body>
<body style="<<magic>>">
<h1><< this is not <html >></h1>
<<
multiline
Expand Down
3 changes: 2 additions & 1 deletion demo/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ <h1>CodeMirror: Search/Replace Demo</h1>
<dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd>
</dl>
<p>Searching is enabled by
including <a href="../lib/util/search.js">lib/util/search.js</a>.
including <a href="../lib/util/search.js">lib/util/search.js</a>
and <a href="../lib/util/searchcursor.js">lib/util/searchcursor.js</a>.
For good-looking input dialogs, you also want to include
<a href="../lib/util/dialog.js">lib/util/dialog.js</a>
and <a href="../lib/util/dialog.css">lib/util/dialog.css</a>.</p>
Expand Down
2 changes: 2 additions & 0 deletions demo/vim.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
<script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script>
<script src="../keymap/vim.js"></script>
<script src="../lib/util/dialog.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<link rel="stylesheet" href="../lib/util/dialog.css">

<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
Expand Down
70 changes: 70 additions & 0 deletions demo/xmlcomplete.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<title>CodeMirror: XML Autocomplete Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../lib/util/simple-hint.js"></script>
<link rel="stylesheet" href="../lib/util/simple-hint.css">
<script src="../lib/util/closetag.js"></script>
<script src="../lib/util/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">.CodeMirror {border: 1px solid #eee;} .CodeMirror-scroll { height: 100% }</style>
</head>
<body>
<h1>CodeMirror: XML Autocomplete demo</h1>

<form><textarea id="code" name="code"></textarea></form>

<p>Type '&lt;' or space inside tag or
press <strong>ctrl-space</strong> to activate autocompletion. See
the code (<a href="../lib/util/simple-hint.js">here</a>
and <a href="../lib/util/xml-hint.js">here</a>) to figure out how
it works.</p>

<script>
CodeMirror.xmlHints['<'] = [
'levelTop',
'levelRoot',
'mainLevel'
];

CodeMirror.xmlHints['<levelTop '] =
CodeMirror.xmlHints['<levelRoot '] =
CodeMirror.xmlHints['<mainLevel '] = [
'property1111',
'property2222'
];

CodeMirror.xmlHints['<levelTop><'] =
CodeMirror.xmlHints['<levelRoot><'] =
CodeMirror.xmlHints['<mainLevel><'] = [
'second',
'two'
];

CodeMirror.xmlHints['<levelTop><second '] = [
'secondProperty'
];

CodeMirror.xmlHints['<levelTop><second><'] = [
'three',
'x-three'
];

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
value: '',
mode: 'text/html',
lineNumbers: true,
extraKeys: {
"'>'": function(cm) { cm.closeTag(cm, '>'); },
"'/'": function(cm) { cm.closeTag(cm, '/'); },
"' '": function(cm) { CodeMirror.xmlHint(cm, ' '); },
"'<'": function(cm) { CodeMirror.xmlHint(cm, '<'); },
"Ctrl-Space": function(cm) { CodeMirror.xmlHint(cm, ''); }
}
});
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions doc/compress.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.31;f=">2.31</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>
Expand Down Expand Up @@ -64,6 +65,7 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<option value="http://codemirror.net/mode/go/go.js">go.js</option>
<option value="http://codemirror.net/mode/groovy/groovy.js">groovy.js</option>
<option value="http://codemirror.net/mode/haskell/haskell.js">haskell.js</option>
<option value="http://codemirror.net/mode/haxe/haxe.js">haxe.js</option>
<option value="http://codemirror.net/mode/htmlembedded/htmlembedded.js">htmlembedded.js</option>
<option value="http://codemirror.net/mode/htmlmixed/htmlmixed.js">htmlmixed.js</option>
<option value="http://codemirror.net/mode/javascript/javascript.js">javascript.js</option>
Expand All @@ -73,6 +75,7 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<option value="http://codemirror.net/mode/markdown/markdown.js">markdown.js</option>
<option value="http://codemirror.net/mode/mysql/mysql.js">mysql.js</option>
<option value="http://codemirror.net/mode/ntriples/ntriples.js">ntriples.js</option>
<option value="http://codemirror.net/mode/ocaml/ocaml.js">ocaml.js</option>
<option value="http://codemirror.net/mode/pascal/pascal.js">pascal.js</option>
<option value="http://codemirror.net/mode/perl/perl.js">perl.js</option>
<option value="http://codemirror.net/mode/php/php.js">php.js</option>
Expand All @@ -94,6 +97,7 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
<option value="http://codemirror.net/mode/stex/stex.js">stex.js</option>
<option value="http://codemirror.net/mode/tiddlywiki/tiddlywiki.js">tiddlywiki.js</option>
<option value="http://codemirror.net/mode/tiki/tiki.js">tiki.js</option>
<option value="http://codemirror.net/mode/vb/vb.js">vb.js</option>
<option value="http://codemirror.net/mode/vbscript/vbscript.js">vbscript.js</option>
<option value="http://codemirror.net/mode/velocity/velocity.js">velocity.js</option>
<option value="http://codemirror.net/mode/verilog/verilog.js">verilog.js</option>
Expand All @@ -103,9 +107,11 @@ <h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMi
</optgroup>
<optgroup label="Utilities and add-ons">
<option value="http://codemirror.net/lib/util/overlay.js">overlay.js</option>
<option value="http://codemirror.net/lib/util/multiplex.js">multiplex.js</option>
<option value="http://codemirror.net/lib/util/runmode.js">runmode.js</option>
<option value="http://codemirror.net/lib/util/simple-hint.js">simple-hint.js</option>
<option value="http://codemirror.net/lib/util/javascript-hint.js">javascript-hint.js</option>
<option value="http://codemirror.net/lib/util/xml-hint.js">xml-hint.js</option>
<option value="http://codemirror.net/lib/util/foldcode.js">foldcode.js</option>
<option value="http://codemirror.net/lib/util/dialog.js">dialog.js</option>
<option value="http://codemirror.net/lib/util/search.js">search.js</option>
Expand Down
66 changes: 50 additions & 16 deletions doc/manual.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@ <h2 id="config">Configuration</h2>
<dt id="option_firstLineNumber"><code>firstLineNumber (integer)</code></dt>
<dd>At which number to start counting lines. Default is 1.</dd>

<dt id="option_lineNumberFormatter"><code>lineNumberFormatter (function(integer))</code></dt>
<dd>A function used to format line numbers. The function is passed the current line number. Default prints the line number verbatim.</dd>

<dt id="option_gutter"><code>gutter (boolean)</code></dt>
<dd>Can be used to force a 'gutter' (empty space on the left of
the editor) to be shown even when no line numbers are active.
Expand Down Expand Up @@ -388,16 +391,17 @@ <h2 id="styling">Customized Styling</h2>

<dl>
<dt id="class_CodeMirror"><code>CodeMirror</code></dt>
<dd>The outer element of the editor. This should be used for
borders and positioning. Can also be used to set styles that
should hold for everything inside the editor (such as font
and font size), or to set a background.</dd>
<dd>The outer element of the editor. This should be used for the
editor width, borders and positioning. Can also be used to set
styles that should hold for everything inside the editor (such
as font and font size), or to set a background.</dd>

<dt id="class_CodeMirror_scroll"><code>CodeMirror-scroll</code></dt>
<dd>This determines whether the editor scrolls (<code>overflow:
auto</code> + fixed height). By default, it does. Giving
this <code>height: auto; overflow: visible;</code> will cause
the editor to resize to fit its content.</dd>
<dd>This determines the editor's height, and whether the editor
scrolls (<code>overflow: auto</code> + fixed height). By
default, it does. Giving this <code>height: auto; overflow:
visible;</code> will cause the editor to resize to fit its
content.</dd>

<dt id="class_CodeMirror_focused"><code>CodeMirror-focused</code></dt>
<dd>Whenever the editor is focused, the top element gets this
Expand Down Expand Up @@ -437,6 +441,13 @@ <h2 id="styling">Customized Styling</h2>
<dd>These are used to style matched (or unmatched) brackets.</dd>
</dl>

<p id="css-resize">So note carefully that, in order to resize the
editor, you should set a <code>width</code> on
the <a href="#getWrapperElement">wrapper</a>
(class <code>CodeMirror</code>) element, and a height on
the <a href="#getScrollerElement">scroller</a>
(class <code>CodeMirror-scroll</code>) element.</p>

<p>The actual lines, as well as the cursor, are represented
by <code>pre</code> elements. By default no text styling (such as
bold) that might change line height is applied. If you do want
Expand Down Expand Up @@ -471,7 +482,9 @@ <h2 id="api">Programming API</h2>

<dl>
<dt id="getValue"><code>getValue() → string</code></dt>
<dd>Get the current editor content.</dd>
<dd>Get the current editor content. You can pass it an optional
argument to specify the string to be used to separate lines
(defaults to <code>"\n"</code>).</dd>
<dt id="setValue"><code>setValue(string)</code></dt>
<dd>Set the editor content.</dd>

Expand All @@ -480,6 +493,14 @@ <h2 id="api">Programming API</h2>
<dt id="replaceSelection"><code>replaceSelection(string)</code></dt>
<dd>Replace the selection with the given string.</dd>

<dt id="setSize"><code>setSize(width, height)</code></dt>
<dd>Programatically set the size of the editor (overriding the
applicable <a href="#css-resize">CSS
rules</a>). <code>width</code> and <code>height</code> height
can be either numbers (interpreted as pixels) or CSS units
(<code>"100%"</code>, for example). You can
pass <code>null</code> for either of them to indicate that that
dimension should not be changed.</dd>
<dt id="focus"><code>focus()</code></dt>
<dd>Give the editor focus.</dd>
<dt id="scrollTo"><code>scrollTo(x, y)</code></dt>
Expand Down Expand Up @@ -528,6 +549,15 @@ <h2 id="api">Programming API</h2>
undo and redo operations.</dd>
<dt id="clearHistory"><code>clearHistory()</code></dt>
<dd>Clears the editor's undo history.</dd>
<dt id="getHistory"><code>getHistory() → object</code></dt>
<dd>Get a (JSON-serializeable) representation of the undo history.</dd>
<dt id="setHistory"><code>setHistory(object)</code></dt>
<dd>Replace the editor's undo history with the one provided,
which must be a value as returned
by <a href="#getHistory"><code>getHistory</code></a>. Note that
this will have entirely undefined results if the editor content
isn't also the same as it was when <code>getHistory</code> was
called.</dd>

<dt id="indentLine"><code>indentLine(line, dir)</code></dt>
<dd>Reset the given line's indentation to the indentation
Expand Down Expand Up @@ -661,7 +691,9 @@ <h2 id="api">Programming API</h2>

<dt id="getRange"><code>getRange(from, to) → string</code></td>
<dd>Get the text between the given points in the editor, which
should be <code>{line, ch}</code> objects.</dd>
should be <code>{line, ch}</code> objects. An optional third
argument can be given to indicate the line separator string to
use (defaults to <code>"\n"</code>).</dd>
<dt id="replaceRange"><code>replaceRange(string, from, to)</code></dt>
<dd>Replace the part of the document between <code>from</code>
and <code>to</code> with the given string. <code>from</code>
Expand Down Expand Up @@ -706,13 +738,15 @@ <h2 id="api">Programming API</h2>
<dt id="getInputField"><code>getInputField() → textarea</code></dt>
<dd>Returns the hidden textarea used to read input.</dd>
<dt id="getWrapperElement"><code>getWrapperElement() → node</code></dt>
<dd>Returns the DOM node that represents the editor. Remove this
from your tree to delete an editor instance.</dd>
<dd>Returns the DOM node that represents the editor, and
controls its width. Remove this from your tree to delete an
editor instance. Set it's <code>width</code> style when
resizing.</dd>
<dt id="getScrollerElement"><code>getScrollerElement() → node</code></dt>
<dd>Returns the DOM node that is responsible for the sizing and
the scrolling of the editor. You can change
the <code>height</code> and <code>width</code> styles of this
element to resize an editor. (You might have to call
<dd>Returns the DOM node that is responsible for the vertical
sizing and horizontal scrolling of the editor. You can change
the <code>height</code> style of this element to resize an
editor. (You might have to call
the <a href="#refresh"><code>refresh</code></a> method
afterwards.)</dd>
<dt id="getGutterElement"><code>getGutterElement() → node</code></dt>
Expand Down
Loading