Merge pull request #8 from agnosticeng/chore/editor

chore(editor): add codemirror

Author: didierfranc

package-lock.json

@@ -14,6 +14,13 @@
 	},
 	"license": "MIT",
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.18.3",
+		"@codemirror/commands": "^6.7.1",
+		"@codemirror/lang-sql": "^6.8.0",
+		"@codemirror/language": "^6.10.3",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.35.0",
+		"@lezer/highlight": "^1.2.1",
 		"@tauri-apps/api": "^1",
 		"normalize.css": "^8.0.1"
 	},

package.json

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { sql } from '@codemirror/lang-sql';
+	import { EditorState } from '@codemirror/state';
+	import { EditorView, keymap, placeholder } from '@codemirror/view';
+	import { untrack } from 'svelte';
+	import './codemirror.css';
+	import { default_extensions, default_keymaps } from './extensions';
+	import { ProxyDialect } from './SQLDialect';
+
+	type Props = {
+		value: string;
+		onExec?: () => unknown;
+	};
+
+	let { value = $bindable(''), onExec }: Props = $props();
+
+	let container: HTMLDivElement;
+	let editor_view: EditorView;
+
+	$effect(() => {
+		editor_view = new EditorView({ parent: container });
+
+		const state = EditorState.create({
+			doc: untrack(() => value),
+			extensions: [
+				...default_extensions,
+				default_keymaps,
+				EditorView.darkTheme.of(true),
+				sql({ dialect: ProxyDialect }),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) {
+						value = update.state.doc.toString();
+					}
+				}),
+				placeholder('Enter a query...'),
+				keymap.of([
+					{
+						key: 'Mod-Enter',
+						run: () => {
+							onExec?.();
+							return true;
+						}
+					}
+				])
+			]
+		});
+
+		editor_view.setState(state);
+
+		return () => editor_view.destroy();
+	});
+</script>
+
+<div bind:this={container}></div>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+		padding: 7px 2px;
+	}
+</style>