From a56d404b5d8a8e05d8edea4982151f327ddbd471 Mon Sep 17 00:00:00 2001
From: CyberRex <hspwinx86@gmail.com>
Date: Sat, 30 Sep 2023 22:23:14 +0900
Subject: [PATCH] =?UTF-8?q?=E5=B7=AE=E5=88=86=E8=A1=A8=E7=A4=BA=E3=82=92?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkNoteDetailed.vue    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index b1f3720d59..89bc226d26 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -176,16 +176,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else-if="tab === 'history'" :class="$style.tab_history">
 			<div style="display: grid;">
-				<div v-for="text in appearNote.noteEditHistory" :class="$style.historyRoot" :key="text">
+				<div v-for="(text, index) in appearNote.noteEditHistory" :key="text" :class="$style.historyRoot">
 					<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
 					<div :class="$style.historyMain">
 						<div :class="$style.historyHeader">
 							<MkUserName :user="appearNote.user" :nowrap="true"/>
 						</div>
 						<div>
-							<div>
-								<Mfm :text="text.trim()" :author="appearNote.user" :i="$i"/>
-							</div>
+							<CodeDiff
+								:old-string="appearNote.noteEditHistory[index - 1] || appearNote.noteEditHistory[0]"
+								:new-string="text"
+								:trim="true"
+								:hideHeader="true"
+								diffStyle="char"
+							/>
 						</div>
 					</div>
 				</div>
@@ -205,7 +209,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef } from 'vue';
+import { computed, inject, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -240,6 +244,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
+import { CodeDiff } from 'v-code-diff';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;