From ca36e312c46841d48b42075ee1e6978da98da848 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 14 Jan 2021 14:48:40 -0500
Subject: [PATCH 1/3] Start on new md interface

---
 app/src/interfaces/code/code.vue              |   1 +
 .../markdown/composables/use-edit.ts          |  46 +++
 app/src/interfaces/markdown/index.ts          |  15 -
 app/src/interfaces/markdown/markdown.story.ts |  51 ---
 app/src/interfaces/markdown/markdown.vue      | 354 ++----------------
 5 files changed, 80 insertions(+), 387 deletions(-)
 create mode 100644 app/src/interfaces/markdown/composables/use-edit.ts
 delete mode 100644 app/src/interfaces/markdown/markdown.story.ts

diff --git a/app/src/interfaces/code/code.vue b/app/src/interfaces/code/code.vue
index 39c816d6a3..738d13f54d 100644
--- a/app/src/interfaces/code/code.vue
+++ b/app/src/interfaces/code/code.vue
@@ -300,6 +300,7 @@ export default defineComponent({
 	cursor: pointer;
 	transition: color var(--fast) var(--transition-out);
 	user-select: none;
+
 	&:hover {
 		color: var(--primary-125);
 		transition: none;
diff --git a/app/src/interfaces/markdown/composables/use-edit.ts b/app/src/interfaces/markdown/composables/use-edit.ts
new file mode 100644
index 0000000000..a30520e444
--- /dev/null
+++ b/app/src/interfaces/markdown/composables/use-edit.ts
@@ -0,0 +1,46 @@
+import { Ref } from '@vue/composition-api';
+
+type Alteration = 'bold' | 'italic' | 'strikethrough';
+
+type AlterationFunctions = Record<Alteration, (selections: string[]) => string[]>;
+
+export function useEdit(codemirror: Ref<CodeMirror.EditorFromTextArea | null>) {
+	const alterations: AlterationFunctions = {
+		bold(selections) {
+			return selections.map((selection) => {
+				if (selection.startsWith('**') && selection.endsWith('**')) {
+					return selection.substring(2, selection.length - 2);
+				} else {
+					return `**${selection}**`;
+				}
+			});
+		},
+		italic(selections) {
+			return selections.map((selection) => {
+				if (selection.startsWith('*') && selection.endsWith('*')) {
+					return selection.substring(1, selection.length - 1);
+				} else {
+					return `*${selection}*`;
+				}
+			});
+		},
+		strikethrough(selections) {
+			return selections.map((selection) => {
+				if (selection.startsWith('~~') && selection.endsWith('~~')) {
+					return selection.substring(2, selection.length - 2);
+				} else {
+					return `~~${selection}~~`;
+				}
+			});
+		}
+	}
+
+	return { edit };
+
+	function edit(type: Alteration) {
+		if (codemirror.value) {
+			const selections = codemirror.value.getSelections();
+			codemirror.value.replaceSelection(alterations[type](selections));
+		}
+	}
+}
diff --git a/app/src/interfaces/markdown/index.ts b/app/src/interfaces/markdown/index.ts
index 6ebe816cbc..6b8a69efa3 100644
--- a/app/src/interfaces/markdown/index.ts
+++ b/app/src/interfaces/markdown/index.ts
@@ -21,20 +21,5 @@ export default defineInterface(({ i18n }) => ({
 				},
 			},
 		},
-		{
-			field: 'tabbed',
-			name: i18n.t('interfaces.markdown.tabbed'),
-			type: 'boolean',
-			meta: {
-				width: 'half',
-				interface: 'toggle',
-				options: {
-					label: i18n.t('interfaces.markdown.tabbed_label'),
-				},
-			},
-			schema: {
-				default_value: false,
-			},
-		},
 	],
 }));
diff --git a/app/src/interfaces/markdown/markdown.story.ts b/app/src/interfaces/markdown/markdown.story.ts
deleted file mode 100644
index 889813b0cf..0000000000
--- a/app/src/interfaces/markdown/markdown.story.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { withKnobs, boolean, text, optionsKnob } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import Vue from 'vue';
-import InterfaceMarkdown from './markdown.vue';
-import markdown from './readme.md';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import { defineComponent, ref } from '@vue/composition-api';
-import RawValue from '../../../.storybook/raw-value.vue';
-import i18n from '@/lang';
-
-Vue.component('interface-markdown', InterfaceMarkdown);
-
-export default {
-	title: 'Interfaces / Markdown',
-	decorators: [withKnobs, withPadding],
-	parameters: {
-		notes: markdown,
-	},
-};
-
-export const basic = () =>
-	defineComponent({
-		components: { RawValue },
-		i18n,
-		props: {
-			disabled: {
-				default: boolean('Disabled', false, 'Options'),
-			},
-			placeholder: {
-				default: text('Placeholder', 'Enter a value...', 'Options'),
-			},
-			tabbed: {
-				default: boolean('Tabbed', false, 'Options'),
-			},
-		},
-		setup() {
-			const value = ref('');
-			const onInput = action('input');
-			return { onInput, value };
-		},
-		template: `
-		<div>
-			<interface-markdown
-				v-model="value"
-				v-bind="{ placeholder, tabbed, disabled }"
-				@input="onInput"
-			/>
-			<raw-value>{{ value }}</raw-value>
-		</div>
-		`,
-	});
diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue
index 464fea1d63..42e8ff58d9 100644
--- a/app/src/interfaces/markdown/markdown.vue
+++ b/app/src/interfaces/markdown/markdown.vue
@@ -1,33 +1,24 @@
 <template>
-	<div class="interface-markdown" :class="{ tabbed }">
-		<div v-if="tabbed" class="toolbar">
-			<v-tabs v-model="currentTab">
-				<v-tab>
-					<v-icon name="code" left />
-					{{ $t('interfaces.markdown.edit') }}
-				</v-tab>
-				<v-tab>
-					<v-icon name="visibility" outline left />
-					{{ $t('interfaces.markdown.preview') }}
-				</v-tab>
-			</v-tabs>
-		</div>
-		<v-textarea
-			v-show="showEdit"
-			:placeholder="placeholder"
-			:value="value"
-			:disabled="disabled"
-			@input="$listeners.input"
-		/>
-		<div v-show="showPreview" class="preview-container">
-			<div class="preview" v-html="html"></div>
+	<div class="interface-markdown">
+		<div class="toolbar">
+			<v-button icon @click="edit('bold')"><v-icon name="format_bold" /></v-button>
+			<v-button icon @click="edit('italic')"><v-icon name="format_italic" /></v-button>
+			<v-button icon @click="edit('strikethrough')"><v-icon name="format_strikethrough" /></v-button>
 		</div>
+
+		<textarea ref="codemirrorEl" :value="value || ''" />
+
+		<div class="preview"></div>
 	</div>
 </template>
 
 <script lang="ts">
-import marked from 'marked';
-import { defineComponent, computed, ref } from '@vue/composition-api';
+import { defineComponent, computed, ref, onMounted, onUnmounted } from '@vue/composition-api';
+
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/markdown/markdown';
+
+import { useEdit } from './composables/use-edit';
 
 export default defineComponent({
 	props: {
@@ -43,310 +34,31 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		tabbed: {
-			type: Boolean,
-			default: true,
-		},
 	},
 	setup(props) {
-		const currentTab = ref([0]);
+		const codemirrorEl = ref<HTMLTextAreaElement | null>(null);
+		const codemirror = ref<CodeMirror.EditorFromTextArea | null>(null);
 
-		const html = computed(() => (props.value ? marked(props.value) : ''));
-		const showEdit = computed(() => !props.tabbed || currentTab.value[0] === 0);
-		const showPreview = computed(() => !props.tabbed || currentTab.value[0] !== 0);
+		onMounted(async () => {
+			if (codemirrorEl.value) {
+				codemirror.value = CodeMirror.fromTextArea(codemirrorEl.value, {
+					mode: 'markdown'
+				});
 
-		return { html, currentTab, showEdit, showPreview };
+				codemirror.value.setValue(props.value || '');
+			}
+		});
+
+		onUnmounted(() => {
+			codemirror.value?.toTextArea();
+		});
+
+		const { edit } = useEdit(codemirror);
+
+		return { codemirrorEl, edit };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.interface-markdown {
-	--v-textarea-min-height: var(--input-height-tall);
-	--v-textarea-max-height: 400px;
-	--v-tab-background-color: var(--background-subdued);
-	--v-tab-background-color-active: var(--background-subdued);
-
-	display: flex;
-	flex-wrap: wrap;
-
-	.toolbar {
-		width: 100%;
-		height: 42px;
-		background-color: var(--background-subdued);
-		border: var(--border-width) solid var(--border-normal);
-		border-radius: var(--border-radius) var(--border-radius) 0 0;
-	}
-
-	.v-textarea {
-		height: unset;
-		min-height: var(--input-height-tall);
-		border-radius: var(--border-radius) 0 0 var(--border-radius);
-	}
-
-	.preview-container {
-		min-height: var(--v-textarea-min-height);
-		max-height: var(--v-textarea-max-height);
-		padding: var(--input-padding);
-		overflow-y: auto;
-		border: var(--border-width) solid var(--border-normal);
-		border-radius: 0 var(--border-radius) var(--border-radius) 0;
-	}
-
-	.v-textarea,
-	.preview-container {
-		flex-basis: 100px;
-		flex-grow: 1;
-	}
-
-	&:not(.tabbed) .preview-container {
-		border-left: none;
-	}
-
-	&.tabbed .v-textarea {
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
-	}
-
-	&.tabbed .preview-container {
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
-	}
-
-	&.tabbed .toolbar {
-		border-bottom: none;
-	}
-	&.tabbed .expand {
-		right: 0;
-	}
-	&.tabbed.hasScrollbar .expand {
-		right: 14px;
-	}
-
-	::v-deep {
-		.preview {
-			font-weight: 500;
-			font-size: 14px;
-			& > *:first-child {
-				margin-top: 0;
-			}
-			& > *:last-child {
-				margin-bottom: 0;
-			}
-			a {
-				text-decoration: underline;
-			}
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				position: relative;
-				margin: 20px 0 10px;
-				padding: 0;
-				font-weight: 600;
-				cursor: text;
-			}
-			pre {
-				padding: 6px 10px;
-				overflow: auto;
-				font-size: 13px;
-				line-height: 19px;
-				background-color: var(--background-page);
-				border: 1px solid var(--background-normal);
-				border-radius: var(--border-radius);
-			}
-			code,
-			tt {
-				margin: 0 2px;
-				padding: 0 5px;
-				white-space: nowrap;
-				background-color: var(--background-page);
-				border: 1px solid var(--background-normal);
-				border-radius: var(--border-radius);
-			}
-			pre code {
-				margin: 0;
-				padding: 0;
-				white-space: pre;
-				background: transparent;
-				border: none;
-			}
-			pre code,
-			pre tt {
-				background-color: transparent;
-				border: none;
-			}
-			h1 tt,
-			h1 code {
-				font-size: inherit;
-			}
-			h2 tt,
-			h2 code {
-				font-size: inherit;
-			}
-			h3 tt,
-			h3 code {
-				font-size: inherit;
-			}
-			h4 tt,
-			h4 code {
-				font-size: inherit;
-			}
-			h5 tt,
-			h5 code {
-				font-size: inherit;
-			}
-			h6 tt,
-			h6 code {
-				font-size: inherit;
-			}
-			h1 {
-				font-size: 28px;
-			}
-			h2 {
-				font-size: 24px;
-			}
-			h3 {
-				font-size: 18px;
-			}
-			h4 {
-				font-size: 16px;
-			}
-			h5 {
-				font-size: 14px;
-			}
-			h6 {
-				color: var(--foreground-normal);
-				font-size: 14px;
-			}
-			p,
-			blockquote,
-			ul,
-			ol,
-			dl,
-			li,
-			table,
-			pre {
-				margin: 15px 0;
-			}
-			& > h2:first-child {
-				margin-top: 0;
-				padding-top: 0;
-			}
-			& > h1:first-child {
-				margin-top: 0;
-				padding-top: 0;
-			}
-			& > h3:first-child,
-			& > h4:first-child,
-			& > h5:first-child,
-			& > h6:first-child {
-				margin-top: 0;
-				padding-top: 0;
-			}
-			a:first-child h1,
-			a:first-child h2,
-			a:first-child h3,
-			a:first-child h4,
-			a:first-child h5,
-			a:first-child h6 {
-				margin-top: 0;
-				padding-top: 0;
-			}
-			h1 p,
-			h2 p,
-			h3 p,
-			h4 p,
-			h5 p,
-			h6 p {
-				margin-top: 0;
-			}
-			li p.first {
-				display: inline-block;
-			}
-			ul,
-			ol {
-				padding-left: 30px;
-				li {
-					margin: 0;
-				}
-			}
-			ul :first-child,
-			ol :first-child {
-				margin-top: 0;
-			}
-			ul :last-child,
-			ol :last-child {
-				margin-bottom: 0;
-			}
-			blockquote {
-				padding: 0 15px;
-				color: var(--foreground-normal);
-				border-left: 4px solid var(--background-normal);
-			}
-			blockquote > :first-child {
-				margin-top: 0;
-			}
-			blockquote > :last-child {
-				margin-bottom: 0;
-			}
-			table {
-				padding: 0;
-				border-collapse: collapse;
-				border-spacing: 0;
-			}
-			table tr {
-				margin: 0;
-				padding: 0;
-				background-color: white;
-				border-top: 1px solid var(--background-normal);
-			}
-			table tr:nth-child(2n) {
-				background-color: var(--background-page);
-			}
-			table tr th {
-				margin: 0;
-				padding: 6px 13px;
-				font-weight: bold;
-				text-align: left;
-				border: 1px solid var(--background-normal);
-			}
-			table tr td {
-				margin: 0;
-				padding: 6px 13px;
-				text-align: left;
-				border: 1px solid var(--background-normal);
-			}
-			table tr th :first-child,
-			table tr td :first-child {
-				margin-top: 0;
-			}
-			table tr th :last-child,
-			table tr td :last-child {
-				margin-bottom: 0;
-			}
-			img {
-				max-width: 100%;
-			}
-			.highlight pre {
-				padding: 6px 10px;
-				overflow: auto;
-				font-size: 13px;
-				line-height: 19px;
-				background-color: var(--background-page);
-				border: 1px solid var(--background-normal);
-				border-radius: var(--border-radius);
-			}
-			hr {
-				margin: 20px auto;
-				border: none;
-				border-top: 1px solid var(--background-normal);
-			}
-			b,
-			strong {
-				font-weight: 600;
-			}
-		}
-	}
-}
 </style>

From 2aeafb2bce63d08cfdd4d02cb1261309b1659968 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 14 Jan 2021 19:34:16 -0500
Subject: [PATCH 2/3] Finish markdown interface v3

---
 app/src/components/register.ts                |   2 +
 .../v-button-group/v-button-group.vue         |   8 +-
 app/src/components/v-button/v-button.vue      |  11 +-
 .../markdown/composables/use-edit.ts          | 246 +++++++++++++--
 app/src/interfaces/markdown/markdown.vue      | 290 +++++++++++++++++-
 .../interfaces/wysiwyg/tinymce-overrides.css  |  13 +-
 package-lock.json                             |  65 +++-
 package.json                                  |   6 +-
 8 files changed, 578 insertions(+), 63 deletions(-)

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 53c643919b..0540da310e 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -4,6 +4,7 @@ import VAvatar from './v-avatar/';
 import VBadge from './v-badge/';
 import VBreadcrumb from './v-breadcrumb';
 import VButton from './v-button/';
+import VButtonGroup from './v-button-group/';
 import VCard, { VCardActions, VCardTitle, VCardSubtitle, VCardText } from './v-card';
 import VCheckbox from './v-checkbox/';
 import VChip from './v-chip/';
@@ -43,6 +44,7 @@ Vue.component('v-avatar', VAvatar);
 Vue.component('v-badge', VBadge);
 Vue.component('v-breadcrumb', VBreadcrumb);
 Vue.component('v-button', VButton);
+Vue.component('v-button-group', VButtonGroup);
 Vue.component('v-card-actions', VCardActions);
 Vue.component('v-card-subtitle', VCardSubtitle);
 Vue.component('v-card-text', VCardText);
diff --git a/app/src/components/v-button-group/v-button-group.vue b/app/src/components/v-button-group/v-button-group.vue
index 13d0c60dbe..a479275e4b 100644
--- a/app/src/components/v-button-group/v-button-group.vue
+++ b/app/src/components/v-button-group/v-button-group.vue
@@ -85,21 +85,21 @@ body {
 	}
 
 	&.tile .v-item-group ::v-deep .v-button {
-		&:first-child {
+		&:first-child .button {
 			--border-radius: 0px;
 		}
 
-		&:last-child {
+		&:last-child .button {
 			--border-radius: 0px;
 		}
 	}
 
 	&.rounded:not(.tile) .v-item-group ::v-deep .v-button {
-		&:first-child {
+		&:first-child .button {
 			--border-radius: var(--v-button-height) 0px 0px var(--v-button-height);
 		}
 
-		&:last-child {
+		&:last-child .button {
 			--border-radius: 0px var(--v-button-height) var(--v-button-height) 0px;
 		}
 	}
diff --git a/app/src/components/v-button/v-button.vue b/app/src/components/v-button/v-button.vue
index 374d15658c..86c4a0f49f 100644
--- a/app/src/components/v-button/v-button.vue
+++ b/app/src/components/v-button/v-button.vue
@@ -209,12 +209,6 @@ body {
 			border-color: var(--v-button-background-color-hover);
 		}
 
-		&.activated {
-		    color: var(--v-button-color);
-		    background-color: var(--v-button-background-color);
-		    border-color: var(--v-button-background-color);
-		}
-
 		&.align-left {
 			justify-content: flex-start;
 		}
@@ -267,9 +261,9 @@ body {
 			--v-button-font-size: 12px;
 			--v-button-font-weight: 600;
 			--v-button-min-width: 60px;
+			--border-radius: 4px;
 
 			padding: 0 12px;
-			border-radius: 4px;
 		}
 
 		&.small {
@@ -336,7 +330,8 @@ body {
 			}
 		}
 
-		&.activated {
+		&.activated,
+		&.active {
 			--v-button-color: var(--v-button-color-activated) !important;
 			--v-button-background-color: var(--v-button-background-color-activated) !important;
 			--v-button-background-color-hover: var(--v-button-background-color-activated) !important;
diff --git a/app/src/interfaces/markdown/composables/use-edit.ts b/app/src/interfaces/markdown/composables/use-edit.ts
index a30520e444..095a36ae98 100644
--- a/app/src/interfaces/markdown/composables/use-edit.ts
+++ b/app/src/interfaces/markdown/composables/use-edit.ts
@@ -1,46 +1,234 @@
-import { Ref } from '@vue/composition-api';
+import { Ref, nextTick } from '@vue/composition-api';
+import { Position } from 'codemirror';
+import { cloneDeep } from 'lodash';
 
-type Alteration = 'bold' | 'italic' | 'strikethrough';
+type Alteration =
+	| 'bold'
+	| 'italic'
+	| 'strikethrough'
+	| 'listBulleted'
+	| 'listNumbered'
+	| 'heading'
+	| 'blockquote'
+	| 'code'
+	| 'link';
 
-type AlterationFunctions = Record<Alteration, (selections: string[]) => string[]>;
+type AlterationFunctions = Record<
+	Alteration,
+	(
+		selections: string,
+		cursors: { cursorHead: Position; cursorFrom: Position; cursorTo: Position }
+	) => { newSelection: string; newCursor: Position; highlight?: { from: Position; to: Position } }
+>;
 
 export function useEdit(codemirror: Ref<CodeMirror.EditorFromTextArea | null>) {
 	const alterations: AlterationFunctions = {
-		bold(selections) {
-			return selections.map((selection) => {
-				if (selection.startsWith('**') && selection.endsWith('**')) {
-					return selection.substring(2, selection.length - 2);
-				} else {
-					return `**${selection}**`;
-				}
-			});
+		heading(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			if (selection.startsWith('# ')) {
+				newSelection = selection.substring(2);
+			} else {
+				newSelection = `# ${selection}`;
+				newCursor.ch = newCursor.ch + 2;
+			}
+
+			return { newSelection, newCursor };
 		},
-		italic(selections) {
-			return selections.map((selection) => {
-				if (selection.startsWith('*') && selection.endsWith('*')) {
-					return selection.substring(1, selection.length - 1);
-				} else {
-					return `*${selection}*`;
-				}
-			});
+		bold(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			if (selection.startsWith('**') && selection.endsWith('**')) {
+				newSelection = selection.substring(2, selection.length - 2);
+			} else {
+				newSelection = `**${selection}**`;
+				newCursor.ch = newCursor.ch + 2;
+			}
+
+			return { newSelection, newCursor };
 		},
-		strikethrough(selections) {
-			return selections.map((selection) => {
-				if (selection.startsWith('~~') && selection.endsWith('~~')) {
-					return selection.substring(2, selection.length - 2);
+		italic(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			if (selection.startsWith('*') && selection.endsWith('*')) {
+				newSelection = selection.substring(1, selection.length - 1);
+			} else {
+				newSelection = `*${selection}*`;
+				newCursor.ch = newCursor.ch + 1;
+			}
+
+			return { newSelection, newCursor };
+		},
+		strikethrough(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			if (selection.startsWith('~~') && selection.endsWith('~~')) {
+				newSelection = selection.substring(2, selection.length - 2);
+			} else {
+				newSelection = `~~${selection}~~`;
+				newCursor.ch = newCursor.ch + 2;
+			}
+
+			return { newSelection, newCursor };
+		},
+		listBulleted(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			const lines = selection.split('\n');
+
+			const isList = lines.every((line) => line.startsWith('- '));
+
+			if (isList) {
+				newSelection = lines.map((line) => line.substring(2)).join('\n');
+			} else {
+				newSelection = lines.map((line) => `- ${line}`).join('\n');
+			}
+
+			if (!selection) {
+				newCursor.ch = newCursor.ch + 2;
+			}
+
+			return { newSelection, newCursor };
+		},
+		listNumbered(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			const lines = selection.split('\n');
+
+			const isList = lines.every((line, index) => line.startsWith(`${index + 1}.`));
+
+			if (isList) {
+				newSelection = lines.map((line) => line.substring(3)).join('\n');
+			} else {
+				newSelection = lines.map((line, index) => `${index + 1}. ${line}`).join('\n');
+			}
+
+			if (!selection) {
+				newCursor.ch = newCursor.ch + 2;
+			}
+
+			return { newSelection, newCursor };
+		},
+		blockquote(selection, { cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+
+			const lines = selection.split('\n');
+
+			const isList = lines.every((line) => line.startsWith('> '));
+
+			if (isList) {
+				newSelection = lines.map((line) => line.substring(2)).join('\n');
+			} else {
+				newSelection = lines.map((line) => `> ${line}`).join('\n');
+			}
+
+			if (!selection) {
+				newCursor.ch = newCursor.ch + 2;
+			}
+
+			return { newSelection, newCursor };
+		},
+		code(selection, { cursorTo }) {
+			if (selection.includes('\n')) {
+				// Multiline
+				let newSelection = selection;
+				let newCursor = cursorTo;
+
+				if (selection.startsWith('```') && selection.endsWith('```')) {
+					newSelection = selection.substring(3, selection.length - 3);
 				} else {
-					return `~~${selection}~~`;
+					newSelection = '```\n' + newSelection + '\n```';
+					newCursor.line = newCursor.line + 1;
 				}
-			});
-		}
-	}
+
+				return { newSelection, newCursor };
+			} else {
+				// Inline
+				let newSelection = selection;
+				let newCursor = cursorTo;
+
+				if (selection.startsWith('`') && selection.endsWith('`')) {
+					newSelection = selection.substring(1, selection.length - 1);
+				} else {
+					newSelection = `\`${selection}\``;
+					newCursor.ch = newCursor.ch + 1;
+				}
+
+				return { newSelection, newCursor };
+			}
+		},
+		link(selection, { cursorFrom, cursorTo }) {
+			let newSelection = selection;
+			let newCursor = cursorTo;
+			let highlight;
+
+			if (selection.endsWith('](url)')) {
+				newSelection = selection.substring(1, selection.length - 6);
+			} else if (selection.startsWith('http')) {
+				newSelection = `[](${selection})`;
+				newCursor.ch = cursorFrom.ch + 1;
+			} else {
+				newSelection = `[${selection}](url)`;
+
+				if (selection) {
+					highlight = {
+						from: {
+							...cloneDeep(newCursor),
+							ch: newCursor.ch + 3,
+						},
+						to: {
+							...cloneDeep(newCursor),
+							ch: newCursor.ch + 6,
+						},
+					};
+				} else {
+					newCursor.ch = cursorFrom.ch + 1;
+				}
+			}
+
+			return { newSelection, newCursor, highlight };
+		},
+	};
 
 	return { edit };
 
 	function edit(type: Alteration) {
 		if (codemirror.value) {
-			const selections = codemirror.value.getSelections();
-			codemirror.value.replaceSelection(alterations[type](selections));
+			const cursor = codemirror.value.getCursor('head');
+			const cursorFrom = codemirror.value.getCursor('from');
+			const cursorTo = codemirror.value.getCursor('to');
+
+			const wordRange = codemirror.value.findWordAt(cursor);
+			const word = codemirror.value.getRange(wordRange.anchor, wordRange.head).trim();
+
+			const selection = codemirror.value.getSelection();
+
+			const { newSelection, newCursor, highlight } = alterations[type](selection || word, {
+				cursorFrom: cloneDeep(selection ? cursorFrom : wordRange.anchor),
+				cursorTo: cloneDeep(selection ? cursorTo : wordRange.head),
+				cursorHead: cursor,
+			});
+
+			if (word && !selection) {
+				codemirror.value.replaceRange(newSelection, wordRange.anchor, wordRange.head);
+			} else {
+				codemirror.value.replaceSelection(newSelection);
+			}
+
+			codemirror.value.setCursor(newCursor);
+
+			if (highlight) {
+				codemirror.value.setSelection(highlight.from, highlight.to);
+			}
+
+			codemirror.value.focus();
 		}
 	}
 }
diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue
index 42e8ff58d9..76f20a2a17 100644
--- a/app/src/interfaces/markdown/markdown.vue
+++ b/app/src/interfaces/markdown/markdown.vue
@@ -1,19 +1,34 @@
 <template>
-	<div class="interface-markdown">
+	<div class="interface-markdown" :class="view[0]">
 		<div class="toolbar">
-			<v-button icon @click="edit('bold')"><v-icon name="format_bold" /></v-button>
-			<v-button icon @click="edit('italic')"><v-icon name="format_italic" /></v-button>
-			<v-button icon @click="edit('strikethrough')"><v-icon name="format_strikethrough" /></v-button>
+			<v-button small icon @click="edit('heading')"><v-icon name="title" /></v-button>
+			<v-button small icon @click="edit('bold')"><v-icon name="format_bold" /></v-button>
+			<v-button small icon @click="edit('italic')"><v-icon name="format_italic" /></v-button>
+			<v-button small icon @click="edit('strikethrough')"><v-icon name="format_strikethrough" /></v-button>
+			<v-button small icon @click="edit('listBulleted')"><v-icon name="format_list_bulleted" /></v-button>
+			<v-button small icon @click="edit('listNumbered')"><v-icon name="format_list_numbered" /></v-button>
+			<v-button small icon @click="edit('blockquote')"><v-icon name="format_quote" /></v-button>
+			<v-button small icon @click="edit('code')"><v-icon name="code" /></v-button>
+			<v-button small icon @click="edit('link')"><v-icon name="insert_link" /></v-button>
+
+			<div class="spacer"></div>
+
+			<v-button-group class="view" mandatory v-model="view" rounded>
+				<v-button x-small value="editor">Editor</v-button>
+				<v-button x-small value="preview">Preview</v-button>
+			</v-button-group>
 		</div>
 
 		<textarea ref="codemirrorEl" :value="value || ''" />
 
-		<div class="preview"></div>
+		<div v-show="view[0] === 'preview'" class="preview-box" v-html="html"></div>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, onUnmounted } from '@vue/composition-api';
+import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from '@vue/composition-api';
+import { sanitize } from 'dompurify';
+import marked from 'marked';
 
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/markdown/markdown';
@@ -35,17 +50,27 @@ export default defineComponent({
 			default: null,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const codemirrorEl = ref<HTMLTextAreaElement | null>(null);
 		const codemirror = ref<CodeMirror.EditorFromTextArea | null>(null);
 
+		const view = ref(['editor']);
+
 		onMounted(async () => {
 			if (codemirrorEl.value) {
 				codemirror.value = CodeMirror.fromTextArea(codemirrorEl.value, {
-					mode: 'markdown'
+					mode: 'markdown',
+					configureMouse: () => ({ addNew: false }),
 				});
 
 				codemirror.value.setValue(props.value || '');
+
+				codemirror.value.on('change', (cm, { origin }) => {
+					if (origin === 'setValue') return;
+
+					const content = cm.getValue();
+					emit('input', content);
+				});
 			}
 		});
 
@@ -53,12 +78,259 @@ export default defineComponent({
 			codemirror.value?.toTextArea();
 		});
 
+		watch(
+			() => props.value,
+			(newValue) => {
+				if (codemirror.value?.getValue() !== newValue) {
+					codemirror.value?.setValue(props.value || '');
+				}
+			}
+		);
+
 		const { edit } = useEdit(codemirror);
 
-		return { codemirrorEl, edit };
+		const html = computed(() => {
+			const html = marked(props.value || '');
+			const htmlSanitized = sanitize(html);
+			return htmlSanitized;
+		});
+
+		return { codemirrorEl, edit, view, html };
 	},
 });
 </script>
 
 <style lang="scss" scoped>
+.interface-markdown {
+	--v-button-background-color: transparent;
+	--v-button-color: var(--foreground-normal);
+	--v-button-background-color-hover: var(--border-normal);
+	--v-button-color-hover: var(--foreground-normal);
+
+	min-height: 300px;
+	overflow: hidden;
+	border: 2px solid var(--border-normal);
+	border-radius: var(--border-radius);
+}
+
+textarea {
+	display: none;
+}
+
+.interface-markdown ::v-deep .CodeMirror {
+	border: none;
+	border-radius: 0;
+
+	.CodeMirror-lines {
+		padding: 0 20px;
+
+		&:first-of-type {
+			margin-top: 20px;
+		}
+
+		&:last-of-type {
+			margin-bottom: 20px;
+		}
+	}
+
+	.CodeMirror-scroll {
+		min-height: 300px - 40px;
+	}
+}
+
+.interface-markdown.preview {
+	::v-deep .CodeMirror {
+		display: none;
+	}
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	height: 40px;
+	padding: 0 4px;
+	background-color: var(--background-subdued);
+	border-bottom: 2px solid var(--border-normal);
+
+	.v-button + .v-button {
+		margin-left: 2px;
+	}
+
+	.spacer {
+		flex-grow: 1;
+	}
+
+	.view {
+		--v-button-background-color: var(--border-subdued);
+		--v-button-color: var(--foreground-subdued);
+		--v-button-background-color-hover: var(--border-normal);
+		--v-button-color-hover: var(--foreground-normal);
+		--v-button-background-color-activated: var(--border-normal);
+		--v-button-color-activated: var(--foreground-normal);
+	}
+}
+
+.preview-box {
+	padding: 20px;
+
+	::v-deep {
+		h1 {
+			margin-bottom: 0;
+			font-weight: 300;
+			font-size: 44px;
+			font-family: var(--font-serif), serif;
+			line-height: 52px;
+		}
+
+		h2 {
+			margin-top: 60px;
+			margin-bottom: 0;
+			font-weight: 600;
+			font-size: 34px;
+			line-height: 38px;
+		}
+
+		h3 {
+			margin-top: 40px;
+			margin-bottom: 0;
+			font-weight: 600;
+			font-size: 26px;
+			line-height: 31px;
+		}
+
+		h4 {
+			margin-top: 40px;
+			margin-bottom: 0;
+			font-weight: 600;
+			font-size: 22px;
+			line-height: 28px;
+		}
+
+		h5 {
+			margin-top: 40px;
+			margin-bottom: 0;
+			font-weight: 600;
+			font-size: 18px;
+			line-height: 26px;
+		}
+
+		h6 {
+			margin-top: 40px;
+			margin-bottom: 0;
+			font-weight: 600;
+			font-size: 16px;
+			line-height: 24px;
+		}
+
+		p {
+			margin-top: 20px;
+			margin-bottom: 20px;
+			font-size: 16px;
+			font-family: var(--font-serif), serif;
+			line-height: 32px;
+		}
+
+		a {
+			color: #546e7a;
+		}
+
+		ul,
+		ol {
+			margin: 24px 0;
+			font-size: 18px;
+			font-family: var(--font-serif), serif;
+			line-height: 34px;
+		}
+
+		ul ul,
+		ol ol,
+		ul ol,
+		ol ul {
+			margin: 0;
+		}
+
+		b,
+		strong {
+			font-weight: 600;
+		}
+
+		code {
+			padding: 2px 4px;
+			font-size: 18px;
+			font-family: var(--family-monospace), monospace;
+			line-height: 34px;
+			overflow-wrap: break-word;
+			background-color: #eceff1;
+			border-radius: 4px;
+		}
+
+		pre {
+			padding: 20px;
+			overflow: auto;
+			font-size: 18px;
+			font-family: var(--family-monospace), monospace;
+			line-height: 24px;
+			background-color: #eceff1;
+			border-radius: 4px;
+		}
+
+		blockquote {
+			margin-left: -10px;
+			padding-left: 10px;
+			font-size: 18px;
+			font-family: var(--font-serif), serif;
+			font-style: italic;
+			line-height: 34px;
+			border-left: 2px solid #546e7a;
+
+			blockquote {
+				margin-left: 10px;
+			}
+		}
+
+		video,
+		iframe,
+		img {
+			max-width: 100%;
+			height: auto;
+			border-radius: 4px;
+		}
+
+		hr {
+			margin-top: 52px;
+			margin-bottom: 56px;
+			text-align: center;
+			border: 0;
+		}
+
+		hr::after {
+			font-size: 28px;
+			line-height: 0;
+			letter-spacing: 16px;
+			content: '...';
+		}
+
+		table {
+			border-collapse: collapse;
+		}
+
+		table th,
+		table td {
+			padding: 0.4rem;
+			border: 1px solid #cfd8dc;
+		}
+
+		figure {
+			display: table;
+			margin: 1rem auto;
+		}
+
+		figure figcaption {
+			display: block;
+			margin-top: 0.25rem;
+			color: #999;
+			text-align: center;
+		}
+	}
+}
 </style>
diff --git a/app/src/interfaces/wysiwyg/tinymce-overrides.css b/app/src/interfaces/wysiwyg/tinymce-overrides.css
index 593c9e2a52..5d870cd5a7 100644
--- a/app/src/interfaces/wysiwyg/tinymce-overrides.css
+++ b/app/src/interfaces/wysiwyg/tinymce-overrides.css
@@ -5,7 +5,9 @@
 }
 
 .tox .tox-tbtn {
-	margin: 2px 2px 4px 0;
+	width: 36px;
+	height: 36px;
+	margin: 0;
 	color: var(--foreground-normal);
 }
 
@@ -108,8 +110,9 @@
 .tox .tox-toolbar,
 .tox .tox-toolbar__primary,
 .tox .tox-toolbar__overflow {
-	background: url("data:image/svg+xml;charset=utf8,%3Csvg height='40px' viewBox='0 0 40 40px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='2' fill='%23cfd8dc'/%3E%3C/svg%3E")
-		left 0 top 0 var(--background-subdued);
+	height: 40px;
+	background: var(--background-subdued);
+	border-bottom: 2px solid var(--border-normal);
 }
 
 .tox .tox-pop__dialog .tox-toolbar {
@@ -149,6 +152,10 @@ body.dark .tox .tox-toolbar__overflow {
 	background: var(--border-normal);
 }
 
+.tox .tox-tbtn + .tox .tox-tbtn {
+	margin-left: 2px;
+}
+
 .tox .tox-swatches__picker-btn:hover {
 	background: transparent;
 	border: none;
diff --git a/package-lock.json b/package-lock.json
index f2adebf247..0cfa0e66e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
 				"@directus/sdk-js": "file:packages/sdk-js",
 				"@directus/specs": "file:packages/specs",
 				"create-directus-project": "file:packages/create-directus-project",
-				"directus": "file:api"
+				"directus": "file:api",
+				"dompurify": "^2.2.6"
 			},
 			"devDependencies": {
 				"@apidevtools/swagger-cli": "^4.0.4",
@@ -42,13 +43,14 @@
 				"@types/bytes": "^3.1.0",
 				"@types/chai": "^4.2.14",
 				"@types/clear": "^0.1.0",
-				"@types/codemirror": "^0.0.98",
+				"@types/codemirror": "^0.0.106",
 				"@types/color": "^3.0.1",
 				"@types/color-string": "^1.5.0",
 				"@types/cookie-parser": "^1.4.2",
 				"@types/cors": "^2.8.7",
 				"@types/debug": "^4.1.5",
 				"@types/diff": "^4.0.2",
+				"@types/dompurify": "^2.2.1",
 				"@types/express": "^4.17.9",
 				"@types/express-pino-logger": "^4.0.2",
 				"@types/express-session": "^1.17.2",
@@ -182,6 +184,7 @@
 			}
 		},
 		"api": {
+			"name": "directus",
 			"version": "9.0.0-rc.28",
 			"license": "GPL-3.0-only",
 			"dependencies": {
@@ -448,6 +451,7 @@
 			}
 		},
 		"app": {
+			"name": "@directus/app",
 			"version": "9.0.0-rc.28",
 			"dependencies": {
 				"@directus/format-title": "file:../packages/format-title"
@@ -575,6 +579,7 @@
 			}
 		},
 		"docs": {
+			"name": "@directus/docs",
 			"version": "9.0.0-rc.28",
 			"license": "ISC",
 			"devDependencies": {
@@ -7465,9 +7470,9 @@
 			"dev": true
 		},
 		"node_modules/@types/codemirror": {
-			"version": "0.0.98",
-			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.98.tgz",
-			"integrity": "sha512-cbty5LPayy2vNSeuUdjNA9tggG+go5vAxmnLDRWpiZI5a+RDBi9dlozy4/jW/7P/gletbBWbQREEa7A81YxstA==",
+			"version": "0.0.106",
+			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.106.tgz",
+			"integrity": "sha512-o2bJWaI56+J1IuzUyb1KKNLs0Tm1sqdosGeSneicQZpg9s59++8Nz70KOD6IACiZWI6b+H0H+UE+JRkgTUO3Ww==",
 			"dev": true,
 			"dependencies": {
 				"@types/tern": "*"
@@ -7549,6 +7554,15 @@
 			"integrity": "sha512-mIenTfsIe586/yzsyfql69KRnA75S8SVXQbTLpDejRrjH0QSJcpu3AUOi/Vjnt9IOsXKxPhJfGpQUNMueIU1fQ==",
 			"dev": true
 		},
+		"node_modules/@types/dompurify": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-2.2.1.tgz",
+			"integrity": "sha512-3JwbEeRVQ3n6+JgBW/hCdkydRk9/vWT+UEglcXEJqLJEcUganDH37zlfLznxPKTZZfDqA9K229l1qN458ubcOQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/trusted-types": "*"
+			}
+		},
 		"node_modules/@types/eslint-visitor-keys": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -8061,6 +8075,12 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/trusted-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.0.tgz",
+			"integrity": "sha512-I8MnZqNXsOLHsU111oHbn3khtvKMi5Bn4qVFsIWSJcCP1KKDiXX5AEw8UPk0nSopeC+Hvxt6yAy1/a5PailFqg==",
+			"dev": true
+		},
 		"node_modules/@types/tunnel": {
 			"version": "0.0.0",
 			"resolved": "https://registry.npmjs.org/@types/tunnel/-/tunnel-0.0.0.tgz",
@@ -18039,6 +18059,11 @@
 				"url": "https://github.com/fb55/domhandler?sponsor=1"
 			}
 		},
+		"node_modules/dompurify": {
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz",
+			"integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ=="
+		},
 		"node_modules/domutils": {
 			"version": "2.4.4",
 			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
@@ -44738,6 +44763,7 @@
 			}
 		},
 		"packages/format-title": {
+			"name": "@directus/format-title",
 			"version": "9.0.0-rc.28",
 			"license": "MIT",
 			"devDependencies": {
@@ -44763,6 +44789,7 @@
 			}
 		},
 		"packages/schema": {
+			"name": "@directus/schema",
 			"version": "9.0.0-rc.28",
 			"license": "GPL-3.0",
 			"devDependencies": {
@@ -44774,6 +44801,7 @@
 			}
 		},
 		"packages/sdk-js": {
+			"name": "@directus/sdk-js",
 			"version": "9.0.0-rc.28",
 			"license": "MIT",
 			"dependencies": {
@@ -44782,6 +44810,7 @@
 			}
 		},
 		"packages/specs": {
+			"name": "@directus/specs",
 			"version": "9.0.0-rc.28",
 			"license": "GPL-3.0",
 			"devDependencies": {
@@ -50621,9 +50650,9 @@
 			"dev": true
 		},
 		"@types/codemirror": {
-			"version": "0.0.98",
-			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.98.tgz",
-			"integrity": "sha512-cbty5LPayy2vNSeuUdjNA9tggG+go5vAxmnLDRWpiZI5a+RDBi9dlozy4/jW/7P/gletbBWbQREEa7A81YxstA==",
+			"version": "0.0.106",
+			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.106.tgz",
+			"integrity": "sha512-o2bJWaI56+J1IuzUyb1KKNLs0Tm1sqdosGeSneicQZpg9s59++8Nz70KOD6IACiZWI6b+H0H+UE+JRkgTUO3Ww==",
 			"dev": true,
 			"requires": {
 				"@types/tern": "*"
@@ -50705,6 +50734,15 @@
 			"integrity": "sha512-mIenTfsIe586/yzsyfql69KRnA75S8SVXQbTLpDejRrjH0QSJcpu3AUOi/Vjnt9IOsXKxPhJfGpQUNMueIU1fQ==",
 			"dev": true
 		},
+		"@types/dompurify": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-2.2.1.tgz",
+			"integrity": "sha512-3JwbEeRVQ3n6+JgBW/hCdkydRk9/vWT+UEglcXEJqLJEcUganDH37zlfLznxPKTZZfDqA9K229l1qN458ubcOQ==",
+			"dev": true,
+			"requires": {
+				"@types/trusted-types": "*"
+			}
+		},
 		"@types/eslint-visitor-keys": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -51219,6 +51257,12 @@
 				"@types/node": "*"
 			}
 		},
+		"@types/trusted-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.0.tgz",
+			"integrity": "sha512-I8MnZqNXsOLHsU111oHbn3khtvKMi5Bn4qVFsIWSJcCP1KKDiXX5AEw8UPk0nSopeC+Hvxt6yAy1/a5PailFqg==",
+			"dev": true
+		},
 		"@types/tunnel": {
 			"version": "0.0.0",
 			"resolved": "https://registry.npmjs.org/@types/tunnel/-/tunnel-0.0.0.tgz",
@@ -59480,6 +59524,11 @@
 				"domelementtype": "^2.0.1"
 			}
 		},
+		"dompurify": {
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz",
+			"integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ=="
+		},
 		"domutils": {
 			"version": "2.4.4",
 			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
diff --git a/package.json b/package.json
index 450b857ff9..0a69ca4d04 100644
--- a/package.json
+++ b/package.json
@@ -45,13 +45,14 @@
 		"@types/bytes": "^3.1.0",
 		"@types/chai": "^4.2.14",
 		"@types/clear": "^0.1.0",
-		"@types/codemirror": "^0.0.98",
+		"@types/codemirror": "^0.0.106",
 		"@types/color": "^3.0.1",
 		"@types/color-string": "^1.5.0",
 		"@types/cookie-parser": "^1.4.2",
 		"@types/cors": "^2.8.7",
 		"@types/debug": "^4.1.5",
 		"@types/diff": "^4.0.2",
+		"@types/dompurify": "^2.2.1",
 		"@types/express": "^4.17.9",
 		"@types/express-pino-logger": "^4.0.2",
 		"@types/express-session": "^1.17.2",
@@ -190,7 +191,8 @@
 		"@directus/sdk-js": "file:packages/sdk-js",
 		"@directus/specs": "file:packages/specs",
 		"create-directus-project": "file:packages/create-directus-project",
-		"directus": "file:api"
+		"directus": "file:api",
+		"dompurify": "^2.2.6"
 	},
 	"husky": {
 		"hooks": {

From 9a15f2baa1486a9b1af8a977d6efd26b77ae14c9 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 14 Jan 2021 19:37:31 -0500
Subject: [PATCH 3/3] Remove unused import

---
 app/src/interfaces/markdown/composables/use-edit.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/interfaces/markdown/composables/use-edit.ts b/app/src/interfaces/markdown/composables/use-edit.ts
index 095a36ae98..b67b263c46 100644
--- a/app/src/interfaces/markdown/composables/use-edit.ts
+++ b/app/src/interfaces/markdown/composables/use-edit.ts
@@ -1,4 +1,4 @@
-import { Ref, nextTick } from '@vue/composition-api';
+import { Ref } from '@vue/composition-api';
 import { Position } from 'codemirror';
 import { cloneDeep } from 'lodash';