From 879b6e36026024e6e44da6658fefeb2ae8ab38e8 Mon Sep 17 00:00:00 2001
From: Roel Nieskens <roel@pixelambacht.nl>
Date: Mon, 23 Dec 2024 16:47:27 +0100
Subject: [PATCH] Fix Prism Vue component not re-rendering

For some reason it doesn't reflect changes anymore, so we force the
Prism component to update by adding a `:key`
---
 src/components/report/StyleSheet.vue       | 2 +-
 src/components/report/TypeTester.vue       | 6 ++++--
 src/components/report/VariableControls.vue | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/report/StyleSheet.vue b/src/components/report/StyleSheet.vue
index 2993958..cfca9cd 100644
--- a/src/components/report/StyleSheet.vue
+++ b/src/components/report/StyleSheet.vue
@@ -24,7 +24,7 @@
 				</div>
 				<div class="code">
 					<CopyToClipboard :content="css" />
-					<Prism language="css">{{ css }}</Prism>
+					<Prism language="css" :key="{ css }">{{ css }}</Prism>
 				</div>
 			</div>
 			<div v-else>
diff --git a/src/components/report/TypeTester.vue b/src/components/report/TypeTester.vue
index 673496d..50c89dd 100644
--- a/src/components/report/TypeTester.vue
+++ b/src/components/report/TypeTester.vue
@@ -73,10 +73,12 @@
 				@unlinkOpticalSize="unlinkOpticalSize"
 			/>
 			<div class="code">
-				<Prism language="html" v-if="hasLocalization">{{ html }}</Prism>
+				<Prism language="html" v-if="hasLocalization" :key="{ html }">{{
+					html
+				}}</Prism>
 				<div class="code-styles">
 					<CopyToClipboard :content="styles" />
-					<Prism language="css">{{ styles }}</Prism>
+					<Prism language="css" :key="{ styles }">{{ styles }}</Prism>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/report/VariableControls.vue b/src/components/report/VariableControls.vue
index 5bd9b24..390b9ed 100644
--- a/src/components/report/VariableControls.vue
+++ b/src/components/report/VariableControls.vue
@@ -105,7 +105,9 @@
 		</div>
 		<div class="code" v-if="showStyles">
 			<CopyToClipboard :content="variableStyles" />
-			<Prism language="css">{{ variableStyles }}</Prism>
+			<Prism language="css" :key="{ variableStyles }">{{
+				variableStyles
+			}}</Prism>
 		</div>
 	</div>
 </template>