Allow word-selection by double-clicking on collapsed editor

packages/supersearch/e2e/supersearch.spec.ts

@@ -48,7 +48,7 @@ test('syncs collapsed and expanded editor views', async ({ page }) => {
 		.getByRole('dialog')
 		.getByRole('textbox')
 		.locator('div')
-		.fill('Hello world!');
+		.fill('Hello world');
 	await page
 		.locator('[data-test-id="test1"]')
 		.getByRole('dialog')
@@ -62,9 +62,14 @@ test('syncs collapsed and expanded editor views', async ({ page }) => {
 	await expect(
 		await page.locator('[data-test-id="test1"]').getByRole('textbox').locator('div'),
 		'contents should be synced'
-	).toHaveText('Hello world!');
+	).toHaveText('Hello world');
 	expect(
 		await page.evaluate(() => window.getSelection()?.toString()),
 		'text selection should be synced'
-	).toBe('Hello world!');
+	).toBe('Hello world');
+	await page.locator('[data-test-id="test1"]').getByRole('textbox').locator('div').dblclick();
+	expect(
+		await page.evaluate(() => window.getSelection()?.toString()),
+		'collapsed editor view allows double-clicking to select words'
+	).toBe('world');
 });

packages/supersearch/src/lib/components/SuperSearch.svelte

@@ -30,6 +30,12 @@
 		placeholderCompartment.of(placeholderExtension(placeholder))
 	];
 
+	function handleClickCollapsedEditorView() {
+		setTimeout(() => {
+			if (!dialog?.open) showExpandedSearch(); // use timeout to allow word-selection by double-clicking
+		}, 200);
+	}
+
 	function handleChangeCodeMirror(event: ChangeCodeMirrorEvent) {
 		if (!dialog?.open) {
 			showExpandedSearch();
@@ -75,9 +81,7 @@
 <CodeMirror
 	{value}
 	{extensions}
-	onclick={() => {
-		if (!dialog?.open) showExpandedSearch(); // we should maybe wait for potential double-clicks to allow the user to select whole words by double-clicking...
-	}}
+	onclick={handleClickCollapsedEditorView}
 	onchange={handleChangeCodeMirror}
 	bind:editorView={collapsedEditorView}
 	syncedEditorView={expandedEditorView}