Social Annotations in the Atmosphere
fix: annotation form persists when selection is lost
The annotation box in the sidebar now stays visible when the user clicks
elsewhere on the page (losing text selection). This prevents the form from
disappearing unexpectedly when clicking buttons or composing notes.
Behavior:
- New valid selection: form updates with new selection
- Selection cleared (null): form keeps old selection (sticky)
- Clear button clicked: form explicitly closes
- Save successful/failed: existing behavior preserved
Added unit tests for selection persistence and E2E tests for annotation
form behavior.
+489
-2
+217
tests/e2e/proxy/annotation-form.spec.ts
+217
tests/e2e/proxy/annotation-form.spec.ts
···
1
+
/**
2
+
* Proxy client annotation form persistence tests
3
+
*
4
+
* Tests that the annotation form in the sidebar persists when:
5
+
* - User clicks outside the form (losing text selection)
6
+
* - User clicks buttons within the form
7
+
*
8
+
* Prerequisites:
9
+
* - Run with: pnpm test:e2e:proxy
10
+
*/
11
+
12
+
import { test, expect } from '@playwright/test';
13
+
import {
14
+
PROXY_BASE_URL,
15
+
navigateToProxiedUrl,
16
+
getSidebar,
17
+
waitForShellReady,
18
+
getProxiedContent,
19
+
} from '../../helpers/proxy';
20
+
21
+
test.describe('Annotation Form Persistence', () => {
22
+
test.skip(
23
+
!process.env.RUN_PROXY_TESTS,
24
+
'Set RUN_PROXY_TESTS=1 to run proxy client tests'
25
+
);
26
+
27
+
test.beforeEach(async ({ page }) => {
28
+
// Navigate to a simple page for testing
29
+
await navigateToProxiedUrl(page, 'https://example.com/');
30
+
await waitForShellReady(page);
31
+
});
32
+
33
+
test('annotation form appears when text is selected', async ({ page }) => {
34
+
const content = getProxiedContent(page);
35
+
const sidebar = getSidebar(page);
36
+
37
+
// Select some text in the proxied content
38
+
await content.locator('h1').first().selectText();
39
+
40
+
// Wait a bit for the selection change to propagate (150ms debounce + messaging)
41
+
await page.waitForTimeout(500);
42
+
43
+
// Annotation form should be visible
44
+
const annotationForm = sidebar.locator('#annotation-form');
45
+
await expect(annotationForm).toBeVisible();
46
+
47
+
// Selected text should be displayed
48
+
const selectedText = sidebar.locator('#selected-text');
49
+
await expect(selectedText).toContainText('Example Domain');
50
+
});
51
+
52
+
test('annotation form persists when clicking outside (losing selection)', async ({
53
+
page,
54
+
}) => {
55
+
const content = getProxiedContent(page);
56
+
const sidebar = getSidebar(page);
57
+
58
+
// Select some text in the proxied content
59
+
await content.locator('h1').first().selectText();
60
+
await page.waitForTimeout(500);
61
+
62
+
// Verify form is visible
63
+
const annotationForm = sidebar.locator('#annotation-form');
64
+
await expect(annotationForm).toBeVisible();
65
+
66
+
// Click somewhere else on the page to lose selection
67
+
await content.locator('body').click({ position: { x: 10, y: 10 } });
68
+
69
+
// Wait for selection change to propagate
70
+
await page.waitForTimeout(500);
71
+
72
+
// Form should STILL be visible (sticky behavior)
73
+
await expect(annotationForm).toBeVisible();
74
+
75
+
// Selected text should still show the original selection
76
+
const selectedText = sidebar.locator('#selected-text');
77
+
await expect(selectedText).toContainText('Example Domain');
78
+
});
79
+
80
+
test('annotation form updates when making a new selection', async ({
81
+
page,
82
+
}) => {
83
+
const content = getProxiedContent(page);
84
+
const sidebar = getSidebar(page);
85
+
86
+
// Select the h1 text first
87
+
await content.locator('h1').first().selectText();
88
+
await page.waitForTimeout(500);
89
+
90
+
const annotationForm = sidebar.locator('#annotation-form');
91
+
const selectedText = sidebar.locator('#selected-text');
92
+
93
+
// Verify first selection
94
+
await expect(annotationForm).toBeVisible();
95
+
await expect(selectedText).toContainText('Example Domain');
96
+
97
+
// Now select different text (the paragraph)
98
+
await content.locator('p').first().selectText();
99
+
await page.waitForTimeout(500);
100
+
101
+
// Form should still be visible
102
+
await expect(annotationForm).toBeVisible();
103
+
104
+
// But now showing the new selection (paragraph text contains "More information")
105
+
await expect(selectedText).toContainText('More information');
106
+
});
107
+
108
+
test('clear button closes the annotation form', async ({ page }) => {
109
+
const content = getProxiedContent(page);
110
+
const sidebar = getSidebar(page);
111
+
112
+
// Select some text
113
+
await content.locator('h1').first().selectText();
114
+
await page.waitForTimeout(500);
115
+
116
+
// Verify form is visible
117
+
const annotationForm = sidebar.locator('#annotation-form');
118
+
await expect(annotationForm).toBeVisible();
119
+
120
+
// Click the clear button
121
+
const clearBtn = sidebar.locator('#clear-selection-btn');
122
+
await clearBtn.click();
123
+
124
+
// Form should be hidden
125
+
await expect(annotationForm).not.toBeVisible();
126
+
127
+
// Selected text should be empty
128
+
const selectedText = sidebar.locator('#selected-text');
129
+
await expect(selectedText).toBeEmpty();
130
+
});
131
+
132
+
test('textarea content is preserved when selection is lost', async ({
133
+
page,
134
+
}) => {
135
+
const content = getProxiedContent(page);
136
+
const sidebar = getSidebar(page);
137
+
138
+
// Select some text
139
+
await content.locator('h1').first().selectText();
140
+
await page.waitForTimeout(500);
141
+
142
+
// Type in the textarea
143
+
const textarea = sidebar.locator('#annotation-text');
144
+
await textarea.fill('My annotation note');
145
+
146
+
// Click elsewhere to lose selection
147
+
await content.locator('body').click({ position: { x: 10, y: 10 } });
148
+
await page.waitForTimeout(500);
149
+
150
+
// Textarea content should be preserved
151
+
await expect(textarea).toHaveValue('My annotation note');
152
+
});
153
+
154
+
test('textarea content is cleared when clear button is clicked', async ({
155
+
page,
156
+
}) => {
157
+
const content = getProxiedContent(page);
158
+
const sidebar = getSidebar(page);
159
+
160
+
// Select some text
161
+
await content.locator('h1').first().selectText();
162
+
await page.waitForTimeout(500);
163
+
164
+
// Type in the textarea
165
+
const textarea = sidebar.locator('#annotation-text');
166
+
await textarea.fill('My annotation note');
167
+
168
+
// Click clear button
169
+
const clearBtn = sidebar.locator('#clear-selection-btn');
170
+
await clearBtn.click();
171
+
172
+
// Textarea should be cleared
173
+
await expect(textarea).toHaveValue('');
174
+
});
175
+
176
+
test('annotation form persists when clicking the save button', async ({
177
+
page,
178
+
}) => {
179
+
const content = getProxiedContent(page);
180
+
const sidebar = getSidebar(page);
181
+
182
+
// Select some text
183
+
await content.locator('h1').first().selectText();
184
+
await page.waitForTimeout(500);
185
+
186
+
// Verify form is visible
187
+
const annotationForm = sidebar.locator('#annotation-form');
188
+
await expect(annotationForm).toBeVisible();
189
+
190
+
// Type a note
191
+
const textarea = sidebar.locator('#annotation-text');
192
+
await textarea.fill('Test annotation');
193
+
194
+
// Click the save button (this will trigger login prompt since we're not logged in,
195
+
// but the form should still persist)
196
+
const saveBtn = sidebar.locator('#save-btn');
197
+
await saveBtn.click();
198
+
199
+
// Form should still be visible (either showing login or the form itself)
200
+
// The key is that it didn't disappear due to losing selection from the button click
201
+
202
+
// Wait a moment for any state changes
203
+
await page.waitForTimeout(300);
204
+
205
+
// Either the login form is shown OR the annotation form is still there
206
+
// In both cases, clicking save shouldn't have made everything disappear
207
+
const loginTrigger = sidebar.locator('#login-trigger-btn');
208
+
const loginForm = sidebar.locator('#handle-input');
209
+
210
+
const hasLoginUI = await loginTrigger.isVisible().catch(() => false) ||
211
+
await loginForm.isVisible().catch(() => false);
212
+
const hasAnnotationForm = await annotationForm.isVisible().catch(() => false);
213
+
214
+
// At least one of these should be true
215
+
expect(hasLoginUI || hasAnnotationForm).toBe(true);
216
+
});
217
+
});