refactor: add actual Wrapper, rename old to Main

Signed-off-by: Max <max@nextcloud.com>

src/components/Editor.vue

@@ -26,19 +26,14 @@
 			:idle="idle"
 			:lock="lock"
 			:sync-error="syncError"
-			:has-connection-issues="hasConnectionIssues"
+			:has-connection-issue="hasConnectionIssue"
 			@reconnect="reconnect" />
-		<div v-if="displayed"
-			id="editor-wrapper"
-			class="text-editor__wrapper"
-			:class="{
-				'has-conflicts': hasSyncCollission,
-				'icon-loading': !contentLoaded && !hasConnectionIssue,
-				'is-rich-workspace': isRichWorkspace,
-				'is-rich-editor': isRichEditor,
-				'show-color-annotations': showAuthorAnnotations
-			}">
-			<Wrapper v-if="$editor">
+		<Wrapper v-if="displayed"
+			:sync-error="syncError"
+			:has-connection-issue="hasConnectionIssue"
+			:content-loaded="contentLoaded"
+			:show-author-annotations="showAuthorAnnotations">
+			<Main v-if="$editor">
 				<MenuBar v-if="renderMenus"
 					ref="menubar"
 					:autohide="autohide"
@@ -47,7 +42,7 @@
 						:dirty="dirty"
 						:sessions="filteredSessions"
 						:sync-error="syncError"
-						:has-connection-issues="hasConnectionIssues"
+						:has-connection-issue="hasConnectionIssue"
 						:last-saved-string="lastSavedString" />
 					<slot name="header" />
 				</MenuBar>
@@ -58,11 +53,11 @@
 						:content-wrapper="contentWrapper"
 						:file-path="relativePath" />
 				</Content>
-			</Wrapper>
+			</Main>
 			<Reader v-if="hasSyncCollission"
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
-		</div>
+		</Wrapper>
 
 		<CollisionResolveDialog v-if="hasSyncCollission && !readOnly"
 			@resolve-use-this-version="resolveUseThisVersion"
@@ -74,7 +69,6 @@
 import Vue, { set } from 'vue'
 import escapeHtml from 'escape-html'
 import moment from '@nextcloud/moment'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { getVersion, receiveTransaction } from 'prosemirror-collab'
 import { Step } from 'prosemirror-transform'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -105,6 +99,7 @@ import store from './../mixins/store.js'
 import MenuBar from './Menu/MenuBar.vue'
 import Content from './Editor/Content.vue'
 import Status from './Editor/Status.vue'
+import Main from './Editor/Main.vue'
 import Wrapper from './Editor/Wrapper.vue'
 
 const EDITOR_PUSH_DEBOUNCE = 200
@@ -114,16 +109,14 @@ export default {
 	components: {
 		DocumentStatus,
 		Wrapper,
+		Main,
 		Content,
 		MenuBar,
 		MenuBubble: () => import(/* webpackChunkName: "editor-rich" */'./MenuBubble.vue'),
 		Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
 		Status,
 		CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'),
 	},
-	directives: {
-		Tooltip,
-	},
 	mixins: [
 		isMobile,
 		store,
@@ -683,33 +676,6 @@ export default {
 		background-color: var(--color-main-background);
 	}
 
-	.text-editor__wrapper {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		position: absolute;
-
-		&.show-color-annotations::v-deep(.author-annotation) {
-			padding-top: 2px;
-			padding-bottom: 2px;
-		}
-
-		&:not(.show-color-annotations)::v-deep(.author-annotation),
-		&:not(.show-color-annotations)::v-deep(.image) {
-			background-color: transparent !important;
-		}
-
-		.ProseMirror {
-			margin-top: 0 !important;
-		}
-		&.icon-loading {
-			.text-editor__main {
-				opacity: 0.3;
-			}
-		}
-	}
-
 	.document-status {
 		position: relative;
 		background-color: var(--color-main-background);

src/components/Editor/Main.vue

@@ -0,0 +1,54 @@
+<!--
+  - @copyright Copyright (c) 2022 Max <max@nextcloud.com>
+  -
+  - @author Max <max@nextcloud.com>
+  -
+  - @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>
+	<MediaHandler id="editor"
+		class="text-editor__main">
+		<slot />
+	</MediaHandler>
+</template>
+
+<script>
+import MediaHandler from './MediaHandler.vue'
+
+export default {
+	name: 'Main',
+	components: {
+		MediaHandler,
+	},
+
+}
+</script>
+
+<style scoped lang="scss">
+	.text-editor__main, .editor {
+		background: var(--color-main-background);
+		color: var(--color-main-text);
+		background-clip: padding-box;
+		border-radius: var(--border-radius);
+		padding: 0;
+		position: relative;
+		overflow-y: auto;
+		overflow-x: hidden;
+		width: 100%;
+	}
+</style>

src/components/Editor/Wrapper.vue

@@ -21,34 +21,82 @@
   -->
 
 <template>
-	<MediaHandler id="editor"
-		class="text-editor__main">
+	<div id="editor-wrapper"
+		class="text-editor__wrapper"
+		:class="{
+			'has-conflicts': hasSyncCollission,
+			'icon-loading': !contentLoaded && !hasConnectionIssue,
+			'is-rich-workspace': $isRichWorkspace,
+			'is-rich-editor': $isRichEditor,
+			'show-color-annotations': showAuthorAnnotations
+		}">
 		<slot />
-	</MediaHandler>
+	</div>
 </template>
 
 <script>
-import MediaHandler from './MediaHandler.vue'
+import { ERROR_TYPE } from './../../services/SyncService.js'
+import { useIsRichEditorMixin, useIsRichWorkspaceMixin } from './../Editor.provider.js'
 
 export default {
 	name: 'Wrapper',
-	components: {
-		MediaHandler,
+	mixins: [useIsRichEditorMixin, useIsRichWorkspaceMixin],
+
+	props: {
+		syncError: {
+			type: Object,
+			default: null,
+		},
+		hasConnectionIssue: {
+			type: Boolean,
+			require: true,
+		},
+		contentLoaded: {
+			type: Boolean,
+			require: true,
+		},
+		showAuthorAnnotations: {
+			type: Boolean,
+			require: true,
+		},
+	},
+
+	computed: {
+		hasSyncCollission() {
+			return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION
+		},
 	},
 
 }
 </script>
 
 <style scoped lang="scss">
-	.text-editor__main, .editor {
-		background: var(--color-main-background);
-		color: var(--color-main-text);
-		background-clip: padding-box;
-		border-radius: var(--border-radius);
-		padding: 0;
-		position: relative;
-		overflow-y: auto;
-		overflow-x: hidden;
+
+	.text-editor__wrapper {
+		display: flex;
 		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: absolute;
+
+		&.show-color-annotations::v-deep(.author-annotation) {
+			padding-top: 2px;
+			padding-bottom: 2px;
+		}
+
+		&:not(.show-color-annotations)::v-deep(.author-annotation),
+		&:not(.show-color-annotations)::v-deep(.image) {
+			background-color: transparent !important;
+		}
+
+		.ProseMirror {
+			margin-top: 0 !important;
+		}
+		&.icon-loading {
+			.text-editor__main {
+				opacity: 0.3;
+			}
+		}
 	}
+
 </style>