fix autocomplete styles (#290)

Rich-Harris · Rich Harris · web-flow · commit c279292482b0 · 2023-03-22T09:29:59.000-04:00
Co-authored-by: Rich Harris &lt;git@rich-harris.dev&gt;
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
@@ -6,6 +6,7 @@
 	import { EditorState } from '@codemirror/state';
 	import { indentWithTab } from '@codemirror/commands';
 	import { indentUnit } from '@codemirror/language';
+	import { acceptCompletion } from '@codemirror/autocomplete';
 	import { setDiagnostics } from '@codemirror/lint';
 	import { javascript } from '@codemirror/lang-javascript';
 	import { html } from '@codemirror/lang-html';
@@ -17,16 +18,6 @@
 	import { files, selected_file, selected_name, update_file, warnings } from './state.js';
 	import './codemirror.css';
 
-	// TODO add more styles (selection ranges, etc)
-	const highlights = HighlightStyle.define([
-		{ tag: tags.tagName, color: '#c05726' },
-		{ tag: tags.keyword, color: 'var(--sk-code-keyword)' },
-		{ tag: tags.comment, color: 'var(--sk-code-comment)' },
-		{ tag: tags.string, color: 'var(--sk-code-string)' }
-	]);
-
-	const theme = syntaxHighlighting(highlights);
-
 	/** @type {HTMLDivElement} */
 	let container;
 
@@ -45,9 +36,17 @@
 	const extensions = [
 		basicSetup,
 		EditorState.tabSize.of(2),
-		keymap.of([indentWithTab]),
+		keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab]),
 		indentUnit.of('\t'),
-		theme
+		syntaxHighlighting(
+			HighlightStyle.define([
+				// TODO add more styles
+				{ tag: tags.tagName, color: '#c05726' },
+				{ tag: tags.keyword, color: 'var(--sk-code-keyword)' },
+				{ tag: tags.comment, color: 'var(--sk-code-comment)' },
+				{ tag: tags.string, color: 'var(--sk-code-string)' }
+			])
+		)
 	];
 
 	$: reset($files);
diff --git a/src/routes/tutorial/[slug]/codemirror.css b/src/routes/tutorial/[slug]/codemirror.css
@@ -77,6 +77,11 @@
 }
 .cm-editor .cm-diagnosticText {}
 
+.cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
+	font-family: var(--font-mono);
+	font-size: 1.3rem;
+}
+
 
 @media (prefers-color-scheme: dark) {
 	.cm-editor .cm-activeLineGutter {
