added ace editor

code/Fields/MarkdownEditorField.php

@@ -9,11 +9,32 @@
 
 class MarkdownEditorField extends TextareaField {
 
+	private static $allowed_actions = array(
+		'preview'
+	);
+
 	protected $rows = 30;
 
 	function Field($properties = array()){
 		Requirements::css(MARKDOWN_BASE . '/css/MarkdownEditorField.css');
+
+		Requirements::javascript(MARKDOWN_BASE . '/thirdparty/ace/src-min-noconflict/ace.js');
+		Requirements::javascript(MARKDOWN_BASE . '/js/MarkdownEditorField.js');
+
 		return parent::Field($properties);
 	}
 
+
+	function preview(SS_HTTPRequest $request){
+		$strValue = $request->requestVar('markdown');
+		if($strValue){
+			$shortCodeParser = ShortcodeParser::get_active();
+			$strValue = $shortCodeParser->parse($strValue);
+
+			$parseDown = new Parsedown();
+			$strValue  = $parseDown->text($strValue);
+		}
+		return $strValue;
+	}
+
 } 

css/MarkdownEditorField.less

@@ -2,13 +2,59 @@
 
 
     .middleColumn {
-
         margin-left: 0;
         clear: both;
+        border: 1px solid #ddd;
+
+        .markdown-tabs {
+            height: 3rem;
+            line-height: 3rem;
+            background: #ddd;
+
+            a {
+                height: 3rem;
+                box-sizing: border-box;
+                -moz-box-sizing: border-box;
+                -webkit-box-sizing: border-box;
+                padding: 0 1.2rem;
+                color: #000;
+                display: inline-block;
+
+                &.active {
+                    background: #fff;
+                }
+            }
+        }
 
         textarea {
-            width: 100%;
-            max-width: 100%;
+
+            &.markdowneditor {
+                // display: none;
+            }
+
+        }
+
+        .editor-holder {
+            position: relative;
+
+            .editor-div {
+                margin: 0;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+            }
+        }
+
+        .preview-pane {
+            background: #fff;
+            padding: 1rem;
+
+            &.loading {
+                background: #fff url('/framework/admin/images/spinner.gif') no-repeat center;
+                padding: 5rem 1rem;
+            }
         }
 
     }

js/MarkdownEditorField.js

@@ -0,0 +1,82 @@
+/**
+ * Created by nivankafonseka on 4/18/15.
+ */
+(function($){
+
+    $.entwine('MarkdownField', function(){
+
+        function showPreview(dom){
+            var holder = $(dom).closest('.field.markdowneditor');
+            holder.find('.editor-holder').hide();
+            holder.find('.preview-pane').show().html('').addClass('loading');
+            holder.find('.markdown-tabs').find('a').removeClass('active');
+            $(dom).addClass('active');
+
+            $.ajax({
+                method      : "POST",
+                url         : holder.data('preview'),
+                dataType    : "html",
+                data        : {
+                    markdown : holder.find('textarea.markdowneditor').val()
+                },
+                success : function(data){
+                    holder.find('.preview-pane').html(data).removeClass('loading');
+                }
+            });
+
+        }
+
+        function showEditor(dom){
+            var holder = $(dom).closest('.field.markdowneditor');
+            holder.find('.markdown-tabs').find('a').removeClass('active');
+            $(dom).addClass('active');
+            holder.find('.editor-holder').show();
+            holder.find('.preview-pane').hide();
+        }
+
+
+        $('.field.markdowneditor').entwine({
+
+            onmatch: function() {
+
+                var textarea = $(this).find('textarea');
+                var div = $(this).find('.editor-div');
+                var editor = ace.edit(div.attr('id'));
+                editor.setTheme("ace/theme/github");
+                editor.getSession().setMode("ace/mode/markdown");
+
+                editor.getSession().on('change', function(){
+                    textarea.val(editor.getSession().getValue());
+                });
+
+                $(this).data('ace', editor);
+
+            }
+
+        });
+
+
+        $('.markdown-tabs').entwine({
+
+            onmatch: function(){
+                $(this).find('a.edit').click(function(){
+                    showEditor(this);
+                    return false;
+                });
+
+
+                $(this).find('a.preview').click(function(){
+                    showPreview(this);
+                    return false;
+                });
+            }
+
+        });
+
+
+
+    });
+
+
+
+})(jQuery);

templates/MarkdownEditorField.ss

@@ -1 +1,13 @@
-<textarea $AttributesHTML>$Value</textarea>
+<div class='markdown-tabs'>
+    <a href="#edit" class="edit active">Edit</a>
+    <a href="#preview" class="preview">Preview</a>
+
+</div>
+
+<div class="editor-holder">
+    <pre id='{$Name}' class="editor-div">{$Value}</pre>
+    <textarea $AttributesHTML>$Value</textarea>
+</div>
+<div class="preview-pane">
+
+</div>

templates/MarkdownEditorField_holder.ss

@@ -0,0 +1,9 @@
+<div id="{$Name}-holder" class="field<% if $extraClass %> $extraClass<% end_if %>" data-preview="{$Link('preview')}">
+    <% if $Title %><label class="left" for="$ID">$Title</label><% end_if %>
+    <div class="middleColumn">
+        $Field
+    </div>
+    <% if $RightTitle %><label class="right" for="$ID">$RightTitle</label><% end_if %>
+    <% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
+    <% if $Description %><span class="description">$Description</span><% end_if %>
+</div>

thirdparty/ace/.travis.yml

@@ -0,0 +1 @@
+language: node_js