feat: update layout of translate dialog

Signed-off-by: Luka Trovic <[email protected]>

src/components/Menu/MenuBar.vue

@@ -247,9 +247,15 @@ export default {
 		},
 		showTranslate() {
 			const { from, to } = this.$editor.view.state.selection
-			const selectedText = this.$editor.view.state.doc.textBetween(from, to, ' ')
+			let selectedText = this.$editor.view.state.doc.textBetween(from, to, ' ')
+
+			if (!selectedText.trim().length) {
+				this.$editor.commands.selectAll()
+				selectedText = this.$editor.view.state.doc.textContent
+			}
+
 			console.debug('translation click', this.$editor.view.state.selection, selectedText)
-			this.displayTranslate = selectedText.trim().length ? selectedText : this.$editor.view.state.doc.textContent
+			this.displayTranslate = selectedText ?? ''
 		},
 		hideTranslate() {
 			this.displayTranslate = false

src/components/Modal/Translate.vue

@@ -32,9 +32,13 @@
 							input-id="fromLanguage"
 							:placeholder="t('text', 'Select language')"
 							:options="fromLanguages"
+							:disabled="disableFromLanguage"
 							:append-to-body="false" />
 					</div>
-					<textarea v-model="input" />
+					<textarea ref="input"
+						v-model="input"
+						autofocus="true"
+						@focus="disableFromLanguage = false" />
 				</div>
 				<div class="col">
 					<div class="language-selector">
@@ -103,6 +107,7 @@ export default {
 			canDetect: loadState('text', 'translation_can_detect'),
 			loading: false,
 			error: null,
+			disableFromLanguage: true,
 		}
 	},
 	computed: {