preview mode

Author: korelstar

package-lock.json

@@ -14,6 +14,7 @@
 	"dependencies": {
 		"@babel/polyfill": "^7.4.4",
 		"easymde": "^2.6.0",
+		"markdown-it": "^8.4.2",
 		"nextcloud-axios": "^0.1.3",
 		"nextcloud-vue": "^0.11.3",
 		"vue": "^2.6.10",

package.json

@@ -96,7 +96,6 @@ export default {
 
 .markdown-editor {
 	min-height: 100%;
-	padding: 1em;
 }
 
 .CodeMirror {

src/components/EditorEasyMDE.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>

src/components/EditorMarkdownIt.vue

@@ -1,30 +1,44 @@
 <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 }"
 		>
 			<div class="note-editor">
 				<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"
 					v-tooltip="t('notes', 'Save failed. Click to retry.')"
 					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;
 	}
 }