ux: in-app confirm for asset/sitesmith delete + safe copy
- AssetsPanel: asset delete now requires an in-app two-step confirm (tile-button turns into "Delete?" + cancel, auto-resets after 4s or on click-elsewhere) instead of deleting with no confirmation at all. - AssetsPanel: copyUrl uses a new copyToClipboard() helper that tries the async Clipboard API and falls back to a hidden-textarea execCommand copy in non-secure contexts, surfacing a visible "Copy failed" state instead of silently doing nothing. - SitesmithModal: replaced window.confirm(...) for "Clear chat" with the same in-app two-step confirm pattern -- no native dialogs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { copyToClipboard } from './clipboard';
|
||||
|
||||
describe('copyToClipboard', () => {
|
||||
const originalClipboard = (navigator as any).clipboard;
|
||||
const originalIsSecureContext = window.isSecureContext;
|
||||
const originalExecCommand = (document as any).execCommand;
|
||||
|
||||
afterEach(() => {
|
||||
Object.defineProperty(navigator, 'clipboard', { value: originalClipboard, configurable: true });
|
||||
Object.defineProperty(window, 'isSecureContext', { value: originalIsSecureContext, configurable: true });
|
||||
(document as any).execCommand = originalExecCommand;
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
test('uses navigator.clipboard.writeText when available in a secure context', async () => {
|
||||
const writeText = vi.fn().mockResolvedValue(undefined);
|
||||
Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
|
||||
Object.defineProperty(window, 'isSecureContext', { value: true, configurable: true });
|
||||
|
||||
const ok = await copyToClipboard('hello');
|
||||
expect(ok).toBe(true);
|
||||
expect(writeText).toHaveBeenCalledWith('hello');
|
||||
});
|
||||
|
||||
test('falls back to execCommand when clipboard API is unavailable', async () => {
|
||||
Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
|
||||
Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
|
||||
(document as any).execCommand = vi.fn().mockReturnValue(true);
|
||||
|
||||
const ok = await copyToClipboard('hello');
|
||||
expect(ok).toBe(true);
|
||||
expect((document as any).execCommand).toHaveBeenCalledWith('copy');
|
||||
});
|
||||
|
||||
test('falls back to execCommand when clipboard.writeText rejects', async () => {
|
||||
const writeText = vi.fn().mockRejectedValue(new Error('denied'));
|
||||
Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
|
||||
Object.defineProperty(window, 'isSecureContext', { value: true, configurable: true });
|
||||
(document as any).execCommand = vi.fn().mockReturnValue(true);
|
||||
|
||||
const ok = await copyToClipboard('hello');
|
||||
expect(ok).toBe(true);
|
||||
expect((document as any).execCommand).toHaveBeenCalledWith('copy');
|
||||
});
|
||||
|
||||
test('returns false when both clipboard API and execCommand fail', async () => {
|
||||
Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
|
||||
Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
|
||||
(document as any).execCommand = vi.fn().mockReturnValue(false);
|
||||
|
||||
const ok = await copyToClipboard('hello');
|
||||
expect(ok).toBe(false);
|
||||
});
|
||||
|
||||
test('returns false and does not throw when execCommand itself throws', async () => {
|
||||
Object.defineProperty(navigator, 'clipboard', { value: undefined, configurable: true });
|
||||
Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
|
||||
(document as any).execCommand = vi.fn().mockImplementation(() => { throw new Error('nope'); });
|
||||
|
||||
const ok = await copyToClipboard('hello');
|
||||
expect(ok).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* Copies `text` to the clipboard, preferring the async Clipboard API and
|
||||
* falling back to a hidden-textarea + `document.execCommand('copy')` when
|
||||
* the Clipboard API is unavailable or unusable (e.g. a non-secure-context
|
||||
* local/dev origin, or a browser/permission that rejects the write).
|
||||
* Never throws -- resolves `false` on failure so callers can show a
|
||||
* visible error state instead of silently doing nothing.
|
||||
*/
|
||||
export async function copyToClipboard(text: string): Promise<boolean> {
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// Fall through to the legacy fallback below.
|
||||
}
|
||||
|
||||
try {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.setAttribute('readonly', '');
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.top = '-9999px';
|
||||
textarea.style.left = '-9999px';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, textarea.value.length);
|
||||
const ok = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
return ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user