Implement markdown preview for notes

css/src/markdown.scss

@@ -0,0 +1,118 @@
+/**
+ * Markdown rendering
+ */
+#markdown {
+	width: 100% !important;
+	min-height: 40px;
+	cursor: text;
+
+	p {
+		margin-bottom: 15px;
+	}
+
+	* {
+		white-space: normal;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+	}
+
+	a {
+		opacity: 0.5;
+		text-decoration: underline;
+	}
+
+	ol,
+	ul {
+		margin-left: 20px;
+		margin-bottom: 10px;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	h1 {
+		font-size: 18px;
+		font-weight: 600;
+		margin-bottom: 5px;
+	}
+
+	h2 {
+		font-size: 16px;
+		font-weight: 600;
+	}
+
+	h3 {
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	h4 {
+		font-size: 13px;
+		font-weight: 600;
+	}
+
+	h6 {
+		font-size: 12px;
+		font-weight: 600;
+	}
+
+	pre {
+		background-color: var(--color-background-dark, $color-lightgrey);
+		padding: 3px;
+		overflow: auto;
+
+		code {
+			white-space: pre;
+		}
+	}
+
+	img {
+		max-width: 100%;
+		max-height: 50vh;
+		margin: auto;
+		display: block;
+	}
+
+	input[type=checkbox] {
+		margin: 0px 10px 0px 0px;
+		line-height: 10px;
+		font-size: 10px;
+		display: inline-block;
+		min-height: 12px;
+	}
+
+	li 	input[type='checkbox'].checkbox + label::before {
+		margin-left: -15px;
+
+	}
+	input[type='checkbox'].checkbox + label::before {
+		position: relative;
+		z-index: 100;
+		margin-right: 10px;
+		margin-top: 0;
+	}
+	li input[type='checkbox'].checkbox:not(:checked) + label::before {
+		background-color: $color-main-background;
+	}
+
+	table {
+		margin-bottom: 10px;
+		border-collapse: collapse;
+
+		thead {
+			background-color: var(--color-background-dark, $color-lightgrey);
+		}
+		td, th {
+			border: 1px solid var(--color-background-darker, $color-darkgrey);
+			padding: 3px;
+		}
+	}
+
+	blockquote {
+		padding: 10px 20px;
+		margin: 0 0 20px;
+		font-size: 17.5px;
+		border-left: 5px solid var(--color-background-dark);
+	}
+}

css/src/style.scss

@@ -1049,8 +1049,6 @@
 
 							.display-view {
 								cursor: text;
-								display: block;
-								white-space: pre-wrap;
 							}
 
 							.edit-view {

css/tasks.scss

@@ -24,3 +24,4 @@
 @import './src/sprites-color';
 @import './src/sprites-bw';
 @import './src/style';
+@import './src/markdown';

package-lock.json

@@ -1967,7 +1967,6 @@
 			"version": "1.0.10",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
 			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-			"dev": true,
 			"requires": {
 				"sprintf-js": "~1.0.2"
 			}
@@ -4535,8 +4534,7 @@
 		"entities": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
-			"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
+			"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
-			"dev": true
 		},
 		"env-variable": {
 			"version": "0.0.5",
@@ -9598,6 +9596,14 @@
 				"type-check": "~0.3.2"
 			}
 		},
+		"linkify-it": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.1.0.tgz",
+			"integrity": "sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==",
+			"requires": {
+				"uc.micro": "^1.0.1"
+			}
+		},
 		"linkifyjs": {
 			"version": "2.1.7",
 			"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.7.tgz",
@@ -10050,6 +10056,33 @@
 			"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA==",
 			"dev": true
 		},
+		"markdown-it": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
+			"integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
+			"requires": {
+				"argparse": "^1.0.7",
+				"entities": "~1.1.1",
+				"linkify-it": "^2.0.0",
+				"mdurl": "^1.0.1",
+				"uc.micro": "^1.0.5"
+			}
+		},
+		"markdown-it-emoji": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz",
+			"integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw="
+		},
+		"markdown-it-link-attributes": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/markdown-it-link-attributes/-/markdown-it-link-attributes-2.1.0.tgz",
+			"integrity": "sha1-MqdMlPfFzf0Iho0r7inG+nCggyQ="
+		},
+		"markdown-it-task-lists": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+			"integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
+		},
 		"markdown-table": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.2.tgz",
@@ -10104,6 +10137,11 @@
 			"integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
 			"dev": true
 		},
+		"mdurl": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+			"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+		},
 		"mem": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
@@ -14505,8 +14543,7 @@
 		"sprintf-js": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-			"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+			"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-			"dev": true
 		},
 		"sshpk": {
 			"version": "1.14.2",
@@ -16302,6 +16339,11 @@
 				}
 			}
 		},
+		"uc.micro": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+			"integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
+		},
 		"uglify-js": {
 			"version": "3.4.9",
 			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",

package.json

@@ -31,6 +31,11 @@
 		"ical.js": "~1.3.0",
 		"jstimezonedetect": "",
 		"linkifyjs": "~2.1.7",
+		"markdown-it": "~8.4.2",
+		"markdown-it-emoji": "~1.4.0",
+		"markdown-it-link-attributes": "~2.1.0",
+		"markdown-it-task-lists": "~2.1.1",
+		"linkify-it": "~2.1.0",
 		"nextcloud-vue": "^0.4.6",
 		"p-limit": "^2.1.0",
 		"uuid": "^3.3.2",

src/components/Markdown.vue

@@ -0,0 +1,71 @@
+<!--
+Nextcloud - Tasks
+
+@author Raimund Schlüßler
+@copyright 2019 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+License as published by the Free Software Foundation; either
+version 3 of the License, or any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+
+You should have received a copy of the GNU Affero General Public
+License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+
+-->
+
+<template>
+	<div ref="markdown-container" class="markdown-body" />
+</template>
+
+<script>
+import MarkdownIt from 'markdown-it'
+import Mila from 'markdown-it-link-attributes'
+import MarkdownItEmoji from 'markdown-it-emoji'
+import Mitl from 'markdown-it-task-lists'
+
+export default {
+	name: 'Markdown',
+	props: {
+		source: {
+			type: String,
+			default: ''
+		},
+		linkify: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		let md = new MarkdownIt({
+			linkify: this.linkify
+		})
+			.use(MarkdownItEmoji)
+			.use(Mila, {
+				attrs: {
+					target: '_blank',
+					rel: 'nofollow'
+				}
+			})
+			.use(Mitl)
+		return {
+			md: md
+		}
+	},
+	watch: {
+		source: {
+			immediate: true,
+			handler(val) {
+				this.$nextTick(_ => {
+					this.$refs['markdown-container'].innerHTML = this.md.render(val)
+				})
+			}
+		}
+	},
+}
+</script>

src/components/TheDetails.vue

@@ -245,7 +245,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 								@click="editProperty('note', $event)"
 							>
 								<div :class="{'editing': edit=='note'}" class="content-fakeable">
-									<div v-linkify="task.note" class="display-view" />
+									<markdown id="markdown"
+										:source="task.note"
+										class="display-view"
+									/>
 									<div class="edit-view">
 										<div class="expandingArea active">
 											<pre><span>{{ tmpTask.note }}</span><br><br></pre>
@@ -280,6 +283,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 import { mapState, mapGetters, mapActions } from 'vuex'
 import { valid, overdue } from '../store/storeHelper'
 import { DatetimePicker, Multiselect } from 'nextcloud-vue'
+import Markdown from './Markdown'
 
 import ClickOutside from 'vue-click-outside'
 import { linkify } from '../directives/linkify.js'
@@ -287,7 +291,8 @@ import { linkify } from '../directives/linkify.js'
 export default {
 	components: {
 		DatetimePicker,
-		Multiselect
+		Multiselect,
+		Markdown,
 	},
 	directives: {
 		ClickOutside,