fix: focus issue on translate modal, remove duplicate code

Signed-off-by: Luka Trovic <luka@nextcloud.com>
nextcloud · Apr 5, 2024 · 4bbc4f1 · 4bbc4f1
1 parent 27f1be2
commit 4bbc4f1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 62 deletions.
diff --git a/src/components/Assistant.vue b/src/components/Assistant.vue
@@ -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,7 @@ 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
+			emit('text:translate-modal:show', { content: this.selection || '' })
 		},
 		async openResult(task) {
 			window.OCA?.TPAssistant.openAssistantResult(task)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -77,6 +77,11 @@
 				:is-rich-editor="isRichEditor" />
 		</Wrapper>
 		<Assistant v-if="$editor" />
+		<Translate :show.sync="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>

diff --git a/src/components/Menu/MenuBar.vue b/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 close-after-click v-if="canTranslate" @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 })
 		},
 	},
 }

diff --git a/src/components/Modal/Translate.vue b/src/components/Modal/Translate.vue
@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<NcModal size="large" @close="$emit('close')">
+	<NcModal :show.sync="isShow" 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>
@@ -106,6 +106,10 @@ export default {
 		useIsMobileMixin,
 	],
 	props: {
+		show: {
+			type: Boolean,
+			default: false,
+		},
 		content: {
 			type: String,
 			default: '',
@@ -125,6 +129,9 @@ export default {
 		}
 	},
 	computed: {
+		isShow() {
+			return this.show
+		},
 		fromLanguages() {
 			const result = this.canDetect ? [detectLanguageEntry] : []
 			const set = new Set()
@@ -165,6 +172,9 @@ export default {
 		},
 	},
 	watch: {
+		content() {
+			this.input = this.content
+		},
 		input() {
 			this.result = null
 			this.error = null
@@ -246,6 +256,7 @@ export default {
 		resize: none;
 		box-sizing: border-box;
 		overflow-y: auto;
+		min-height: 62px;
 		max-height: 58vh;
 	}
 }