update quill - add images and links

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

@@ -2,47 +2,33 @@ import $ from 'jquery';
 
 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 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();
+  // $elem.hide();
 
   var editor = new Quill(newElem[0], {
     modules: {
-      toolbar: { container: '#i_' + id },
+      toolbar: [
+        ['bold', 'italic'],
+        ['blockquote', 'list', 'link'],
+        ['image']
+      ]
     },
     theme: 'snow'
   });
 
 
   editor.on('text-change', function(delta, source) {
-    $elem.val(toMarkdown(editor.getHTML()).replace(/<(?:.|\n)*?>/gm, ''));
+    $elem.val(toMarkdown(editor.root.innerHTML).replace(/<(?:.|\n)*?>/gm, ''));
   });
 }
 

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

@@ -1,11 +1,14 @@
+@import "../../../node_modules/quill/dist/quill";
+@import "../../../node_modules/quill/dist/quill.snow";
+
 .ql-container, .ql-toolbar {
 	background: #FFF;
 }
 
-.ql-container {
-	height: 12em !important;
+.ql-toolbar button {
+    margin: 0;
 }
 
-.ql-toolbar {
-	border-bottom: 1px solid #ddd;
+.ql-container {
+	height: 12em !important;
 }

src/package.json

@@ -39,7 +39,7 @@
     "lodash": "^4.13.1",
     "markdown": "^0.5.0",
     "node-uuid": "^1.4.7",
-    "quill": "^0.20.1",
+    "quill": "^1.0.0-beta.11",
     "react": "^15.0.2",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",