Update rich workspace visibility

cypress/e2e/workspace.spec.js

@@ -62,20 +62,26 @@ describe('Workspace', function() {
 		cy.get('a[href*="/apps/files/recent"]')
 			.click()
 		cy.get('#rich-workspace .ProseMirror')
-			.should('not.exist')
+			.should('not.visible')
 	})
 
 	it('adds a Readme.md', function() {
+		const url = '**/remote.php/dav/files/**'
+		cy.intercept({ method: 'PUT', url })
+			.as('addDescription')
+
 		cy.visit(`apps/files?dir=/${encodeURIComponent(currentFolder)}`)
 		cy.get('.files-fileList').should('not.contain', 'Readme.md')
-		cy.openWorkspace()
-			.type('Hello')
-			.should('contain', 'Hello')
+
+		cy.get('.files-controls').first().within(() => {
+			cy.get('.button.new').click()
+			cy.get('.newFileMenu a.menuitem[data-action="rich-workspace-init"]').click()
+			cy.wait('@addDescription')
+		})
+
 		openSidebar('Readme.md')
-		cy.log('Regression test for #2215')
-		cy.get('#rich-workspace .ProseMirror')
+		cy.get('#rich-workspace .text-editor .text-editor__wrapper')
 			.should('be.visible')
-			.should('contain', 'Hello')
 	})
 
 	it('formats text', function() {
@@ -286,7 +292,6 @@ describe('Workspace', function() {
 			cy.uploadFile('test.md', 'text/markdown', `${Cypress.currentTest.title}/Anleitung.md`)
 			cy.visit(`apps/files?dir=/${encodeURIComponent(currentFolder)}`)
 			cy.get('.files-fileList').should('contain', 'Anleitung.md')
-			cy.get('.empty-workspace').should('contain', 'Ajoutez des notes, listes ou liens')
 		})
 	})
 
@@ -306,17 +311,17 @@ describe('Workspace', function() {
 		})
 
 		it('click', () => {
-			cy.get('#rich-workspace .empty-workspace').click()
+			cy.openWorkspace().click()
 			checkContent()
 		})
 
 		it('enter', () => {
-			cy.get('#rich-workspace .empty-workspace').type('{enter}')
+			cy.openWorkspace().type('{enter}')
 			checkContent()
 		})
 
 		it('spacebar', () => {
-			cy.get('#rich-workspace .empty-workspace')
+			cy.openWorkspace()
 				.trigger('keyup', {
 					keyCode: 32,
 					which: 32,

cypress/support/commands.js

@@ -342,7 +342,7 @@ Cypress.Commands.add('getActionEntry', { prevSubject: 'optional' }, (subject, na
 })
 
 Cypress.Commands.add('getActionSubEntry', (name) => {
-	return cy.get('.action-item__popper .open').getActionEntry(name)
+	return cy.get('div[data-text-el="menubar"]').getActionEntry(name)
 })
 
 Cypress.Commands.add('getContent', { prevSubject: 'optional' }, (subject) => {
@@ -368,8 +368,9 @@ Cypress.Commands.add('clearContent', () => {
 })
 
 Cypress.Commands.add('openWorkspace', () => {
-	cy.get('#rich-workspace .empty-workspace').click()
-	cy.getEditor().find('[data-text-el="editor-content-wrapper"]').click()
+	cy.createDescription()
+	cy.get('#rich-workspace .editor__content').click({ force: true })
+	cy.getEditor().find('[data-text-el="editor-content-wrapper"]').click({ force: true })
 
 	return cy.getContent()
 })
@@ -394,6 +395,19 @@ Cypress.Commands.add('showHiddenFiles', () => {
 	cy.get('.modal-container__close').click()
 })
 
+Cypress.Commands.add('createDescription', () => {
+	const url = '**/remote.php/dav/files/**'
+	cy.intercept({ method: 'PUT', url })
+		.as('addDescription')
+
+	cy.get('.files-fileList').should('not.contain', 'Readme.md')
+	cy.get('.files-controls').first().within(() => {
+		cy.get('.button.new').click()
+		cy.get('.newFileMenu a.menuitem[data-action="rich-workspace-init"]').click()
+	})
+	cy.wait('@addDescription')
+})
+
 Cypress.on(
 	'uncaught:exception',
 	err => !err.message.includes('ResizeObserver loop limit exceeded'),

src/helpers/files.js

@@ -21,7 +21,7 @@
  */
 
 import { loadState } from '@nextcloud/initial-state'
-import { subscribe } from '@nextcloud/event-bus'
+import { emit, subscribe } from '@nextcloud/event-bus'
 import { openMimetypes } from './mime.js'
 import { getSharingToken } from './token.js'
 import RichWorkspace from '../views/RichWorkspace.vue'
@@ -139,14 +139,46 @@ const registerFileActionFallback = () => {
 
 }
 
+const newRichWorkspaceFileMenuPlugin = {
+	attach(menu) {
+		const fileList = menu.fileList
+		const descriptionFile = t('text', 'Readme') + '.' + loadState('text', 'default_file_extension')
+		// only attach to main file list, public view is not supported yet
+		if (fileList.id !== 'files' && fileList.id !== 'files.public') {
+			return
+		}
+
+		// register the new menu entry
+		menu.addMenuEntry({
+			id: 'rich-workspace-init',
+			displayName: t('text', 'Add description'),
+			templateName: descriptionFile,
+			iconClass: 'icon-rename',
+			fileType: 'file',
+			useInput: false,
+			actionHandler() {
+				return window.FileList
+					.createFile(descriptionFile, { scrollTo: false, animate: false })
+					.then(() => emit('Text::showRichWorkspace'))
+			},
+			shouldShow() {
+				return !fileList.findFile(descriptionFile)
+			},
+		})
+	},
+}
+
+const addMenuRichWorkspace = () => {
+	OC.Plugins.register('OCA.Files.NewFileMenu', newRichWorkspaceFileMenuPlugin)
+}
+
 const FilesWorkspacePlugin = {
 	el: null,
 
 	attach(fileList) {
 		if (fileList.id !== 'files' && fileList.id !== 'files.public') {
 			return
 		}
-
 		this.el = document.createElement('div')
 		fileList.registerHeader({
 			id: 'workspace',
@@ -160,7 +192,7 @@ const FilesWorkspacePlugin = {
 		if (fileList.id !== 'files' && fileList.id !== 'files.public') {
 			return
 		}
-
+		addMenuRichWorkspace()
 		import('vue').then((module) => {
 			const Vue = module.default
 			this.el.id = 'files-workspace-wrapper'
@@ -174,13 +206,11 @@ const FilesWorkspacePlugin = {
 				},
 				store,
 			}).$mount(this.el)
-
 			subscribe('files:navigation:changed', () => {
 				// Expose if the default file list is active to the component
 				// to only render the workspace if the file list is actually visible
 				vm.active = OCA.Files.App.getCurrentFileList() === fileList
 			})
-
 			fileList.$el.on('urlChanged', data => {
 				vm.path = data.dir.toString()
 			})

src/views/RichWorkspace.vue

@@ -21,18 +21,7 @@
   -->
 
 <template>
-	<div v-if="enabled && active" id="rich-workspace" :class="{'icon-loading': !loaded || !ready, 'focus': focus, 'dark': darkTheme, 'creatable': canCreate, 'empty': showEmptyWorkspace}">
-		<a v-if="showEmptyWorkspace"
-			tabindex="0"
-			class="empty-workspace"
-			@keyup.enter="createNew"
-			@keyup.space="createNew"
-			@click="createNew">
-			<p class="placeholder">
-				{{ t('text', 'Add notes, lists or links …') }}
-			</p>
-		</a>
-
+	<div v-if="enabled" id="rich-workspace" :class="{'icon-loading': !loaded || !ready, 'focus': focus, 'dark': darkTheme, 'creatable': canCreate }">
 		<Editor v-if="file"
 			v-show="ready"
 			:key="file.path"
@@ -56,8 +45,6 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import { logger } from '../helpers/logger.js'
-
 const IS_PUBLIC = !!(document.getElementById('isPublic'))
 const WORKSPACE_URL = generateOcsUrl('apps/text' + (IS_PUBLIC ? '/public' : '') + '/workspace', 2)
 
@@ -96,9 +83,6 @@ export default {
 		canCreate() {
 			return !!(this.folder && (this.folder.permissions & OC.PERMISSION_CREATE))
 		},
-		showEmptyWorkspace() {
-			return (!this.file || (this.autofocus && !this.ready)) && this.canCreate
-		},
 	},
 	watch: {
 		path() {
@@ -157,6 +141,7 @@ export default {
 					this.file = data.file
 					this.editing = true
 					this.loaded = true
+					this.autofocus = true
 					return true
 				})
 				.catch((error) => {
@@ -172,28 +157,6 @@ export default {
 					return false
 				})
 		},
-		createNew() {
-			if (this.creating) {
-				return
-			}
-			this.creating = true
-			this.getFileInfo()
-				.then((workspaceFileExists) => {
-					if (!workspaceFileExists) {
-						return window.FileList
-							.createFile('Readme.md', { scrollTo: false, animate: false })
-							.then((status, data) => {
-								return this.getFileInfo()
-							})
-					}
-				})
-				.then(() => {
-					this.autofocus = true
-				})
-				.catch(error => {
-					logger.warn('Create readme failed', { error })
-				})
-		},
 		showRichWorkspace() {
 			this.enabled = true
 			this.getFileInfo()
@@ -240,7 +203,7 @@ export default {
 		z-index: 61;
 		position: relative;
 		&.creatable {
-			min-height: 90px;
+			min-height: 100px;
 		}
 	}
 
@@ -256,7 +219,7 @@ export default {
 		color: var(--color-text-maxcontrast);
 	}
 
-	#rich-workspace:deep(div[contenteditable=false]){
+	#rich-workspace:deep(div[contenteditable=false]) {
 		width: 100%;
 		padding: 0px;
 		background-color: var(--color-main-background);