JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-19 21:06:06 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 修复代码块编辑器的更新内容后按下ctrl+s光标会偏移的问题

Browse Source
This commit is contained in:
qyaniwu 2025-07-24 04:13:02 +00:00 committed by roymondchen
parent d31a544a23
commit 07b8f5fe83
1 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/editor/src/layouts/CodeEditor.vue
View File

@ -20,7 +20,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'; import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
import { FullScreen } from '@element-plus/icons-vue'; import { FullScreen } from '@element-plus/icons-vue';
import { throttle } from 'lodash-es'; import { throttle } from 'lodash-es';
import serialize from 'serialize-javascript'; import serialize from 'serialize-javascript';
@ -62,7 +62,7 @@ const props = withDefaults(
const emit = defineEmits(['initd', 'save']); const emit = defineEmits(['initd', 'save']);
const toString = (v: string | any, language: string): string => { const toString = (v: string | any, language: string): string => {
let value = ''; let value: string;
if (typeof v !== 'string') { if (typeof v !== 'string') {
if (language === 'json') { if (language === 'json') {
value = JSON.stringify(v, null, 2); value = JSON.stringify(v, null, 2);
@ -113,19 +113,40 @@ const setEditorValue = (v: string | any, m: string | any) => {
if (props.type === 'diff') { if (props.type === 'diff') {
const originalModel = monaco.editor.createModel(values.value, 'text/javascript'); const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript'); const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
const position = vsDiffEditor?.getPosition();
return vsDiffEditor?.setModel({ const result = vsDiffEditor?.setModel({
original: originalModel, original: originalModel,
modified: modifiedModel, modified: modifiedModel,
}); });
if (position) {
vsDiffEditor?.setPosition(position);
vsDiffEditor?.focus();
}
return result;
} }
// 保存当前光标位置
return vsEditor?.setValue(values.value); const position = vsEditor?.getPosition();
const result = vsEditor?.setValue(values.value);
// 恢复光标位置
if (position) {
vsEditor?.setPosition(position);
vsEditor?.focus();
}
return result;
}; };
const getEditorValue = () => const getEditorValue = () =>
(props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || ''; (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
const handleKeyDown = (e: KeyboardEvent) => {
if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
e.stopPropagation();
const newValue = getEditorValue();
values.value = newValue;
emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
}
};
const init = async () => { const init = async () => {
if (!codeEditorEl.value) return; if (!codeEditorEl.value) return;
@ -149,16 +170,7 @@ const init = async () => {
setEditorValue(props.initValues, props.modifiedValues); setEditorValue(props.initValues, props.modifiedValues);
emit('initd', vsEditor); emit('initd', vsEditor);
codeEditorEl.value.addEventListener('keydown', handleKeyDown);
codeEditorEl.value.addEventListener('keydown', (e) => {
if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
e.stopPropagation();
const newValue = getEditorValue();
values.value = newValue;
emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
}
});
if (props.type !== 'diff' && props.autoSave) { if (props.type !== 'diff' && props.autoSave) {
vsEditor?.onDidBlurEditorWidget(() => { vsEditor?.onDidBlurEditorWidget(() => {
@ -214,7 +226,9 @@ onBeforeUnmount(() => {
vsEditor = null; vsEditor = null;
vsDiffEditor = null; vsDiffEditor = null;
}); });
onUnmounted(() => {
codeEditorEl.value?.removeEventListener('keydown', handleKeyDown);
});
const fullScreen = ref(false); const fullScreen = ref(false);
const fullScreenHandler = () => { const fullScreenHandler = () => {
fullScreen.value = !fullScreen.value; fullScreen.value = !fullScreen.value;