在组件内而非全局创建editor实例变量,但不赋予响应式

This commit is contained in:
fofolee 2025-02-22 11:22:59 +08:00
parent d9bc4b4f34
commit e97ec5963a

View File

@ -55,7 +55,6 @@ let languageCompletions = importAll(
);
let monacoCompletionProviders = {};
let editor = null;
//
const typeDefinitions = {
@ -140,19 +139,19 @@ export default defineComponent({
modelValue: {
immediate: true,
handler(newValue) {
if (!editor || editor.getValue() === newValue) return;
editor.setValue(newValue || "");
if (!this.codeEditor || this.codeEditor.getValue() === newValue) return;
this.codeEditor.setValue(newValue || "");
},
},
cursorPosition: {
immediate: true,
handler(newValue) {
if (!editor) return;
if (!this.codeEditor) return;
const { lineNumber, column } = newValue;
if (!lineNumber || !column) return;
const pos = editor.getPosition();
const pos = this.codeEditor.getPosition();
if (pos.lineNumber === lineNumber && pos.column === column) return;
editor.setPosition(newValue);
this.codeEditor.setPosition(newValue);
},
},
"$q.dark.isActive": {
@ -164,9 +163,9 @@ export default defineComponent({
language: {
immediate: true,
handler(newValue) {
if (!editor) return;
if (!this.codeEditor) return;
const language = this.getHighlighter(newValue);
monaco.editor.setModelLanguage(editor.getModel(), language);
monaco.editor.setModelLanguage(this.codeEditor.getModel(), language);
this.loadTypes();
},
},
@ -194,7 +193,10 @@ export default defineComponent({
wordWrap: this.wordWrap,
};
editor = monaco.editor.create(this.$refs.editorContainer, options);
this.codeEditor = monaco.editor.create(
this.$refs.editorContainer,
options
);
this.listenEditorValue();
this.loadTypes();
this.registerLanguage();
@ -207,13 +209,13 @@ export default defineComponent({
},
//
listenEditorValue() {
editor.focus();
editor.onDidChangeModelContent(() => {
this.$emit("update:modelValue", editor.getValue());
this.codeEditor.focus();
this.codeEditor.onDidChangeModelContent(() => {
this.$emit("update:modelValue", this.codeEditor.getValue());
});
//
editor.onDidChangeCursorPosition((e) => {
this.codeEditor.onDidChangeCursorPosition((e) => {
this.$emit("update:cursorPosition", e.position);
});
},
@ -223,19 +225,19 @@ export default defineComponent({
clearTimeout(this.resizeTimeout);
}
this.resizeTimeout = setTimeout(() => {
editor.layout();
this.codeEditor.layout();
}, 50);
},
//
destroyEditor() {
window.removeEventListener("resize", this.resizeEditor);
if (!editor) return;
editor.dispose();
editor = null;
if (!this.codeEditor) return;
this.codeEditor.dispose();
this.codeEditor = null;
},
//
focus() {
editor && editor.focus();
this.codeEditor && this.codeEditor.focus();
},
registerLanguage() {
const identifierPattern = "([a-zA-Z_]\\w*)";
@ -363,20 +365,23 @@ export default defineComponent({
},
setCursorPosition(position) {
if (!position.lineNumber || !position.column) return;
editor.setPosition(position);
this.codeEditor.setPosition(position);
},
bindKeys() {
// alt + z
editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyZ, () => {
this.codeEditor.addCommand(
monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,
() => {
this.wordWrap = this.wordWrap === "on" ? "off" : "on";
editor.updateOptions({
this.codeEditor.updateOptions({
wordWrap: this.wordWrap,
});
});
}
);
},
//
repacleEditorSelection(text) {
var selection = editor.getSelection();
var selection = this.codeEditor.getSelection();
var range = new monaco.Range(
selection.startLineNumber,
selection.startColumn,
@ -390,15 +395,15 @@ export default defineComponent({
text: text,
forceMoveMarkers: true,
};
editor.executeEdits("my-source", [op]);
this.codeEditor.executeEdits("my-source", [op]);
},
//
formatDocument() {
editor.getAction("editor.action.formatDocument").run();
this.codeEditor.getAction("editor.action.formatDocument").run();
},
updateEditorValue(type, value) {
if (type === "replace") {
editor.setValue(value);
this.codeEditor.setValue(value);
} else if (type === "insert") {
this.repacleEditorSelection(value);
}