fix: use paste event instead of keyboard event

Signed-off-by: Robin Appelman <[email protected]>

Author: icewind1991

src/App.vue

@@ -85,16 +85,18 @@ const onShowServerLog = () => {
  * Handle pressing ctrl + v to paste log entries
  * @param event The keyboard event
  */
-const onHandlePaste = (event: KeyboardEvent) => {
-	// Check Ctrl + v (be tolerant: ignore caps lock) and only intercept if target is no input for pasting
-	if ((event.key === 'v' || event.key === 'V') && event.ctrlKey && (event.target as HTMLElement)?.tagName !== 'INPUT') {
-		loggingStore.loadClipboard()
-		event.stopPropagation()
+const onHandlePaste = (event: ClipboardEvent) => {
+	event.preventDefault();
+
+	if (event.clipboardData) {
+		let paste = event.clipboardData.getData("text")
+		loggingStore.loadText(paste)
 	}
+
 }
 // Add / remove event listeners
-onMounted(() => window.addEventListener('keyup', onHandlePaste))
-onUnmounted(() => window.removeEventListener('keyup', onHandlePaste))
+onMounted(() => window.addEventListener('paste', onHandlePaste))
+onUnmounted(() => window.removeEventListener('paste', onHandlePaste))
 
 /**
  * Toggle polling if live log is dis- / enabled

src/store/logging.spec.ts

@@ -238,15 +238,14 @@ describe('store:logging', () => {
 		})
 
 		const clipboard = '{message: "hello"}'
-		window.navigator.clipboard.readText = vi.fn(() => Promise.resolve(clipboard))
 
 		const store = useLogStore()
 		const settings = useSettingsStore()
 
 		store.hasRemainingEntries = true
 		expect(store.hasRemainingEntries).toBe(true)
 
-		await store.loadClipboard()
+		await store.loadText(clipboard)
 
 		// File parsed, so there are no remaining entries
 		expect(store.hasRemainingEntries).toBe(false)
@@ -256,37 +255,6 @@ describe('store:logging', () => {
 		expect(store.allEntries).toEqual([{ message: 'hello' }])
 	})
 
-	it('handles unsupported Clipboard API', async () => {
-		mocks.parseLogString.mockImplementationOnce(() => [{ message: 'hello' }])
-
-		// clean pinia
-		createTestingPinia({
-			fakeApp: true,
-			createSpy: vi.fn,
-			stubActions: false,
-		})
-
-		const clipboard = '{message: "hello"}'
-		window.navigator.clipboard.readText = vi.fn(() => Promise.reject(new Error()))
-		window.prompt = vi.fn(() => clipboard)
-
-		const store = useLogStore()
-		const settings = useSettingsStore()
-
-		store.hasRemainingEntries = true
-		expect(store.hasRemainingEntries).toBe(true)
-
-		await store.loadClipboard()
-
-		// File parsed, so there are no remaining entries
-		expect(store.hasRemainingEntries).toBe(false)
-		expect(window.navigator.clipboard.readText).toBeCalled()
-		expect(window.prompt).toBeCalled()
-		expect(settings.localFileName).toBe('Clipboard')
-		expect(mocks.parseLogString).toBeCalledWith(clipboard)
-		expect(store.allEntries).toEqual([{ message: 'hello' }])
-	})
-
 	it('handles empty clipboard paste', async () => {
 		// clean pinia
 		createTestingPinia({
@@ -295,16 +263,13 @@ describe('store:logging', () => {
 			stubActions: false,
 		})
 
-		window.navigator.clipboard.readText = vi.fn(() => Promise.reject(new Error()))
-		window.prompt = vi.fn(() => null)
-
 		const store = useLogStore()
 		const settings = useSettingsStore()
 
 		store.hasRemainingEntries = true
 		expect(store.hasRemainingEntries).toBe(true)
 
-		await store.loadClipboard()
+		await store.loadText('')
 
 		// File parsed, so there are no remaining entries
 		expect(store.hasRemainingEntries).toBe(true)
@@ -322,7 +287,6 @@ describe('store:logging', () => {
 			stubActions: false,
 		})
 
-		window.navigator.clipboard.readText = vi.fn(() => Promise.resolve('invalid'))
 		// throw an error
 		mocks.parseLogString.mockImplementationOnce(() => { throw new Error() })
 
@@ -332,7 +296,7 @@ describe('store:logging', () => {
 		store.hasRemainingEntries = true
 		expect(store.hasRemainingEntries).toBe(true)
 
-		await store.loadClipboard()
+		await store.loadText('invalid')
 
 		// File parsed, so there are no remaining entries
 		expect(store.hasRemainingEntries).toBe(true)

src/store/logging.ts

@@ -102,17 +102,9 @@ export const useLogStore = defineStore('logreader-logs', () => {
 	}
 
 	/**
-	 * Load entries from clipboard
+	 * Load entries from string
 	 */
-	async function loadClipboard() {
-		// try if the browser supports the async clipboard api, e.g. firefox does not.
-		let text = ''
-		try {
-			text = await window.navigator.clipboard.readText()
-		} catch (e) {
-			text = window.prompt(t('logreader', 'Your browser does not support pasting entries directly. Please paste the log entry manually.')) ?? ''
-		}
-
+	async function loadText(text: string) {
 		// Skip if aborted
 		if (text === '') {
 			return
@@ -199,5 +191,5 @@ export const useLogStore = defineStore('logreader-logs', () => {
 		}
 	}
 
-	return { allEntries, entries, hasRemainingEntries, query, loadMore, loadClipboard, loadFile, startPolling, stopPolling, searchLogs }
+	return { allEntries, entries, hasRemainingEntries, query, loadMore, loadText, loadFile, startPolling, stopPolling, searchLogs }
 })