Merge pull request josephg#80 from espadrine/master

CodeMirror text editor plug-in
woloski · Apr 14, 2012 · 35f3d0c · 35f3d0c
2 parents bc57841 + 546c251
commit 35f3d0c
Show file tree

Hide file tree

Showing 29 changed files with 5,260 additions and 2 deletions.
diff --git a/Cakefile b/Cakefile
@@ -26,6 +26,7 @@ client = [
 
 extras = [
 	'client/ace'
+	'client/cm'
 	'client/textarea'
 ]
 

diff --git a/bin/exampleserver b/bin/exampleserver
@@ -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);

diff --git a/examples/cm/index.html b/examples/cm/index.html
@@ -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>
diff --git a/examples/cm/style.css b/examples/cm/style.css
@@ -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%;
+}
+
diff --git a/examples/lib/cm/lib/codemirror.css b/examples/lib/cm/lib/codemirror.css
@@ -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;}