#6

Author: scniro

CHANGELOG.md

@@ -2,4 +2,4 @@
 ==================
 * (`onValueSet`, `onValueChange`) deprecated, now => (`onSet`, `onChange`);
 * + (`onBeforeChange`, `onBeforeSet`)
-
+* + `defineMode`

README.md

@@ -52,6 +52,8 @@ require('codemirror/mode/javascript/javascript');
 > `boolean` reset the internal codemirror cursor position should a new `value` prop be set. Default: `false`
 - `autoScrollCursorOnSet`
 > `boolean` scroll the cursor position into view automatically. Default: `false`
+- `defineMode`
+> pass a custom mode object `{name: 'custom', fn: myModeFn}`
 
 ## props cont. (wrapped codemirror [programming api](https://codemirror.net/doc/manual.html#api))
 

docs/app.min.js

@@ -26,6 +26,7 @@ class Controls extends React.Component {
         <select value={this.props.mode} onChange={this.onModeSelect.bind(this)}>
           <option value='xml'>html</option>
           <option value='javascript'>javascript</option>
+          <option value='strings'>strings (custom)</option>
         </select>
       </div>
     )

docs/src/components/Controls.jsx

@@ -5,6 +5,35 @@ import CodeMirror from '../../../index.js';
 let jBeautify = require('js-beautify').js;
 let hBeautify = require('js-beautify').html;
 
+// http://marijnhaverbeke.nl/blog/codemirror-mode-system.html
+let sampleMode = () => {
+  return {
+    startState: function () {
+      return {inString: false};
+    },
+    token: function (stream, state) {
+      // If a string starts here
+      if (!state.inString && stream.peek() == '"') {
+        stream.next();            // Skip quote
+        state.inString = true;    // Update state
+      }
+
+      if (state.inString) {
+        if (stream.skipTo('"')) { // Quote found on this line
+          stream.next();          // Skip quote
+          state.inString = false; // Clear flag
+        } else {
+          stream.skipToEnd();    // Rest of line is string
+        }
+        return "string";          // Token style
+      } else {
+        stream.skipTo('"') || stream.skipToEnd();
+        return null;              // Unstyled token
+      }
+    }
+  };
+}
+
 class Editor extends React.Component {
 
   constructor(props) {
@@ -15,13 +44,30 @@ class Editor extends React.Component {
 
     let exampleJS = 'function StringStream(string) {  this.pos = 0;  this.string = string; }  StringStream.prototype = {  done: function() {return this.pos >= this.string.length;},  peek: function() {return this.string.charAt(this.pos);},  next: function() {  if (this.pos < this.string.length)  return this.string.charAt(this.pos++);  },  eat: function(match) {  var ch = this.string.charAt(this.pos);  if (typeof match == "string") var ok = ch == match;  else var ok = ch && match.test ? match.test(ch) : match(ch);  if (ok) {this.pos++; return ch;}  },  eatWhile: function(match) {  var start = this.pos;  while (this.eat(match));  if (this.pos > start) return this.string.slice(start, this.pos);  },  backUp: function(n) {this.pos -= n;},  column: function() {return this.pos;},  eatSpace: function() {  var start = this.pos;  while (/s/.test(this.string.charAt(this.pos))) this.pos++;  return this.pos - start;  },  match: function(pattern, consume, caseInsensitive) {  if (typeof pattern == "string") {  function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}  if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) {  if (consume !== false) this.pos += str.length;  return true;  }  }  else {  var match = this.string.slice(this.pos).match(pattern);  if (match && consume !== false) this.pos += match[0].length;  return match;  }  } };';
     this.defaultJS = jBeautify(exampleJS, {indent_size: 2});
+
+    this.exampleCustomModeStrings = 'only "double quotes" will be tokenized\n\nsee http://marijnhaverbeke.nl/blog/codemirror-mode-system.html'
   }
 
   render() {
 
+    let value = '';
+
+    switch (this.props.mode) {
+      case 'xml':
+        value = this.defaultHTML;
+        break;
+      case 'javascript':
+        value = this.defaultJS;
+        break;
+      case 'strings':
+        value = this.exampleCustomModeStrings;
+        break;
+    }
+
     return (
       <CodeMirror
-        value={this.props.mode === 'xml' ? this.defaultHTML : this.defaultJS}
+        value={value}
+        defineMode={{name: 'strings', fn: sampleMode}}
         options={{
           mode: this.props.mode,
           theme: this.props.theme,

docs/src/components/Editor.jsx

@@ -72,6 +72,12 @@ var CodeMirror = function (_React$Component) {
       }
       /* end deprecation warnings per 1.0.0 release */
 
+      if (this.props.defineMode) {
+        if (this.props.defineMode.name && this.props.defineMode.fn) {
+          codemirror.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
+        }
+      }
+
       this.editor = codemirror(this.ref);
 
       this.editor.on('beforeChange', function (cm, changeObj) {

index.js

@@ -36,15 +36,21 @@ export default class CodeMirror extends React.Component {
   componentDidMount() {
 
     /* deprecation warnings per 1.0.0 release */
-    if(this.props.onValueChange) {
+    if (this.props.onValueChange) {
       console.warn('`onValueChange` has been deprecated. Please use `onChange` instead');
     }
 
-    if(this.props.onValueSet) {
+    if (this.props.onValueSet) {
       console.warn('`onValueSet` has been deprecated. Please use `onSet` instead');
     }
     /* end deprecation warnings per 1.0.0 release */
 
+    if (this.props.defineMode) {
+      if (this.props.defineMode.name && this.props.defineMode.fn) {
+        codemirror.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
+      }
+    }
+
     this.editor = codemirror(this.ref);
 
     this.editor.on('beforeChange', (cm, changeObj) => {