fix: Avoid layout jump with rich workspace

cypress/e2e/conflict.spec.js

@@ -32,7 +32,7 @@ const variants = [
 variants.forEach(function({ fixture, mime }) {
 	const fileName = fixture
 	describe(`${mime} (${fileName})`, function() {
-		const getWrapper = () => cy.get('.text-editor__wrapper.has-conflicts')
+		const getWrapper = () => cy.get('.viewer__content .text-editor__wrapper.has-conflicts')
 
 		before(() => {
 			initUserAndFiles(user, fileName)
@@ -56,13 +56,13 @@ variants.forEach(function({ fixture, mime }) {
 			cy.openFile(fileName)
 			cy.get('.text-editor .document-status .icon-error')
 			getWrapper()
-				.get('#read-only-editor')
+				.find('#read-only-editor')
 				.should('contain', 'Hello world')
 			getWrapper()
-				.get('.text-editor__main')
+				.find('.text-editor__main')
 				.should('contain', 'Hello world')
 			getWrapper()
-				.get('.text-editor__main')
+				.find('.text-editor__main')
 				.should('contain', 'cruel conflicting')
 		})
 
@@ -81,7 +81,6 @@ variants.forEach(function({ fixture, mime }) {
 			cy.get('[data-cy="resolveThisVersion"]').click()
 
 			getWrapper()
-				.get('#read-only-editor')
 				.should('not.exist')
 
 			cy.get('[data-cy="resolveThisVersion"]')
@@ -105,12 +104,10 @@ variants.forEach(function({ fixture, mime }) {
 			cy.get('#viewer').should('not.exist')
 			cy.openFile(fileName)
 
-			getWrapper()
-				.get('[data-cy="resolveServerVersion"]')
+			cy.get('[data-cy="resolveServerVersion"]')
 				.click()
 
 			getWrapper()
-				.get('#read-only-editor')
 				.should('not.exist')
 			cy.get('[data-cy="resolveThisVersion"]')
 				.should('not.exist')

lib/Listeners/FilesLoadAdditionalScriptsListener.php

@@ -45,6 +45,7 @@ public function handle(Event $event): void {
 			return;
 		}
 
+		\OCP\Util::addInitScript('text', 'text-init');
 		\OCP\Util::addScript('text', 'text-files');
 
 		$this->initialStateProvider->provideState();

src/files.js

@@ -21,11 +21,10 @@
  */
 import { linkTo } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import { registerFileListHeaders } from '@nextcloud/files'
 import Vue from 'vue'
 
 import { logger } from './helpers/logger.js'
-import { registerFileActionFallback, FilesWorkspaceHeader } from './helpers/files.js'
+import { registerFileActionFallback } from './helpers/files.js'
 import FilesSettings from './views/FilesSettings.vue'
 import store from './store/index.js'
 
@@ -56,9 +55,6 @@ document.addEventListener('DOMContentLoaded', () => {
 	}
 
 })
-if (workspaceAvailable) {
-	registerFileListHeaders(FilesWorkspaceHeader)
-}
 
 OCA.Text = {
 	RichWorkspaceEnabled: workspaceEnabled,

src/helpers/files.js

@@ -187,6 +187,7 @@ export const FilesWorkspaceHeader = new Header({
 
 	render(el, folder, view) {
 		addMenuRichWorkspace()
+		const hasRichWorkspace = !!folder.attributes['rich-workspace-file']
 
 		import('vue').then((module) => {
 			el.id = 'files-workspace-wrapper'
@@ -201,14 +202,19 @@ export const FilesWorkspaceHeader = new Header({
 			vm = new View({
 				propsData: {
 					path: folder.path,
+					hasRichWorkspace,
+					content: folder.attributes['rich-workspace'],
 				},
 				store,
 			}).$mount(el)
 		})
 	},
 
 	updated(folder, view) {
+		const hasRichWorkspace = !!folder.attributes['rich-workspace-file']
 		vm.path = folder.path
+		vm.hasRichWorkspace = hasRichWorkspace
+		vm.content = folder.attributes['rich-workspace']
 	},
 })
 

src/init.js

@@ -0,0 +1,12 @@
+import { registerFileListHeaders, registerDavProperty } from '@nextcloud/files'
+import { loadState } from '@nextcloud/initial-state'
+import { FilesWorkspaceHeader } from './helpers/files.js'
+
+const workspaceAvailable = loadState('text', 'workspace_available')
+
+registerDavProperty('nc:rich-workspace', { nc: 'http://nextcloud.org/ns' })
+registerDavProperty('nc:rich-workspace-file', { nc: 'http://nextcloud.org/ns' })
+
+if (workspaceAvailable) {
+	registerFileListHeaders(FilesWorkspaceHeader)
+}

src/views/RichWorkspace.vue

@@ -22,10 +22,10 @@
 
 <template>
 	<div v-if="enabled"
-		v-show="file"
+		v-show="hasRichWorkspace"
 		id="rich-workspace"
-		:class="{'focus': focus, 'dark': darkTheme, 'creatable': canCreate }">
-		<SkeletonLoading v-if="!loaded || !ready" />
+		:class="{'focus': focus, 'dark': darkTheme }">
+		<RichTextReader v-if="!loaded || !ready" :content="content" class="rich-workspace--preview" />
 		<Editor v-if="file"
 			v-show="ready"
 			:key="file.path"
@@ -48,19 +48,23 @@
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import SkeletonLoading from '../components/SkeletonLoading.vue'
 import getEditorInstance from '../components/Editor.singleton.js'
+import RichTextReader from '../components/RichTextReader.vue'
 
 const IS_PUBLIC = !!(document.getElementById('isPublic'))
 const WORKSPACE_URL = generateOcsUrl('apps/text' + (IS_PUBLIC ? '/public' : '') + '/workspace', 2)
 
 export default {
 	name: 'RichWorkspace',
 	components: {
-		SkeletonLoading,
+		RichTextReader,
 		Editor: getEditorInstance,
 	},
 	props: {
+		content: {
+			type: String,
+			default: '',
+		},
 		path: {
 			type: String,
 			required: true,
@@ -69,6 +73,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		hasRichWorkspace: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -87,9 +95,6 @@ export default {
 		shareToken() {
 			return document.getElementById('sharingToken')?.value
 		},
-		canCreate() {
-			return !!(this.folder && (this.folder.permissions & OC.PERMISSION_CREATE))
-		},
 	},
 	watch: {
 		path() {
@@ -134,9 +139,12 @@ export default {
 			})
 		},
 		getFileInfo(autofocus) {
-			this.loaded = false
-			this.autofocus = false
+			if (!this.hasRichWorkspace) {
+				return
+			}
 			this.ready = false
+			this.loaded = true
+			this.autofocus = false
 			const params = { path: this.path }
 			if (IS_PUBLIC) {
 				params.shareToken = this.shareToken
@@ -209,9 +217,11 @@ export default {
 		transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
 		z-index: 61;
 		position: relative;
-		&.creatable {
-			min-height: 100px;
-		}
+		min-height: 30vh;
+	}
+
+	.rich-workspace--preview {
+		margin-top: 44px;
 	}
 
 	/* For subfolders, where there are no Recommendations */

webpack.config.js

@@ -8,6 +8,7 @@ webpackConfig.entry = {
 	public: path.join(__dirname, 'src', 'public.js'),
 	viewer: path.join(__dirname, 'src', 'viewer.js'),
 	editors: path.join(__dirname, 'src', 'editor.js'),
+	init: path.join(__dirname, 'src', 'init.js'),
 }
 
 webpackConfig.output.chunkFilename = '[id].js?v=[contenthash]'