feat: improved mode loading

Now loads the appropriate mode JS, when you set the mode. Updates the README with info about setting
CodeMirror options, and about the mode option in particular. Updates stories to match.

Author: dflock

README.md

@@ -15,7 +15,7 @@
 
 ![Preview](https://github.com/gwenaelp/vfg-field-sourcecode/blob/master/docs/preview.png)
 
-```
+```vue
 <template>
   <vue-form-generator :schema="schema" :model="model"></vue-form-generator>
 </template>
@@ -30,7 +30,12 @@ export default {
         fields: [{
           type: "sourcecode",
           label: "source code",
-          model: "source"
+          model: "source",
+          theme: 'eclipse',
+          mode: {
+            name: "javascript",
+            json: true
+          }
         }]
       }
     };
@@ -48,7 +53,7 @@ vfg-field-sourcecode can be used as a module in both CommonJS and ES modular env
 When in non-modular environment, vfg-field-sourcecode will register all the components to vue by itself.</p>
 
 ### ES6
-```js
+```vue
 //
 // You can register a component manually
 //
@@ -72,7 +77,7 @@ Vue.use(ModuleLibrary);
 ```
 
 ### CommonJS
-```js
+```vue
 //
 // You can register a component manually
 //
@@ -107,18 +112,28 @@ Vue.use(ModuleLibrary);
 
 ### After that, you can use it with Vue Form Generator:
 
-```json
+```js
   schema: {
     fields: [
       {
         type: "sourcecode",
         label: "source code",
-        model: "source"
+        model: "source",
+        theme: 'monokai',
+        mode: "ruby"
       }
     ]
   }
 ```
 
+## CodeMirror Options
+
+Any supported CodeMirror option can be passed in the `schema`. Available options are shown [here](http://codemirror.net/doc/manual.html#config).
+
+### Special note about `mode` option
+
+When setting the `mode` option in the schema, `vfg-field-sourcecode` will automatically load the JS for the specified mode. This currently only works if you set the mode by name, *not* by mime type. Mode can either by set as as string, eg: `mode: python`, or as an object, which is required if that mode supports options you want to set - eg: `mode: { name: 'javascript', json: true }`. See [here](http://codemirror.net/doc/manual.html#option_mode) for more details.
+
 ## Changelog
 
 See the GitHub [release history](https://github.com/gwenaelp/vfg-field-sourcecode/releases).

src/components/field-sourcecode.vue

@@ -23,14 +23,38 @@ export default {
       // http://codemirror.net/doc/manual.html#config
 
       if (this.schema.hasOwnProperty("codeMirrorOptions")) {
+        const cmOptions = this.schema.codeMirrorOptions;
+
         // Load theme css, if specified in codeMirrorOptions
-        if (this.schema.codeMirrorOptions.hasOwnProperty("theme")) {
-          require("codemirror/theme/" +
-            this.schema.codeMirrorOptions.theme +
-            ".css");
+        if (cmOptions.hasOwnProperty("theme")) {
+          try {
+            require("codemirror/theme/" + cmOptions.theme + ".css");
+          } catch (e) {
+            console.log({ e });
+          }
+        }
+
+        if (cmOptions.hasOwnProperty("mode")) {
+          let modeName = "";
+
+          if (
+            typeof cmOptions.mode === "object" &&
+            cmOptions.mode.hasOwnProperty("name")
+          ) {
+            modeName = cmOptions.mode.name;
+          } else if (typeof cmOptions.mode === "string") {
+            modeName = cmOptions.mode;
+          }
+
+          // Load the mode js, if specified in codeMirrorOptions
+          try {
+            require("codemirror/mode/" + modeName + "/" + modeName + ".js");
+          } catch (e) {
+            console.log({ e });
+          }
         }
 
-        return this.schema.codeMirrorOptions;
+        return cmOptions;
       } else {
         return {};
       }
@@ -51,7 +75,7 @@ export default {
   height: 120px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   font-size: 80%;
 }
 </style>

stories/index.stories.js

@@ -72,7 +72,7 @@ storiesOf("field-sourcecode", module).add("Story as a template", () => {
               label: "source code",
               model: "source",
               codeMirrorOptions: {
-                mode: "text/x-vue"
+                mode: "vue"
               }
             }
           ]
@@ -98,7 +98,10 @@ storiesOf("field-sourcecode", module).add("Change mode to JSON", () => {
               label: "source code",
               model: "source",
               codeMirrorOptions: {
-                mode: "application/json"
+                mode: {
+                  name: "javascript",
+                  json: true
+                }
               }
             }
           ]
@@ -124,7 +127,7 @@ storiesOf("field-sourcecode", module).add("Use Monokai theme", () => {
               label: "source code",
               model: "source",
               codeMirrorOptions: {
-                mode: "text/x-vue",
+                mode: "vue",
                 theme: "monokai"
               }
             }