From c490c7558f8b1e4d1a72ad023d3d262f72a6a60a Mon Sep 17 00:00:00 2001
From: Mar0xy <marie@kaifa.ch>
Date: Wed, 1 Nov 2023 19:52:13 +0100
Subject: [PATCH] fix: use computed instead of watch

---
 packages/frontend/src/components/MkNote.vue         | 10 ++--------
 packages/frontend/src/components/MkNoteDetailed.vue |  8 +-------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7f366cd9d..cba561b81 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -153,7 +153,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent, watch } from 'vue';
+import { computed, inject, onMounted, ref, shallowRef, Ref, defineAsyncComponent } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -240,7 +240,7 @@ const renoteUri = appearNote.renote ? appearNote.renote.uri : null;
 
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
-let parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
+const parsed = $computed(() => appearNote.text ? mfm.parse(appearNote.text) : null);
 const urls = parsed ? extractUrlFromMfm(parsed) : null;
 const isLong = shouldCollapsed(appearNote, urls ?? []);
 const collapsed = ref(appearNote.cw == null && isLong);
@@ -272,12 +272,6 @@ useNoteCapture({
 	isDeletedRef: isDeleted,
 });
 
-watch(() => appearNote.text, () => {
-	if (appearNote.text && mfm.parse(appearNote.text) !== parsed) {
-		parsed = mfm.parse(appearNote.text);
-	}
-});
-
 useTooltip(renoteButton, async (showing) => {
 	const renotes = await os.api('notes/renotes', {
 		noteId: appearNote.id,
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 2151aadd4..376d4fd55 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -295,7 +295,7 @@ const quoted = ref(false);
 const muted = ref($i ? checkWordMute(appearNote, $i, $i.mutedWords) : false);
 const translation = ref(null);
 const translating = ref(false);
-let parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
+const parsed = $computed(() => appearNote.text ? mfm.parse(appearNote.text) : null);
 const urls = parsed ? extractUrlFromMfm(parsed) : null;
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 const conversation = ref<Misskey.entities.Note[]>([]);
@@ -307,12 +307,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
 });
 
-watch(() => appearNote.text, () => {
-	if (appearNote.text && mfm.parse(appearNote.text) !== parsed) {
-		parsed = mfm.parse(appearNote.text);
-	}
-});
-
 if ($i) {
 	os.api("notes/renotes", {
 		noteId: appearNote.id,