Merge pull request #9838 from gitbutlerapp/clipboard-backend-abstraction

estib-vega · web-flow · commit 2b1911ab4f1f · 2025-08-13T18:51:11.000+02:00
clipboard-backend-abstraction
diff --git a/apps/desktop/src/components/BranchHeaderContextMenu.svelte b/apps/desktop/src/components/BranchHeaderContextMenu.svelte
@@ -20,7 +20,7 @@
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { PROMPT_SERVICE } from '$lib/ai/promptService';
 	import { AI_SERVICE } from '$lib/ai/service';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
@@ -60,6 +60,7 @@
 	const forge = inject(DEFAULT_FORGE_FACTORY);
 	const promptService = inject(PROMPT_SERVICE);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const [insertBlankCommitInBranch, commitInsertion] = stackService.insertBlankCommit;
 	const [updateBranchNameMutation] = stackService.updateBranchName;
 	const [createRef, refCreation] = stackService.createReference;
@@ -190,7 +191,7 @@
 				label="Copy branch name"
 				testId={TestId.BranchHeaderContextMenu_CopyBranchName}
 				onclick={() => {
-					writeClipboard(branch?.name);
+					clipboardService.write(branch?.name);
 					close();
 				}}
 			/>
@@ -308,7 +309,7 @@
 							label="Copy PR link"
 							testId={TestId.BranchHeaderContextMenu_CopyPRLink}
 							onclick={() => {
-								writeClipboard(pr.htmlUrl);
+								clipboardService.write(pr.htmlUrl);
 								close();
 							}}
 						/>
diff --git a/apps/desktop/src/components/CommitContextMenu.svelte b/apps/desktop/src/components/CommitContextMenu.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { rewrapCommitMessage } from '$lib/config/uiFeatureFlags';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { URL_SERVICE } from '$lib/utils/url';
@@ -68,6 +68,7 @@
 
 	const urlService = inject(URL_SERVICE);
 	const stackService = inject(STACK_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const [insertBlankCommitInBranch, commitInsertion] = stackService.insertBlankCommit;
 	const [createRef, refCreation] = stackService.createReference;
 
@@ -172,22 +173,22 @@
 					<ContextMenuItem
 						label="Copy commit link"
 						onclick={() => {
-							writeClipboard(commitUrl);
+							clipboardService.write(commitUrl);
 							close();
 						}}
 					/>
 				{/if}
 				<ContextMenuItem
 					label="Copy commit hash"
 					onclick={() => {
-						writeClipboard(commitId);
+						clipboardService.write(commitId);
 						close();
 					}}
 				/>
 				<ContextMenuItem
 					label="Copy commit message"
 					onclick={() => {
-						writeClipboard(commitMessage);
+						clipboardService.write(commitMessage);
 						close();
 					}}
 				/>
diff --git a/apps/desktop/src/components/CommitDetails.svelte b/apps/desktop/src/components/CommitDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { type Commit, type UpstreamCommit } from '$lib/branches/v3';
 	import { rewrapCommitMessage } from '$lib/config/uiFeatureFlags';
 	import { SETTINGS } from '$lib/settings/userSettings';
@@ -21,6 +21,7 @@
 
 	const userService = inject(USER_SERVICE);
 	const userSettings = inject(SETTINGS);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const zoom = $derived($userSettings.zoom);
 
 	const user = $derived(userService.user);
@@ -69,7 +70,7 @@
 				type="button"
 				class="copy-sha underline-dotted"
 				onclick={() => {
-					writeClipboard(commit.id, {
+					clipboardService.write(commit.id, {
 						message: 'Commit SHA copied'
 					});
 				}}
diff --git a/apps/desktop/src/components/FileContextMenu.svelte b/apps/desktop/src/components/FileContextMenu.svelte
@@ -4,7 +4,7 @@
 	import { ACTION_SERVICE } from '$lib/actions/actionService.svelte';
 	import { AI_SERVICE } from '$lib/ai/service';
 	import { BACKEND } from '$lib/backend';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { changesToDiffSpec } from '$lib/commits/utils';
 	import { projectAiExperimentalFeaturesEnabled, projectAiGenEnabled } from '$lib/config/config';
 	import { FILE_SERVICE } from '$lib/files/fileService';
@@ -64,6 +64,7 @@
 	const actionService = inject(ACTION_SERVICE);
 	const fileService = inject(FILE_SERVICE);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const backend = inject(BACKEND);
 	const [autoCommit, autoCommitting] = actionService.autoCommit;
 	const [branchChanges, branchingChanges] = actionService.branchChanges;
@@ -399,7 +400,7 @@
 							const projectPath = project?.path;
 							if (projectPath) {
 								const absPath = await backend.joinPath(projectPath, item.changes[0]!.path);
-								await writeClipboard(absPath, {
+								await clipboardService.write(absPath, {
 									errorMessage: 'Failed to copy absolute path'
 								});
 							}
@@ -409,7 +410,7 @@
 					<ContextMenuItem
 						label="Copy Relative Path"
 						onclick={async () => {
-							await writeClipboard(item.changes[0]!.path, {
+							await clipboardService.write(item.changes[0]!.path, {
 								errorMessage: 'Failed to copy relative path'
 							});
 							contextMenu.close();
diff --git a/apps/desktop/src/components/GithubIntegration.svelte b/apps/desktop/src/components/GithubIntegration.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { GITHUB_USER_SERVICE } from '$lib/forge/github/githubUserService.svelte';
 	import { USER_SERVICE } from '$lib/user/userService';
 	import { URL_SERVICE } from '$lib/utils/url';
@@ -19,6 +19,7 @@
 	const userService = inject(USER_SERVICE);
 	const user = userService.user;
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 
 	// step flags
 	let codeCopied = $state(false);
@@ -139,7 +140,7 @@
 						icon="copy"
 						disabled={codeCopied}
 						onclick={() => {
-							writeClipboard(userCode);
+							clipboardService.write(userCode);
 							codeCopied = true;
 						}}
 					>
diff --git a/apps/desktop/src/components/IntegrateUpstreamModal.svelte b/apps/desktop/src/components/IntegrateUpstreamModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import {
@@ -51,6 +51,7 @@
 	const baseBranchResponse = $derived(baseBranchService.baseBranch(projectId));
 	const base = $derived(baseBranchResponse.current.data);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 
 	let modal = $state<Modal>();
 	let integratingUpstream = $state<OperationState>('inert');
@@ -324,7 +325,7 @@
 								author={commit.author.name}
 								url={commitUrl}
 								onOpen={(url) => urlService.openExternalUrl(url)}
-								onCopy={() => writeClipboard(commit.id)}
+								onCopy={() => clipboardService.write(commit.id)}
 							/>
 						{/each}
 					</ScrollableContainer>
diff --git a/apps/desktop/src/components/PullRequestCard.svelte b/apps/desktop/src/components/PullRequestCard.svelte
@@ -2,7 +2,7 @@
 	import PrStatusBadge from '$components/PrStatusBadge.svelte';
 	import PullRequestPolling from '$components/PullRequestPolling.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { URL_SERVICE } from '$lib/utils/url';
 	import { inject } from '@gitbutler/shared/context';
@@ -58,6 +58,7 @@
 	const prService = $derived(forge.current.prService);
 	const checksService = $derived(forge.current.checks);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 
 	const prResult = $derived(prService?.get(prNumber, { forceRefetch: true }));
 	const pr = $derived(prResult?.current.data);
@@ -125,7 +126,7 @@
 				<ContextMenuItem
 					label="Copy link"
 					onclick={() => {
-						writeClipboard(pr.htmlUrl);
+						clipboardService.write(pr.htmlUrl);
 						contextMenuEl?.close();
 					}}
 				/>
@@ -152,7 +153,7 @@
 					<ContextMenuItem
 						label="Copy checks"
 						onclick={() => {
-							writeClipboard(`${pr.htmlUrl}/checks`);
+							clipboardService.write(`${pr.htmlUrl}/checks`);
 							contextMenuEl?.close();
 						}}
 					/>
@@ -178,7 +179,7 @@
 					icon="copy-small"
 					tooltip="Copy {abbr} link"
 					onclick={() => {
-						writeClipboard(pr.htmlUrl);
+						clipboardService.write(pr.htmlUrl);
 					}}
 				/>
 				<Button
diff --git a/apps/desktop/src/components/PushButton.svelte b/apps/desktop/src/components/PushButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import {
@@ -49,6 +49,8 @@
 	const uiState = inject(UI_STATE);
 	const forge = inject(DEFAULT_FORGE_FACTORY);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
+
 	const branchDetails = $derived(stackService.branchDetails(projectId, stackId, branchName));
 	const projectResult = $derived(projectsService.getProject(projectId));
 	const [pushStack, pushResult] = stackService.pushStack;
@@ -201,7 +203,7 @@
 								author={commit.author.name}
 								url={commitUrl}
 								onOpen={(url) => urlService.openExternalUrl(url)}
-								onCopy={() => writeClipboard(commit.id)}
+								onCopy={() => clipboardService.write(commit.id)}
 							/>
 						{/each}
 					</ScrollableContainer>
diff --git a/apps/desktop/src/lib/backend/backend.ts b/apps/desktop/src/lib/backend/backend.ts
@@ -104,4 +104,6 @@ export interface IBackend {
 	filePicker<T extends OpenDialogOptions>(options?: T): Promise<OpenDialogReturn<T>>;
 	homeDirectory(): Promise<string>;
 	getAppInfo: () => Promise<AppInfo>;
+	writeTextToClipboard: (text: string) => Promise<void>;
+	readTextFromClipboard: () => Promise<string>;
 }
diff --git a/apps/desktop/src/lib/backend/clipboard.ts b/apps/desktop/src/lib/backend/clipboard.ts
@@ -1,32 +1,39 @@
+import { InjectionToken } from '@gitbutler/shared/context';
 import { chipToasts } from '@gitbutler/ui';
-import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager';
+import type { IBackend } from '$lib/backend/backend';
 
-/**
- * Copy the provided text into the the system clipboard. Upon completion, a toast will be displayed which contains
- * information about the success of this operation.
- *
- * @param text text to be copied into the system clipboard.
- * @param errorMessage optional custom error message which will be displayed if the operation failes. If this is
- *                     not provided, a default generic message will be used.
- */
-export async function writeClipboard(
-	text: string,
-	opt: {
-		errorMessage?: string;
-		message?: string;
-	} = {}
-) {
-	const { errorMessage, message } = opt;
-	await writeText(text)
-		.then(() => {
-			chipToasts.success(message || 'Copied to clipboard');
-		})
-		.catch((err) => {
-			chipToasts.error(errorMessage || 'Failed to copy');
-			console.error(errorMessage, err);
-		});
-}
+export const CLIPBOARD_SERVICE = new InjectionToken<ClipboardService>('ClipboardService');
+export default class ClipboardService {
+	constructor(private backend: IBackend) {}
+
+	/**
+	 * Copy the provided text into the the system clipboard. Upon completion, a toast will be displayed which contains
+	 * information about the success of this operation.
+	 *
+	 * @param text text to be copied into the system clipboard.
+	 * @param errorMessage optional custom error message which will be displayed if the operation failes. If this is
+	 *                     not provided, a default generic message will be used.
+	 */
+	async write(
+		text: string,
+		opt: {
+			errorMessage?: string;
+			message?: string;
+		} = {}
+	) {
+		const { errorMessage, message } = opt;
+		await this.backend
+			.writeTextToClipboard(text)
+			.then(() => {
+				chipToasts.success(message || 'Copied to clipboard');
+			})
+			.catch((err) => {
+				chipToasts.error(errorMessage || 'Failed to copy');
+				console.error(errorMessage, err);
+			});
+	}
 
-export async function readClipboard() {
-	return await readText();
+	async read() {
+		return await this.backend.readTextFromClipboard();
+	}
 }
diff --git a/apps/desktop/src/lib/backend/tauri.ts b/apps/desktop/src/lib/backend/tauri.ts
@@ -5,6 +5,10 @@ import { listen as listenTauri } from '@tauri-apps/api/event';
 import { documentDir as documentDirTauri } from '@tauri-apps/api/path';
 import { join as joinPathTauri } from '@tauri-apps/api/path';
 import { getCurrentWindow, Window } from '@tauri-apps/api/window';
+import {
+	writeText as tauriWriteText,
+	readText as tauriReadText
+} from '@tauri-apps/plugin-clipboard-manager';
 import { open as filePickerTauri, type OpenDialogOptions } from '@tauri-apps/plugin-dialog';
 import { readFile as tauriReadFile } from '@tauri-apps/plugin-fs';
 import { relaunch as relaunchTauri } from '@tauri-apps/plugin-process';
@@ -37,6 +41,8 @@ export default class Tauri implements IBackend {
 	documentDir = documentDirTauri;
 	joinPath = joinPathTauri;
 	getAppInfo = tauriGetAppInfo;
+	readTextFromClipboard = tauriReadText;
+	writeTextToClipboard = tauriWriteText;
 	async filePicker<T extends OpenDialogOptions>() {
 		return await filePickerTauri<T>();
 	}
diff --git a/apps/desktop/src/lib/backend/web.ts b/apps/desktop/src/lib/backend/web.ts
@@ -17,11 +17,21 @@ export default class Web implements IBackend {
 	joinPath = webJoinPath;
 	homeDirectory = webHomeDirectory;
 	getAppInfo = webGetAppInfo;
+	readTextFromClipboard = webReadTextFromClipboard;
+	writeTextToClipboard = webWriteTextToClipboard;
 	async filePicker<T extends OpenDialogOptions>(options?: T): Promise<OpenDialogReturn<T>> {
 		return await webFilePicker<T>(options);
 	}
 }
 
+async function webReadTextFromClipboard(): Promise<string> {
+	return await window.navigator.clipboard.readText();
+}
+
+async function webWriteTextToClipboard(text: string): Promise<void> {
+	await window.navigator.clipboard.writeText(text);
+}
+
 async function webGetAppInfo(): Promise<AppInfo> {
 	return await Promise.resolve({
 		name: 'gitbutler-web',
diff --git a/apps/desktop/src/lib/user/userService.ts b/apps/desktop/src/lib/user/userService.ts
@@ -1,5 +1,4 @@
 import { resetSentry, setSentryUser } from '$lib/analytics/sentry';
-import { writeClipboard } from '$lib/backend/clipboard';
 import { showError } from '$lib/notifications/toasts';
 import { User } from '$lib/user/user';
 import { sleep } from '$lib/utils/sleep';
@@ -126,7 +125,7 @@ export class UserService {
 	async loginAndCopyLink(aborted: Readable<boolean> = readable(false)): Promise<User | undefined> {
 		return await this.loginCommon((url) => {
 			setTimeout(() => {
-				writeClipboard(url);
+				this.backend.writeTextToClipboard(url);
 			}, 0);
 		}, aborted);
 	}
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte

Original file line number	Diff line number	Diff line change
`@@ -104,4 +104,6 @@ export interface IBackend {`
`104`	`104`	`filePicker<T extends OpenDialogOptions>(options?: T): Promise<OpenDialogReturn<T>>;`
`105`	`105`	`homeDirectory(): Promise<string>;`
`106`	`106`	`getAppInfo: () => Promise<AppInfo>;`
	`107`	`+ writeTextToClipboard: (text: string) => Promise<void>;`
	`108`	`+ readTextFromClipboard: () => Promise<string>;`
`107`	`109`	`}`