From 03899d438251f5639560ea34993808f655736ef9 Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Sun, 26 May 2019 07:50:02 +0200
Subject: [PATCH 1/5] preview mode

---
 package-lock.json                   |  37 +++++++--
 package.json                        |   1 +
 src/components/EditorEasyMDE.vue    |   1 -
 src/components/EditorMarkdownIt.vue | 116 ++++++++++++++++++++++++++++
 src/components/Note.vue             |  47 ++++++++++-
 5 files changed, 192 insertions(+), 10 deletions(-)
 create mode 100644 src/components/EditorMarkdownIt.vue

diff --git a/package-lock.json b/package-lock.json
index bb14797b5..642b9479a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1623,7 +1623,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"
 			}
@@ -3181,8 +3180,7 @@
 		"entities": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-			"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
-			"dev": true
+			"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
 		},
 		"errno": {
 			"version": "0.1.7",
@@ -5732,6 +5730,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"
+			}
+		},
 		"load-json-file": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -5956,6 +5962,18 @@
 			"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-table": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.2.tgz",
@@ -6003,6 +6021,11 @@
 				"unist-util-visit": "^1.1.0"
 			}
 		},
+		"mdurl": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+			"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+		},
 		"mem": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
@@ -8264,8 +8287,7 @@
 		"sprintf-js": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-			"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-			"dev": true
+			"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
 		},
 		"sshpk": {
 			"version": "1.16.1",
@@ -9164,6 +9186,11 @@
 			"resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.0.3.tgz",
 			"integrity": "sha1-VNjrx5SfGngQkItgAsaEFSbJnVo="
 		},
+		"uc.micro": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+		},
 		"unherit": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz",
diff --git a/package.json b/package.json
index 3a926e1a3..c9fd269e9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
 	"dependencies": {
 		"@babel/polyfill": "^7.4.4",
 		"easymde": "^2.6.0",
+		"markdown-it": "^8.4.2",
 		"nextcloud-axios": "^0.2.0",
 		"nextcloud-vue": "^0.11.4",
 		"vue": "^2.6.10",
diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 2e7b808ed..f05470d47 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -96,7 +96,6 @@ export default {
 
 .markdown-editor {
 	min-height: 100%;
-	padding: 1em;
 }
 
 .CodeMirror {
diff --git a/src/components/EditorMarkdownIt.vue b/src/components/EditorMarkdownIt.vue
new file mode 100644
index 000000000..77b25f97c
--- /dev/null
+++ b/src/components/EditorMarkdownIt.vue
@@ -0,0 +1,116 @@
+<template>
+	<div class="note-preview" v-html="html" />
+</template>
+<script>
+
+import MarkdownIt from 'markdown-it'
+
+export default {
+	name: 'ThePreview',
+
+	props: {
+		value: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data: function() {
+		return {
+			html: '',
+			md: new MarkdownIt({
+				linkify: true,
+			}),
+		}
+	},
+
+	watch: {
+		value: 'onUpdate',
+	},
+
+	created() {
+		this.onUpdate()
+	},
+
+	methods: {
+		onUpdate() {
+			this.html = this.md.render(this.value)
+		},
+	},
+
+}
+</script>
+<style lang="scss">
+.note-preview {
+	padding: 1em;
+	line-height: 1.5em;
+
+	& h1, & h2, & h3, & h4, & h5, & h6 {
+		padding: 0;
+		margin-top: 2ex;
+		margin-bottom: 1ex;
+		font-weight: bold;
+		color: inherit;
+	}
+
+	& h1 {
+		font-size: 165%;
+	}
+
+	& h2 {
+		font-size: 140%;
+	}
+
+	& h3 {
+		font-size: 120%;
+	}
+
+	& h4 {
+		font-size: 110%;
+	}
+
+	& p, & pre, & ul, & ol {
+		margin: 2ex 0;
+	}
+
+	& ul {
+		list-style: initial;
+	}
+
+	& ul, & ol {
+		margin-left: 3ex;
+	}
+
+	& li > p, & li > ul, & li > ol {
+		margin-top: 0.5ex;
+		margin-bottom: 0.5ex;
+	}
+
+	& em {
+		font-style: italic;
+		color: inherit;
+	}
+
+	& a {
+		color: var(--color-primary);
+	}
+
+	& pre, & code {
+		background: var(--color-background-dark);
+		font-size: 90%;
+		padding: 0.2ex 0.5ex;
+	}
+
+	& pre code {
+		font-size: inherit;
+		padding: 0;
+	}
+
+	& blockquote {
+		font-style: italic;
+		border-left: 4px solid var(--color-border);
+		padding-left: 2ex;
+		color: var(--color-text-light)
+	}
+}
+</style>
diff --git a/src/components/Note.vue b/src/components/Note.vue
index a90d98ffd..0f5c3698a 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error) }">
+	<AppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
 		<div v-if="!loading && note && !note.error" id="note-container"
 			class="note-container" :class="{ fullscreen: fullscreen }"
 		>
@@ -7,7 +7,8 @@
 				<div v-show="!note.content" class="placeholder">
 					{{ t('notes', 'Write …') }}
 				</div>
-				<TheEditor :value="note.content" @input="onEdit" />
+				<ThePreview v-if="preview" :value="note.content" />
+				<TheEditor v-else :value="note.content" @input="onEdit" />
 			</div>
 			<span class="action-buttons">
 				<button v-show="note.saveError"
@@ -15,16 +16,29 @@
 					class="icon-error-color"
 					@click="onManualSave"
 				/>
-				<button v-show="!fullscreen"
+				<button v-show="actionsOpen && !fullscreen"
 					v-tooltip="t('notes', 'Toggle sidebar')"
 					class="icon-details"
 					@click="onToggleSidebar"
 				/>
-				<button
+				<button v-show="actionsOpen"
+					v-tooltip="t('notes', 'Toggle preview')"
+					class="icon-toggle"
+					:class="{ active: preview }"
+					@click="onTogglePreview"
+				/>
+				<button v-show="actionsOpen"
 					v-tooltip="t('notes', 'Toggle fullscreen mode')"
 					class="icon-fullscreen"
+					:class="{ active: fullscreen }"
 					@click="onToggleDistractionFree"
 				/>
+				<button
+					v-tooltip="t('notes', 'Toggle action menu')"
+					class="icon-more"
+					:class="{ active: actionsOpen }"
+					@click="onToggleActions"
+				/>
 			</span>
 		</div>
 	</AppContent>
@@ -36,6 +50,7 @@ import {
 	Tooltip,
 } from 'nextcloud-vue'
 import TheEditor from './EditorEasyMDE'
+import ThePreview from './EditorMarkdownIt'
 import NotesService from '../NotesService'
 import store from '../store'
 
@@ -45,6 +60,7 @@ export default {
 	components: {
 		AppContent,
 		TheEditor,
+		ThePreview,
 	},
 
 	directives: {
@@ -62,6 +78,8 @@ export default {
 		return {
 			loading: false,
 			fullscreen: false,
+			preview: false,
+			actionsOpen: false,
 		}
 	},
 
@@ -75,6 +93,9 @@ export default {
 		isManualSave() {
 			return store.state.isManualSave
 		},
+		sidebarOpen() {
+			return store.state.sidebarOpen
+		},
 	},
 
 	watch: {
@@ -101,6 +122,7 @@ export default {
 			store.commit('setSidebarOpen', false)
 			this.onUpdateTitle(this.title)
 			this.loading = true
+			this.preview = false
 			NotesService.fetchNote(this.noteId)
 				.then((note) => {
 					if (note.errorMessage) {
@@ -124,6 +146,11 @@ export default {
 			}
 		},
 
+		onTogglePreview() {
+			this.preview = !this.preview
+			this.actionsOpen = false
+		},
+
 		onDetectFullscreen() {
 			this.fullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
 		},
@@ -156,10 +183,16 @@ export default {
 			} else {
 				launchIntoFullscreen(document.getElementById('note-container'))
 			}
+			this.actionsOpen = false
 		},
 
 		onToggleSidebar() {
 			store.commit('setSidebarOpen', !store.state.sidebarOpen)
+			this.actionsOpen = false
+		},
+
+		onToggleActions() {
+			this.actionsOpen = !this.actionsOpen
 		},
 
 		onEdit(newContent) {
@@ -201,6 +234,7 @@ export default {
 .note-editor {
 	max-width: 47em;
 	font-size: 16px;
+	padding: 0 1em;
 }
 
 /* center editor on large screens */
@@ -210,6 +244,11 @@ export default {
 	}
 	.note-container {
 		padding-right: 250px;
+		transition-duration: var(--animation-quick);
+		transition-property: padding-right;
+	}
+	.sidebar-open .note-container {
+		padding-right: 0px;
 	}
 }
 

From 4a3aef668c28b43ce3abad14c468fc5d32adef4e Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Sun, 2 Jun 2019 21:01:41 +0200
Subject: [PATCH 2/5] fix placeholder

---
 src/components/EditorMarkdownIt.vue | 2 +-
 src/components/Note.vue             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/EditorMarkdownIt.vue b/src/components/EditorMarkdownIt.vue
index 77b25f97c..d10bbb40e 100644
--- a/src/components/EditorMarkdownIt.vue
+++ b/src/components/EditorMarkdownIt.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 <style lang="scss">
 .note-preview {
-	padding: 1em;
+	padding: 0 1em;
 	line-height: 1.5em;
 
 	& h1, & h2, & h3, & h4, & h5, & h6 {
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 0f5c3698a..04deec1a2 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -5,7 +5,7 @@
 		>
 			<div class="note-editor">
 				<div v-show="!note.content" class="placeholder">
-					{{ t('notes', 'Write …') }}
+					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
 				</div>
 				<ThePreview v-if="preview" :value="note.content" />
 				<TheEditor v-else :value="note.content" @input="onEdit" />
@@ -234,7 +234,7 @@ export default {
 .note-editor {
 	max-width: 47em;
 	font-size: 16px;
-	padding: 0 1em;
+	padding: 1em;
 }
 
 /* center editor on large screens */
@@ -267,7 +267,7 @@ export default {
 /* placeholder */
 .placeholder {
 	position: absolute;
-	padding: 2em;
+	padding: 1em;
 	opacity: 0.5;
 }
 

From d5d3f49fce0b8cc5541369ac2c4458d850c19f25 Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Sun, 2 Jun 2019 22:26:04 +0200
Subject: [PATCH 3/5] switch to actions component from nc-vue

---
 src/components/Note.vue | 65 +++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index 04deec1a2..90cc682d4 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -16,29 +16,33 @@
 					class="icon-error-color"
 					@click="onManualSave"
 				/>
-				<button v-show="actionsOpen && !fullscreen"
-					v-tooltip="t('notes', 'Toggle sidebar')"
-					class="icon-details"
-					@click="onToggleSidebar"
-				/>
-				<button v-show="actionsOpen"
-					v-tooltip="t('notes', 'Toggle preview')"
-					class="icon-toggle"
-					:class="{ active: preview }"
-					@click="onTogglePreview"
-				/>
-				<button v-show="actionsOpen"
-					v-tooltip="t('notes', 'Toggle fullscreen mode')"
-					class="icon-fullscreen"
-					:class="{ active: fullscreen }"
-					@click="onToggleDistractionFree"
-				/>
-				<button
-					v-tooltip="t('notes', 'Toggle action menu')"
-					class="icon-more"
-					:class="{ active: actionsOpen }"
-					@click="onToggleActions"
-				/>
+				<Actions :open.sync="actionsOpen" menuAlign="right">
+					<ActionButton v-show="!sidebarOpen && !fullscreen"
+						icon="icon-details"
+						@click="onToggleSidebar"
+					>
+						{{ t('notes', 'Show sidebar') }}
+					</ActionButton>
+					<ActionButton v-show="!preview"
+						icon="icon-toggle"
+						@click="onTogglePreview"
+					>
+						{{ t('notes', 'Show preview') }}
+					</ActionButton>
+					<ActionButton v-show="preview"
+						icon="icon-rename"
+						@click="onTogglePreview"
+					>
+						{{ t('notes', 'Edit note') }}
+					</ActionButton>
+					<ActionButton
+						icon="icon-fullscreen"
+						:class="{ active: fullscreen }"
+						@click="onToggleDistractionFree"
+					>
+						{{ t('notes', 'Fullscreen mode') }}
+					</ActionButton>
+				</Actions>
 			</span>
 		</div>
 	</AppContent>
@@ -46,6 +50,8 @@
 <script>
 
 import {
+	Actions,
+	ActionButton,
 	AppContent,
 	Tooltip,
 } from 'nextcloud-vue'
@@ -58,6 +64,8 @@ export default {
 	name: 'Note',
 
 	components: {
+		Actions,
+		ActionButton,
 		AppContent,
 		TheEditor,
 		ThePreview,
@@ -191,10 +199,6 @@ export default {
 			this.actionsOpen = false
 		},
 
-		onToggleActions() {
-			this.actionsOpen = !this.actionsOpen
-		},
-
 		onEdit(newContent) {
 			if (this.note.content !== newContent) {
 				const note = {
@@ -274,11 +278,16 @@ export default {
 /* main editor button */
 .action-buttons {
 	position: fixed;
-	bottom: 4px;
+	top: 50px;
 	right: 20px;
+	margin-top: 1em;
 	z-index: 2000;
 }
 
+.note-container.fullscreen .action-buttons {
+	top: 0px;
+}
+
 .action-buttons button {
 	padding: 15px;
 }

From 7de7fd84444ab8085c3386a0bebd47f11c4b554a Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Fri, 7 Jun 2019 15:55:58 +0200
Subject: [PATCH 4/5] rename labels

---
 src/components/Note.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index 90cc682d4..b1333d178 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -21,26 +21,26 @@
 						icon="icon-details"
 						@click="onToggleSidebar"
 					>
-						{{ t('notes', 'Show sidebar') }}
+						{{ t('notes', 'Details') }}
 					</ActionButton>
 					<ActionButton v-show="!preview"
 						icon="icon-toggle"
 						@click="onTogglePreview"
 					>
-						{{ t('notes', 'Show preview') }}
+						{{ t('notes', 'Preview') }}
 					</ActionButton>
 					<ActionButton v-show="preview"
 						icon="icon-rename"
 						@click="onTogglePreview"
 					>
-						{{ t('notes', 'Edit note') }}
+						{{ t('notes', 'Edit') }}
 					</ActionButton>
 					<ActionButton
 						icon="icon-fullscreen"
 						:class="{ active: fullscreen }"
 						@click="onToggleDistractionFree"
 					>
-						{{ t('notes', 'Fullscreen mode') }}
+						{{ t('notes', 'Fullscreen') }}
 					</ActionButton>
 				</Actions>
 			</span>

From d6e1969523e610ab737fbef0d7952d5e8af5c600 Mon Sep 17 00:00:00 2001
From: korelstar <korelstar@users.noreply.github.com>
Date: Fri, 7 Jun 2019 16:04:17 +0200
Subject: [PATCH 5/5] fix lint

---
 src/components/Note.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index b1333d178..b2f49c6ec 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -16,7 +16,7 @@
 					class="icon-error-color"
 					@click="onManualSave"
 				/>
-				<Actions :open.sync="actionsOpen" menuAlign="right">
+				<Actions :open.sync="actionsOpen" menu-align="right">
 					<ActionButton v-show="!sidebarOpen && !fullscreen"
 						icon="icon-details"
 						@click="onToggleSidebar"