WIP Ace editor for the HTML source code

src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js

@@ -324,6 +324,21 @@ function tinyMceService($log, $q, imageHelper, $locale, $http, $timeout, stylesh
             editor.insertContent(preview);
         },
 
+
+        createAceCodeEditor: function(editor, $scope, callback){
+
+            editor.addButton("ace", {
+                icon: "code",
+                text: "Code WARREN",
+                title: "Code WARREN",
+                tooltip: "Code WARREN",
+                onclick: function(){
+                    callback();
+                }
+            });
+
+        },
+
 		/**
 		 * @ngdoc method
 		 * @name umbraco.services.tinyMceService#createMediaPicker

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/codeeditor.controller.js

@@ -0,0 +1,65 @@
+(function () {
+    "use strict";
+
+    function CodeEditorController($scope, localizationService) {
+
+        var vm = this;
+        vm.loading = false;
+
+        vm.submit = submit;
+        vm.close = close;
+
+        vm.aceOption = {};
+        vm.aceOption = {
+            mode: "razor",
+            theme: "chrome",
+            showPrintMargin: false,
+            advanced: {
+                fontSize: '14px',
+                enableSnippets: false, //The Razor mode snippets are awful (Need a way to override these)
+                enableBasicAutocompletion: true,
+                enableLiveAutocompletion: false
+            }
+        }
+
+        vm.template = {};
+        vm.template.content = $scope.model.content;
+
+        //////////
+
+        function onInit() {
+
+            vm.loading = true;
+
+            // set default title
+            if(!$scope.model.title) {
+                // TODO change to a new key to get 'source code' or similar
+                localizationService.localize("defaultdialogs_selectUsers").then(function(value){
+                    $scope.model.title = value;
+                });
+            }
+
+            //GO
+
+
+        }
+
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
+        onInit();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.PropertyEditors.RTECodeEditorController", CodeEditorController);
+
+})();

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/codeeditor.html

@@ -0,0 +1,41 @@
+<div ng-controller="Umbraco.PropertyEditors.RTECodeEditorController as vm">
+
+    <umb-editor-view>
+
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
+
+        <umb-editor-container>
+            <div
+                data-element="code-editor"
+                auto-scale="85"
+                umb-ace-editor="vm.aceOption"
+                model="vm.template.content">
+            </div>
+        </umb-editor-container>
+
+        <umb-editor-footer>
+            <umb-editor-footer-content-right>
+                <umb-button
+                    type="button"
+                    button-style="link"
+                    label-key="general_close"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js

@@ -191,6 +191,34 @@ angular.module("umbraco")
                         editorService.macroPicker(macroPicker);
                     });
 
+                    tinyMceService.createAceCodeEditor(tinyMceEditor, $scope, function () {
+
+                        //TODO: CHECK TO SEE WHAT WE NEED TO DO WIT MACROS (See code block?)
+                        /*
+                        var html = editor.getContent({source_view: true});
+                        html = html.replace(/<span\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr));
+                        editor.dom.remove(editor.dom.select('.CmCaReT'));
+	                    html = html.replace(/(<div class=".*?umb-macro-holder.*?mceNonEditable.*?"><!-- <\?UMBRACO_MACRO macroAlias="(.*?)".*?\/> --> *<ins>)[\s\S]*?(<\/ins> *<\/div>)/ig, "$1Macro alias: <strong>$2</strong>$3");
+                        */
+
+                        var aceEditor = {
+                            content: tinyMceEditor.getContent(),
+                            view: 'views/propertyeditors/rte/codeeditor.html',
+                            size: 'small',
+                            submit: function (model) {
+                                console.log('HTML update', model.content);
+
+                                tinyMceEditor.setContent(model.content);
+                                editorService.close();
+                            },
+                            close: function () {
+                                editorService.close();
+                            }
+                        };
+
+                        editorService.open(aceEditor);
+                    });
+
                     startWatch(editor);
                 };
 

src/Umbraco.Web.UI/config/tinyMceConfig.Release.config

@@ -3,6 +3,7 @@
     <commands>
         <command alias="code" name="Source code editor" mode="Insert" />
         <command alias="codemirror" name="Advanced source code editor" mode="Insert" />
+        <command alias="ace" name="WARREN code editor" mode="Insert" />
         <command alias="removeformat" name="Remove format" mode="Selection"/>
         <command alias="undo" name="Undo" mode="Insert" />
         <command alias="redo" name="Redo" mode="Insert" />

src/Umbraco.Web.UI/config/tinyMceConfig.config

@@ -3,6 +3,7 @@
     <commands>
         <command alias="code" name="Source code editor" mode="Insert" />
         <command alias="codemirror" name="Advanced source code editor" mode="Insert" />
+        <command alias="ace" name="WARREN code editor" mode="Insert" />
         <command alias="removeformat" name="Remove format" mode="Selection"/>
         <command alias="undo" name="Undo" mode="Insert" />
         <command alias="redo" name="Redo" mode="Insert" />