Permalink
Browse files

Merge pull request #80 from espadrine/master

CodeMirror text editor plug-in
  • Loading branch information...
josephg committed Apr 14, 2012
2 parents bc57841 + 546c251 commit 35f3d0c93f8b24b5861af92dc42f117728e5a575
View
@@ -26,6 +26,7 @@ client = [
extras = [
'client/ace'
+ 'client/cm'
'client/textarea'
]
View
@@ -2,10 +2,10 @@
// This is a simple example sharejs server which hosts the sharejs
// examples in examples/.
-//
+//
// It demonstrates a few techniques to get different application behaviour.
-require('coffee-script');
+require('coffee-script');
var connect = require('connect'),
sharejs = require('../src'),
hat = require('hat').rack(32, 36);
View
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="/lib/cm/lib/codemirror.css">
+
+<div id="header">
+ <div id="htext">
+ <b>Editing</b> <input type="text" value="cm" id='namefield'>
+ </div>
+</div>
+
+<div id="editor"></div>
+<script src="/lib/cm/lib/codemirror.js"></script>
+<script src="/lib/cm/mode/coffeescript/coffeescript.js"></script>
+<script src="/channel/bcsocket.js"></script>
+<script src="/share/share.js"></script>
+<script src="/share/cm.js"></script>
+<script>
+var doc = null, editor = null;
+
+function setDoc(docName) {
+ document.title = docName;
+
+ sharejs.open(docName, function(error, newDoc) {
+ if (doc !== null) {
+ doc.close();
+ doc.detach_ace();
+ }
+
+ doc = newDoc;
+
+ if (error) {
+ console.error(error);
+ return;
+ }
+ doc.attach_cm(editor);
+ });
+};
+
+window.onload = function() {
+ //var ed = document.getElementById('editor');
+ editor = CodeMirror(document.body, { mode: "coffeescript", tabSize: 2 });
+
+ setDoc('cm'); // Hooking ShareJS and CodeMirror for the first time.
+
+ var namefield = document.getElementById('namefield');
+ function fn() {
+ var docName = namefield.value;
+ if (docName) setDoc(docName);
+ }
+
+ if (namefield.addEventListener) {
+ namefield.addEventListener('input', fn, false);
+ } else {
+ namefield.attachEvent('oninput', fn);
+ }
+};
+</script>
View
@@ -0,0 +1,35 @@
+body {
+ overflow: hidden;
+}
+
+#header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ height: 30px;
+ width: 100%;
+ background-color: black;
+}
+
+#htext {
+ line-height: 30px;
+ vertical-align: middle;
+
+ padding-left: 10px;
+ color: white;
+ font-family: baskerville, palatino, 'palatino linotype', georgia, serif;
+}
+
+div.CodeMirror {
+ margin: 0;
+ position: absolute;
+ top: 30px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+div.CodeMirror-scroll {
+ height: 100%;
+}
+
@@ -0,0 +1,110 @@
+.CodeMirror {
+ line-height: 1em;
+ font-family: monospace;
+}
+
+.CodeMirror-scroll {
+ overflow: auto;
+ height: 300px;
+ /* This is needed to prevent an IE[67] bug where the scrolled content
+ is visible outside of the scrolling box. */
+ position: relative;
+}
+
+.CodeMirror-gutter {
+ position: absolute; left: 0; top: 0;
+ z-index: 10;
+ background-color: #f7f7f7;
+ border-right: 1px solid #eee;
+ min-width: 2em;
+ height: 100%;
+}
+.CodeMirror-gutter-text {
+ color: #aaa;
+ text-align: right;
+ padding: .4em .2em .4em .4em;
+ white-space: pre !important;
+}
+.CodeMirror-lines {
+ padding: .4em;
+}
+
+.CodeMirror pre {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ border-width: 0; margin: 0; padding: 0; background: transparent;
+ font-family: inherit;
+ font-size: inherit;
+ padding: 0; margin: 0;
+ white-space: pre;
+ word-wrap: normal;
+}
+
+.CodeMirror-wrap pre {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+ overflow-x: hidden;
+}
+
+.CodeMirror textarea {
+ outline: none !important;
+}
+
+.CodeMirror pre.CodeMirror-cursor {
+ z-index: 10;
+ position: absolute;
+ visibility: hidden;
+ border-left: 1px solid black;
+ border-right:none;
+ width:0;
+}
+.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-focused pre.CodeMirror-cursor {
+ visibility: visible;
+}
+
+div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+
+.CodeMirror-searching {
+ background: #ffa;
+ background: rgba(255, 255, 0, .4);
+}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: #a0a;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
Oops, something went wrong.

0 comments on commit 35f3d0c

Please sign in to comment.