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 6341c454a..c8c3deb61 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);
 		});