SWREI/switched
0
0
Fork 0
Code

fix(frontend): MkCodeEditorのデータバインディングを修正 (#12885)

Browse Source 
* (fix) MkCodeEditorの双方向データバインディング

* fix
This commit is contained in:
かっこかり 2024-01-02 14:53:28 +09:00 committed by GitHub
parent 4893cce43c
commit 5498ec57d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/frontend/src/components/MkCodeEditor.vue
View File

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.codeEditorScroller"> <div :class="$style.codeEditorScroller">
<textarea <textarea
ref="inputEl" ref="inputEl"
v-model="vModel" v-model="v"
:class="[$style.textarea]" :class="[$style.textarea]"
:disabled="disabled" :disabled="disabled"
:required="required" :required="required"
@ -58,7 +58,6 @@ const emit = defineEmits<{
}>(); }>();
const { modelValue } = toRefs(props); const { modelValue } = toRefs(props);
const vModel = ref<string>(modelValue.value ?? '');
const v = ref<string>(modelValue.value ?? ''); const v = ref<string>(modelValue.value ?? '');
const focused = ref(false); const focused = ref(false);
const changed = ref(false); const changed = ref(false);
@ -79,15 +78,14 @@ const onKeydown = (ev: KeyboardEvent) => {
if (ev.code === 'Enter') { if (ev.code === 'Enter') {
const pos = inputEl.value?.selectionStart ?? 0; const pos = inputEl.value?.selectionStart ?? 0;
const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length; const posEnd = inputEl.value?.selectionEnd ?? v.value.length;
if (pos === posEnd) { if (pos === posEnd) {
const lines = vModel.value.slice(0, pos).split('\n'); const lines = v.value.slice(0, pos).split('\n');
const currentLine = lines[lines.length - 1]; const currentLine = lines[lines.length - 1];
const currentLineSpaces = currentLine.match(/^\s+/); const currentLineSpaces = currentLine.match(/^\s+/);
const posDelta = currentLineSpaces ? currentLineSpaces[0].length : 0; const posDelta = currentLineSpaces ? currentLineSpaces[0].length : 0;
ev.preventDefault(); ev.preventDefault();
vModel.value = vModel.value.slice(0, pos) + '\n' + (currentLineSpaces ? currentLineSpaces[0] : '') + vModel.value.slice(pos); v.value = v.value.slice(0, pos) + '\n' + (currentLineSpaces ? currentLineSpaces[0] : '') + v.value.slice(pos);
v.value = vModel.value;
nextTick(() => { nextTick(() => {
inputEl.value?.setSelectionRange(pos + 1 + posDelta, pos + 1 + posDelta); inputEl.value?.setSelectionRange(pos + 1 + posDelta, pos + 1 + posDelta);
}); });
@ -97,9 +95,8 @@ const onKeydown = (ev: KeyboardEvent) => {
if (ev.key === 'Tab') { if (ev.key === 'Tab') {
const pos = inputEl.value?.selectionStart ?? 0; const pos = inputEl.value?.selectionStart ?? 0;
const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length; const posEnd = inputEl.value?.selectionEnd ?? v.value.length;
vModel.value = vModel.value.slice(0, pos) + '\t' + vModel.value.slice(posEnd); v.value = v.value.slice(0, pos) + '\t' + v.value.slice(posEnd);
v.value = vModel.value;
nextTick(() => { nextTick(() => {
inputEl.value?.setSelectionRange(pos + 1, pos + 1); inputEl.value?.setSelectionRange(pos + 1, pos + 1);
}); });