Copy startup terminal (#5585)

* Add copyTerminal translation key

* Add copy terminal button with select all functionality

* Remove copy button from error view button group

* Add hover-based copy button overlay to terminal

* Fix clipboard copy implementation in BaseTerminal

* Add 'Copy all' tooltip to terminal copy button

* Fix copy button to be away from right hand side

* Update copy button to respect existing selection

- Copy only selected text if any exists
- Copy all text and clear selection if nothing selected
- Update tooltip to reflect new behavior

* Add dynamic tooltip showing actual copy action

- Show 'Copy selection' when text is selected
- Show 'Copy all' when no text is selected

* Remove redundant i18n

* Fix aria-label to use dynamic tooltip text

* Remove debug console.error statements from useTerminal

Clean up debug logging added during development:
- Remove selection change debug logging
- Remove focus state debug logging
- Remove keyboard event debug logging
- Remove copy/paste debug logging

* Remove redundant keyboard handling from useTerminal

The rebase commit already fixed basic copy/paste.
Removed only the complex keyboard event handling that
duplicates the rebase fix. Kept the valuable UI features:
- Hover copy button overlay
- Right-click context menu

* Use Tailwind transition classes instead of custom CSS

Replace custom .animate-fade-in with standard Tailwind
transition-opacity duration-200 classes

* Use VueUse useElementHover for robust hover handling

Replace manual mouseenter/mouseleave events with VueUse
useElementHover composable which properly handles all
edge cases including mouseout and interrupted events

* Move tooltip to left of button

Relieves squished tooltip

* Simplify code

* Fix listener lifecycle management

Consolidate setup into single onMounted block instead
of creating unnecessary duplicate lifecycle hooks

* Replace any type with proper IDisposable type

* Refactor copy logic for clarity

* Use v-show for proper opacity transitions

* Prefer optional chaining

* Use useEventListener for context menu

* Remove redundant opacity classes

* Add BaseTerminal component tests

* Use pointer-events for button interactivity

* Update tests for pointer-events button behavior

* Fix clipboard mock in tests

* Fix test expectations for opacity classes

* Simplify hover tests for button state

* Remove low-value 'renders terminal container' test

* Remove non-functional 'button responds to hover' test

* Remove implementation detail test for dispose listener

* Remove redundant 'tracks selection changes' test

* Remove obvious comments from test file

* Use cn() utility for conditional classes

* Update tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.spec.ts

Co-authored-by: Alexander Brown <drjkl@comfy.org>

* [auto-fix] Apply ESLint and Prettier fixes

* Remove 'any' types from wrapper and terminalMock variables

Add assertion to verify onSelectionChange was called

* Move mountBaseTerminal factory to module scope

* Rename test file

- Current consensus is .test.ts for component files

* Update src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

* nit

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
filtered
2025-09-16 10:06:41 +10:00
committed by GitHub
parent 2b57291756
commit b8d8193a38
3 changed files with 287 additions and 4 deletions

View File

@@ -3,15 +3,37 @@
<div class="p-terminal rounded-none h-full w-full p-2">
<div ref="terminalEl" class="h-full terminal-host" />
</div>
<Button
v-tooltip.left="{
value: tooltipText,
showDelay: 300
}"
icon="pi pi-copy"
severity="secondary"
size="small"
:class="
cn('absolute top-2 right-8 transition-opacity', {
'opacity-0 pointer-events-none select-none': !isHovered
})
"
:aria-label="tooltipText"
@click="handleCopy"
/>
</div>
</template>
<script setup lang="ts">
import { useEventListener } from '@vueuse/core'
import { Ref, onUnmounted, ref } from 'vue'
import { useElementHover, useEventListener } from '@vueuse/core'
import type { IDisposable } from '@xterm/xterm'
import Button from 'primevue/button'
import { Ref, computed, onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
import { electronAPI, isElectron } from '@/utils/envUtil'
import { cn } from '@/utils/tailwindUtil'
const { t } = useI18n()
const emit = defineEmits<{
created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
@@ -19,7 +41,39 @@ const emit = defineEmits<{
}>()
const terminalEl = ref<HTMLElement | undefined>()
const rootEl = ref<HTMLElement | undefined>()
emit('created', useTerminal(terminalEl), rootEl)
const hasSelection = ref(false)
const isHovered = useElementHover(rootEl)
const terminalData = useTerminal(terminalEl)
emit('created', terminalData, rootEl)
const { terminal } = terminalData
let selectionDisposable: IDisposable | undefined
const tooltipText = computed(() => {
return hasSelection.value
? t('serverStart.copySelectionTooltip')
: t('serverStart.copyAllTooltip')
})
const handleCopy = async () => {
const existingSelection = terminal.getSelection()
const shouldSelectAll = !existingSelection
if (shouldSelectAll) terminal.selectAll()
const selectedText = shouldSelectAll
? terminal.getSelection()
: existingSelection
if (selectedText) {
await navigator.clipboard.writeText(selectedText)
if (shouldSelectAll) {
terminal.clearSelection()
}
}
}
const showContextMenu = (event: MouseEvent) => {
event.preventDefault()
@@ -30,7 +84,16 @@ if (isElectron()) {
useEventListener(terminalEl, 'contextmenu', showContextMenu)
}
onUnmounted(() => emit('unmounted'))
onMounted(() => {
selectionDisposable = terminal.onSelectionChange(() => {
hasSelection.value = terminal.hasSelection()
})
})
onUnmounted(() => {
selectionDisposable?.dispose()
emit('unmounted')
})
</script>
<style scoped>