改善：Aceで利用可能なすべてのLanguage Modeに対応

Author: Rokt33r

browser/main/Components/CodeEditor.jsx

@@ -17,7 +17,9 @@ var CodeEditor = React.createClass({
     editor.clearSelection()
 
     var session = editor.getSession()
-    session.setMode('ace/mode/' + this.props.mode)
+    if (this.props.mode != null && this.props.mode.length > 0) {
+      session.setMode('ace/mode/' + this.props.mode)
+    }
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
     session.setUseWrapMode(true)

browser/main/Components/CodeViewer.jsx

@@ -18,7 +18,9 @@ var CodeViewer = React.createClass({
     editor.clearSelection()
 
     var session = editor.getSession()
-    session.setMode('ace/mode/' + this.props.mode)
+    if (this.props.mode != null && this.props.mode.length > 0) {
+      session.setMode('ace/mode/' + this.props.mode)
+    }
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
     session.setUseWrapMode(true)

browser/main/Components/SnippetForm.jsx

@@ -8,6 +8,8 @@ var PlanetActions = require('../Actions/PlanetActions')
 
 var apiUrl = require('../../../config').apiUrl
 
+var aceModes = require('../../../modules/ace-modes')
+
 var getOptions = function (input, callback) {
   request
     .get(apiUrl + 'tags/search')
@@ -39,7 +41,7 @@ var SnippetForm = React.createClass({
   getInitialState: function () {
     var snippet = Object.assign({
       description: '',
-      mode: 'javascript',
+      mode: '',
       content: '',
       callSign: '',
       Tags: []
@@ -57,6 +59,12 @@ var SnippetForm = React.createClass({
   componentDidMount: function () {
     React.findDOMNode(this.refs.description).focus()
   },
+  handleModeChange: function (selected) {
+    var snippet = this.state.snippet
+    snippet.mode = selected
+    console.log(selected, 'selected')
+    this.setState({snippet: snippet})
+  },
   handleTagsChange: function (selected, all) {
     var snippet = this.state.snippet
     snippet.Tags = all
@@ -92,6 +100,12 @@ var SnippetForm = React.createClass({
     }
   },
   render: function () {
+    var modeOptions = aceModes.map(function (mode) {
+      return {
+        label: mode,
+        value: mode
+      }
+    })
     return (
       <div onKeyDown={this.handleKeyDown} className='SnippetForm'>
         <div className='modal-body'>
@@ -100,11 +114,13 @@ var SnippetForm = React.createClass({
           </div>
           <div className='form-group'>
             <input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
-            <select className='inline-input' valueLink={this.linkState('snippet.mode')}>
-              <option value='javascript'>Javascript</option>
-              <option value='html'>HTML</option>
-              <option value='css'>CSS</option>
-            </select>
+            <Select
+              name='mode'
+              className='modeSelect'
+              value={this.state.snippet.mode}
+              placeholder='Select Language'
+              options={modeOptions}
+              onChange={this.handleModeChange}/>
           </div>
           <div className='form-group'>
             <CodeEditor onChange={this.handleContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>

browser/styles/shared/modal.styl

@@ -64,6 +64,12 @@
     border-radius 5px
     border solid 1px borderColor
   .SnippetForm
+    .modeSelect.Select
+      display inline-block
+      width 200px
+      margin-top -15px
+      top 14px
+      height 37px
     .ace_editor
       height 258px
   .BlueprintForm

modules/ace-modes.js

@@ -0,0 +1,10 @@
+var fs = require('fs')
+
+module.exports = fs.readdirSync(__dirname + '/../browser/ace/src-min')
+  .filter(function (file) {
+    return file.match(/^mode-/)
+  })
+  .map(function (file) {
+    var match = file.match(/^mode-([a-z0-9\_]+).js$/)
+    return match[1]
+  })