upgrading codemirror. now with line wrapping!

comfy · Feb 8, 2012 · bf19f08 · bf19f08
1 parent 7652ba7
commit bf19f08
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# ComfortableMexicanSofa (Rails 3 CMS Engine) [![Build Status](https://secure.travis-ci.org/comfy/comfortable-mexican-sofa.png)](http://travis-ci.org/comfy/comfortable-mexican-sofa) [![Dependency Status](https://gemnasium.com/comfy/comfortable-mexican-sofa.png)](https://gemnasium.com/comfy/comfortable-mexican-sofa)
+# ComfortableMexicanSofa (Rails 3 CMS Engine) 
+[![Build Status](https://secure.travis-ci.org/comfy/comfortable-mexican-sofa.png)](http://travis-ci.org/comfy/comfortable-mexican-sofa) [![Dependency Status](https://gemnasium.com/comfy/comfortable-mexican-sofa.png)](https://gemnasium.com/comfy/comfortable-mexican-sofa)
 
 ComfortableMexicanSofa is a powerful CMS Engine for your Rails 3 applications.
 

diff --git a/app/assets/javascripts/comfortable_mexican_sofa/application.js b/app/assets/javascripts/comfortable_mexican_sofa/application.js
@@ -118,9 +118,10 @@ $.CMS = function(){
         if ($(element).hasClass('css'))  mode = 'css';
         if ($(element).hasClass('js'))   mode = 'javascript';
         CodeMirror.fromTextArea(element, {
-          htmlMode: true,
-          mode:     mode,
-          tabMode: 'indent'
+          htmlMode:     true,
+          mode:         mode,
+          tabMode:      'indent',
+          lineWrapping: true
         });
       });
     },

diff --git a/app/assets/javascripts/comfortable_mexican_sofa/codemirror/codemirror.js b/app/assets/javascripts/comfortable_mexican_sofa/codemirror/codemirror.js
diff --git a/app/assets/javascripts/comfortable_mexican_sofa/elrte/elrte.codemirror.js b/app/assets/javascripts/comfortable_mexican_sofa/elrte/elrte.codemirror.js
@@ -11,8 +11,9 @@
       this.source.val(html);
 
       this.codeMirror = CodeMirror.fromTextArea(this.source[0], {
-        mode:     'htmlmixed',
-        tabMode:  'indent'
+        mode:         'htmlmixed',
+        tabMode:      'indent',
+        lineWrapping: true
       });
       for (var i = 0, e = this.codeMirror.lineCount(); i < e; ++i) this.codeMirror.indentLine(i);
 

diff --git a/app/assets/stylesheets/comfortable_mexican_sofa/codemirror.css b/app/assets/stylesheets/comfortable_mexican_sofa/codemirror.css
@@ -1,8 +1,17 @@
+.CodeMirror {
+  background-color: #fff;
+}
+
+/* -- elRTE adjustments -------------------------------------------------- */
+.el-rte .workzone .CodeMirror,
+.el-rte .workzone .CodeMirror .CodeMirror-scroll {
+  height: 100%;
+}
+
+/* -- Defaults ----------------------------------------------------------- */
 .CodeMirror {
   line-height: 1em;
   font-family: monospace;
-  height: 300px;
-  background-color: #fff;
 }
 
 .CodeMirror-scroll {
@@ -13,12 +22,6 @@
   position: relative;
 }
 
-/* elRTE adjustments */
-.el-rte .workzone .CodeMirror,
-.el-rte .workzone .CodeMirror .CodeMirror-scroll {
-  height: 100%;
-}
-
 .CodeMirror-gutter {
   position: absolute; left: 0; top: 0;
   z-index: 10;
@@ -31,6 +34,7 @@
   color: #aaa;
   text-align: right;
   padding: .4em .2em .4em .4em;
+  white-space: pre !important;
 }
 .CodeMirror-lines {
   padding: .4em;
@@ -49,39 +53,48 @@
   word-wrap: normal;
 }
 
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
 .CodeMirror textarea {
-  font-family: inherit !important;
-  font-size: inherit !important;
+  outline: none !important;
 }
 
-.CodeMirror-cursor {
+.CodeMirror pre.CodeMirror-cursor {
   z-index: 10;
   position: absolute;
   visibility: hidden;
-  border-left: 1px solid black !important;
+  border-left: 1px solid black;
+  border-right:none;
+  width:0;
 }
-.CodeMirror-focused .CodeMirror-cursor {
+.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-focused pre.CodeMirror-cursor {
   visibility: visible;
 }
 
-span.CodeMirror-selected {
-  background: #ccc !important;
-  color: HighlightText !important;
-}
-.CodeMirror-focused span.CodeMirror-selected {
-  background: Highlight !important;
+div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+
+.CodeMirror-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
 }
 
-.CodeMirror-matchingbracket {color: #0f0 !important;}
-.CodeMirror-nonmatchingbracket {color: #f22 !important;}
+/* 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: #0a5;}
+.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;}
@@ -94,3 +107,15 @@ span.CodeMirror-selected {
 .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;}