This commit is contained in:
@@ -13,12 +13,8 @@ import { LANGUAGE } from "../types"
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
modelValue: string
|
modelValue: string
|
||||||
label?: string
|
|
||||||
icon?: string
|
|
||||||
language?: LANGUAGE
|
language?: LANGUAGE
|
||||||
fontSize?: number
|
fontSize?: number
|
||||||
readonly?: boolean
|
|
||||||
placeholder?: string
|
|
||||||
currentLine?: number
|
currentLine?: number
|
||||||
nextLine?: number
|
nextLine?: number
|
||||||
currentLineText?: string
|
currentLineText?: string
|
||||||
@@ -26,11 +22,8 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
label: "",
|
|
||||||
language: "python",
|
language: "python",
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
readonly: false,
|
|
||||||
placeholder: "",
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const code = ref(props.modelValue)
|
const code = ref(props.modelValue)
|
||||||
@@ -74,13 +67,16 @@ const highlightField = StateField.define<DecorationSet>({
|
|||||||
Decoration.line({
|
Decoration.line({
|
||||||
class: "cm-current-line-with-text",
|
class: "cm-current-line-with-text",
|
||||||
attributes: {
|
attributes: {
|
||||||
"data-text": effect.value.currentLineText
|
"data-text": effect.value.currentLineText,
|
||||||
}
|
},
|
||||||
}).range(line.from),
|
}).range(line.from),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("Invalid line number for current line:", effect.value.currentLine)
|
console.warn(
|
||||||
|
"Invalid line number for current line:",
|
||||||
|
effect.value.currentLine,
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,19 +90,22 @@ const highlightField = StateField.define<DecorationSet>({
|
|||||||
}).range(line.from),
|
}).range(line.from),
|
||||||
)
|
)
|
||||||
|
|
||||||
// 在下一步行添加文字 - 使用行装饰而不是Widget
|
// 在下一步行添加文字
|
||||||
if (effect.value.nextLineText) {
|
if (effect.value.nextLineText) {
|
||||||
decorations_array.push(
|
decorations_array.push(
|
||||||
Decoration.line({
|
Decoration.line({
|
||||||
class: "cm-next-line-with-text",
|
class: "cm-next-line-with-text",
|
||||||
attributes: {
|
attributes: {
|
||||||
"data-text": effect.value.nextLineText
|
"data-text": effect.value.nextLineText,
|
||||||
}
|
},
|
||||||
}).range(line.from),
|
}).range(line.from),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("Invalid line number for next line:", effect.value.nextLine)
|
console.warn(
|
||||||
|
"Invalid line number for next line:",
|
||||||
|
effect.value.nextLine,
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,6 +123,7 @@ const highlightField = StateField.define<DecorationSet>({
|
|||||||
const styleTheme = EditorView.baseTheme({
|
const styleTheme = EditorView.baseTheme({
|
||||||
"& .cm-scroller": {
|
"& .cm-scroller": {
|
||||||
"font-family": "Monaco",
|
"font-family": "Monaco",
|
||||||
|
height: "calc(100vh - 120px)",
|
||||||
},
|
},
|
||||||
"&.cm-editor.cm-focused": {
|
"&.cm-editor.cm-focused": {
|
||||||
outline: "none",
|
outline: "none",
|
||||||
@@ -239,7 +239,12 @@ function updateHighlight() {
|
|||||||
|
|
||||||
// 监听 props 变化并更新高亮
|
// 监听 props 变化并更新高亮
|
||||||
watch(
|
watch(
|
||||||
() => [props.currentLine, props.nextLine, props.currentLineText, props.nextLineText],
|
() => [
|
||||||
|
props.currentLine,
|
||||||
|
props.nextLine,
|
||||||
|
props.currentLineText,
|
||||||
|
props.nextLineText,
|
||||||
|
],
|
||||||
() => {
|
() => {
|
||||||
updateHighlight()
|
updateHighlight()
|
||||||
},
|
},
|
||||||
@@ -250,11 +255,8 @@ watch(
|
|||||||
v-model="code"
|
v-model="code"
|
||||||
indentWithTab
|
indentWithTab
|
||||||
:extensions="[styleTheme, lang, highlightField, isDark ? oneDark : smoothy]"
|
:extensions="[styleTheme, lang, highlightField, isDark ? oneDark : smoothy]"
|
||||||
:disabled="props.readonly"
|
|
||||||
:tabSize="4"
|
:tabSize="4"
|
||||||
:placeholder="props.placeholder"
|
|
||||||
:style="{
|
:style="{
|
||||||
height: 'calc(100% - 60px)',
|
|
||||||
fontSize: props.fontSize + 'px',
|
fontSize: props.fontSize + 'px',
|
||||||
}"
|
}"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
|
|||||||
Reference in New Issue
Block a user