fix(playground): multi-byte character issue

src/playground/CodeMirror.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from "@/playground/utils";
+import { spanInBytesToSpanInCodeUnits, useTheme } from "@/playground/utils";
 import type { Diagnostic as BiomeDiagnostic } from "@biomejs/wasm-web";
 import type { Diagnostic as CodeMirrorDiagnostic } from "@codemirror/lint";
 import { lintGutter, setDiagnostics } from "@codemirror/lint";
@@ -27,6 +27,7 @@ function getDiagnosticMessage(diagnostic: BiomeDiagnostic): string {
 
 function biomeDiagnosticsToCodeMirror(
 	biome: BiomeDiagnostic[],
+	doc: string,
 ): CodeMirrorDiagnostic[] {
 	const codeMirror: CodeMirrorDiagnostic[] = [];
 
@@ -59,9 +60,11 @@ function biomeDiagnosticsToCodeMirror(
 			}
 		}
 
+		const [from, to] = spanInBytesToSpanInCodeUnits(span, doc);
+
 		codeMirror.push({
-			from: span[0],
-			to: span[1],
+			from,
+			to,
 			severity,
 			message: getDiagnosticMessage(diag),
 		});
@@ -97,7 +100,13 @@ export default forwardRef<ReactCodeMirrorRef, Props>(function CodeMirror(
 	useEffect(() => {
 		if (editor !== undefined && diagnostics !== undefined) {
 			editor.dispatch(
-				setDiagnostics(editor.state, biomeDiagnosticsToCodeMirror(diagnostics)),
+				setDiagnostics(
+					editor.state,
+					biomeDiagnosticsToCodeMirror(
+						diagnostics,
+						editor.state.doc.toString(),
+					),
+				),
 			);
 		}
 	}, [editor, diagnostics]);

src/playground/Playground.tsx

@@ -195,6 +195,7 @@ export default function Playground({
 					children: (
 						<DiagnosticsListTab
 							editorRef={editorRef}
+							code={code}
 							diagnostics={biomeOutput.diagnostics.list}
 						/>
 					),
@@ -295,6 +296,7 @@ export default function Playground({
 						editorRef={editorRef}
 						console={biomeOutput.diagnostics.console}
 						diagnostics={biomeOutput.diagnostics.list}
+						code={code}
 					/>
 				</Resizable>
 			</div>

src/playground/components/DiagnosticsPane.tsx

@@ -9,12 +9,14 @@ interface Props {
 	editorRef: React.RefObject<ReactCodeMirrorRef>;
 	console: string;
 	diagnostics: Diagnostic[];
+	code: string;
 }
 
 export default function DiagnosticsPane({
 	editorRef,
 	diagnostics,
 	console,
+	code,
 }: Props) {
 	const [tab, setTab] = useState("diagnostics");
 
@@ -31,6 +33,7 @@ export default function DiagnosticsPane({
 						<DiagnosticsListTab
 							editorRef={editorRef}
 							diagnostics={diagnostics}
+							code={code}
 						/>
 					),
 				},

src/playground/tabs/DiagnosticsListTab.tsx

@@ -1,13 +1,15 @@
 import errorIcon from "@/assets/svg/error.svg";
 import infoIcon from "@/assets/svg/info.svg";
 import warningIcon from "@/assets/svg/warning.svg";
+import { spanInBytesToSpanInCodeUnits } from "@/playground/utils";
 import type { Diagnostic } from "@biomejs/wasm-web";
 import { EditorSelection } from "@codemirror/state";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 
 interface Props {
 	editorRef: React.RefObject<ReactCodeMirrorRef>;
 	diagnostics: Diagnostic[];
+	code: string;
 }
 
 function renderDiagnosticMessage(diagnostic: Diagnostic) {
@@ -57,27 +59,30 @@ function DiagnosticIcon({ severity }: { severity: Diagnostic["severity"] }) {
 function DiagnosticListItem({
 	editorRef,
 	diagnostic,
+	code,
 }: {
 	diagnostic: Diagnostic;
 	editorRef: React.RefObject<ReactCodeMirrorRef>;
+	code: string;
 }) {
-	const span = diagnostic.location?.span;
-
 	function onClick() {
 		const view = editorRef.current?.view;
 		if (view === undefined) {
 			return;
 		}
 
+		const span = diagnostic.location?.span;
 		if (span === undefined) {
 			return;
 		}
 
+		const [from, to] = spanInBytesToSpanInCodeUnits(span, code);
+
 		view.dispatch({
 			scrollIntoView: true,
 			selection: EditorSelection.create([
-				EditorSelection.range(span[0], span[1]),
-				EditorSelection.cursor(span[0]),
+				EditorSelection.range(from, to),
+				EditorSelection.cursor(from),
 			]),
 		});
 	}
@@ -90,7 +95,11 @@ function DiagnosticListItem({
 	);
 }
 
-export default function DiagnosticsListTab({ editorRef, diagnostics }: Props) {
+export default function DiagnosticsListTab({
+	editorRef,
+	diagnostics,
+	code,
+}: Props) {
 	if (diagnostics.length === 0) {
 		return <div className="empty-panel">No diagnostics present</div>;
 	}
@@ -99,8 +108,13 @@ export default function DiagnosticsListTab({ editorRef, diagnostics }: Props) {
 		<ul className="diagnostics-list">
 			{diagnostics.map((diag, i) => {
 				return (
-					// biome-ignore lint/suspicious/noArrayIndexKey: Diagnostic has no stable id.
-					<DiagnosticListItem key={i} editorRef={editorRef} diagnostic={diag} />
+					<DiagnosticListItem
+						// biome-ignore lint/suspicious/noArrayIndexKey: Diagnostic has no stable id.
+						key={i}
+						editorRef={editorRef}
+						diagnostic={diag}
+						code={code}
+					/>
 				);
 			})}
 		</ul>

src/playground/utils.ts

@@ -291,3 +291,76 @@ export function isValidExtension(filename: string): boolean {
 export function normalizeFilename(filename: string): string {
 	return isValidExtension(filename) ? filename : `${filename}.js`;
 }
+
+/**
+ * Returns how many bytes the UTF-16 code unit would be, if represented in utf8
+ * Credit to: https://stackoverflow.com/a/73096001/4668057
+ */
+function getUtf8ByteLength(codeUnit: string) {
+	const code = codeUnit.charCodeAt(0);
+	if (code < 128) {
+		return 1;
+	}
+	if (code < 2048) {
+		return 2;
+	}
+	// UTF-16 high surrogate
+	if (55296 <= code && code <= 56319) {
+		return 4;
+	}
+	// UTF-16 low surrogate
+	if (56320 <= code && code <= 57343) {
+		return 0;
+	}
+	if (code < 65536) {
+		return 3;
+	}
+	throw `Bad UTF-16 code unit: ${codeUnit}`;
+}
+
+/**
+ * Converts the span in UTF-8 byte offets to a span in code unit offsets.
+ * May misbehave if the specified byte span doesn't fall exactly to the code unit boundaries
+ * Credit to: https://stackoverflow.com/a/73096001/4668057
+ */
+export function spanInBytesToSpanInCodeUnits(
+	[startInBytes, endInBytes]: [number, number],
+	str: string,
+) {
+	const spanInCodeUnits: [number, number] = [startInBytes, endInBytes];
+
+	let currCodeUnitIndex = 0;
+
+	// Scan through the string, looking for the start of the substring
+	let bytePos = 0;
+	while (bytePos < startInBytes) {
+		const byteLength = getUtf8ByteLength(str.charAt(currCodeUnitIndex));
+		bytePos += byteLength;
+		++currCodeUnitIndex;
+
+		// Make sure to include low surrogate
+		if (byteLength === 4 && bytePos === startInBytes) {
+			++currCodeUnitIndex;
+		}
+	}
+
+	// We've found the start, we update the start of spanInCodeUnits,
+	spanInCodeUnits[0] = currCodeUnitIndex;
+
+	// Now scan through the following string to find the end
+	while (bytePos < endInBytes) {
+		const byteLength = getUtf8ByteLength(str.charAt(currCodeUnitIndex));
+		bytePos += byteLength;
+		++currCodeUnitIndex;
+
+		// Make sure to include low surrogate
+		if (byteLength === 4 && bytePos === endInBytes) {
+			++currCodeUnitIndex;
+		}
+	}
+
+	// We've found the end, we update the end of spanInCodeUnits,
+	spanInCodeUnits[1] = currCodeUnitIndex;
+
+	return spanInCodeUnits;
+}