restore markdown widget

src/assets/js/blocks/form/markdown-widget.js

@@ -1,33 +1,53 @@
-/* global EpicEditor:false */
 import $ from 'jquery';
 
-/** Epic Editor doesn't support importing - so for now we will include it in the
-    page */
+import toMarkdown from 'to-markdown';
+import Quill from 'quill';
+import 'quill/dist/quill.base.css';
+import 'quill/dist/quill.snow.css';
+import '../../../../assets/sass/blocks/markdown-widget.scss';
+import { v4 } from 'uuid';
+import { markdown } from 'markdown';
+
 
 function setupMarkdownEditor(elem) {
   const $elem = $(elem);
-  const newElem = $('<div></div>');
+  const id = v4();
+
+  const toolbar = $(`<div id="i_${id}" class="toolbar">
+    <span class="ql-format-group">
+    <span title="Bold" class="ql-format-button ql-bold"></span>
+    <span class="ql-format-separator"></span>
+    <span title="Italic" class="ql-format-button ql-italic"></span>
+    </span>
+    <span class="ql-format-group">
+    <span title="List" class="ql-format-button ql-list"></span>
+    <span class="ql-format-separator"></span>
+    <span title="Bullet" class="ql-format-button ql-bullet"></span>
+    </span>
+    </div>`);
+
+  const newElem = $('<div>' + markdown.toHTML($elem.val()) + '</div>');
 
   newElem.insertBefore($elem);
+  toolbar.insertBefore(newElem);
 
   $elem.hide();
 
-  const editor = new EpicEditor({
-    container: newElem[0],
-    clientSideStorage: false,
-    textarea: elem[0],
-    basePath: '/static/epiceditor/epiceditor',
-    theme: {
-      base: '../../../lib/epiceditor/themes/base/epiceditor.css',
-      editor: '../../../lib/epiceditor/themes/editor/epic-light.css',
-      preview: '../../../lib/epiceditor/themes/preview/github.css',
+  var editor = new Quill(newElem[0], {
+    modules: {
+      toolbar: { container: '#i_' + id },
     },
+    theme: 'snow'
+  });
+
+
+  editor.on('text-change', function(delta, source) {
+    $elem.val(toMarkdown(editor.getHTML()).replace(/<(?:.|\n)*?>/gm, ''));
   });
-  editor.load();
 }
 
 export const init = () => {
-  // $('.markdown-widget').each(function initMarkdownEditor() {
-  //   setupMarkdownEditor(this);
-  // });
+  $('.markdown-widget').each(function initMarkdownEditor() {
+    setupMarkdownEditor(this);
+  });
 };

src/assets/sass/blocks/markdown-widget.scss

@@ -0,0 +1,11 @@
+.ql-container, .ql-toolbar {
+	background: #FFF;
+}
+
+.ql-container {
+	height: 12em !important;
+}
+
+.ql-toolbar {
+	border-bottom: 1px solid #ddd;
+}

src/dev-requirements.txt

@@ -8,7 +8,7 @@ flake8_docstrings==0.2.6 # PEP257
 coverage==4.1 # Coverage checker
 
 # For documentation
-Sphinx==1.4.3
+Sphinx==1.4.4
 
 # For debugging pages
 django-debug-toolbar==1.4.0

src/package.json

@@ -34,16 +34,19 @@
     "js-cookie": "^2.1.1",
     "knockout": "^3.4.0",
     "lodash": "^4.13.1",
+    "markdown": "^0.5.0",
     "neat": "^1.2.2",
     "node-uuid": "^1.4.7",
+    "quill": "^0.20.1",
     "react": "^15.0.2",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",
     "reqwest": "^2.0.5",
-    "timeago": "^1.5.2"
+    "timeago": "^1.5.2",
+    "to-markdown": "^3.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.9.0",