Add quill in markdown

4 files changed, 56 insertions, 2 deletions

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 3c8452ac808..14c8b561551 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -11,6 +11,7 @@
   import noteSignedOutWidget from './note_signed_out_widget.vue';
   import discussionLockedWidget from './discussion_locked_widget.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
+  import quill from '../../vue_shared/components/markdown/quill.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import issuableStateMixin from '../mixins/issuable_state';
 
@@ -242,6 +243,10 @@ Please check your network connection and try again.`;
           Autosize.update(this.$refs.textarea);
         });
       },
+
+      textChanged() {
+
+      }
     },
   };
 </script>
@@ -288,6 +293,13 @@ Please check your network connection and try again.`;
                 :quick-actions-docs-path="quickActionsDocsPath"
                 :add-spacing-classes="false"
                 ref="markdownField">
+                <quill placeholder="this is good" :toolbar="[['bold', 'underline']]" @change="textChanged" slow="wysiwyg">
+                   <div slot="content">
+                    <p>Hello World!</p>
+                    <p>Some initial <strong>bold</strong> text</p>
+                    <p><br></p>
+                  </div>
+                </quill>
                 <textarea
                   id="note-body"
                   name="note[note]"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 1371dca0c35..0ef68fe5c45 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -130,6 +130,7 @@
     >
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
+        <slot name="wysiwyg"></slot>
         <a
           class="zen-control zen-control-leave js-zen-leave"
           href="#"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index f65eab11a27..b6b035efb57 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -60,7 +60,7 @@
           tabindex="-1"
           @click.prevent="writeMarkdownTab($event)"
         >
-          Write
+          Markdown
         </a>
       </li>
       <li
@@ -72,7 +72,7 @@
           tabindex="-1"
           @click.prevent="previewMarkdownTab($event)"
         >
-          Preview
+          Plain
         </a>
       </li>
       <li
diff --git a/app/assets/javascripts/vue_shared/components/markdown/quill.vue b/app/assets/javascripts/vue_shared/components/markdown/quill.vue
new file mode 100644
index 00000000000..5f00cdbb8e2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/markdown/quill.vue
@@ -0,0 +1,41 @@
+<script>
+  import Quill from 'Quill';
+
+  export default {
+    props: {
+      placeholder: {
+        type: String,
+        default: 'type something great'
+      },
+      toolbar: {
+        type: Array,
+        default: [['bold', 'italic', 'blockquote', 'code', 'list']]
+      }
+    },
+    mounted() {
+      let customToolbar = this.$slots["custom-toolbar"];
+      let customToolbarHTML = customToolbar ? customToolbar[0].elm : false;
+      let quillCustomToolbarId = 'custom-quilljs-toolbar'
+      if(customToolbarHTML) {
+        customToolbarHTML.id = quillCustomToolbarId;
+      }
+      let quill = new Quill(this.$el, {
+        theme: 'snow',
+        placeholder: this.placeholder,
+        modules: {
+          toolbar: this.toolbar,
+        }
+      });
+      
+      quill.on('text-change', (delta, oldDelta, source) => {
+        let html = quill.root.innerHTML;
+        this.$emit('change', html, delta, oldDelta, source);
+      });
+    }
+  }  
+</script>
+<template>
+<div>
+  <slot name="content"></slot>
+</div>
+</template>
\ No newline at end of file