feat(editorApi): Use editor API for version view

Also fix some further issues with version view along the way: * Show emoji and fix alignment of page title in version view * Mark selected version as active in sidebar version list Signed-off-by: Jonas <[email protected]>
nextcloud · Oct 31, 2023 · ae601af · ae601af
1 parent 4ea225a
commit ae601af
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 12 deletions.
diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
@@ -79,7 +79,7 @@ export default {
 
 		contentLoaded() {
 			// Either `pageContent` is filled from editor or we finished fetching it from DAV
-			return this.pageContent || !this.loading('pageContent')
+			return !!this.pageContent || !this.loading('pageContent')
 		},
 	},
 

diff --git a/src/components/Page/Version.vue b/src/components/Page/Version.vue
@@ -1,6 +1,16 @@
 <template>
 	<div>
 		<h1 id="titleform" class="page-title" :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
+			<div class="page-title-icon">
+				<div v-if="currentPage.emoji">
+					{{ currentPage.emoji }}
+				</div>
+				<EmoticonOutlineIcon v-else
+					class="emoji-picker-emoticon"
+					:size="pageTitleIconSize"
+					fill-color="var(--color-text-maxcontrast)" />
+			</div>
+
 			<input class="title"
 				:class="{ 'mobile': isMobile }"
 				type="text"
@@ -19,11 +29,16 @@
 				<NcActionButton icon="icon-menu-sidebar" :close-after-click="true" @click="closeVersions" />
 			</NcActions>
 		</h1>
-		<div id="text-container"
+		<SkeletonLoading v-show="!contentLoaded" class="page-content-skeleton" type="text" />
+		<div v-show="contentLoaded"
+			id="text-container"
 			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
-			<Reader :key="`show-${currentPage.id}-${version.timestamp}`"
+			<div v-if="useEditorApi"
+				ref="reader" />
+			<Reader v-else
+				:key="`show-${currentPage.id}-${version.timestamp}`"
 				:current-page="currentPage"
-				:page-content="pageVersionContent" />
+				:page-content="davContent" />
 		</div>
 	</div>
 </template>
@@ -39,40 +54,46 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import EmoticonOutlineIcon from 'vue-material-design-icons/EmoticonOutline.vue'
 import { SELECT_VERSION } from '../../store/mutations.js'
 import { GET_VERSIONS } from '../../store/actions.js'
 import pageContentMixin from '../../mixins/pageContentMixin.js'
+import editorMixin from '../../mixins/editorMixin.js'
+import SkeletonLoading from '../SkeletonLoading.vue'
 
 export default {
 	name: 'Version',
 
 	components: {
+		EmoticonOutlineIcon,
 		NcActionButton,
 		NcActions,
 		NcButton,
 		RestoreIcon,
 		Reader,
+		SkeletonLoading,
 	},
 
 	mixins: [
+		editorMixin,
 		isMobile,
 		pageContentMixin,
 	],
 
-	data() {
-		return {
-			pageVersionContent: '',
-		}
-	},
-
 	computed: {
 		...mapGetters([
 			'currentPage',
 			'isFullWidthView',
-			'version',
+			'loading',
+			'useEditorApi',
 			'title',
+			'version',
 		]),
 
+		pageTitleIconSize() {
+			return isMobile ? 25 : 30
+		},
+
 		restoreFolderUrl() {
 			return generateRemoteUrl(
 				`dav/versions/${this.getUser}/restore/${this.currentPage.id}`,
@@ -86,15 +107,22 @@ export default {
 		versionTitle() {
 			return `${this.title} (${this.version.relativeTimestamp})`
 		},
+
+		contentLoaded() {
+			// Either `pageContent` is filled from editor or we finished fetching it from DAV
+			return !!this.pageContent || !this.loading(`version-${this.currentPage.id}-${this.version.timestamp}`)
+		},
 	},
 
 	watch: {
 		'version.timestamp'() {
+			this.davContent = ''
 			this.getPageContent()
 		},
 	},
 
 	mounted() {
+		this.setupReader()
 		this.getPageContent()
 	},
 
@@ -139,9 +167,16 @@ export default {
 
 		async getPageContent() {
 			this.load(`version-${this.currentPage.id}-${this.version.timestamp}`)
-			this.pageVersionContent = await this.fetchPageContent(this.version.downloadUrl)
+			this.davContent = await this.fetchPageContent(this.version.downloadUrl)
+			this.reader?.setContent(this.pageContent)
 			this.done(`version-${this.currentPage.id}-${this.version.timestamp}`)
 		},
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.page-content-skeleton {
+	padding-top: 44px;
+}
+</style>
diff --git a/src/components/PageSidebar/SidebarTabVersions.vue b/src/components/PageSidebar/SidebarTabVersions.vue
@@ -20,6 +20,8 @@
 				<span :title="pageFormattedTimestamp">
 					<NcListItem :title="t('collectives', 'Current version')"
 						class="version"
+						:class="{'active': !version}"
+						:active="!version"
 						@click="clickPreviewVersion(null)">
 						<template #icon>
 							<PageIcon :size="26"
@@ -36,6 +38,8 @@
 					:title="v.formattedTimestamp">
 					<NcListItem :title="v.relativeTimestamp"
 						class="version"
+						:class="{'active': selected(v)}"
+						:active="selected(v)"
 						@click="clickPreviewVersion(v)">
 						<template #icon>
 							<NcLoadingIcon v-if="loading(`version-${pageId}-${v.timestamp}`)"
@@ -132,6 +136,12 @@ export default {
 		pageHumanReadableSize() {
 			return formatFileSize(this.pageSize)
 		},
+
+		selected() {
+			return (v) => {
+				return v.timestamp === this.version?.timestamp
+			}
+		},
 	},
 
 	watch: {