From 0ccb971c5c32e5873e88a9a282a238edf26f4108 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 9 Jul 2020 19:14:35 +0200
Subject: [PATCH] Start adding easymde icons

---
 src/components/input/easymde.vue   | 44 ++++++++++++++++++++++++++----
 src/views/tasks/TaskDetailView.vue | 25 +++++++++--------
 2 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/components/input/easymde.vue b/src/components/input/easymde.vue
index 5b95cfb3cb..334a89d72d 100644
--- a/src/components/input/easymde.vue
+++ b/src/components/input/easymde.vue
@@ -5,6 +5,7 @@
 
 <script>
     import VueEasymde from 'vue-easymde'
+    import EasyMDE from 'easymde'
 
     export default {
         name: 'easymde',
@@ -20,18 +21,49 @@
         data() {
             return {
                 text: '',
+                iconFillColor: '#000',
                 config: {
                     autoDownloadFontAwesome: false,
                     spellChecker: false,
                     placeholder: 'Click here to enter a description...',
                     toolbar: [
-                        'heading-1',
-                        'heading-2',
-                        'heading-3',
-                        'heading-smaller',
-                        'heading-bigger',
+                        {
+                            name: 'heading-1',
+                            action: EasyMDE.toggleHeading1,
+                            title: 'Heading 1',
+                            icon: '<svg width="24" height="24"><rect width="24" height="24" fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z" fill="'+ this.iconFillColor +'"/></svg>',
+                        },
+                        {
+                            name: 'heading-2',
+                            action: EasyMDE.toggleHeading2,
+                            title: 'Heading 2',
+                            icon: '<svg width="24" height="24"><rect width="24" height="24" fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z" fill="'+ this.iconFillColor +'"/></svg>',
+                        },
+                        {
+                            name: 'heading-3',
+                            action: EasyMDE.toggleHeading3,
+                            title: 'Heading 3',
+                            icon: '<svg width="24" height="24"><rect width="24" height="24" fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z" fill="'+ this.iconFillColor +'"/></svg>',
+                        },
+                        {
+                            name: 'heading-smaller',
+                            action: EasyMDE.toggleHeadingSmaller,
+                            title: 'Heading Smaller',
+                            icon: '<svg width="24" height="24"><rect width="24" height="24" fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z" fill="'+ this.iconFillColor +'"/></svg>',
+                        },
+                        {
+                            name: 'heading-bigger',
+                            action: EasyMDE.toggleHeadingBigger,
+                            title: 'Heading Bigger',
+                            icon: '<svg width="24" height="24"><rect width="24" height="24" fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z" fill="'+ this.iconFillColor +'"/></svg>',
+                        },
                         '|',
-                        'bold',
+                        {
+                            name: 'bold',
+                            action: EasyMDE.toggleBold,
+                            title: 'Bold',
+                            icon: '<svg width="24" height="24"><rect width="24" height="24" fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3H6.5H15.25C18.15 3 20.5 5.36 20.5 8.25C20.5 9.8 19.81 11.19 18.73 12.15C20.37 13.04 21.5 14.76 21.5 16.75C21.5 19.64 19.15 22 16.25 22H6.5H3.5C2.95 22 2.5 21.55 2.5 21C2.5 20.45 2.95 20 3.5 20H5.5V5H3.5C2.95 5 2.5 4.55 2.5 4C2.5 3.45 2.95 3 3.5 3ZM7.5 20H16.25C18.04 20 19.5 18.54 19.5 16.75C19.5 14.96 18.04 13.5 16.25 13.5H7.5V20ZM7.5 11.5H15.25C17.04 11.5 18.5 10.04 18.5 8.25C18.5 6.46 17.04 5 15.25 5H7.5V11.5Z" fill="'+ this.iconFillColor +'"/></svg>',
+                        },
                         'italic',
                         'strikethrough',
                         'code',
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 940f7bb41d..f02fac1fd6 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -181,16 +181,16 @@
 							Description
 						</h3>
 						<!-- We're using a normal textarea until the problem with the icons is resolved in easymde -->
-						<!-- <easymde v-model="task.description" @change="saveTask"/>-->
-						<textarea
-								class="textarea"
-								v-model="task.description"
-								rows="6"
-								placeholder="Click here to enter a description..."
-								@keyup.ctrl.enter="saveTaskIfDescriptionChanged"
-								@keydown="setDescriptionChanged"
-								@change="saveTaskIfDescriptionChanged"
-						></textarea>
+						<easymde v-model="task.description" @change="saveTask"/>
+<!--						<textarea-->
+<!--								class="textarea"-->
+<!--								v-model="task.description"-->
+<!--								rows="6"-->
+<!--								placeholder="Click here to enter a description..."-->
+<!--								@keyup.ctrl.enter="saveTaskIfDescriptionChanged"-->
+<!--								@keydown="setDescriptionChanged"-->
+<!--								@change="saveTaskIfDescriptionChanged"-->
+<!--						></textarea>-->
 					</div>
 
 					<!-- Attachments -->
@@ -335,6 +335,8 @@
 
 	import flatPickr from 'vue-flatpickr-component'
 	import 'flatpickr/dist/flatpickr.css'
+	import easymde from '../../components/input/easymde'
+
 	import PrioritySelect from '../../components/tasks/partials/prioritySelect'
 	import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
 	import EditLabels from '../../components/tasks/partials/editLabels'
@@ -346,7 +348,7 @@
 	import Comments from '../../components/tasks/partials/comments'
 	import router from '../../router'
 	import ListSearch from '../../components/tasks/partials/listSearch'
-	import ColorPicker from "../../components/input/colorPicker";
+	import ColorPicker from '../../components/input/colorPicker'
 
 	export default {
 		name: 'TaskDetailView',
@@ -363,6 +365,7 @@
 			PrioritySelect,
 			Comments,
 			flatPickr,
+			easymde,
 		},
 		data() {
 			return {