feat: CodeMirror 6 inline editor with dark theme and language detection
Add EditorWindow component with CodeMirror 6 using one-dark theme. Detects language from file extension (js/ts/jsx/tsx, json, py, md) via dynamic imports for code splitting. Features unsaved changes indicator (yellow dot), Save button (TODO: SFTPService.WriteFile), and Close button. Renders as an inline panel above the terminal. File clicks in FileTree open the editor with mock content. Editor re-creates when file path changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
parent
3898a1c3e2
commit
325cebbd01
229
frontend/src/components/editor/EditorWindow.vue
Normal file
229
frontend/src/components/editor/EditorWindow.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="flex flex-col border-b border-[var(--wraith-border)] bg-[var(--wraith-bg-secondary)]" :style="{ height: editorHeight + 'px' }">
|
||||
<!-- Editor toolbar -->
|
||||
<div class="flex items-center justify-between px-3 py-1.5 border-b border-[var(--wraith-border)] shrink-0">
|
||||
<div class="flex items-center gap-2 text-xs min-w-0">
|
||||
<!-- File icon -->
|
||||
<svg class="w-3.5 h-3.5 text-[var(--wraith-text-muted)] shrink-0" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M3.75 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V6H9.75A1.75 1.75 0 0 1 8 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25V1.75z" />
|
||||
</svg>
|
||||
|
||||
<span class="text-[var(--wraith-text-primary)] truncate font-mono text-[11px]">
|
||||
{{ filePath }}
|
||||
</span>
|
||||
|
||||
<!-- Unsaved indicator -->
|
||||
<span v-if="hasUnsavedChanges" class="w-2 h-2 rounded-full bg-[var(--wraith-accent-yellow)] shrink-0" title="Unsaved changes" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<!-- Save button -->
|
||||
<button
|
||||
class="px-3 py-1 text-xs rounded transition-colors cursor-pointer"
|
||||
:class="
|
||||
hasUnsavedChanges
|
||||
? 'bg-[var(--wraith-accent-blue)] text-white hover:bg-blue-600'
|
||||
: 'bg-[var(--wraith-bg-tertiary)] text-[var(--wraith-text-muted)] cursor-not-allowed'
|
||||
"
|
||||
:disabled="!hasUnsavedChanges"
|
||||
@click="handleSave"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
<!-- Close button -->
|
||||
<button
|
||||
class="text-[var(--wraith-text-muted)] hover:text-[var(--wraith-accent-red)] transition-colors cursor-pointer"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CodeMirror container -->
|
||||
<div ref="editorRef" class="flex-1 min-h-0 overflow-hidden" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
|
||||
import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightSpecialChars } from "@codemirror/view";
|
||||
import { EditorState } from "@codemirror/state";
|
||||
import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
|
||||
import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from "@codemirror/language";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
|
||||
|
||||
const props = defineProps<{
|
||||
content: string;
|
||||
filePath: string;
|
||||
sessionId: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
}>();
|
||||
|
||||
const editorRef = ref<HTMLElement | null>(null);
|
||||
const hasUnsavedChanges = ref(false);
|
||||
const editorHeight = ref(300);
|
||||
|
||||
let view: EditorView | null = null;
|
||||
|
||||
/** Detect language extension from file path. */
|
||||
async function getLanguageExtension(path: string) {
|
||||
const ext = path.split(".").pop()?.toLowerCase() ?? "";
|
||||
switch (ext) {
|
||||
case "js":
|
||||
case "jsx":
|
||||
case "ts":
|
||||
case "tsx": {
|
||||
const { javascript } = await import("@codemirror/lang-javascript");
|
||||
return javascript({ jsx: ext.includes("x"), typescript: ext.startsWith("t") });
|
||||
}
|
||||
case "json": {
|
||||
const { json } = await import("@codemirror/lang-json");
|
||||
return json();
|
||||
}
|
||||
case "py": {
|
||||
const { python } = await import("@codemirror/lang-python");
|
||||
return python();
|
||||
}
|
||||
case "md":
|
||||
case "markdown": {
|
||||
const { markdown } = await import("@codemirror/lang-markdown");
|
||||
return markdown();
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!editorRef.value) return;
|
||||
|
||||
const langExt = await getLanguageExtension(props.filePath);
|
||||
|
||||
const extensions = [
|
||||
lineNumbers(),
|
||||
highlightActiveLine(),
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
bracketMatching(),
|
||||
closeBrackets(),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
oneDark,
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
...closeBracketsKeymap,
|
||||
]),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
hasUnsavedChanges.value = true;
|
||||
}
|
||||
}),
|
||||
EditorView.theme({
|
||||
"&": {
|
||||
height: "100%",
|
||||
fontSize: "13px",
|
||||
},
|
||||
".cm-scroller": {
|
||||
overflow: "auto",
|
||||
fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, Monaco, monospace",
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
if (langExt) {
|
||||
extensions.push(langExt);
|
||||
}
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: props.content,
|
||||
extensions,
|
||||
});
|
||||
|
||||
view = new EditorView({
|
||||
state,
|
||||
parent: editorRef.value,
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (view) {
|
||||
view.destroy();
|
||||
view = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Re-create editor when content/filePath changes
|
||||
watch(
|
||||
() => props.filePath,
|
||||
async () => {
|
||||
if (!view || !editorRef.value) return;
|
||||
hasUnsavedChanges.value = false;
|
||||
|
||||
const langExt = await getLanguageExtension(props.filePath);
|
||||
const extensions = [
|
||||
lineNumbers(),
|
||||
highlightActiveLine(),
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
bracketMatching(),
|
||||
closeBrackets(),
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
oneDark,
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
...closeBracketsKeymap,
|
||||
]),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
hasUnsavedChanges.value = true;
|
||||
}
|
||||
}),
|
||||
EditorView.theme({
|
||||
"&": {
|
||||
height: "100%",
|
||||
fontSize: "13px",
|
||||
},
|
||||
".cm-scroller": {
|
||||
overflow: "auto",
|
||||
fontFamily: "'JetBrains Mono', 'Cascadia Code', 'Fira Code', Menlo, Monaco, monospace",
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
if (langExt) {
|
||||
extensions.push(langExt);
|
||||
}
|
||||
|
||||
view.destroy();
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: props.content,
|
||||
extensions,
|
||||
});
|
||||
|
||||
view = new EditorView({
|
||||
state,
|
||||
parent: editorRef.value,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
function handleSave(): void {
|
||||
if (!view || !hasUnsavedChanges.value) return;
|
||||
|
||||
const _currentContent = view.state.doc.toString();
|
||||
// TODO: Replace with Wails binding call — SFTPService.WriteFile(sessionId, filePath, currentContent)
|
||||
void props.sessionId;
|
||||
|
||||
hasUnsavedChanges.value = false;
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user