feat: tools page

src/lib/components/common/CodeEditor.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { basicSetup, EditorView } from 'codemirror';
+	import { keymap, placeholder } from '@codemirror/view';
+	import { EditorState } from '@codemirror/state';
+
+	import { acceptCompletion } from '@codemirror/autocomplete';
+	import { indentWithTab } from '@codemirror/commands';
+
+	import { python } from '@codemirror/lang-python';
+	import { oneDark } from '@codemirror/theme-one-dark';
+
+	import { onMount } from 'svelte';
+
+	export let value = '';
+
+	onMount(() => {
+		// python code editor, highlight python code
+		const codeEditor = new EditorView({
+			state: EditorState.create({
+				doc: value,
+				extensions: [
+					basicSetup,
+					keymap.of([{ key: 'Tab', run: acceptCompletion }, indentWithTab]),
+					python(),
+					oneDark,
+					placeholder('Enter your code here...')
+				]
+			}),
+			parent: document.getElementById('code-textarea')
+		});
+	});
+</script>
+
+<div id="code-textarea" />

src/routes/(app)/workspace/+layout.svelte

@@ -61,6 +61,15 @@
 				{$i18n.t('Documents')}
 			</a>
 
+			<a
+				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/tools')
+					? 'bg-gray-50 dark:bg-gray-850'
+					: ''} transition"
+				href="/workspace/tools"
+			>
+				{$i18n.t('Tools')}
+			</a>
+
 			<a
 				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/playground')
 					? 'bg-gray-50 dark:bg-gray-850'

src/routes/(app)/workspace/tools/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import CodeEditor from '$lib/components/common/CodeEditor.svelte';
+</script>
+
+<CodeEditor />