From 43403f8bb1b266c5368c50c4cfb93118dba6de96 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Wed, 29 Jul 2015 03:28:48 +0900
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=96=84=EF=BC=9AAce=E3=81=A7?=
 =?UTF-8?q?=E5=88=A9=E7=94=A8=E5=8F=AF=E8=83=BD=E3=81=AA=E3=81=99=E3=81=B9?=
 =?UTF-8?q?=E3=81=A6=E3=81=AELanguage=20Mode=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/CodeEditor.jsx  |  4 +++-
 browser/main/Components/CodeViewer.jsx  |  4 +++-
 browser/main/Components/SnippetForm.jsx | 28 +++++++++++++++++++------
 browser/styles/shared/modal.styl        |  6 ++++++
 modules/ace-modes.js                    | 10 +++++++++
 5 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 modules/ace-modes.js

diff --git a/browser/main/Components/CodeEditor.jsx b/browser/main/Components/CodeEditor.jsx
index 9bb02bf1..60512e52 100644
--- a/browser/main/Components/CodeEditor.jsx
+++ b/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)
diff --git a/browser/main/Components/CodeViewer.jsx b/browser/main/Components/CodeViewer.jsx
index 09e04229..131e8509 100644
--- a/browser/main/Components/CodeViewer.jsx
+++ b/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)
diff --git a/browser/main/Components/SnippetForm.jsx b/browser/main/Components/SnippetForm.jsx
index 4a5dca11..2722b07f 100644
--- a/browser/main/Components/SnippetForm.jsx
+++ b/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}/>
diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl
index 726fc37e..5893cd07 100644
--- a/browser/styles/shared/modal.styl
+++ b/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
diff --git a/modules/ace-modes.js b/modules/ace-modes.js
new file mode 100644
index 00000000..f4f2c72f
--- /dev/null
+++ b/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]
+  })