diff --git a/packages/supersearch/e2e/supersearch.spec.ts b/packages/supersearch/e2e/supersearch.spec.ts index 80d70415c..b9ec12221 100644 --- a/packages/supersearch/e2e/supersearch.spec.ts +++ b/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'); }); diff --git a/packages/supersearch/src/lib/components/SuperSearch.svelte b/packages/supersearch/src/lib/components/SuperSearch.svelte index 56ae903ab..bc8206315 100644 --- a/packages/supersearch/src/lib/components/SuperSearch.svelte +++ b/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 @@ { - 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}