Complete editor config UI

modules/backend/assets/css/october.css

@@ -7390,7 +7390,7 @@ label {
   padding-bottom: 0;
 }
 .form-group.checkbox-field {
-  padding-bottom: 0;
+  padding-bottom: 5px;
 }
 .form-group.checkbox-align {
   padding-left: 23px;

modules/backend/assets/js/editorsettings/editorsettings.js

@@ -1,12 +1,67 @@
 $(document).ready(function(){
 
     var editorEl = $('#editorsettingsCodeeditor'),
-        editor = editorEl.codeEditor('getEditorObject')
+        editor = editorEl.codeEditor('getEditorObject'),
+        session = editor.getSession(),
+        renderer = editor.renderer
 
-    editorEl.height($('#editorSettingsForm').height())
+    editorEl.height($('#editorSettingsForm').height() - 23)
 
     $('#Form-form-field-EditorSettings-theme').on('change', function(){
-        $('#editorsettingsCodeeditor').codeEditor('setTheme', $(this).val())
-    })
+        editorEl.codeEditor('setTheme', $(this).val())
+    })
+
+    $('#Form-form-field-EditorSettings-font_size').on('change', function(){
+        editor.setFontSize(parseInt($(this).val()))
+    })
+
+    $('#Form-form-field-EditorSettings-word_wrap').on('change', function(){
+        switch ($(this).val()) {
+            case "off":
+                session.setUseWrapMode(false)
+                renderer.setPrintMarginColumn(80)
+            break
+            case "40":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(40, 40)
+                renderer.setPrintMarginColumn(40)
+            break
+            case "80":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(80, 80)
+                renderer.setPrintMarginColumn(80)
+            break
+            case "fluid":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(null, null)
+                renderer.setPrintMarginColumn(80)
+            break
+        }
+    })
+
+    $('#Form-form-field-EditorSettings-code_folding').on('change', function(){
+        session.setFoldStyle($(this).val())
+    })
+
+    $('#Form-form-field-EditorSettings-tab_size').on('change', function(){
+        session.setTabSize($(this).val())
+    })
+
+    $('#Form-form-field-EditorSettings-show_invisibles').on('change', function(){
+        editor.setShowInvisibles($(this).is(':checked'))
+    })
+
+    $('#Form-form-field-EditorSettings-highlight_active_line').on('change', function(){
+        editor.setHighlightActiveLine($(this).is(':checked'))
+    })
+
+    $('#Form-form-field-EditorSettings-use_hard_tabs').on('change', function(){
+        session.setUseSoftTabs(!$(this).is(':checked'))
+    })
+
+    $('#Form-form-field-EditorSettings-show_gutter').on('change', function(){
+        renderer.setShowGutter($(this).is(':checked'))
+    })
+
 })
 

modules/backend/assets/less/controls/forms.less

@@ -126,7 +126,7 @@ label {
     }
 
     &.checkbox-field {
-        padding-bottom: 0;
+        padding-bottom: 5px;
     }
 
     &.checkbox-align {

modules/backend/controllers/EditorSettings.php

@@ -1,5 +1,6 @@
 <?php namespace Backend\Controllers;
 
+use Lang;
 use BackendMenu;
 use Backend\Classes\Controller;
 use Backend\Models\EditorSettings as EditorSettingsModel;
@@ -42,13 +43,14 @@ class EditorSettings extends Controller
 
         $this->vars['showGutter'] = true;
         $this->vars['theme'] = $editorSettings->theme;
-        $this->vars['wrapWords'] = $editorSettings->use_wrap;
+        $this->vars['wrapWords'] = $editorSettings->word_wrap !== 'off';
         $this->vars['fontSize'] = $editorSettings->font_size;
         $this->vars['tabSize'] = $editorSettings->tab_size;
         $this->vars['useSoftTabs'] = !$editorSettings->use_hard_tabs;
         $this->vars['margin'] = 0;
 
         $this->getClassExtension('Backend.Behaviors.FormController')->update();
+        $this->pageTitle = Lang::get('backend::lang.editor.menu_label');
     }
 
     public function formFindModelObject()

modules/backend/controllers/editorsettings/config_form.yaml

@@ -2,11 +2,6 @@
 #  Form Behavior Config
 # ===================================
 
-name: system::lang.email_templates.template
 form: @/modules/backend/models/editorsettings/fields.yaml
 modelClass: Backend\Models\EditorSettings
 defaultRedirect: system/emailtemplates
-
-update:
-    redirect: system/emailtemplates
-    redirectClose: system/emailtemplates

modules/backend/lang/en/lang.php

@@ -148,10 +148,14 @@ return [
     'editor' => [
         'menu_label' => 'Editor Configuration',
         'menu_description' => 'Manage editor configuration.',
-        'font_size' => 'Font Size',
-        'tab_size' => 'Indentation Width',
-        'use_hard_tabs' => 'Indent Using Tabs',
-        'use_wrap' => 'Enable Word Wrap',
-        'theme' => 'Text Color Scheme',
+        'font_size' => 'Font size',
+        'tab_size' => 'Tab size',
+        'use_hard_tabs' => 'Indent using tabs',
+        'code_folding' => 'Code folding',
+        'word_wrap' => 'Word wrap',
+        'highlight_active_line' => 'Highlight active line',
+        'show_invisibles' => 'Show invisible characters',
+        'show_gutter' => 'Show gutter',
+        'theme' => 'Color scheme',
     ],
 ];

modules/backend/models/EditorSettings.php

@@ -15,10 +15,14 @@ class EditorSettings extends Model
     public function initSettingsData()
     {
         $config = App::make('config');
-        $this->font_size = $config->get('editor.font.size', 12);
-        $this->tab_size = $config->get('editor.tab.size', 4);
-        $this->use_hard_tabs = $config->get('editor.tab.usehard', false);
-        $this->use_wrap = $config->get('editor.wrap.enable', false);
+        $this->font_size = $config->get('editor.font_size', 12);
+        $this->tab_size = $config->get('editor.tab_size', 4);
+        $this->use_hard_tabs = $config->get('editor.use_hard_tabs', false);
+        $this->word_wrap = $config->get('editor.word_wrap', 'off');
+        $this->code_folding = $config->get('editor.code_folding', 'manual');
+        $this->show_invisibles = $config->get('editor.show_invisibles', true);
+        $this->highlight_active_line = $config->get('editor.highlight_active_line', true);
+        $this->show_gutter = $config->get('editor.show_gutter', true);
         $this->theme = $config->get('editor.theme', static::DEFAULT_THEME);
     }
 
@@ -26,10 +30,14 @@ class EditorSettings extends Model
     {
         $config = App::make('config');
         $settings = self::instance();
-        $config->set('editor.font.size', $settings->font_size);
-        $config->set('editor.tab.size', $settings->tab_size);
-        $config->set('editor.tab.usehard', $settings->use_hard_tabs);
-        $config->set('editor.wrap.enable', $settings->use_wrap);
+        $config->set('editor.font_size', $settings->font_size);
+        $config->set('editor.tab_size', $settings->tab_size);
+        $config->set('editor.use_hard_tabs', $settings->use_hard_tabs);
+        $config->set('editor.word_wrap', $settings->word_wrap);
+        $config->set('editor.code_folding', $settings->code_folding);
+        $config->set('editor.show_invisibles', $settings->show_invisibles);
+        $config->set('editor.highlight_active_line', $settings->highlight_active_line);
+        $config->set('editor.show_gutter', $settings->show_gutter);
         $config->set('editor.theme', $settings->theme);
     }
 

modules/backend/models/editorsettings/fields.yaml

@@ -3,25 +3,67 @@
 # ===================================
 
 fields:
+
   font_size:
     label: backend::lang.editor.font_size
-    span: left
+    span: auto
+    type: dropdown
+    options:
+      11: 11px
+      12: 12px
+      13: 13px
+      14: 14px
+      15: 15px
+      16: 16px
+
+  word_wrap:
+    label: backend::lang.editor.word_wrap
+    type: dropdown
+    span: auto
+    options:
+      off: Off
+      40: 40 Characters
+      80: 80 Characters
+      fluid: Fluid
+
+  code_folding:
+    label: backend::lang.editor.code_folding
+    type: dropdown
+    span: auto
+    options:
+      manual: Off
+      markbegin: Mark begin
+      markbeginend: Mark begin and end
 
   tab_size:
     label: backend::lang.editor.tab_size
-    span: right
+    span: auto
+    type: dropdown
+    options:
+      2: 2
+      3: 3
+      4: 4
+      5: 5
+      6: 6
+      7: 7
+      8: 8
 
   theme:
     label: backend::lang.editor.theme
     type: dropdown
-    span: full
+
+  show_invisibles:
+    label: backend::lang.editor.show_invisibles
+    type: checkbox
+
+  highlight_active_line:
+    label: backend::lang.editor.highlight_active_line
+    type: checkbox
 
   use_hard_tabs:
     label: backend::lang.editor.use_hard_tabs
     type: checkbox
-    span: full
 
-  use_wrap:
-    label: backend::lang.editor.use_wrap
+  show_gutter:
+    label: backend::lang.editor.show_gutter
     type: checkbox
-    span: full