refactor: separate component for editor

This will contain all editor related things.
For now it only has the EditorMediaHandler

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

2 files changed, 59 insertions, 18 deletions

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
new file mode 100644
index 000000000..837eef99f
--- /dev/null
+++ b/src/components/Editor.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>
+	<EditorMidiaHandler id="editor"
+		class="text-editor__main">
+		<slot />
+	</EditorMidiaHandler>
+</template>
+
+<script>
+import EditorMidiaHandler from './EditorMediaHandler.vue'
+
+export default {
+	name: 'Editor',
+	components: {
+		EditorMidiaHandler,
+	},
+
+}
+</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>
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 44b5036ab..4a3908d39 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -38,9 +38,7 @@
 				'is-rich-editor': isRichEditor,
 				'show-color-annotations': showAuthorAnnotations
 			}">
-			<EditorMidiaHandler v-if="$editor"
-				id="editor"
-				class="text-editor__main">
+			<Editor v-if="$editor">
 				<MenuBar v-if="renderMenus"
 					ref="menubar"
 					:autohide="autohide"
@@ -66,7 +64,7 @@
 						class="editor__content text-editor__content"
 						:editor="$editor" />
 				</div>
-			</EditorMidiaHandler>
+			</Editor>
 			<Reader v-if="hasSyncCollission"
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
@@ -113,7 +111,7 @@ import isMobile from './../mixins/isMobile.js'
 import store from './../mixins/store.js'
 import MenuBar from './Menu/MenuBar.vue'
 import Status from './Editor/Status.vue'
-import EditorMidiaHandler from './EditorMediaHandler.vue'
+import Editor from './Editor.vue'
 
 const EDITOR_PUSH_DEBOUNCE = 200
 
@@ -121,8 +119,8 @@ export default {
 	name: 'EditorWrapper',
 	components: {
 		DocumentStatus,
+		Editor,
 		EditorContent,
-		EditorMidiaHandler,
 		MenuBar,
 		MenuBubble: () => import(/* webpackChunkName: "editor-rich" */'./MenuBubble.vue'),
 		Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
@@ -474,6 +472,7 @@ export default {
 
 		onLoaded({ documentSource }) {
 			this.hasConnectionIssue = false
+
 			const content = this.isRichEditor
 				? markdownit.render(documentSource)
 				: '<pre>' + escapeHtml(documentSource) + '</pre>'
@@ -717,18 +716,6 @@ export default {
 		}
 	}
 
-	.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%;
-	}
-
 	.document-status {
 		position: relative;
 		background-color: var(--color-main-background);