From 8d7f904fc516ac6d448f2bcf579287aedfe82f6f Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Sat, 18 May 2024 12:08:17 +0300
Subject: [PATCH] pkp/pkp-lib#9840 Remove vue3-highlightjs and from
 highlight.js use only XML language

---
 src/pages/workflow/PublicationSectionJats.vue | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/pages/workflow/PublicationSectionJats.vue b/src/pages/workflow/PublicationSectionJats.vue
index f16416306..841e49708 100644
--- a/src/pages/workflow/PublicationSectionJats.vue
+++ b/src/pages/workflow/PublicationSectionJats.vue
@@ -41,7 +41,7 @@
 						<div v-if="this.workingJatsProps['loadingContentError']">
 							{{ this.workingJatsProps['loadingContentError'] }}
 						</div>
-						<pre v-else v-highlightjs="workingJatsContent"><code class="xml"></code></pre>
+						<pre><code ref="highlightedCode" class="xml">{{ workingJatsContent }}</code></pre>
 					</div>
 					<div v-if="this.workingJatsProps['loadingContentError'] == null">
 						<div v-if="isDefaultContent" class="filePanel__hasData">
@@ -82,6 +82,12 @@ import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import FileUploader from '@/components/FileUploader/FileUploader.vue';
 
+import hljs from 'highlight.js/lib/core';
+import xml from 'highlight.js/lib/languages/xml';
+
+// Register the XML language with Highlight.js
+hljs.registerLanguage('xml', xml);
+
 export default {
 	components: {
 		FileUploader,
@@ -287,6 +293,14 @@ export default {
 				document.body.removeChild(link);
 			}
 		},
+		highlightCode() {
+			this.$nextTick(() => {
+				const codeElement = this.$refs.highlightedCode;
+				if (codeElement) {
+					hljs.highlightElement(codeElement);
+				}
+			});
+		},
 	},
 	watch: {
 		newJatsFiles(newValue, oldValue) {
@@ -305,7 +319,12 @@ export default {
 			if (newValue != null) {
 				this.fetchWorkingJatsFile();
 			}
-		}
+		},
+		hasLoadedContent(newVal) {
+			if (newVal) {
+				this.highlightCode();
+			}
+		},
 	}
 };
 </script>