Merge pull request #5579 from nextcloud/fix/5532

fix: Make edit mode in interactive widgets opt-in

Author: juliusknorr

src/components/Editor.vue

@@ -33,7 +33,7 @@
 			:has-connection-issue="hasConnectionIssue"
 			@reconnect="reconnect" />
 
-		<SkeletonLoading v-if="!contentLoaded && !displayedStatus" />
+		<SkeletonLoading v-if="showLoadingSkeleton" />
 		<Wrapper v-if="displayed"
 			:sync-error="syncError"
 			:has-connection-issue="hasConnectionIssue"
@@ -286,6 +286,9 @@ export default {
 		displayedStatus() {
 			return this.displayed || !!this.syncError
 		},
+		showLoadingSkeleton() {
+			return (!this.contentLoaded || !this.displayed) && !this.syncError
+		},
 		renderRichEditorMenus() {
 			return this.contentLoaded
 				&& this.isRichEditor

src/components/ViewerComponent.vue

@@ -27,29 +27,45 @@
 		:active="active || isEmbedded"
 		:autofocus="autofocus"
 		:share-token="shareToken"
+		:class="{ 'text-editor--embedding': isEmbedded }"
 		:mime="mime"
 		:show-outline-outside="showOutlineOutside" />
 	<div v-else
 		id="editor-container"
 		data-text-el="editor-container"
 		class="text-editor source-viewer">
 		<Component :is="readerComponent" :content="content" />
+		<NcButton v-if="isEmbedded" class="toggle-interactive" @click="toggleEdit">
+			{{ t('text', 'Edit') }}
+			<template #icon>
+				<PencilIcon />
+			</template>
+		</NcButton>
 	</div>
 </template>
 
 <script>
+import Vue from 'vue'
 import axios from '@nextcloud/axios'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import PlainTextReader from './PlainTextReader.vue'
 import RichTextReader from './RichTextReader.vue'
+import { translate, translatePlural } from '@nextcloud/l10n'
 
 import { getSharingToken } from '../helpers/token.js'
 import getEditorInstance from './Editor.singleton.js'
 
+Vue.prototype.t = translate
+Vue.prototype.n = translatePlural
+
 export default {
 	name: 'ViewerComponent',
 	components: {
-		RichTextReader,
-		PlainTextReader,
+		NcButton: Vue.extend(NcButton),
+		PencilIcon: Vue.extend(PencilIcon),
+		RichTextReader: Vue.extend(RichTextReader),
+		PlainTextReader: Vue.extend(PlainTextReader),
 		Editor: getEditorInstance,
 	},
 	provide() {
@@ -102,12 +118,13 @@ export default {
 	data() {
 		return {
 			content: '',
+			hasToggledInteractiveEmbedding: false,
 		}
 	},
 	computed: {
 		/** @return {boolean} */
 		useSourceView() {
-			return this.source && (this.fileVersion || !this.fileid)
+			return this.source && (this.fileVersion || !this.fileid || this.isEmbedded) && !this.hasToggledInteractiveEmbedding
 		},
 
 		/** @return {boolean} */
@@ -127,6 +144,7 @@ export default {
 	},
 
 	methods: {
+		t: translate,
 		async loadFileContent() {
 			if (this.useSourceView) {
 				const response = await axios.get(this.source)
@@ -135,6 +153,9 @@ export default {
 			}
 			this.$emit('update:loaded', true)
 		},
+		toggleEdit() {
+			this.hasToggledInteractiveEmbedding = true
+		},
 	},
 }
 </script>
@@ -151,10 +172,26 @@ export default {
 	background-color: var(--color-main-background);
 
 	&.source-viewer {
+		display: block;
+
 		.text-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;
 	}
+
 }
 </style>
 <style lang="scss">