From 97749c7405d58129f2cd2e93dea5bc95037b1be8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 7 Jun 2019 14:02:18 +0200
Subject: Frontend code cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                    | 362 +-------------------
 src/EditorFactory.js              |  67 ++++
 src/components/Editor.vue         | 675 --------------------------------------
 src/components/EditorWrapper.vue  | 608 ++++++++++++++++++++++++++++++++++
 src/components/ReadOnlyEditor.vue |  40 +--
 src/files.js                      |   2 +-
 src/public.js                     |   2 +-
 src/services/SyncService.js       |   6 +-
 8 files changed, 703 insertions(+), 1059 deletions(-)
 create mode 100644 src/EditorFactory.js
 delete mode 100644 src/components/Editor.vue
 create mode 100644 src/components/EditorWrapper.vue

diff --git a/css/style.scss b/css/style.scss
index fdfb0c17b..cf2d2aa81 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,38 +1,15 @@
-.ProseMirror.ProseMirror-example-setup-style {
-  overflow: scroll;
-}
-
-.ProseMirror.ProseMirror-example-setup-style,
-.ProseMirror-menubar-wrapper {
-  width: 100%;
-  max-width: 900px;
-  margin: auto;
-  display: flex;
+#files-public-content {
+  width: 100% !important;
   height: 100%;
-  flex-direction: column;
-
-  * {
-    box-sizing: border-box;
-  }
 }
 
-.ProseMirror {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
+#viewer-content.modal-mask .modal-wrapper .modal-container {
+  border-radius: 3px !important;
 }
 
-.ProseMirror pre {
-  white-space: pre-wrap;
-  background-color: var(--color-background-dark);
-  border-radius: 5px;
-  padding: 5px;
-  padding-left: 11px;
-}
-
-.ProseMirror li {
-  position: relative;
+.modal-container #editor-container {
+  position: absolute;
+  max-height: calc(100% - 100px);
 }
 
 .ProseMirror-hideselection *::selection { background: transparent; }
@@ -44,7 +21,6 @@
 }
 
 /* Make sure li selections wrap around markers */
-
 li.ProseMirror-selectednode {
   outline: none;
 }
@@ -57,139 +33,6 @@ li.ProseMirror-selectednode:after {
   border: 2px solid #8cf;
   pointer-events: none;
 }
-.ProseMirror-textblock-dropdown {
-  min-width: 3em;
-}
-
-.ProseMirror-menu {
-  margin: 0 -4px;
-  line-height: 1;
-}
-
-.ProseMirror-tooltip .ProseMirror-menu {
-  width: fit-content;
-  white-space: pre;
-}
-
-.ProseMirror-menuitem {
-  margin-right: 3px;
-  padding: 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.ProseMirror-menuseparator {
-  border: 0;
-  margin-right: 3px;
-}
-
-.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
-  white-space: nowrap;
-}
-
-.ProseMirror-menu-dropdown {
-  vertical-align: 1px;
-  cursor: pointer;
-  position: relative;
-  padding: 8px;
-  padding-right: 30px;
-}
-
-.ProseMirror-menu-dropdown-wrap {
-  padding: 1px 0 1px 4px;
-  display: inline-block;
-  position: relative;
-}
-
-.ProseMirror-menu-dropdown:after {
-  content: "";
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid currentColor;
-  opacity: .6;
-  position: absolute;
-  right: 9px;
-  top: calc(50% - 2px);
-}
-
-.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
-  position: absolute;
-  background: var(--color-main-background);
-  color: var(--color-main-text);
-  box-shadow: 0 0 3px var(--color-box-shadow);
-  padding: 2px;
-}
-
-.ProseMirror-menu-dropdown-menu {
-  z-index: 15;
-  min-width: 6em;
-}
-
-.ProseMirror-menu-dropdown-item {
-  cursor: pointer;
-  padding: 2px 8px 2px 4px;
-}
-
-.ProseMirror-menu-dropdown-item:hover {
-  background: var(--color-background-dark);
-}
-
-.ProseMirror-menu-submenu-wrap {
-  position: relative;
-  margin-right: -4px;
-}
-
-.ProseMirror-menu-submenu-label {
-  padding-right: 20px;
-}
-
-.ProseMirror-menu-submenu-label:after {
-  content: "";
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 4px solid currentColor;
-  opacity: .6;
-  position: absolute;
-  right: 4px;
-  top: calc(50% - 4px);
-}
-
-.ProseMirror-menu-submenu {
-  display: none;
-  min-width: 4em;
-  left: 100%;
-  top: -3px;
-}
-
-.ProseMirror-menu-active {
-  background: var(--color-background-darker);
-  border-radius: 4px;
-}
-
-.ProseMirror-menu-disabled {
-  opacity: .3;
-}
-
-.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
-  display: block;
-}
-
-
-
-.ProseMirror-menubar {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-  position: relative;
-  min-height: 1em;
-  color: var(--color-text-light);
-  padding: 1px 6px;
-  top: 0; left: 0; right: 0;
-  background: var(--color-main-background-translucent);
-  z-index: 10;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  overflow: visible;
-}
 
 .has-conflicts,
 #editor-wrapper.icon-loading {
@@ -198,49 +41,6 @@ li.ProseMirror-selectednode:after {
   }
 }
 
-.ProseMirror {
-  margin-top: 44px;
-  height: 100%;
-  position: relative;
-}
-
-.ProseMirror-icon, .ProseMirror-menu-dropdown-wrap {
-  display: inline-block;
-  line-height: .8;
-  border-radius: 2px;
-  cursor: pointer;
-  &:hover, &:focus {
-    background-color: var(--color-background-dark);
-  }
-}
-
-.ProseMirror-icon, .Prosemirror-menu-dropdown {
-  padding: 8px;
-  width: 34px;
-  text-align: center;
-}
-
-.ProseMirror-menu-dropdown-menu {
-  padding: 8px;
-  border-radius: 2px;
-  cursor: pointer;
-  .ProseMirror-menu-dropdown-item {
-    padding: 8px;
-  }
-}
-
-.ProseMirror-menu-disabled.ProseMirror-icon {
-  cursor: default;
-}
-
-.ProseMirror-icon svg {
-  fill: currentColor;
-  height: 1em;
-}
-
-.ProseMirror-icon span {
-  vertical-align: text-top;
-}
 .ProseMirror-gapcursor {
   display: none;
   pointer-events: none;
@@ -263,93 +63,6 @@ li.ProseMirror-selectednode:after {
   }
 }
 
-.ProseMirror-focused .ProseMirror-gapcursor {
-  display: block;
-}
-/* Add space around the hr to make clicking it easier */
-
-.ProseMirror-example-setup-style hr {
-  padding: 2px 10px;
-  border: none;
-  margin: 1em 0;
-  width: 100%;
-}
-
-.ProseMirror-example-setup-style hr:after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: silver;
-  line-height: 2px;
-}
-
-.ProseMirror ul, .ProseMirror ol {
-  padding-left: 30px;
-}
-.ProseMirror ul li {
-  list-style-type: disc;
-}
-.ProseMirror blockquote {
-  padding-left: 1em;
-  border-left: 3px solid var(--color-text-lighter);
-  margin-left: 0; margin-right: 0;
-}
-
-.ProseMirror-example-setup-style img,
-.ProseMirror img {
-  cursor: default;
-  max-height: 50vh;
-  max-width: 100%;
-}
-
-.ProseMirror-prompt {
-  background: var(--color-main-background);
-  padding: 20px;
-  position: fixed;
-  border-radius: 3px;
-  z-index: 20000;
-  box-shadow: -.5px 2px 5px var(--color-box-shadow);
-}
-
-.ProseMirror-prompt h5 {
-  margin: 0;
-  font-weight: normal;
-  font-size: 100%;
-  color: var(--color-main-text);
-}
-
-.ProseMirror-prompt-close {
-  position: absolute;
-  left: 2px; top: 1px;
-  color: var(--color-main-text);
-  border: none; background: transparent; padding: 0;
-}
-
-.ProseMirror-prompt-close:after {
-  content: "✕";
-  font-size: 12px;
-}
-
-.ProseMirror-invalid {
-  background: #ffc;
-  border: 1px solid #cc7;
-  border-radius: 4px;
-  padding: 5px 10px;
-  position: absolute;
-  min-width: 10em;
-}
-
-.ProseMirror-prompt-buttons {
-  margin-top: 5px;
-  float: right;
-}
-
-.ProseMirror-prompt-submit {
-  color: var(--color-primary-text);
-  background-color: var(--color-primary);
-  border: 0;
-}
-
 #editor, .editor {
   background: var(--color-main-background);
   color: var(--color-main-text);
@@ -359,6 +72,7 @@ li.ProseMirror-selectednode:after {
   position: relative;
   overflow-y: scroll;
   overflow-x: hidden;
+  width: 100%;
 }
 
 div[contenteditable=true],
@@ -370,66 +84,6 @@ div[contenteditable=false] {
   opacity: 1;
 }
 
-.ProseMirror p:first-child,
-.ProseMirror h1:first-child,
-.ProseMirror h2:first-child,
-.ProseMirror h3:first-child,
-.ProseMirror h4:first-child,
-.ProseMirror h5:first-child,
-.ProseMirror h6:first-child {
-  margin-top: 10px;
-}
-
-.ProseMirror {
-  padding: 4px 8px 4px 14px;
-  line-height: 150%;
-  font-size: 14px;
-  outline: none;
-}
-
-.ProseMirror a {
-  color: var(--color-primary);
-  text-decoration: underline;
-}
-
-.ProseMirror p {
-  margin-bottom: 1em;
-  line-height: 150%;
-}
-.ProseMirror em {
-  font-style: italic;
-}
-
-
-.ProseMirror h1 {
-  font-size: 24px;
-}
-.ProseMirror h2 {
-  font-size: 22px;
-}
-.ProseMirror h3 {
-  font-size: 20px;
-}
-.ProseMirror h4 {
-  font-size: 18px;
-}
-.ProseMirror h5 {
-  font-size: 16px;
-}
-.ProseMirror h6 {
-  font-size: 14px;
-}
-.ProseMirror h1,
-.ProseMirror h2,
-.ProseMirror h3,
-.ProseMirror h4,
-.ProseMirror h5,
-.ProseMirror h6 {
-  font-weight: 600;
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
-
 
 .icon-bold {
   background-image: url('./../../img/icons/bold.svg');
diff --git a/src/EditorFactory.js b/src/EditorFactory.js
new file mode 100644
index 000000000..2e2e435fc
--- /dev/null
+++ b/src/EditorFactory.js
@@ -0,0 +1,67 @@
+/*
+ * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program 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 program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import {Editor} from 'tiptap';
+import {
+	HardBreak,
+	Heading,
+	Bold,
+	Code,
+	Link,
+	BulletList,
+	OrderedList,
+	ListItem,
+	Blockquote,
+	CodeBlock,
+	Image,
+	History
+} from 'tiptap-extensions'
+import { Strong, Italic } from './marks'
+import MarkdownIt from 'markdown-it'
+
+const createEditor = ({content, onUpdate, extensions}) => {
+	extensions = extensions ? extensions : []
+	return new Editor({
+		content: content,
+		onUpdate: onUpdate,
+		extensions: [
+			new HardBreak,
+			new Heading,
+			new Code,
+			new Strong,
+			new Italic,
+			new BulletList,
+			new OrderedList,
+			new Blockquote,
+			new CodeBlock,
+			new ListItem,
+			new Link,
+			new Image,
+			new History()
+		].concat(extensions),
+	})
+}
+
+const markdownit = MarkdownIt('commonmark', {html: false});
+
+
+export default createEditor
+export { markdownit, createEditor}
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
deleted file mode 100644
index c81c96c6b..000000000
--- a/src/components/Editor.vue
+++ /dev/null
@@ -1,675 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program 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 program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div id="editor-container">
-		<div id="editor-session-list" v-if="currentSession && active">
-			<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
-				{{ lastSavedStatus }}
-			</div>
-			<avatar v-for="session in activeSessions" :key="session.id"
-					:user="session.userId"
-					:display-name="session.guestName ? session.guestName : session.displayName"
-					:style="sessionStyle(session)" />
-		</div>
-		<div v-if="currentSession && active">
-			<p v-if="hasSyncCollission" class="msg icon-error">
-				{{ t('text', 'The document has been changed outside of the editor. The changes cannot be applied.') }}
-			</p>
-		</div>
-		<div v-if="currentSession && active" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading}">
-			<div id="editor">
-				<editor-menu-bar :editor="tiptap" v-slot="{ commands, isActive }" v-if="!syncError && !readOnly">
-					<div class="menubar">
-						<button class="icon-bold" :class="{ 'is-active': isActive.strong() }" @click="commands.strong"></button>
-						<button class="icon-italic" :class="{ 'is-active': isActive.em() }" @click="commands.em"></button>
-						<button class="icon-code" :class="{ 'is-active': isActive.code() }" @click="commands.code"></button>
-
-						<button	:class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1 })">H1</button>
-						<button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">H2</button>
-						<button :class="{ 'is-active': isActive.heading({ level: 3 }) }" @click="commands.heading({ level: 3 })">H3</button>
-						<Actions>
-							<ActionButton icon="icon-paragraph" @click="commands.heading({ level: 4 })">Heading 4</ActionButton>
-							<ActionButton icon="icon-paragraph" @click="commands.heading({ level: 5 })">Heading 5</ActionButton>
-							<ActionButton icon="icon-paragraph" @click="commands.heading({ level: 6 })">Heading 6</ActionButton>
-							<ActionButton icon="icon-code" @click="commands.code_block()">Code block</ActionButton>
-							<ActionButton icon="icon-quote" @click="commands.blockquote()">Blockquote</ActionButton>
-						</Actions>
-
-						<button class="icon-ul" :class="{ 'is-active': isActive.bullet_list() }" @click="commands.bullet_list"></button>
-						<button class="icon-ol" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list"></button>
-
-						<button v-if="!isPublic" class="icon-image" @click="showImagePrompt(commands.image)"></button>
-					</div>
-				</editor-menu-bar>
-				<editor-menu-bubble v-if="!readOnly" class="menububble" :editor="tiptap" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
-					<div class="menububble" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
-
-						<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
-							<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
-							<button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button"></button>
-						</form>
-
-						<template v-else>
-							<button
-									class="menububble__button"
-									@click="showLinkMenu(getMarkAttrs('link'))"
-									:class="{ 'is-active': isActive.link() }"
-							><span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span></button>
-						</template>
-
-					</div>
-				</editor-menu-bubble>
-				<editor-content class="editor__content" :editor="tiptap" />
-			</div>
-			<read-only-editor v-if="hasSyncCollission" :content="syncError.data.outsideChange" />
-		</div>
-		<div v-if="hasSyncCollission && !readOnly" id="resolve-conflicts">
-			<button @click="resolveUseThisVersion">
-				Use your version
-			</button>
-			<button @click="resolveUseServerVersion">
-				Use the server version
-			</button>
-		</div>
-
-		<div v-if="isPublic && !guestNameConfirmed" class="guest-name-dialog">
-			<p>{{ t('text', 'Please enter a name to identify you as a public editor:') }}</p>
-			<form @submit.prevent="setGuestName()">
-				<input type="text" v-model="guestName" />
-				<input type="submit" class="icon-confirm" value="" />
-			</form>
-		</div>
-	</div>
-</template>
-
-<script>
-import Vue from 'vue'
-import debounce from 'lodash/debounce'
-
-import { EditorSync, ERROR_TYPE } from './../EditorSync'
-import SyncService from './../services/SyncService'
-import { endpointUrl } from './../helpers'
-
-import { getVersion } from 'prosemirror-collab'
-import { defaultMarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown'
-
-import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
-import {
-	HardBreak,
-	Heading,
-	Bold,
-	Code,
-	Link,
-	BulletList,
-	OrderedList,
-	ListItem,
-	Blockquote,
-	CodeBlock,
-	Image,
-	History,
-	Collaboration,
-} from 'tiptap-extensions'
-import { Strong, Italic } from './../marks'
-import { Keymap } from './../extensions'
-import MarkdownIt from 'markdown-it'
-
-
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
-import ReadOnlyEditor from './ReadOnlyEditor'
-import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip'
-import Actions from 'nextcloud-vue/dist/Components/Actions'
-import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
-
-const COLLABORATOR_IDLE_TIME = 5
-const COLLABORATOR_DISCONNECT_TIME = 20
-const EDITOR_PUSH_DEBOUNCE = 200
-
-export default {
-	name: 'Editor',
-	components: {
-		Avatar,
-		Actions,
-		ReadOnlyEditor,
-		EditorContent,
-		EditorMenuBar,
-		EditorMenuBubble,
-		ActionButton
-	},
-	directives: {
-		Tooltip
-	},
-	props: {
-		relativePath: {
-			type: String,
-			default: null
-		},
-		fileId: {
-			type: String,
-			default: null
-		},
-		active: {
-			type: Boolean,
-			default: false
-		},
-		shareToken: {
-			type: String,
-			default: null
-		}
-	},
-	data() {
-		return {
-			editor: null,
-			tiptap: null,
-			/** @type SyncService */
-			syncService: null,
-			document: null,
-			currentSession: null,
-			sessions: [],
-			filteredSessions: {},
-			name: null,
-			dirty: false,
-			initialLoading: false,
-			lastSavedString: '',
-			syncError: null,
-			readOnly: true,
-
-			guestName: '',
-			guestNameConfirmed: false,
-
-			linkUrl: null,
-			linkMenuIsActive: false,
-		}
-	},
-	computed: {
-		activeSessions() {
-			return Object.values(this.filteredSessions).filter((session) => session.lastContact > Date.now() / 1000 - COLLABORATOR_DISCONNECT_TIME && session.id !== this.currentSession.id && session.userId !== null)
-		},
-		sessionStyle() {
-			return (session) => {
-				return {
-					'opacity': session.lastContact > Date.now() / 1000 - COLLABORATOR_IDLE_TIME ? 1 : 0.5,
-					'border-color': session.color
-				}
-			}
-		},
-
-		lastSavedStatus() {
-			return (this.hasUnsavedChanges || this.hasUnpushedChanges ? '*' : '') + this.lastSavedString
-		},
-		lastSavedStatusClass() {
-			return this.syncError && this.lastSavedString !== '' ? 'error' : ''
-		},
-		lastSavedStatusTooltip() {
-			let message = t('text', 'Last save {lastSave}', { lastSave: this.lastSavedString })
-			if (this.hasSyncCollission) {
-				message = t('text', 'The document has been changed outside of the editor. The changes cannot be applied.')
-			}
-			if (this.hasUnpushedChanges) {
-				message += ' - ' + t('text', 'Unpushed changes')
-			}
-			if (this.hasUnsavedChanges) {
-				message += ' - ' + t('text', 'Unsaved changes')
-			}
-			return { content: message, placement: 'bottom' }
-		},
-		hasSyncCollission() {
-			return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION
-		},
-		hasUnpushedChanges() {
-			return this.dirty
-		},
-		hasUnsavedChanges() {
-			return this.syncService && this.tiptap && this.tiptap.state  && this.document.lastSavedVersion !== getVersion(this.tiptap.state)
-		},
-		backendUrl() {
-			return (endpoint) => {
-				return endpointUrl(endpoint, !!this.shareToken)
-			}
-		},
-		hasDocumentParameters() {
-			return this.fileId || this.shareToken
-		},
-		isPublic() {
-			return document.getElementById('isPublic') && document.getElementById('isPublic').value === '1'
-		}
-	},
-	mounted() {
-		const guestName = localStorage.getItem('text-guestName')
-		if (guestName !== null) {
-			this.guestName = guestName
-		}
-
-		if (this.active && (this.hasDocumentParameters) && !this.isPublic) {
-			this.initSession()
-		}
-		setInterval(() => { this.updateLastSavedStatus() }, 2000)
-	},
-	beforeDestroy() {
-		if (this.currentSession && this.syncService) {
-			this.currentSession = null
-			this.syncService.close()
-			this.syncService = null
-		}
-	},
-	methods: {
-		setGuestName() {
-			this.guestNameConfirmed = true
-			localStorage.setItem('text-guestName', this.guestName)
-			this.initSession()
-		},
-		updateLastSavedStatus() {
-			if (this.document) {
-				this.lastSavedString = window.moment(this.document.lastSavedVersionTime * 1000).fromNow()
-			}
-		},
-		initSession () {
-			if (!this.hasDocumentParameters) {
-				this.$emit('error', 'No valid file provided')
-				return
-			}
-			this.syncService = new SyncService({
-				shareToken: this.shareToken,
-				guestName: this.guestName,
-				serialize: (document) => {
-					return defaultMarkdownSerializer.serialize(document)
-				}
-			})
-				.on('opened', ({document, session}) => {
-					this.currentSession = session
-					this.document = document
-					this.readOnly = document.readOnly
-				})
-				.on('change', ({document, sessions}) => {
-					if (this.document.baseVersionEtag !== '' && document.baseVersionEtag !== this.document.baseVersionEtag) {
-						this.resolveUseServerVersion()
-						return
-					}
-					this.updateSessions.bind(this)(sessions);
-					this.document = document
-					this.syncError = null
-					this.tiptap.setOptions({editable: true && !this.readOnly})
-				})
-				.on('loaded', ({document, session, documentSource}) => {
-					const documentData = {document, session}
-					const initialDocument = defaultMarkdownParser.parse(documentSource)
-
-					this.markdownit = MarkdownIt('commonmark', {html: false});
-					this.tiptap = new Editor({
-						content: this.markdownit.render(documentSource),
-						onUpdate: ({state}) => {
-							console.log("=> FROM doc")
-							console.log(defaultMarkdownSerializer.serialize(state.doc))
-							this.syncService.state = state
-						},
-						extensions: [
-							new HardBreak,
-							new Heading,
-							new Code,
-							new Strong,
-							new Italic,
-							new BulletList,
-							new OrderedList,
-							new Blockquote,
-							new CodeBlock,
-							new ListItem,
-							new Link,
-							new Image,
-							new History(),
-							new Collaboration({
-								// the initial version we start with
-								// version is an integer which is incremented with every change
-								version: this.syncService.steps.length,
-								clientID: this.currentSession.id,
-								// debounce changes so we can save some bandwidth
-								debounce: 250,
-								onSendable: ({ sendable }) => {
-									// This is not working properly with polling and the careful retry logic
-									this.syncService.sendSteps()
-								}
-							}),
-							new Keymap({
-								'Ctrl-s': () => {
-									this.syncService.save()
-									console.log('save', this);
-									return true;
-								}
-							})
-						],
-					})
-					this.syncService.state = this.tiptap.state
-					this.$emit('update:loaded', true)
-					this.tiptap.focus('end')
-				})
-				.on('sync', ({steps, document}) => {
-					this.tiptap.extensions.options.collaboration.update({
-						version: document.currentVersion,
-						steps: steps
-					})
-					this.syncService.state = this.tiptap.state
-				})
-				.on('error', (error, data) => {
-					if (error === ERROR_TYPE.SAVE_COLLISSION && (!this.syncError || this.syncError.type !== ERROR_TYPE.SAVE_COLLISSION)) {
-						this.initialLoading = true
-						this.syncError = {
-							type: ERROR_TYPE.SAVE_COLLISSION,
-							data: data
-						}
-						this.tiptap.setOptions({editable: false})
-
-					}
-				})
-				.on('stateChange', (state) => {
-					if (state.initialLoading && !this.initialLoading) {
-						this.initialLoading = true
-					}
-					this.dirty = state.dirty
-				})
-			this.syncService.open({ fileId: this.fileId, filePath: this.filePath})
-		},
-
-		resolveUseThisVersion() {
-			this.syncService.forceSave()
-			this.tiptap.setOptions({editable: true && !this.readOnly})
-		},
-
-		resolveUseServerVersion() {
-			this.syncService.close()
-			this.syncService = null
-			this.tiptap.destroy()
-			this.initSession()
-		},
-
-		updateSessions(sessions) {
-			this.sessions = sessions.sort((a,b) => b.lastContact - a.lastContact)
-			let currentSessionIds = this.sessions.map((session) => session.userId)
-			const stillExistingSessions = Object.keys(this.filteredSessions)
-				.filter(sessionId => currentSessionIds.includes(sessionId))
-			const removedSessions = Object.keys(this.filteredSessions)
-				.filter(sessionId => !currentSessionIds.includes(sessionId))
-
-			// remove sessions
-			for (let index in removedSessions) {
-				Vue.delete(this.filteredSessions, removedSessions[index])
-			}
-			for (let index in this.sessions) {
-				let session = this.sessions[index]
-				if (!session.userId) {
-					session.userId = session.id
-				}
-
-				if (this.filteredSessions[session.userId]) {
-					// update timestamp if relevant
-					if (this.filteredSessions[session.userId].lastContact < session.lastContact) {
-						Vue.set(this.filteredSessions[session.userId], 'lastContact', session.lastContact)
-					}
-				} else {
-					Vue.set(this.filteredSessions, session.userId, session)
-				}
-			}
-		},
-
-		showLinkMenu(attrs) {
-			this.linkUrl = attrs.href
-			this.linkMenuIsActive = true
-			this.$nextTick(() => {
-				this.$refs.linkInput.focus()
-			})
-		},
-		hideLinkMenu() {
-			this.linkUrl = null
-			this.linkMenuIsActive = false
-		},
-
-		setLinkUrl(command, url) {
-			command({ href: url })
-			this.hideLinkMenu()
-			this.tiptap.focus()
-		},
-
-		showImagePrompt(command) {
-			const _command = command
-			OC.dialogs.filepicker('Insert an image',  (file) => {
-				const src = OC.generateUrl('/core/preview.png?') + `file=${file}&x=1024&y=1024&a=true`
-				_command({ src })
-				// TODO: check permissions
-				// TODO: check for available preview
-			}, false, false)
-		},
-	}
-}
-</script>
-
-<style scoped lang="scss">
-
-	#editor-container {
-		display: block;
-		// Size that is used for modal as well
-		max-width: 900px;
-		width: 100vw;
-		height: 100%;
-		margin: 0 auto;
-		border-radius: 3px;
-		position: relative;
-		background-color: var(--color-main-background);
-	}
-
-	#editor-wrapper {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		position: absolute;
-		&.icon-loading {
-			#editor {
-				opacity: 0.3;
-			}
-		}
-	}
-
-	.msg.icon-error {
-		padding: 12px;
-		border-bottom:1px solid var(--color-error);
-		padding-left: 30px;
-		background-position: 8px center;
-	}
-
-	.save-status {
-		padding: 6px;
-		color: var(--color-text-lighter);
-
-		&.error {
-			background-color: var(--color-error);
-			color: var(--color-main-background);
-			border-radius: 3px;
-		}
-	}
-
-	#resolve-conflicts {
-		display: flex;
-		position: fixed;
-		z-index: 10000;
-		bottom: 0;
-		max-width: 900px;
-		width: 100vw;
-		margin: auto;
-		padding: 20px 0;
-
-		button {
-			margin: auto;
-			box-shadow: 0 0 10px var(--color-box-shadow);
-		}
-	}
-
-	#editor-container #editor-wrapper.has-conflicts {
-		height: calc(100% - 50px);
-
-		#remote, #editor {
-			width: 50%;
-			height: 100%;
-		}
-
-		.ProseMirror-menubar {
-			visibility: hidden;
-		}
-	}
-
-	#editor-session-list {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: 110;
-		padding: 6px;
-		padding-right: 16px;
-		display: flex;
-
-		input, div {
-			vertical-align: middle;
-			margin-left: 3px;
-		}
-	}
-
-	.menubar {
-		width: 100%;
-		position: fixed;
-		position: sticky;
-		top: 0;
-		z-index: 100;
-		background-color: var(--color-main-background-translucent);
-	}
-
-	.menubar button {
-		width: 44px;
-		height: 44px;
-		margin: 0;
-		background-size: 16px;
-		border: 0;
-		background-color: var(--color-main-background);
-		opacity: 0.6;
-		background-position: center center;
-		vertical-align: top;
-		&:hover, &:focus, &:active {
-			background-color: var(--color-background-dark);
-		}
-		&.is-active {
-			opacity: 1;
-		}
-	}
-
-
-	$color-white: #fff;
-	$color-black: #000;
-
-	.menububble {
-		position: absolute;
-		display: flex;
-		z-index: 220;
-		background: $color-black;
-		border-radius: 5px;
-		padding: 0.3rem;
-		margin-bottom: 0.5rem;
-		visibility: hidden;
-		opacity: 0;
-		transition: opacity 0.2s, visibility 0.2s;
-
-		&.is-active {
-			opacity: 1;
-			visibility: visible;
-		}
-
-		&__button {
-			display: inline-flex;
-			background: transparent;
-			border: 0;
-			color: $color-white;
-			padding: 0.2rem 0.5rem;
-			margin-right: 0.2rem;
-			border-radius: 3px;
-			cursor: pointer;
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			&:hover {
-				background-color: rgba($color-white, 0.1);
-			}
-
-			&.is-active {
-				background-color: rgba($color-white, 0.2);
-			}
-		}
-
-		&__form {
-			display: flex;
-			align-items: center;
-		}
-
-		&__input {
-			font: inherit;
-			border: none;
-			background: transparent;
-			color: $color-white;
-		}
-	}
-
-	.editor__content {
-		max-width: 800px;
-		margin: auto;
-	}
-
-	.guest-name-dialog {
-		padding: 30px;
-		text-align: center;
-
-		form {
-			display: flex;
-			width: 100%;
-			max-width: 200px;
-			margin: auto;
-			margin-top: 30px;
-
-			input[type=text] {
-				flex-grow: 1;
-			}
-		}
-	}
-
-</style>
-<style lang="scss">
-	@import './../../css/style';
-
-	#files-public-content {
-		width: 100% !important;
-		height: 100%;
-	}
-
-	#viewer-content.modal-mask .modal-wrapper .modal-container {
-		border-radius: 3px !important;
-	}
-
-	.modal-container #editor-container {
-		position: absolute;
-		max-height: calc(100% - 100px);
-	}
-
-</style>
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
new file mode 100644
index 000000000..a9592b3f3
--- /dev/null
+++ b/src/components/EditorWrapper.vue
@@ -0,0 +1,608 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program 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 program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div id="editor-container">
+		<div id="editor-session-list" v-if="currentSession && active">
+			<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
+				{{ lastSavedStatus }}
+			</div>
+			<avatar v-for="session in activeSessions" :key="session.id"
+					:user="session.userId"
+					:display-name="session.guestName ? session.guestName : session.displayName"
+					:style="sessionStyle(session)" />
+		</div>
+		<div v-if="currentSession && active">
+			<p v-if="hasSyncCollission" class="msg icon-error">
+				{{ t('text', 'The document has been changed outside of the editor. The changes cannot be applied.') }}
+			</p>
+		</div>
+		<div v-if="currentSession && active" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading}">
+			<div id="editor">
+				<editor-menu-bar :editor="tiptap" v-slot="{ commands, isActive }" v-if="!syncError && !readOnly">
+					<div class="menubar">
+						<button class="icon-bold" :class="{ 'is-active': isActive.strong() }" @click="commands.strong"></button>
+						<button class="icon-italic" :class="{ 'is-active': isActive.em() }" @click="commands.em"></button>
+						<button class="icon-code" :class="{ 'is-active': isActive.code() }" @click="commands.code"></button>
+
+						<button	:class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1 })">H1</button>
+						<button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">H2</button>
+						<button :class="{ 'is-active': isActive.heading({ level: 3 }) }" @click="commands.heading({ level: 3 })">H3</button>
+						<Actions>
+							<ActionButton icon="icon-paragraph" @click="commands.heading({ level: 4 })">Heading 4</ActionButton>
+							<ActionButton icon="icon-paragraph" @click="commands.heading({ level: 5 })">Heading 5</ActionButton>
+							<ActionButton icon="icon-paragraph" @click="commands.heading({ level: 6 })">Heading 6</ActionButton>
+							<ActionButton icon="icon-code" @click="commands.code_block()">Code block</ActionButton>
+							<ActionButton icon="icon-quote" @click="commands.blockquote()">Blockquote</ActionButton>
+						</Actions>
+
+						<button class="icon-ul" :class="{ 'is-active': isActive.bullet_list() }" @click="commands.bullet_list"></button>
+						<button class="icon-ol" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list"></button>
+
+						<button v-if="!isPublic" class="icon-image" @click="showImagePrompt(commands.image)"></button>
+					</div>
+				</editor-menu-bar>
+				<editor-menu-bubble v-if="!readOnly" class="menububble" :editor="tiptap" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
+					<div class="menububble" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
+
+						<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
+							<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu" />
+							<button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button"></button>
+						</form>
+
+						<template v-else>
+							<button
+									class="menububble__button"
+									@click="showLinkMenu(getMarkAttrs('link'))"
+									:class="{ 'is-active': isActive.link() }"
+							><span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span></button>
+						</template>
+
+					</div>
+				</editor-menu-bubble>
+				<editor-content class="editor__content" :editor="tiptap" />
+			</div>
+			<read-only-editor v-if="hasSyncCollission" :content="syncError.data.outsideChange" />
+		</div>
+		<div v-if="hasSyncCollission && !readOnly" id="resolve-conflicts">
+			<button @click="resolveUseThisVersion">
+				Use your version
+			</button>
+			<button @click="resolveUseServerVersion">
+				Use the server version
+			</button>
+		</div>
+
+		<guest-name-dialog v-if="isPublic && !guestNameConfirmed" :value="guestName" @input="setGuestName($event)"></guest-name-dialog>
+	</div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+import { SyncService, ERROR_TYPE } from './../services/SyncService'
+import { endpointUrl } from './../helpers'
+import { createEditor, markdownit } from './../EditorFactory'
+
+import { defaultMarkdownParser, defaultMarkdownSerializer } from 'prosemirror-markdown'
+
+import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
+import { Collaboration } from 'tiptap-extensions'
+import { Keymap } from './../extensions'
+import { getVersion } from 'prosemirror-collab'
+
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip'
+import Actions from 'nextcloud-vue/dist/Components/Actions'
+import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
+
+import ReadOnlyEditor from './ReadOnlyEditor'
+import GuestNameDialog from './GuestNameDialog'
+
+const COLLABORATOR_IDLE_TIME = 5
+const COLLABORATOR_DISCONNECT_TIME = 20
+const EDITOR_PUSH_DEBOUNCE = 200
+
+export default {
+	name: 'Editor',
+	components: {
+		Avatar,
+		Actions,
+		ReadOnlyEditor,
+		EditorContent,
+		EditorMenuBar,
+		EditorMenuBubble,
+		ActionButton,
+		GuestNameDialog
+	},
+	directives: {
+		Tooltip
+	},
+	props: {
+		relativePath: {
+			type: String,
+			default: null
+		},
+		fileId: {
+			type: String,
+			default: null
+		},
+		active: {
+			type: Boolean,
+			default: false
+		},
+		shareToken: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			tiptap: null,
+			/** @type SyncService */
+			syncService: null,
+
+			document: null,
+			sessions: [],
+			currentSession: null,
+
+			filteredSessions: {},
+
+			dirty: false,
+			initialLoading: false,
+			lastSavedString: '',
+			syncError: null,
+			readOnly: true,
+
+			guestName: '',
+			guestNameConfirmed: false,
+
+			linkUrl: null,
+			linkMenuIsActive: false,
+		}
+	},
+	computed: {
+		activeSessions() {
+			return Object.values(this.filteredSessions).filter((session) => session.lastContact > Date.now() / 1000 - COLLABORATOR_DISCONNECT_TIME && session.id !== this.currentSession.id && session.userId !== null)
+		},
+		sessionStyle() {
+			return (session) => {
+				return {
+					'opacity': session.lastContact > Date.now() / 1000 - COLLABORATOR_IDLE_TIME ? 1 : 0.5,
+					'border-color': session.color
+				}
+			}
+		},
+
+		lastSavedStatus() {
+			return (this.hasUnsavedChanges || this.hasUnpushedChanges ? '*' : '') + this.lastSavedString
+		},
+		lastSavedStatusClass() {
+			return this.syncError && this.lastSavedString !== '' ? 'error' : ''
+		},
+		lastSavedStatusTooltip() {
+			let message = t('text', 'Last save {lastSave}', { lastSave: this.lastSavedString })
+			if (this.hasSyncCollission) {
+				message = t('text', 'The document has been changed outside of the editor. The changes cannot be applied.')
+			}
+			if (this.hasUnpushedChanges) {
+				message += ' - ' + t('text', 'Unpushed changes')
+			}
+			if (this.hasUnsavedChanges) {
+				message += ' - ' + t('text', 'Unsaved changes')
+			}
+			return { content: message, placement: 'bottom' }
+		},
+		hasSyncCollission() {
+			return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION
+		},
+		hasUnpushedChanges() {
+			return this.dirty
+		},
+		hasUnsavedChanges() {
+			return this.syncService && this.tiptap && this.tiptap.state  && this.document.lastSavedVersion !== getVersion(this.tiptap.state)
+		},
+		backendUrl() {
+			return (endpoint) => {
+				return endpointUrl(endpoint, !!this.shareToken)
+			}
+		},
+		hasDocumentParameters() {
+			return this.fileId || this.shareToken
+		},
+		isPublic() {
+			return document.getElementById('isPublic') && document.getElementById('isPublic').value === '1'
+		}
+	},
+	beforeMount() {
+		const guestName = localStorage.getItem('text-guestName')
+		if (guestName !== null) {
+			this.guestName = guestName
+		}
+	},
+	mounted() {
+		if (this.active && (this.hasDocumentParameters) && !this.isPublic) {
+			this.initSession()
+		}
+		setInterval(() => { this.updateLastSavedStatus() }, 2000)
+	},
+	beforeDestroy() {
+		if (this.currentSession && this.syncService) {
+			this.currentSession = null
+			this.syncService.close()
+			this.syncService = null
+		}
+	},
+	methods: {
+		setGuestName(guestName) {
+			this.guestName = guestName
+			this.guestNameConfirmed = true
+			localStorage.setItem('text-guestName', this.guestName)
+			this.initSession()
+		},
+		updateLastSavedStatus() {
+			if (this.document) {
+				this.lastSavedString = window.moment(this.document.lastSavedVersionTime * 1000).fromNow()
+			}
+		},
+		initSession () {
+			if (!this.hasDocumentParameters) {
+				this.$emit('error', 'No valid file provided')
+				return
+			}
+			this.syncService = new SyncService({
+				shareToken: this.shareToken,
+				guestName: this.guestName,
+				serialize: (document) => {
+					return defaultMarkdownSerializer.serialize(document)
+				}
+			})
+				.on('opened', ({document, session}) => {
+					this.currentSession = session
+					this.document = document
+					this.readOnly = document.readOnly
+				})
+				.on('change', ({document, sessions}) => {
+					if (this.document.baseVersionEtag !== '' && document.baseVersionEtag !== this.document.baseVersionEtag) {
+						this.resolveUseServerVersion()
+						return
+					}
+					this.updateSessions.bind(this)(sessions);
+					this.document = document
+					this.syncError = null
+					this.tiptap.setOptions({editable: !this.readOnly})
+				})
+				.on('loaded', ({document, session, documentSource}) => {
+					const documentData = {document, session}
+					const initialDocument = defaultMarkdownParser.parse(documentSource)
+
+					this.tiptap = createEditor({
+						content: markdownit.render(documentSource),
+						onUpdate: ({state}) => {
+							console.log("=> FROM doc")
+							console.log(defaultMarkdownSerializer.serialize(state.doc))
+							this.syncService.state = state
+						},
+						extensions: [
+							new Collaboration({
+								// the initial version we start with
+								// version is an integer which is incremented with every change
+								version: this.syncService.steps.length,
+								clientID: this.currentSession.id,
+								// debounce changes so we can save some bandwidth
+								debounce: 250,
+								onSendable: ({ sendable }) => {
+									// This is not working properly with polling and the careful retry logic
+									this.syncService.sendSteps()
+								}
+							}),
+							new Keymap({
+								'Ctrl-s': () => {
+									this.syncService.save()
+									console.log('save', this);
+									return true;
+								}
+							})
+						],
+					})
+					this.syncService.state = this.tiptap.state
+					this.$emit('update:loaded', true)
+					this.tiptap.focus('end')
+				})
+				.on('sync', ({steps, document}) => {
+					this.tiptap.extensions.options.collaboration.update({
+						version: document.currentVersion,
+						steps: steps
+					})
+					this.syncService.state = this.tiptap.state
+				})
+				.on('error', (error, data) => {
+					if (error === ERROR_TYPE.SAVE_COLLISSION && (!this.syncError || this.syncError.type !== ERROR_TYPE.SAVE_COLLISSION)) {
+						this.initialLoading = true
+						this.syncError = {
+							type: ERROR_TYPE.SAVE_COLLISSION,
+							data: data
+						}
+						this.tiptap.setOptions({editable: false})
+
+					}
+				})
+				.on('stateChange', (state) => {
+					if (state.initialLoading && !this.initialLoading) {
+						this.initialLoading = true
+					}
+					this.dirty = state.dirty
+				})
+			this.syncService.open({ fileId: this.fileId, filePath: this.filePath})
+		},
+
+		resolveUseThisVersion() {
+			this.syncService.forceSave()
+			this.tiptap.setOptions({editable: true && !this.readOnly})
+		},
+
+		resolveUseServerVersion() {
+			this.syncService.close()
+			this.syncService = null
+			this.tiptap.destroy()
+			this.initSession()
+		},
+
+		updateSessions(sessions) {
+			this.sessions = sessions.sort((a,b) => b.lastContact - a.lastContact)
+			let currentSessionIds = this.sessions.map((session) => session.userId)
+			const stillExistingSessions = Object.keys(this.filteredSessions)
+				.filter(sessionId => currentSessionIds.includes(sessionId))
+			const removedSessions = Object.keys(this.filteredSessions)
+				.filter(sessionId => !currentSessionIds.includes(sessionId))
+
+			// remove sessions
+			for (let index in removedSessions) {
+				Vue.delete(this.filteredSessions, removedSessions[index])
+			}
+			for (let index in this.sessions) {
+				let session = this.sessions[index]
+				if (!session.userId) {
+					session.userId = session.id
+				}
+
+				if (this.filteredSessions[session.userId]) {
+					// update timestamp if relevant
+					if (this.filteredSessions[session.userId].lastContact < session.lastContact) {
+						Vue.set(this.filteredSessions[session.userId], 'lastContact', session.lastContact)
+					}
+				} else {
+					Vue.set(this.filteredSessions, session.userId, session)
+				}
+			}
+		},
+
+		showLinkMenu(attrs) {
+			this.linkUrl = attrs.href
+			this.linkMenuIsActive = true
+			this.$nextTick(() => {
+				this.$refs.linkInput.focus()
+			})
+		},
+		hideLinkMenu() {
+			this.linkUrl = null
+			this.linkMenuIsActive = false
+		},
+
+		setLinkUrl(command, url) {
+			command({ href: url })
+			this.hideLinkMenu()
+			this.tiptap.focus()
+		},
+
+		showImagePrompt(command) {
+			const _command = command
+			OC.dialogs.filepicker('Insert an image',  (file) => {
+				const src = OC.generateUrl('/core/preview.png?') + `file=${file}&x=1024&y=1024&a=true`
+				_command({ src })
+				// TODO: check permissions
+				// TODO: check for available preview
+			}, false, false)
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+
+	#editor-container {
+		display: block;
+		// Size that is used for modal as well
+		max-width: 900px;
+		width: 100vw;
+		height: 100%;
+		margin: 0 auto;
+		border-radius: 3px;
+		position: relative;
+		background-color: var(--color-main-background);
+	}
+
+	#editor-wrapper {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: absolute;
+		&.icon-loading {
+			#editor {
+				opacity: 0.3;
+			}
+		}
+	}
+
+	.msg.icon-error {
+		padding: 12px;
+		border-bottom:1px solid var(--color-error);
+		padding-left: 30px;
+		background-position: 8px center;
+	}
+
+	.save-status {
+		padding: 6px;
+		color: var(--color-text-lighter);
+
+		&.error {
+			background-color: var(--color-error);
+			color: var(--color-main-background);
+			border-radius: 3px;
+		}
+	}
+
+	#resolve-conflicts {
+		display: flex;
+		position: fixed;
+		z-index: 10000;
+		bottom: 0;
+		max-width: 900px;
+		width: 100vw;
+		margin: auto;
+		padding: 20px 0;
+
+		button {
+			margin: auto;
+			box-shadow: 0 0 10px var(--color-box-shadow);
+		}
+	}
+
+	#editor-container #editor-wrapper.has-conflicts {
+		height: calc(100% - 50px);
+
+		#editor, #read-only-editor {
+			width: 50%;
+			height: 100%;
+		}
+	}
+
+	#editor-session-list {
+		position: absolute;
+		top: 0;
+		right: 0;
+		z-index: 110;
+		padding: 6px;
+		padding-right: 16px;
+		display: flex;
+
+		input, div {
+			vertical-align: middle;
+			margin-left: 3px;
+		}
+	}
+
+	.menubar {
+		width: 100%;
+		position: fixed;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+		background-color: var(--color-main-background-translucent);
+	}
+
+	.menubar button {
+		width: 44px;
+		height: 44px;
+		margin: 0;
+		background-size: 16px;
+		border: 0;
+		background-color: var(--color-main-background);
+		opacity: 0.6;
+		background-position: center center;
+		vertical-align: top;
+		&:hover, &:focus, &:active {
+			background-color: var(--color-background-dark);
+		}
+		&.is-active {
+			opacity: 1;
+		}
+	}
+
+
+	$color-white: #fff;
+	$color-black: #000;
+
+	.menububble {
+		position: absolute;
+		display: flex;
+		z-index: 220;
+		background: $color-black;
+		border-radius: 5px;
+		padding: 0.3rem;
+		margin-bottom: 0.5rem;
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 0.2s, visibility 0.2s;
+
+		&.is-active {
+			opacity: 1;
+			visibility: visible;
+		}
+
+		&__button {
+			display: inline-flex;
+			background: transparent;
+			border: 0;
+			color: $color-white;
+			padding: 0.2rem 0.5rem;
+			margin-right: 0.2rem;
+			border-radius: 3px;
+			cursor: pointer;
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			&:hover {
+				background-color: rgba($color-white, 0.1);
+			}
+
+			&.is-active {
+				background-color: rgba($color-white, 0.2);
+			}
+		}
+
+		&__form {
+			display: flex;
+			align-items: center;
+		}
+
+		&__input {
+			font: inherit;
+			border: none;
+			background: transparent;
+			color: $color-white;
+		}
+	}
+
+	.editor__content {
+		max-width: 800px;
+		margin: auto;
+	}
+
+</style>
+<style lang="scss">
+	@import './../../css/style';
+	@import './../../css/prosemirror';
+</style>
diff --git a/src/components/ReadOnlyEditor.vue b/src/components/ReadOnlyEditor.vue
index 47883ace1..6272abdef 100644
--- a/src/components/ReadOnlyEditor.vue
+++ b/src/components/ReadOnlyEditor.vue
@@ -21,17 +21,16 @@
   -->
 
 <template>
-	<div id="remote" ref="remote" />
+	<EditorContent id="read-only-editor" v-if="editor" :editor="editor"></EditorContent>
 </template>
 
 <script>
-import { EditorState } from 'prosemirror-state'
-import { EditorView } from 'prosemirror-view'
-import { exampleSetup } from 'prosemirror-example-setup'
-import { schema, defaultMarkdownParser } from 'prosemirror-markdown'
+import { EditorContent } from 'tiptap'
+import {createEditor, markdownit} from '../EditorFactory'
 
 export default {
 	name: 'ReadOnlyEditor',
+	components: {EditorContent},
 	props: {
 		content: {
 			type: String,
@@ -40,34 +39,25 @@ export default {
 	},
 	data: () => {
 		return {
-			remoteView: null
+			editor: null
 		}
 	},
 	mounted() {
-		this.initRemoteView()
+		this.editor = createEditor({
+			content: markdownit.render(this.content)
+		})
+		this.editor.setOptions({editable: false})
 	},
 	beforeDestroy() {
-		this.remoteView.destroy()
-	},
-	methods: {
-		initRemoteView() {
-			if (this.remoteView) {
-				return
-			}
-			this.remoteView = new EditorView(this.$refs.remote, {
-				state: EditorState.create({
-					doc: defaultMarkdownParser.parse(this.content),
-					plugins: [
-						...exampleSetup({ schema })
-					]
-				})
-			})
-			this.remoteView.setProps({ editable: () => false })
-		}
+		this.editor.destroy()
 	}
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
+	#read-only-editor {
+		overflow: scroll;
+	}
 
 </style>
diff --git a/src/files.js b/src/files.js
index b2a70a2d2..829dfefc6 100644
--- a/src/files.js
+++ b/src/files.js
@@ -20,7 +20,7 @@
  *
  */
 
-import Editor from './components/Editor'
+import Editor from './components/EditorWrapper'
 import { documentReady } from './helpers'
 
 const newFileMenuPlugin = {
diff --git a/src/public.js b/src/public.js
index dda717a0a..313d84788 100644
--- a/src/public.js
+++ b/src/public.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Editor from './components/Editor'
+import Editor from './components/EditorWrapper'
 import { documentReady } from './helpers'
 
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
diff --git a/src/services/SyncService.js b/src/services/SyncService.js
index ab77b0ca9..0207555f2 100644
--- a/src/services/SyncService.js
+++ b/src/services/SyncService.js
@@ -23,8 +23,7 @@ import axios from 'nextcloud-axios'
 
 import PollingBackend from './PollingBackend'
 import { endpointUrl } from './../helpers'
-import {Step} from 'prosemirror-transform';
-import {getVersion, sendableSteps} from 'prosemirror-collab'
+import { getVersion, sendableSteps } from 'prosemirror-collab'
 
 const defaultOptions = {
 	shareToken: null,
@@ -222,4 +221,5 @@ class SyncService {
 	}
 }
 
-export default SyncService;
+export default SyncService
+export { SyncService, ERROR_TYPE }
-- 
cgit v1.2.3