yuetsh
f8e59e9850
- Normalize student SQL to end with exactly one semicolon before appending the trailing SELECT, so a missing trailing ; no longer produces a confusing parse error (sqlTable.ts) - Remove unused description field from SqlTablePreset and all presets (dead data, nothing in the UI reads it) - Clear output when the candidate table selection changes, so stale results from the previous table don't linger (SqlSection.vue) - Remove stray console.log(props.language) debug statement (CodeEditor.vue) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
121 lines
2.7 KiB
Vue
121 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import { cpp } from "@codemirror/lang-cpp"
|
|
import { python } from "@codemirror/lang-python"
|
|
import { sql } from "@codemirror/lang-sql"
|
|
import { EditorState } from "@codemirror/state"
|
|
import { EditorView } from "@codemirror/view"
|
|
import { autocompletion, completeAnyWord } from "@codemirror/autocomplete"
|
|
import { Icon } from "@iconify/vue"
|
|
import { useDark } from "@vueuse/core"
|
|
import { computed, ref, watch } from "vue"
|
|
import { Codemirror } from "vue-codemirror"
|
|
import { oneDark } from "../themes/oneDark"
|
|
import { smoothy } from "../themes/smoothy"
|
|
import { enhanceCompletion } from "../extensions/autocompletion"
|
|
import { LANGUAGE } from "../types"
|
|
|
|
interface Props {
|
|
modelValue: string
|
|
label?: string
|
|
icon?: string
|
|
language?: LANGUAGE
|
|
fontSize?: number
|
|
readonly?: boolean
|
|
placeholder?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
label: "",
|
|
language: "python",
|
|
fontSize: 24,
|
|
readonly: false,
|
|
placeholder: "",
|
|
})
|
|
|
|
const code = ref(props.modelValue)
|
|
const isDark = useDark()
|
|
const styleTheme = EditorView.baseTheme({
|
|
"& .cm-scroller": {
|
|
"font-family": "Monaco",
|
|
},
|
|
"&.cm-editor.cm-focused": {
|
|
outline: "none",
|
|
},
|
|
"&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
|
|
"font-family": "Monaco",
|
|
},
|
|
})
|
|
const emit = defineEmits(["update:modelValue", "ready"])
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(v) => {
|
|
code.value = v
|
|
},
|
|
)
|
|
|
|
const langExtension = computed(() => {
|
|
if (props.language === "python" || props.language === "turtle") {
|
|
return python()
|
|
}
|
|
if (props.language === "sql") {
|
|
return sql()
|
|
}
|
|
return cpp()
|
|
})
|
|
|
|
const enhanceAutoCompletion = computed(() => {
|
|
return autocompletion({
|
|
override: [enhanceCompletion(props.language), completeAnyWord],
|
|
})
|
|
})
|
|
|
|
function onChange(v: string) {
|
|
emit("update:modelValue", v)
|
|
}
|
|
|
|
function onReady(payload: {
|
|
view: EditorView
|
|
state: EditorState
|
|
container: HTMLDivElement
|
|
}) {
|
|
emit("ready", payload.view)
|
|
}
|
|
</script>
|
|
<template>
|
|
<n-flex align="center" class="header" v-if="props.label">
|
|
<Icon v-if="icon" :icon="icon" :width="24" :height="24"></Icon>
|
|
<span class="title">{{ label }}</span>
|
|
<slot name="actions"></slot>
|
|
</n-flex>
|
|
<Codemirror
|
|
v-model="code"
|
|
indentWithTab
|
|
:extensions="[
|
|
styleTheme,
|
|
langExtension,
|
|
enhanceAutoCompletion,
|
|
isDark ? oneDark : smoothy,
|
|
]"
|
|
:disabled="props.readonly"
|
|
:tabSize="4"
|
|
:placeholder="props.placeholder"
|
|
:style="{
|
|
height: !!props.label ? 'calc(100% - 60px)' : '100%',
|
|
fontSize: props.fontSize + 'px',
|
|
}"
|
|
@change="onChange"
|
|
@ready="onReady"
|
|
/>
|
|
</template>
|
|
<style scoped>
|
|
.header {
|
|
padding: 12px 20px;
|
|
height: 60px;
|
|
box-sizing: border-box;
|
|
}
|
|
.title {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|