Add optional form attribute

packages/supersearch/e2e/supersearch.spec.ts

@@ -5,7 +5,13 @@ test.beforeEach(async ({ page }) => {
 });
 
 test('submits closest form on enter key press', async ({ page }) => {
-  await page.locator('form').getByRole('textbox').locator('div').fill('hello world')
+  await page.locator('[data-test-id="test1"]').getByRole('textbox').locator('div').fill('hello world')
   await page.keyboard.press('Enter');
-  await expect(page).toHaveURL('/find?q=hello+world')
+  await expect(page).toHaveURL('/test1?q=hello+world')
+});
+
+test('submits form identified by form attribute on enter key press', async ({ page }) => {
+  await page.locator('[data-test-id="test2"]').getByRole('textbox').locator('div').fill('hello world')
+  await page.keyboard.press('Enter');
+  await expect(page).toHaveURL('/test2?q=hello+world')
 });

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

@@ -7,19 +7,20 @@
 
 	interface Props {
 		value?: string;
+		form?: string;
 		language?: LRLanguage;
 		placeholder?: string;
 	}
 
-	let { value = $bindable(''), language, placeholder = '' }: Props = $props();
+	let { value = $bindable(''), form, language, placeholder = '' }: Props = $props();
 
 	let editorView: EditorView | undefined = $state();
 
 	let placeholderCompartment = new Compartment();
 	let prevPlaceholder = placeholder;
 
 	const extensions = [
-		submitFormOnEnterKey,
+		submitFormOnEnterKey(form),
 		...(language ? [language] : []),
 		placeholderCompartment.of(placeholderExtension(placeholder))
 	];

packages/supersearch/src/lib/extensions/submitFormOnEnterKey.ts

@@ -3,30 +3,36 @@ import { EditorView, keymap } from '@codemirror/view';
 
 /**
  * CodeMirror extension that submits the closest (inclusive ancestor) form element on enter keypresses
+ * 
+ * @param {string} form Optional id of the `<form>` element with which the input should be associated with (equivalent with
+ * the [form attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form) on HTML Input elements.
+ * If omitted, the closest (inclusive ancestor) form element will be submitted.
  */
 
-function submitForm(editorView: EditorView) {
-	const closestForm = editorView.dom?.closest('form');
+const submitFormOnEnterKey = (form?: string) => {
+	const submitForm = (editorView: EditorView) => {
+		const formElement = form ? document.getElementById(form) : editorView.dom?.closest('form');
 
-	if (closestForm) {
-		closestForm.submit();
-		return true; // return true to prevent further commands to be tried
-	}
+		if (formElement && formElement instanceof HTMLFormElement) {
+			formElement.submit();
+			return true; // return true to prevent further commands to be tried
+		}
 
-	return false;
-}
+		return false;
+	};
 
-const submitFormOnEnterKey = Prec.highest(
-	keymap.of([
-		{
-			key: 'Enter',
-			run: submitForm
-		},
-		{
-			key: 'Shift-Enter',
-			run: submitForm
-		}
-	])
-);
+	return Prec.highest(
+		keymap.of([
+			{
+				key: 'Enter',
+				run: submitForm
+			},
+			{
+				key: 'Shift-Enter',
+				run: submitForm
+			}
+		])
+	);
+};
 
 export default submitFormOnEnterKey;

packages/supersearch/src/routes/+page.svelte

@@ -5,8 +5,19 @@
 	let placeholder = $state('Search');
 </script>
 
-<form action="find">
-	<SuperSearch bind:value {placeholder} />
+<form action="test1">
+	<fieldset data-test-id="test1">
+		<legend>Supersearch inside <code>&lt;form&gt;</code> element</legend>
+		<SuperSearch bind:value {placeholder} />
+		<textarea {value} hidden readonly name="q" maxlength={2048}></textarea>
+	</fieldset>
+	<fieldset data-test-id="test2">
+		<legend>Supersearch using <code>form</code> attribute</legend>
+		<SuperSearch bind:value {placeholder} form="form-outside" />
+	</fieldset>
+	<label>Placeholder:<input type="text" bind:value={placeholder} /></label>
+</form>
+
+<form action="test2" id="form-outside">
 	<textarea {value} hidden readonly name="q" maxlength={2048}></textarea>
 </form>
-<label>Placeholder:<input type="text" bind:value={placeholder} /></label>

packages/supersearch/src/routes/test1/+page.svelte

@@ -0,0 +1 @@
+<h1>A test route</h1>