Merge pull request #354 from defstat/i9840-2

[UI-LIBRARY][main] #9840 Remove vue3-highlightjs and add "highlightjs/vue-plugin". Use only XML language.

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.16",
+    "@highlightjs/vue-plugin": "^2.1.0",
     "@lk77/vue3-color": "^3.0.6",
     "@storybook/test": "^8.0.5",
     "@tinymce/tinymce-vue": "^5.1.1",
@@ -24,7 +25,7 @@
     "dropzone-vue3": "^1.0.2",
     "element-resize-event": "^3.0.6",
     "floating-vue": "^2.0.0-beta.24",
-    "highlight.js": "^10.4.1",
+    "highlight.js": "^11.9.0",
     "html-entities": "^1.3.1",
     "marked": "^4.2.4",
     "moment": "^2.29.4",

src/components/CodeHighlighter/CodeHighlighter.mdx

@@ -0,0 +1,19 @@
+import {Stories, Meta} from '@storybook/blocks';
+
+import * as CodeHighlighterStories from './CodeHighlighter.stories.js';
+
+<Meta of={CodeHighlighterStories} />
+
+# CodeHighlighter
+
+## Usage
+
+Use this component to display a formatted segment of code
+
+## Supported Languages
+
+The supported languages include:
+
+- XML: `language="xml"`
+
+<Stories />

src/components/CodeHighlighter/CodeHighlighter.stories.js

@@ -0,0 +1,38 @@
+import CodeHighlighter from './CodeHighlighter.vue';
+
+export default {
+	title: 'Components/CodeHighlighter',
+	component: CodeHighlighter,
+	render: (args) => ({
+		components: {CodeHighlighter},
+		setup() {
+			return {args};
+		},
+		template: '<code-highlighter :code=args.code :language=args.language />',
+	}),
+};
+
+const sampleXML = `<?xml version="1.0" encoding="UTF-8"?>
+<article>
+<title>Open Access in Research</title>
+<author>
+    <name>Jane Doe</name>
+    <affiliation>University of Knowledge</affiliation>
+</author>
+<journal>
+    <name>Journal of Open Science</name>
+    <year>2023</year>
+</journal>
+<doi>10.1234/jos.2023.001</doi>
+<license type="CC-BY">https://creativecommons.org/licenses/by/4.0/</license>
+<abstract>
+    This paper explores the significance of open access in scientific research.
+</abstract>
+</article>`;
+
+export const XML = {
+	args: {
+		code: sampleXML,
+		language: 'xml',
+	},
+};

src/components/CodeHighlighter/CodeHighlighter.vue

@@ -0,0 +1,46 @@
+<template>
+	<highlightjs :language="language" :code="code" />
+</template>
+
+<script>
+import xml from 'highlight.js/lib/languages/xml';
+import hljs from 'highlight.js/lib/core';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
+
+hljs.registerLanguage('xml', xml);
+
+// A map to store language modules
+const languageMap = {
+	xml,
+	// Add more language modules imported above
+};
+
+const supportedLanguages = Object.keys(languageMap);
+</script>
+
+<script setup>
+defineProps({
+	code: {
+		type: String,
+		required: true,
+	},
+	language: {
+		type: String,
+		required: true,
+		validator: (value) => {
+			if (!supportedLanguages.includes(value)) {
+				console.warn(`Invalid language prop: ${value}`);
+				return false;
+			}
+
+			return true;
+		},
+	},
+});
+
+const highlightjs = hljsVuePlugin.component;
+</script>
+
+<style>
+@import 'highlight.js/styles/github.css';
+</style>

src/pages/workflow/PublicationSectionJats.vue

@@ -41,7 +41,9 @@
 						<div v-if="this.workingJatsProps['loadingContentError']">
 							{{ this.workingJatsProps['loadingContentError'] }}
 						</div>
-						<pre v-else v-highlightjs="workingJatsContent"><code class="xml"></code></pre>
+						<div v-else>
+							<code-highlighter :code="workingJatsContent" language="xml" />
+						</div>
 					</div>
 					<div v-if="this.workingJatsProps['loadingContentError'] == null">
 						<div v-if="isDefaultContent" class="filePanel__hasData">
@@ -81,12 +83,14 @@ import PkpHeader from '@/components/Header/Header.vue';
 import ajaxError from '@/mixins/ajaxError';
 import dialog from '@/mixins/dialog.js';
 import FileUploader from '@/components/FileUploader/FileUploader.vue';
+import CodeHighlighter from '@/components/CodeHighlighter/CodeHighlighter.vue';
 
 export default {
 	components: {
 		FileUploader,
 		Modal,
 		PkpHeader,
+		CodeHighlighter,
 	},
 	mixins: [ajaxError, dialog],
 	props: {