Added quick lang-selection options to code editor

diff --git a/resources/assets/js/vues/code-editor.js b/resources/assets/js/vues/code-editor.js
index 87bb28cce985e314bbbc13dc8f0e7e5abb3028ef..35a98cc774c749d482103a79c0aedc72114e6909 100644 (file)
--- a/resources/assets/js/vues/code-editor.js
+++ b/resources/assets/js/vues/code-editor.js
@@ -11,6 +11,10 @@ const methods = {
     updateEditorMode(language) {
         codeLib.setMode(this.editor, language);
     },
+    updateLanguage(lang) {
+        this.language = lang;
+        this.updateEditorMode(lang);
+    },
     open(code, language, callback) {
         this.show();
         this.updateEditorMode(language);

diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index f45db84b7da923f5cbfda7d5e8d84854363415a0..12babae7313efc3d9503cfb4e31af89ee8c1834a 100644 (file)
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -470,4 +470,13 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 #code-editor .CodeMirror {
   height: 400px;
+}
+
+#code-editor .lang-options {
+  max-width: 400px;
+  margin-bottom: $-s;
+  a {
+    margin-right: $-xs;
+    text-decoration: underline;
+  }
 }
\ No newline at end of file

diff --git a/resources/views/components/code-editor.blade.php b/resources/views/components/code-editor.blade.php
index 23deaad999c28e87f22d121eb1240bbe25ff2aa4..5a385ef49bae2ab463e393f5138023863862f167 100644 (file)
--- a/resources/views/components/code-editor.blade.php
+++ b/resources/views/components/code-editor.blade.php
@@ -10,6 +10,28 @@
             <div class="padded">
                 <div class="form-group">
                     <label for="code-editor-language">{{ trans('components.code_language') }}</label>
+                    <div class="lang-options">
+                        <small>
+                            <a @click="updateLanguage('CSS')">CSS</a>
+                            <a @click="updateLanguage('C')">C</a>
+                            <a @click="updateLanguage('C++')">C++</a>
+                            <a @click="updateLanguage('C#')">C#</a>
+                            <a @click="updateLanguage('Go')">Go</a>
+                            <a @click="updateLanguage('HTML')">HTML</a>
+                            <a @click="updateLanguage('Java')">Java</a>
+                            <a @click="updateLanguage('JavaScript')">JavaScript</a>
+                            <a @click="updateLanguage('JSON')">JSON</a>
+                            <a @click="updateLanguage('PHP')">PHP</a>
+                            <a @click="updateLanguage('MarkDown')">MarkDown</a>
+                            <a @click="updateLanguage('Nginx')">Nginx</a>
+                            <a @click="updateLanguage('Python')">Python</a>
+                            <a @click="updateLanguage('Ruby')">Ruby</a>
+                            <a @click="updateLanguage('shell')">Shell/Bash</a>
+                            <a @click="updateLanguage('SQL')">SQL</a>
+                            <a @click="updateLanguage('XML')">XML</a>
+                            <a @click="updateLanguage('YAML')">YAML</a>
+                        </small>
+                    </div>
                     <input @keypress.enter="save()" id="code-editor-language" type="text" @input="updateEditorMode(language)" v-model="language">
                 </div>