Update markdown interface (#1411)

* Cleanup markdown interface

Including refreshed UI which shows preview simultaniously with editor

* Fix path in UIManager

app/core/UIManager.js

@@ -49,7 +49,7 @@ define(function(require, exports, module) {
     require('core/interfaces/user'),
     require('core/interfaces/directus_file_title'),
     require('core/interfaces/map'),
-    require('core/interfaces/markdown'),
+    require('core/interfaces/markdown/component'),
     require('core/interfaces/multiple_files'),
     require('core/interfaces/multiple_files/csv/component'),
     require('core/interfaces/translation'),

app/core/interfaces/markdown/component.js

@@ -0,0 +1,39 @@
+//  Markdown UI component
+//  Directus 6.0
+
+//  (c) RANGER
+//  Directus may be freely distributed under the GNU license.
+//  For all details and documentation:
+//  http://www.getdirectus.com
+
+define([
+  'core/interfaces/markdown/interface',
+  'core/UIComponent',
+  'marked'
+],function(Input, UIComponent, marked) {
+
+  'use strict';
+
+  return UIComponent.extend({
+    id: 'markdown',
+    dataTypes: ['TEXT', 'VARCHAR'],
+    variables: [
+      {id: 'rows', type: 'Number', default_value: 14, ui: 'numeric', char_length: 3},
+      {id: 'github_flavored_markdown', type: 'Boolean', default_value: false, ui: 'checkbox'},
+      {id: 'tables', type: 'Boolean', default_value: false, ui: 'checkbox'},
+      {id: 'breaks', type: 'Boolean', default_value: false, ui: 'checkbox'},
+      {id: 'sanitize', type: 'Boolean', default_value: false, ui: 'checkbox'}
+    ],
+    Input: Input,
+    validate: function(value, options) {
+      if (options.schema.isRequired() && _.isEmpty(value)) {
+        return 'This field is required';
+      }
+    },
+    list: function(options) {
+      var raw_val = marked(options.value);
+
+      return _.isString(raw_val) ? raw_val.replace(/<(?:.|\n)*?>/gm, '').substr(0,100) : '<span class="silver">--</span>';
+    }
+  });
+});

app/core/interfaces/markdown/input.html

@@ -0,0 +1,63 @@
+<style>
+	.md-interface {
+		position: relative;
+		display: flex;
+	}
+
+	.md-interface > * {
+		max-height: 80vh;
+		overflow-y: scroll;
+		-webkit-overflow-scrolling: touch;
+		overflow-scrolling: touch;
+	}
+
+	.md-interface textarea {
+		font-family: monospace;
+		transition-property: box-shadow;
+		height: auto;
+	}
+
+	.md-interface > div {
+		overflow-y: scroll;
+		-webkit-overflow-scrolling: touch;
+		display: none;
+		width: 100%;
+		background-color: white;
+		border: 1px solid #cccccc;
+		padding: 1rem;
+	}
+
+	.md-interface > div h2 {
+		max-width: none;
+	}
+
+	.md-interface > div ul {
+		list-style-position: inside;
+	}
+
+	.md-controls {
+		margin-bottom: 1em;
+	}
+
+	@media screen and (min-width: 70em) {
+		.md-interface {
+			width: auto;
+		}
+
+		.md-controls {
+			display: none;
+		}
+
+		.md-interface > div {
+			display: block;
+		}
+	}
+</style>
+<div class="md-controls">
+	<button class="toggle-pane" type="button" data-action="md-edit">Editor</button>
+	<button class="toggle-pane" type="button" data-action="md-preview">Preview</button>
+</div>
+<div class="md-interface">
+	<textarea rows="{{rows}}" class="md-editor" name="{{name}}" id="{{name}}" {{#if readonly}}readonly{{/if}}>{{rawValue}}</textarea>
+	<div class="md-editor-preview">{{{value}}}</div>
+</div>

app/core/interfaces/markdown/interface.js

@@ -0,0 +1,63 @@
+//  Markdown UI component
+//  Directus 6.0
+
+//  (c) RANGER
+//  Directus may be freely distributed under the GNU license.
+//  For all details and documentation:
+//  http://www.getdirectus.com
+
+define([
+  'core/UIView',
+  'marked'
+],function(UIView, marked) {
+
+  'use strict';
+
+  return UIView.extend({
+    template: 'markdown/input',
+
+    events: {
+      'keyup': 'renderMarkdown',
+      'change textarea.md-editor': 'renderMarkdown',
+      'click button[data-action="md-preview"]': function (e) {
+        this.$('.md-editor').hide();
+        this.$('.md-editor-preview').show();
+        this.$('.btn').removeClass('active');
+        e.currentTarget.className += ' active';
+      },
+      'click button[data-action="md-edit"]': function (e) {
+        this.$('.md-editor-preview').hide();
+        this.$('.md-editor').show();
+        this.$('.btn').removeClass('active');
+        e.currentTarget.className += ' active';
+      }
+    },
+
+    renderMarkdown: function() {
+      var value = this.$('.md-editor').val();
+      if (value) {
+        this.$('.md-editor-preview').html(marked(value));
+      }
+    },
+
+    initialize: function() {
+      marked.setOptions({
+        gfm: this.options.settings.get('github_flavored_markdown'),
+        tables: this.options.settings.get('tables'),
+        breaks: this.options.settings.get('breaks'),
+        sanitize: this.options.settings.get('sanitize')
+      });
+    },
+
+    serialize: function() {
+      return {
+        rawValue: this.options.value,
+        value: (this.options.value) ? marked(this.options.value):'',
+        name: this.options.name,
+        rows: this.options.settings.get('rows'),
+        comment: this.options.schema.get('comment'),
+        readonly: !this.options.canWrite
+      };
+    }
+  });
+});