Merge pull request #5630 from nextcloud/bugfix/focus-on-translate-modal

fix: focus issue on translate modal, remove duplicate code

cypress/e2e/Assistant.spec.js

@@ -73,4 +73,28 @@ describe('Assistant', () => {
 			.should('be.visible')
 			.should('contain', 'Hello World')
 	})
+
+	it('Open translate dialog', () => {
+		cy.isolateTest({
+			sourceFile: fileName,
+		})
+		cy.openFile(fileName, { force: true })
+
+		cy.getContent()
+			.click({ force: true })
+		cy.get('[data-cy="assistantMenu"]')
+			.click()
+		cy.get('[data-cy="open-translate"]')
+			.should('be.visible')
+			.click()
+
+		cy.get('[data-cy="translate-input"]')
+			.should('be.visible')
+			.click()
+		cy.get('[data-cy="translate-input"]')
+			.should('be.visible')
+			.type('Hello World')
+		cy.get('[data-cy="translate-input"]')
+			.should('be.focused')
+	})
 })

cypress/e2e/share.spec.js

@@ -117,7 +117,7 @@ describe('Open test.md in viewer', function() {
 				cy.getModal().getContent().should('contain', 'Hello world')
 				cy.getModal().getContent().find('h2').should('contain', 'Hello world')
 				cy.getModal().find('.modal-header button.header-close').click()
-				cy.get('.modal-mask').should('not.exist')
+				cy.get('.modal-mask').should('not.be.visible')
 				// cy.get('#rich-workspace').getContent().should('contain', 'Hello world')
 			})
 	})

src/components/Assistant.vue

@@ -43,7 +43,7 @@
 					</template>
 					{{ provider.name }}
 				</NcActionButton>
-				<NcActionButton close-after-click @click="openTranslateDialog">
+				<NcActionButton data-cy="open-translate" close-after-click @click="openTranslateDialog">
 					<template #icon>
 						<TranslateVariant :size="20" />
 					</template>
@@ -63,12 +63,6 @@
 				class="floating-menu--badge" />
 		</FloatingMenu>
 
-		<Translate v-if="displayTranslate !== false"
-			:content="displayTranslate"
-			@insert-content="translateInsert"
-			@replace-content="translateReplace"
-			@close="hideTranslate" />
-
 		<NcModal :show.sync="showTaskList">
 			<div class="task-list">
 				<h4 v-if="tasks.length > 0">
@@ -154,8 +148,7 @@ import {
 	useIsPublicMixin,
 } from './Editor.provider.js'
 import { FloatingMenu } from '@tiptap/vue-2'
-import Translate from './Modal/Translate.vue'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 const limitInRange = (num, min, max) => {
 	return Math.min(Math.max(parseInt(num), parseInt(min)), parseInt(max))
@@ -170,7 +163,6 @@ const STATUS_UNKNOWN = 0
 export default {
 	name: 'Assistant',
 	components: {
-		Translate,
 		FloatingMenu,
 		ErrorIcon,
 		CreationIcon,
@@ -209,7 +201,6 @@ export default {
 			STATUS_UNKNOWN,
 
 			showTaskList: false,
-			displayTranslate: false,
 			canTranslate: loadState('text', 'translation_languages', []).length > 0,
 		}
 	},
@@ -304,27 +295,10 @@ export default {
 			await this.fetchTasks()
 		},
 		openTranslateDialog() {
-			this.displayTranslate = this.selection
-		},
-		hideTranslate() {
-			this.displayTranslate = false
-		},
-		translateInsert(content) {
-			this.$editor.commands.command(({ tr, commands }) => {
-				return commands.insertContentAt(tr.selection.to, content)
-			})
-			this.displayTranslate = false
-		},
-		translateReplace(content) {
-			this.$editor.commands.command(({ tr, commands }) => {
-				const selection = tr.selection
-				const range = {
-					from: selection.from,
-					to: selection.to,
-				}
-				return commands.insertContentAt(range, content)
-			})
-			this.displayTranslate = false
+			if (!this.selection.trim().length) {
+				this.$editor.commands.selectAll()
+			}
+			emit('text:translate-modal:show', { content: this.selection || '' })
 		},
 		async openResult(task) {
 			window.OCA?.TPAssistant.openAssistantResult(task)

src/components/Editor.vue

@@ -77,6 +77,11 @@
 				:is-rich-editor="isRichEditor" />
 		</Wrapper>
 		<Assistant v-if="$editor" />
+		<Translate :show="translateModal"
+			:content="translateContent"
+			@insert-content="translateInsert"
+			@replace-content="translateReplace"
+			@close="hideTranslate" />
 	</div>
 </template>
 
@@ -125,6 +130,7 @@ import MainContainer from './Editor/MainContainer.vue'
 import Wrapper from './Editor/Wrapper.vue'
 import SkeletonLoading from './SkeletonLoading.vue'
 import Assistant from './Assistant.vue'
+import Translate from './Modal/Translate.vue'
 
 export default {
 	name: 'Editor',
@@ -139,6 +145,7 @@ export default {
 		Reader: () => import(/* webpackChunkName: "editor" */'./Reader.vue'),
 		Status,
 		Assistant,
+		Translate,
 	},
 	mixins: [
 		isMobile,
@@ -251,6 +258,8 @@ export default {
 			draggedOver: false,
 
 			contentWrapper: null,
+			translateModal: false,
+			translateContent: '',
 		}
 	},
 	computed: {
@@ -338,6 +347,7 @@ export default {
 			const maxWidth = width - 36
 			this.$el.style.setProperty('--widget-full-width', `${maxWidth}px`)
 		})
+		subscribe('text:translate-modal:show', this.showTranslateModal)
 	},
 	created() {
 		this.$ydoc = new Doc()
@@ -364,6 +374,7 @@ export default {
 			await Promise.any([timeout, this.$syncService.save()])
 		}
 		this.$providers.forEach(p => p.destroy())
+		unsubscribe('text:translate-modal:show', this.showTranslateModal)
 	},
 	methods: {
 		initSession() {
@@ -757,6 +768,31 @@ export default {
 				event.preventDefault()
 			}
 		},
+
+		showTranslateModal(e) {
+			this.translateContent = e.content
+			this.translateModal = true
+		},
+		hideTranslate() {
+			this.translateModal = false
+		},
+		translateInsert(content) {
+			this.$editor.commands.command(({ tr, commands }) => {
+				return commands.insertContentAt(tr.selection.to, content)
+			})
+			this.translateModal = false
+		},
+		translateReplace(content) {
+			this.$editor.commands.command(({ tr, commands }) => {
+				const selection = tr.selection
+				const range = {
+					from: selection.from,
+					to: selection.to,
+				}
+				return commands.insertContentAt(range, content)
+			})
+			this.translateModal = false
+		},
 	},
 }
 </script>

src/components/Menu/MenuBar.vue

@@ -34,11 +34,6 @@
 			'text-menubar--is-workspace': $isRichWorkspace
 		}">
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
-		<Translate v-if="displayTranslate !== false"
-			:content="displayTranslate"
-			@insert-content="translateInsert"
-			@replace-content="translateReplace"
-			@close="hideTranslate" />
 
 		<div v-if="$isRichEditor"
 			ref="menubar"
@@ -63,7 +58,7 @@
 				:can-be-focussed="activeMenuEntry === visibleEntries.length"
 				@click="activeMenuEntry = 'remain'">
 				<template #lastAction="{ visible }">
-					<NcActionButton v-if="canTranslate" @click="showTranslate">
+					<NcActionButton v-if="canTranslate" close-after-click @click="showTranslate">
 						<template #icon>
 							<TranslateVariant />
 						</template>
@@ -85,14 +80,14 @@
 import { NcActionSeparator, NcActionButton } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 import { useResizeObserver } from '@vueuse/core'
+import { emit } from '@nextcloud/event-bus'
 
 import ActionFormattingHelp from './ActionFormattingHelp.vue'
 import ActionList from './ActionList.vue'
 import ActionSingle from './ActionSingle.vue'
 import CharacterCount from './CharacterCount.vue'
 import HelpModal from '../HelpModal.vue'
 import ToolBarLogic from './ToolBarLogic.js'
-import Translate from './../Modal/Translate.vue'
 import actionsFullEntries from './entries.js'
 import { MENU_ID } from './MenuBar.provider.js'
 import { DotsHorizontal, TranslateVariant } from '../icons.js'
@@ -114,7 +109,6 @@ export default {
 		NcActionButton,
 		CharacterCount,
 		TranslateVariant,
-		Translate,
 	},
 	extends: ToolBarLogic,
 	mixins: [
@@ -145,7 +139,6 @@ export default {
 			entries: [...actionsFullEntries],
 			randomID: `menu-bar-${(Math.ceil((Math.random() * 10000) + 500)).toString(16)}`,
 			displayHelp: false,
-			displayTranslate: false,
 			isReady: false,
 			canTranslate: loadState('text', 'translation_languages', []).length > 0,
 			resize: null,
@@ -232,27 +225,7 @@ export default {
 			}
 
 			console.debug('translation click', this.$editor.view.state.selection, selectedText)
-			this.displayTranslate = selectedText ?? ''
-		},
-		hideTranslate() {
-			this.displayTranslate = false
-		},
-		translateInsert(content) {
-			this.$editor.commands.command(({ tr, commands }) => {
-				return commands.insertContentAt(tr.selection.to, content)
-			})
-			this.displayTranslate = false
-		},
-		translateReplace(content) {
-			this.$editor.commands.command(({ tr, commands }) => {
-				const selection = tr.selection
-				const range = {
-					from: selection.from,
-					to: selection.to,
-				}
-				return commands.insertContentAt(range, content)
-			})
-			this.displayTranslate = false
+			emit('text:translate-modal:show', { content: selectedText })
 		},
 	},
 }

src/components/Modal/Translate.vue

@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<NcModal size="large" @close="$emit('close')">
+	<NcModal :show="show" size="large" @close="$emit('close')">
 		<div class="translate-dialog">
 			<h2>{{ t('text', 'Translate') }}</h2>
 			<em>{{ t('text', 'To translate individual parts of the text, select it before using the translate function.') }}</em>
@@ -39,6 +39,7 @@
 						:value.sync="input"
 						:label="t('text', 'Text to translate from')"
 						autofocus
+						data-cy="translate-input"
 						input-class="translate-textarea"
 						resize="none"
 						@focus="onInputFocus" />
@@ -106,6 +107,10 @@ export default {
 		useIsMobileMixin,
 	],
 	props: {
+		show: {
+			type: Boolean,
+			default: false,
+		},
 		content: {
 			type: String,
 			default: '',
@@ -165,6 +170,9 @@ export default {
 		},
 	},
 	watch: {
+		content() {
+			this.input = this.content
+		},
 		input() {
 			this.result = null
 			this.error = null
@@ -246,6 +254,7 @@ export default {
 		resize: none;
 		box-sizing: border-box;
 		overflow-y: auto;
+		min-height: 62px;
 		max-height: 58vh;
 	}
 }