diff --git a/src/components/SourceView.vue b/src/components/SourceView.vue
new file mode 100644
index 00000000000..32cea31a4b4
--- /dev/null
+++ b/src/components/SourceView.vue
@@ -0,0 +1,147 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div
+		id="editor-container"
+		data-text-el="editor-container"
+		class="text-editor source-viewer">
+		<Component
+			:is="readerComponent"
+			:content="content"
+			:file-id="fileid"
+			:read-only="true"
+			:show-menu-bar="false" />
+		<NcButton
+			v-if="isEmbedded"
+			class="toggle-interactive"
+			@click="$emit('edit')">
+			{{ t('text', 'Edit') }}
+			<template #icon>
+				<PencilOutlineIcon />
+			</template>
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { getClient, getRootPath } from '@nextcloud/files/dav'
+import { t } from '@nextcloud/l10n'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Vue from 'vue'
+import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
+import MarkdownContentEditor from './Editor/MarkdownContentEditor.vue'
+import PlainTextReader from './PlainTextReader.vue'
+
+export default {
+	name: 'SourceView',
+	components: {
+		NcButton: Vue.extend(NcButton),
+		PencilOutlineIcon: Vue.extend(PencilOutlineIcon),
+		PlainTextReader: Vue.extend(PlainTextReader),
+		MarkdownContentEditor: Vue.extend(MarkdownContentEditor),
+	},
+	inject: ['isEmbedded'],
+	props: {
+		filename: {
+			type: String,
+			default: null,
+		},
+		fileid: {
+			type: Number,
+			default: null,
+		},
+		mime: {
+			type: String,
+			default: null,
+		},
+		source: {
+			type: String,
+			default: undefined,
+		},
+	},
+	data() {
+		return {
+			content: '',
+		}
+	},
+	computed: {
+		isEncrypted() {
+			return this.$attrs.e2EeIsEncrypted || false
+		},
+
+		isMarkdown() {
+			return (
+				this.mime === 'text/markdown' || this.mime === 'text/x-web-markdown'
+			)
+		},
+
+		readerComponent() {
+			return this.isMarkdown ? MarkdownContentEditor : PlainTextReader
+		},
+	},
+
+	watch: {
+		source() {
+			this.loadFileContent()
+		},
+	},
+
+	mounted() {
+		this.loadFileContent()
+	},
+
+	methods: {
+		async loadFileContent() {
+			if (this.isEncrypted) {
+				this.content = await this.fetchDecryptedContent()
+				this.contentLoaded = true
+			} else {
+				const response = await axios.get(this.source)
+				this.content = response.data
+				this.contentLoaded = true
+			}
+			this.$emit('loaded', true)
+		},
+		async fetchDecryptedContent() {
+			const client = getClient()
+			const response = await client.getFileContents(
+				`${getRootPath()}${this.filename}`,
+				{ details: true },
+			)
+			const blob = new Blob([response.data], {
+				type: response.headers['content-type'],
+			})
+			const reader = new FileReader()
+			reader.readAsText(blob)
+			return new Promise((resolve) => {
+				reader.onload = () => {
+					resolve(reader.result)
+				}
+			})
+		},
+		t,
+	},
+}
+</script>
+<style lang="scss" scoped>
+.source-viewer {
+	display: block;
+
+	.editor__content-wrapper {
+		margin-top: var(--header-height);
+	}
+
+	.toggle-interactive {
+		position: sticky;
+		bottom: 0;
+		right: 0;
+		z-index: 1;
+		margin-left: auto;
+		margin-right: 0;
+	}
+}
+</style>
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 57925e1be80..09e02cb2fa7 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -13,46 +13,26 @@
 		:share-token="shareToken"
 		:class="{ 'text-editor--embedding': isEmbedded }"
 		:mime="mime" />
-	<div
+	<SourceView
 		v-else
-		id="editor-container"
-		data-text-el="editor-container"
-		class="text-editor source-viewer">
-		<Component
-			:is="readerComponent"
-			:content="content"
-			:file-id="fileid"
-			:read-only="true"
-			:show-menu-bar="false" />
-		<NcButton v-if="isEmbedded" class="toggle-interactive" @click="toggleEdit">
-			{{ t('text', 'Edit') }}
-			<template #icon>
-				<PencilOutlineIcon />
-			</template>
-		</NcButton>
-	</div>
+		:fileid="fileid"
+		:filename="filename"
+		:mime="mime"
+		:source="source"
+		v-bind="$attrs"
+		@loaded="onLoaded"
+		@edit="toggleEdit" />
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
-import { getClient, getRootPath } from '@nextcloud/files/dav'
-import { t } from '@nextcloud/l10n'
 import { getSharingToken } from '@nextcloud/sharing/public'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Vue from 'vue'
-import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
-import MarkdownContentEditor from './Editor/MarkdownContentEditor.vue'
-import PlainTextReader from './PlainTextReader.vue'
-
 import getEditorInstance from './Editor.singleton.js'
+import SourceView from './SourceView.vue'
 
 export default {
 	name: 'ViewerComponent',
 	components: {
-		NcButton: Vue.extend(NcButton),
-		PencilOutlineIcon: Vue.extend(PencilOutlineIcon),
-		PlainTextReader: Vue.extend(PlainTextReader),
-		MarkdownContentEditor: Vue.extend(MarkdownContentEditor),
+		SourceView,
 		Editor: getEditorInstance,
 	},
 	provide() {
@@ -100,7 +80,6 @@ export default {
 	},
 	data() {
 		return {
-			content: '',
 			hasToggledInteractiveEmbedding: false,
 		}
 	},
@@ -116,67 +95,21 @@ export default {
 				&& !this.hasToggledInteractiveEmbedding
 			)
 		},
-
-		isEncrypted() {
-			return this.$attrs.e2EeIsEncrypted || false
-		},
-
-		isMarkdown() {
-			return (
-				this.mime === 'text/markdown' || this.mime === 'text/x-web-markdown'
-			)
-		},
-
-		/** @return {boolean} */
-		readerComponent() {
-			return this.isMarkdown ? MarkdownContentEditor : PlainTextReader
-		},
-	},
-
-	watch: {
-		source() {
-			this.loadFileContent()
-		},
 	},
 
 	mounted() {
-		this.loadFileContent()
+		if (!this.useSourceView) {
+			this.onLoaded()
+		}
 	},
 
 	methods: {
-		async loadFileContent() {
-			if (this.useSourceView) {
-				if (this.isEncrypted) {
-					this.content = await this.fetchDecryptedContent()
-					this.contentLoaded = true
-				} else {
-					const response = await axios.get(this.source)
-					this.content = response.data
-					this.contentLoaded = true
-				}
-			}
+		async onLoaded() {
 			this.$emit('update:loaded', true)
 		},
 		toggleEdit() {
 			this.hasToggledInteractiveEmbedding = true
 		},
-		async fetchDecryptedContent() {
-			const client = getClient()
-			const response = await client.getFileContents(
-				`${getRootPath()}${this.filename}`,
-				{ details: true },
-			)
-			const blob = new Blob([response.data], {
-				type: response.headers['content-type'],
-			})
-			const reader = new FileReader()
-			reader.readAsText(blob)
-			return new Promise((resolve) => {
-				reader.onload = () => {
-					resolve(reader.result)
-				}
-			})
-		},
 		t,
 	},
 }
@@ -192,23 +125,6 @@ export default {
 	position: relative;
 	background-color: var(--color-main-background);
 
-	&.source-viewer {
-		display: block;
-
-		.editor__content-wrapper {
-			margin-top: var(--header-height);
-		}
-
-		.toggle-interactive {
-			position: sticky;
-			bottom: 0;
-			right: 0;
-			z-index: 1;
-			margin-left: auto;
-			margin-right: 0;
-		}
-	}
-
 	&.text-editor--embedding {
 		min-height: 400px;
 	}