From 5498ec57d0ab161abf4017d8d67da59254ea0d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
<67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 2 Jan 2024 14:53:28 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20MkCodeEditor=E3=81=AE=E3=83=87?=
=?UTF-8?q?=E3=83=BC=E3=82=BF=E3=83=90=E3=82=A4=E3=83=B3=E3=83=87=E3=82=A3?=
=?UTF-8?q?=E3=83=B3=E3=82=B0=E3=82=92=E4=BF=AE=E6=AD=A3=20(#12885)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* (fix) MkCodeEditorの双方向データバインディング
* fix
---
packages/frontend/src/components/MkCodeEditor.vue | 15 ++++++---------
1 file changed, 6 insertions(+), 9 deletions(-)
diff --git a/packages/frontend/src/components/MkCodeEditor.vue b/packages/frontend/src/components/MkCodeEditor.vue
index 6341c454ae..c8c3deb610 100644
--- a/packages/frontend/src/components/MkCodeEditor.vue
+++ b/packages/frontend/src/components/MkCodeEditor.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.codeEditorScroller">
<textarea
ref="inputEl"
- v-model="vModel"
+ v-model="v"
:class="[$style.textarea]"
:disabled="disabled"
:required="required"
@@ -58,7 +58,6 @@ const emit = defineEmits<{
}>();
const { modelValue } = toRefs(props);
-const vModel = ref<string>(modelValue.value ?? '');
const v = ref<string>(modelValue.value ?? '');
const focused = ref(false);
const changed = ref(false);
@@ -79,15 +78,14 @@ const onKeydown = (ev: KeyboardEvent) => {
if (ev.code === 'Enter') {
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) {
- 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 currentLineSpaces = currentLine.match(/^\s+/);
const posDelta = currentLineSpaces ? currentLineSpaces[0].length : 0;
ev.preventDefault();
- vModel.value = vModel.value.slice(0, pos) + '\n' + (currentLineSpaces ? currentLineSpaces[0] : '') + vModel.value.slice(pos);
- v.value = vModel.value;
+ v.value = v.value.slice(0, pos) + '\n' + (currentLineSpaces ? currentLineSpaces[0] : '') + v.value.slice(pos);
nextTick(() => {
inputEl.value?.setSelectionRange(pos + 1 + posDelta, pos + 1 + posDelta);
});
@@ -97,9 +95,8 @@ const onKeydown = (ev: KeyboardEvent) => {
if (ev.key === 'Tab') {
const pos = inputEl.value?.selectionStart ?? 0;
- const posEnd = inputEl.value?.selectionEnd ?? vModel.value.length;
- vModel.value = vModel.value.slice(0, pos) + '\t' + vModel.value.slice(posEnd);
- v.value = vModel.value;
+ const posEnd = inputEl.value?.selectionEnd ?? v.value.length;
+ v.value = v.value.slice(0, pos) + '\t' + v.value.slice(posEnd);
nextTick(() => {
inputEl.value?.setSelectionRange(pos + 1, pos + 1);
});