Implements file-upload via dropzone

admin/client/packages.js

@@ -10,7 +10,7 @@ module.exports = [
 	'classnames',
 	'color',
 	'display-name',
-	'elemental',
+	'elemental-octicons-3.5.0',
 	'expression-match',
 	'history',
 	'i',

admin/public/styles/keystone.less

@@ -42,7 +42,6 @@
 // REACT FIELDS
 @import "react/react.less";
 
-
 // DayPicker styles
 // ------------------------------
 

admin/public/styles/react/react.less

@@ -37,4 +37,5 @@
 @import "@{reactSelectPath}/less/select.less";
 
 @import "../../../../fields/types/markdown/less/bootstrap-markdown.less";
+@import (inline) "../../../../fields/types/markdown/css/dropzone.css";
 @import "../../../public/js/lib/tinymce/skins/keystone/skin.less";

fields/types/markdown/MarkdownField.js

@@ -10,7 +10,9 @@ import { FormInput } from 'elemental';
 
 // Scope jQuery and the bootstrap-markdown editor so it will mount
 var $ = require('jquery');
+var marked = require('marked');
 require('./lib/bootstrap-markdown');
+require('./lib/dropzone');
 
 // Append/remove ### surround the selection
 // Source: https://github.com/toopay/bootstrap-markdown/blob/master/js/bootstrap-markdown.js#L909
@@ -59,41 +61,50 @@ var renderMarkdown = function (component) {
 		savable: false,
 		resize: 'vertical',
 		height: component.props.height,
+		dropZoneOptions: component.props.dropZoneOptions,
+		parser: marked,
+		iconlibrary: 'octicons',
 		hiddenButtons: ['Heading'],
 
 		// Heading buttons
-		additionalButtons: [{
-			name: 'groupHeaders',
-			data: [{
-				name: 'cmdH1',
-				title: 'Heading 1',
-				btnText: 'H1',
-				callback: function (e) {
-					toggleHeading(e, '#');
-				},
-			}, {
-				name: 'cmdH2',
-				title: 'Heading 2',
-				btnText: 'H2',
-				callback: function (e) {
-					toggleHeading(e, '##');
-				},
-			}, {
-				name: 'cmdH3',
-				title: 'Heading 3',
-				btnText: 'H3',
-				callback: function (e) {
-					toggleHeading(e, '###');
-				},
-			}, {
-				name: 'cmdH4',
-				title: 'Heading 4',
-				btnText: 'H4',
-				callback: function (e) {
-					toggleHeading(e, '####');
-				},
+		additionalButtons: [
+			[{
+				name: 'groupHeaders',
+				data: [{
+					name: 'cmdH1',
+					title: 'Heading 1',
+					icon: 'octicon octicon-text-size heading-1',
+					btnText: '',
+					callback: function (e) {
+						toggleHeading(e, '#');
+					},
+				}, {
+					name: 'cmdH2',
+					title: 'Heading 2',
+					icon: 'octicon octicon-text-size heading-2',
+					btnText: '',
+					callback: function (e) {
+						toggleHeading(e, '##');
+					},
+				}, {
+					name: 'cmdH3',
+					title: 'Heading 3',
+					icon: 'octicon octicon-text-size heading-3',
+					btnText: '',
+					callback: function (e) {
+						toggleHeading(e, '###');
+					},
+				}, {
+					name: 'cmdH4',
+					title: 'Heading 4',
+					icon: 'octicon octicon-text-size heading-4',
+					btnText: '',
+					callback: function (e) {
+						toggleHeading(e, '####');
+					},
+				}],
 			}],
-		}],
+		],
 
 		// Insert Header buttons into the toolbar
 		reorderButtonGroups: ['groupFont', 'groupHeaders', 'groupLink', 'groupMisc', 'groupUtil'],

fields/types/markdown/MarkdownType.js

@@ -17,7 +17,9 @@ function markdown (list, path, options) {
 	this.height = options.height || 90;
 	this.wysiwyg = ('wysiwyg' in options) ? options.wysiwyg : true;
 
-	this._properties = ['wysiwyg', 'height', 'toolbarOptions'];
+	this._properties = ['wysiwyg', 'height', 'toolbarOptions', 'dropZoneOptions'];
+	this.dropZoneOptions = options.dropZoneOptions;
+
 	markdown.super_.call(this, list, path, options);
 }
 util.inherits(markdown, FieldType);