Will now scroll to focused lint

Automattic · Jan 15, 2024 · 6a00358 · 6a00358
1 parent 2579476
commit 6a00358
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 40 deletions.
diff --git a/web/src/lib/Editor.svelte b/web/src/lib/Editor.svelte
@@ -9,16 +9,22 @@
 	let content = alice;
 
 	let lints: Lint[] = [];
+	let lintCards: HTMLDivElement[] = [];
 	let focused: number | undefined;
 	let editor: HTMLTextAreaElement | null;
 
 	$: lintText(content).then((newLints) => (lints = newLints));
 	$: boxHeight = calcHeight(content);
+	$: if (focused != null && lintCards[focused])
+		lintCards[focused].scrollIntoView({ behavior: 'smooth' });
 
 	$: if (editor != null && focused != null) {
-		let p = lints[focused].span.end;
-		editor.selectionStart = p;
-		editor.selectionEnd = p;
+		let lint = lints[focused % lints.length];
+		if (lint != null) {
+			let p = lint.span.end;
+			editor.selectionStart = p;
+			editor.selectionEnd = p;
+		}
 	}
 
 	function calcHeight(boxContent: string): number {
@@ -46,45 +52,51 @@
 			<Underlines {content} bind:focusLintIndex={focused} />
 		</div>
 	</Card>
-	<Card class="flex flex-col flex-none basis-[400px] overflow-auto h-full">
+	<Card class="flex-none basis-[400px] h-full p-0">
 		<h2 class="text-2xl font-bold m-1">Suggestions</h2>
-		{#each lints as lint, i}
-			<Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}>
-				<div class="pl-2 border-l-[3px] border-l-primary-500">
-					<div class="flex flex-row">
-						<h3 class="font-bold">
-							{lint.lint_kind} - “<span class="italic">
-								{spanContent(lint.span, content)}
-							</span> ”
-						</h3>
-					</div>
-					<div
-						class="transition-all overflow-hidden flex flex-col justify-evenly"
-						style={`height: ${
-							focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px'
-						}`}
-					>
-						<p style="height: 50px">{lint.message}</p>
-						{#each lint.suggestions as suggestion}
-							<div class="w-full p-[4px]">
-								<Button
-									color="primary"
-									class="w-full"
-									style="height: 40px; margin: 5px 0px;"
-									on:click={() =>
-										applySuggestion(content, suggestion, lint.span).then(
-											(edited) => (content = edited)
-										)}
-								>
-									Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
-										(p, c) => p + c
-									)}"
-								</Button>
-							</div>
-						{/each}
+		<div class="flex flex-col overflow-y-scroll overflow-x-hidden m-0 p-0">
+			{#each lints as lint, i}
+				<div
+					class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow m-1 hover:translate-x-1 transition-all"
+					on:click={() => (focused = i)}
+					bind:this={lintCards[i]}
+				>
+					<div class="pl-2 border-l-[3px] border-l-primary-500">
+						<div class="flex flex-row">
+							<h3 class="font-bold">
+								{lint.lint_kind} - “<span class="italic">
+									{spanContent(lint.span, content)}
+								</span> ”
+							</h3>
+						</div>
+						<div
+							class="transition-all overflow-hidden flex flex-col justify-evenly"
+							style={`height: ${
+								focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px'
+							}`}
+						>
+							<p style="height: 50px">{lint.message}</p>
+							{#each lint.suggestions as suggestion}
+								<div class="w-full p-[4px]">
+									<Button
+										color="primary"
+										class="w-full"
+										style="height: 40px; margin: 5px 0px;"
+										on:click={() =>
+											applySuggestion(content, suggestion, lint.span).then(
+												(edited) => (content = edited)
+											)}
+									>
+										Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
+											(p, c) => p + c
+										)}"
+									</Button>
+								</div>
+							{/each}
+						</div>
 					</div>
 				</div>
-			</Card>
-		{/each}
+			{/each}
+		</div>
 	</Card>
 </div>
diff --git a/web/src/lib/Underlines.svelte b/web/src/lib/Underlines.svelte
@@ -6,13 +6,16 @@
 	export let focusLintIndex: number | undefined;
 
 	let lints: [Lint, number][] = [];
+	let lintHighlights: HTMLSpanElement[] = [];
 
 	$: lintText(content).then(
 		(newLints) =>
 			(lints = newLints
 				.map<[Lint, number]>((lint, index) => [lint, index])
 				.toSorted(([a], [b]) => a.span.start - b.span.end))
 	);
+	$: if (focusLintIndex != null && lintHighlights[focusLintIndex] != null)
+		lintHighlights[focusLintIndex].scrollIntoView({ behavior: 'smooth' });
 
 	function reOrgString(text: string): (string | undefined)[] {
 		if (text.trim().length == 0) {
@@ -90,6 +93,7 @@
 				<span class="pointer-events-auto" style={`margin-right: -4px;`}>
 					<span
 						class={`underlinespecial transition-all rounded-sm ${chunk[2] ? 'animate-after-bigbounce text-white' : ''}`}
+						bind:this={lintHighlights[chunk[3]]}
 						on:click={() => (focusLintIndex = chunk[3]) && console.log('hit')}
 						style={`--line-color: ${chunk[1]}; --line-width: ${chunk[2] ? '4px' : '2px'}; --bg-color: ${chunk[2] ? '#8DA9C4' : 'transparent'};`}
 					>