Add WYSIWYG editor to Create and Edit Post

package.json

@@ -25,6 +25,7 @@
         "animate.css": "^3.5.2",
         "dotenv": "^5.0.0",
         "vue-router": "^3.0.1",
+        "vue-wysiwyg": "^1.4.1",
         "vuex": "^3.0.1"
     }
 }

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/backend.js": "/js/backend.js?id=444841ac7a2a0d3b234b",
+    "/js/backend.js": "/js/backend.js?id=0b350052975e355fb0f8",
     "/js/app.js": "/js/app.js?id=74cbdcde92f6ee277b5d",
     "/css/app.css": "/css/app.css?id=2b7d35781755c5232e77"
 }

resources/assets/js/backend/app/blog/components/PostCreate.vue

@@ -18,7 +18,8 @@
                         <label class="block text-grey-darker text-sm font-bold mb-2" for="body">
                             Content
                         </label>
-                        <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker mb-3" rows="15" v-model="post.body"></textarea>
+                        <wysiwyg v-model="post.body" />
+                        <!-- <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker mb-3" rows="15" v-model="post.body"></textarea> -->
                     </div>
                     <div class="flex items-center justify-between">
                         <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded" @click="savePost">

resources/assets/js/backend/app/blog/components/PostShow.vue

@@ -16,12 +16,10 @@
                 <div class="px-6 py-4">
                     <div class="mb-2">Posted by <a href="">{{post.author.name}}</a> - {{ post.created_at }}</div>
                     <div v-if="this.editMode">
-                        <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker mb-3" v-model="post.body" rows="10">{{post.body}}</textarea>
+                        <wysiwyg v-model="post.body" />
                     </div>
                     <div v-else>
-                        <p class="text-grey-darker text-base pt-2 pb-2 mb-2 mt-2">
-                            {{ post.body }}
-                        </p>
+                        <p class="text-grey-darker text-base pt-2 pb-2 mb-2 mt-2" v-html="post.body"></p>
                     </div>
                     <div class="px-1 py-4 mb-4">
                         <div v-if="this.editMode">

resources/assets/js/backend/app/blog/components/index.js

@@ -1,4 +1,7 @@
 import Vue from 'vue'
+import wysiwyg from "vue-wysiwyg"
+import "vue-wysiwyg/dist/vueWysiwyg.css"
+Vue.use(wysiwyg, {})
 
 export const PostsList = Vue.component('posts-lists', require('./PostsList.vue'))
 export const PostShow = Vue.component('post-show', require('./PostShow.vue'))

yarn.lock

@@ -1983,6 +1983,10 @@ de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
 
+debounce@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
+
 [email protected]:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
@@ -2257,6 +2261,10 @@ download@^4.0.0, download@^4.1.2:
     vinyl-fs "^2.2.0"
     ware "^1.2.0"
 
+dropzone@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dropzone/-/dropzone-5.3.0.tgz#41c7a8a7cc6d237e3b28664e7a0719660d067edc"
+
 [email protected]:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
@@ -8017,7 +8025,21 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.5.7:
+vue-wysiwyg@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/vue-wysiwyg/-/vue-wysiwyg-1.4.1.tgz#00343492618865a3310ced77ad2e5dd87c25ce5b"
+  dependencies:
+    debounce "^1.1.0"
+    vue "^2.5.13"
+    vue2-dropzone "^3.0.3"
+
+vue2-dropzone@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.0.3.tgz#7ff58f7f4c1c80f5867b6cb4bdbbddb4edb6bad8"
+  dependencies:
+    dropzone "^5.2.0"
+
+vue@^2.5.13, vue@^2.5.7:
   version "2.5.13"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"