From 3e818ef313767417d74fd32d40704ecfe2dc222c Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Tue, 21 May 2024 14:57:25 +0300
Subject: [PATCH 1/8] pkp/pkp-lib#9840 Remove vue3-highlightjs and add Add
 "highlightjs/vue-plugin". Use only XML language.

---
 src/pages/workflow/PublicationSectionJats.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/workflow/PublicationSectionJats.vue b/src/pages/workflow/PublicationSectionJats.vue
index f16416306..2a7a03d74 100644
--- a/src/pages/workflow/PublicationSectionJats.vue
+++ b/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>
+							<highlightjs language="xml" :code="workingJatsContent"/>
+						</div>
 					</div>
 					<div v-if="this.workingJatsProps['loadingContentError'] == null">
 						<div v-if="isDefaultContent" class="filePanel__hasData">

From 2e954457df5796286173965863f2d81ab0c54e4e Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Tue, 21 May 2024 18:44:57 +0300
Subject: [PATCH 2/8] pkp/pkp-lib#9840 Add CodeHighlighter as component

---
 .../CodeHighlighter/CodeHighlighter.vue       | 73 +++++++++++++++++++
 src/pages/workflow/PublicationSectionJats.vue |  4 +-
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CodeHighlighter/CodeHighlighter.vue

diff --git a/src/components/CodeHighlighter/CodeHighlighter.vue b/src/components/CodeHighlighter/CodeHighlighter.vue
new file mode 100644
index 000000000..914fbf16d
--- /dev/null
+++ b/src/components/CodeHighlighter/CodeHighlighter.vue
@@ -0,0 +1,73 @@
+<template>
+  <highlightjs
+    :language="language"
+    :code="code"
+  />
+</template>
+
+<script>
+import hljs from 'highlight.js/lib/core';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
+
+// Importing the language modules
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+import markdown from 'highlight.js/lib/languages/markdown';
+import css from 'highlight.js/lib/languages/css';
+import latex from 'highlight.js/lib/languages/latex';
+// Add more languages
+
+// A map to store language modules
+const languageMap = {
+    javascript,
+    xml,
+    markdown,
+    css,
+    latex,
+    // Add more languages here
+};
+
+const supportedLanguages = Object.keys(languageMap);
+
+export default {
+    components: {
+        highlightjs: hljsVuePlugin.component
+    },
+    props: {
+        code: {
+            type: String,
+            required: true
+        },
+
+        language: {
+            type: String,
+            required: true,
+            validator(value) {
+                if (!supportedLanguages.includes(value)) {
+                    console.error(`Unsupported language: ${value}. Supported languages are: ${supportedLanguages.join(', ')}`);
+                    return false;
+                }
+
+                return true;
+            }
+        }
+    },
+    created() {
+        this.loadLanguageModule(this.language);
+    },
+    methods: {
+        loadLanguageModule(language) {
+            const languageModule = languageMap[language];
+            if (languageModule) {
+                hljs.registerLanguage(language, languageModule);
+            } else {
+                console.error(`Language module for ${language} is not available.`);
+            }
+        }
+    }
+};
+</script>
+
+<style>
+    @import 'highlight.js/styles/default.css';
+</style>
\ No newline at end of file
diff --git a/src/pages/workflow/PublicationSectionJats.vue b/src/pages/workflow/PublicationSectionJats.vue
index 2a7a03d74..e21c48269 100644
--- a/src/pages/workflow/PublicationSectionJats.vue
+++ b/src/pages/workflow/PublicationSectionJats.vue
@@ -42,7 +42,7 @@
 							{{ this.workingJatsProps['loadingContentError'] }}
 						</div>
 						<div v-else>
-							<highlightjs language="xml" :code="workingJatsContent"/>
+							<code-highlighter :code="workingJatsContent" language="xml" />
 						</div>
 					</div>
 					<div v-if="this.workingJatsProps['loadingContentError'] == null">
@@ -83,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: {

From 1bf31322e64924057a4b9e88fafc9ad400a85109 Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Thu, 23 May 2024 12:08:28 +0300
Subject: [PATCH 3/8] pkp/pkp-lib#9840 Leave only XML as supported language

---
 .../CodeHighlighter/CodeHighlighter.vue       | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/CodeHighlighter/CodeHighlighter.vue b/src/components/CodeHighlighter/CodeHighlighter.vue
index 914fbf16d..db7c338d2 100644
--- a/src/components/CodeHighlighter/CodeHighlighter.vue
+++ b/src/components/CodeHighlighter/CodeHighlighter.vue
@@ -1,30 +1,23 @@
 <template>
-  <highlightjs
-    :language="language"
-    :code="code"
-  />
+    <highlightjs
+        :language="language"
+        :code="code"
+    />
 </template>
 
 <script>
-import hljs from 'highlight.js/lib/core';
+// import hljs from 'highlight.js/lib/core';
+import hljs from 'highlight.js/lib/common';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
 // Importing the language modules
-import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
-import markdown from 'highlight.js/lib/languages/markdown';
-import css from 'highlight.js/lib/languages/css';
-import latex from 'highlight.js/lib/languages/latex';
 // Add more languages
 
 // A map to store language modules
 const languageMap = {
-    javascript,
     xml,
-    markdown,
-    css,
-    latex,
-    // Add more languages here
+    // Add more language modules imported above
 };
 
 const supportedLanguages = Object.keys(languageMap);

From 2575193a32b4ad10ab5340cf506a04c103b8dee2 Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Thu, 23 May 2024 14:16:53 +0300
Subject: [PATCH 4/8] pkp/pkp-lib#9840 Add mdx and stories for new component

---
 .../CodeHighlighter/CodeHighlighter.mdx       | 19 +++++
 .../CodeHighlighter.stories.js                | 37 ++++++++
 .../CodeHighlighter/CodeHighlighter.vue       | 84 +++++++++----------
 3 files changed, 97 insertions(+), 43 deletions(-)
 create mode 100644 src/components/CodeHighlighter/CodeHighlighter.mdx
 create mode 100644 src/components/CodeHighlighter/CodeHighlighter.stories.js

diff --git a/src/components/CodeHighlighter/CodeHighlighter.mdx b/src/components/CodeHighlighter/CodeHighlighter.mdx
new file mode 100644
index 000000000..133d61929
--- /dev/null
+++ b/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 />
diff --git a/src/components/CodeHighlighter/CodeHighlighter.stories.js b/src/components/CodeHighlighter/CodeHighlighter.stories.js
new file mode 100644
index 000000000..290383506
--- /dev/null
+++ b/src/components/CodeHighlighter/CodeHighlighter.stories.js
@@ -0,0 +1,37 @@
+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>`;
+
+export const XML = {
+	args: {
+		code: sampleXML,
+		language: 'xml',
+	},
+};
diff --git a/src/components/CodeHighlighter/CodeHighlighter.vue b/src/components/CodeHighlighter/CodeHighlighter.vue
index db7c338d2..836a07e10 100644
--- a/src/components/CodeHighlighter/CodeHighlighter.vue
+++ b/src/components/CodeHighlighter/CodeHighlighter.vue
@@ -1,13 +1,9 @@
 <template>
-    <highlightjs
-        :language="language"
-        :code="code"
-    />
+	<highlightjs :language="language" :code="code" />
 </template>
 
 <script>
-// import hljs from 'highlight.js/lib/core';
-import hljs from 'highlight.js/lib/common';
+import hljs from 'highlight.js/lib/core';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
 // Importing the language modules
@@ -16,51 +12,53 @@ import xml from 'highlight.js/lib/languages/xml';
 
 // A map to store language modules
 const languageMap = {
-    xml,
-    // Add more language modules imported above
+	xml,
+	// Add more language modules imported above
 };
 
 const supportedLanguages = Object.keys(languageMap);
 
 export default {
-    components: {
-        highlightjs: hljsVuePlugin.component
-    },
-    props: {
-        code: {
-            type: String,
-            required: true
-        },
+	components: {
+		highlightjs: hljsVuePlugin.component,
+	},
+	props: {
+		code: {
+			type: String,
+			required: true,
+		},
 
-        language: {
-            type: String,
-            required: true,
-            validator(value) {
-                if (!supportedLanguages.includes(value)) {
-                    console.error(`Unsupported language: ${value}. Supported languages are: ${supportedLanguages.join(', ')}`);
-                    return false;
-                }
+		language: {
+			type: String,
+			required: true,
+			validator(value) {
+				if (!supportedLanguages.includes(value)) {
+					console.error(
+						`Unsupported language: ${value}. Supported languages are: ${supportedLanguages.join(', ')}`,
+					);
+					return false;
+				}
 
-                return true;
-            }
-        }
-    },
-    created() {
-        this.loadLanguageModule(this.language);
-    },
-    methods: {
-        loadLanguageModule(language) {
-            const languageModule = languageMap[language];
-            if (languageModule) {
-                hljs.registerLanguage(language, languageModule);
-            } else {
-                console.error(`Language module for ${language} is not available.`);
-            }
-        }
-    }
+				return true;
+			},
+		},
+	},
+	created() {
+		this.loadLanguageModule(this.language);
+	},
+	methods: {
+		loadLanguageModule(language) {
+			const languageModule = languageMap[language];
+			if (languageModule) {
+				hljs.registerLanguage(language, languageModule);
+			} else {
+				console.error(`Language module for ${language} is not available.`);
+			}
+		},
+	},
 };
 </script>
 
 <style>
-    @import 'highlight.js/styles/default.css';
-</style>
\ No newline at end of file
+@import 'highlight.js/styles/default.css';
+</style>

From 58b7ee022c5100bdf7fec132c5ad100cc11227a3 Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Thu, 23 May 2024 14:27:19 +0300
Subject: [PATCH 5/8] pkp/pkp-lib#9840 Minor fix

---
 src/components/CodeHighlighter/CodeHighlighter.stories.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CodeHighlighter/CodeHighlighter.stories.js b/src/components/CodeHighlighter/CodeHighlighter.stories.js
index 290383506..6bc5737b4 100644
--- a/src/components/CodeHighlighter/CodeHighlighter.stories.js
+++ b/src/components/CodeHighlighter/CodeHighlighter.stories.js
@@ -27,7 +27,8 @@ const sampleXML = `<?xml version="1.0" encoding="UTF-8"?>
 <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>`;
+</abstract>
+</article>`;
 
 export const XML = {
 	args: {

From 5aa324599066961c19753e8fdfcca4a47801002b Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Thu, 23 May 2024 14:33:29 +0300
Subject: [PATCH 6/8] pkp/pkp-lib#9840 npm packages added

---
 package-lock.json | 20 +++++++++++++++-----
 package.json      |  3 ++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 76bcb8b78..b526d582a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "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",
@@ -20,7 +21,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",
@@ -2638,6 +2639,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@highlightjs/vue-plugin": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+      "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+      "peerDependencies": {
+        "highlight.js": "^11.0.1",
+        "vue": "^3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -9298,11 +9308,11 @@
       "dev": true
     },
     "node_modules/highlight.js": {
-      "version": "10.7.3",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
       "engines": {
-        "node": "*"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/hosted-git-info": {
diff --git a/package.json b/package.json
index 3acec471d..8cf7ad2fd 100644
--- a/package.json
+++ b/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",

From 1b4ed7041b56a91c2c36a842cc545a9d5a85e6eb Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Thu, 23 May 2024 19:22:52 +0300
Subject: [PATCH 7/8] pkp/pkp-lib Component compatible with composition API -
 format applied

---
 .../CodeHighlighter/CodeHighlighter.vue       | 76 +++++++++----------
 1 file changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/CodeHighlighter/CodeHighlighter.vue b/src/components/CodeHighlighter/CodeHighlighter.vue
index 836a07e10..9b9380258 100644
--- a/src/components/CodeHighlighter/CodeHighlighter.vue
+++ b/src/components/CodeHighlighter/CodeHighlighter.vue
@@ -2,7 +2,8 @@
 	<highlightjs :language="language" :code="code" />
 </template>
 
-<script>
+<script setup>
+import {defineProps, onBeforeMount} from 'vue';
 import hljs from 'highlight.js/lib/core';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
@@ -18,47 +19,44 @@ const languageMap = {
 
 const supportedLanguages = Object.keys(languageMap);
 
-export default {
-	components: {
-		highlightjs: hljsVuePlugin.component,
+const props = defineProps({
+	code: {
+		type: String,
+		required: true,
 	},
-	props: {
-		code: {
-			type: String,
-			required: true,
-		},
-
-		language: {
-			type: String,
-			required: true,
-			validator(value) {
-				if (!supportedLanguages.includes(value)) {
-					console.error(
-						`Unsupported language: ${value}. Supported languages are: ${supportedLanguages.join(', ')}`,
-					);
-					return false;
-				}
-
-				return true;
-			},
-		},
-	},
-	created() {
-		this.loadLanguageModule(this.language);
+	language: {
+		type: String,
+		required: true,
 	},
-	methods: {
-		loadLanguageModule(language) {
-			const languageModule = languageMap[language];
-			if (languageModule) {
-				hljs.registerLanguage(language, languageModule);
-			} else {
-				console.error(`Language module for ${language} is not available.`);
-			}
-		},
-	},
-};
+});
+
+function loadLanguageModule(language) {
+	const languageModule = languageMap[language];
+	if (languageModule) {
+		hljs.registerLanguage(language, languageModule);
+	} else {
+		console.error(`Language module for ${language} is not available.`);
+	}
+}
+
+// Validate the language prop
+function validateLanguage(language) {
+	if (!supportedLanguages.includes(language)) {
+		console.error(
+			`Unsupported language: ${language}. Supported languages are: ${supportedLanguages.join(', ')}`,
+		);
+	}
+}
+
+validateLanguage(props.language);
+
+onBeforeMount(() => {
+	loadLanguageModule(props.language);
+});
+
+const highlightjs = hljsVuePlugin.component;
 </script>
 
 <style>
-@import 'highlight.js/styles/default.css';
+@import 'highlight.js/styles/github.css';
 </style>

From 42feca5d95526564b13cfa012200656a2ac23599 Mon Sep 17 00:00:00 2001
From: Dimitris Efstathiou <defstat@gmail.com>
Date: Tue, 28 May 2024 14:37:48 +0300
Subject: [PATCH 8/8] pkp/pkp-lib#9840 Code Rearrangement

---
 .../CodeHighlighter/CodeHighlighter.vue       | 44 ++++++-------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/src/components/CodeHighlighter/CodeHighlighter.vue b/src/components/CodeHighlighter/CodeHighlighter.vue
index 9b9380258..5917b2ce4 100644
--- a/src/components/CodeHighlighter/CodeHighlighter.vue
+++ b/src/components/CodeHighlighter/CodeHighlighter.vue
@@ -2,14 +2,12 @@
 	<highlightjs :language="language" :code="code" />
 </template>
 
-<script setup>
-import {defineProps, onBeforeMount} from 'vue';
+<script>
+import xml from 'highlight.js/lib/languages/xml';
 import hljs from 'highlight.js/lib/core';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
-// Importing the language modules
-import xml from 'highlight.js/lib/languages/xml';
-// Add more languages
+hljs.registerLanguage('xml', xml);
 
 // A map to store language modules
 const languageMap = {
@@ -18,8 +16,10 @@ const languageMap = {
 };
 
 const supportedLanguages = Object.keys(languageMap);
+</script>
 
-const props = defineProps({
+<script setup>
+defineProps({
 	code: {
 		type: String,
 		required: true,
@@ -27,33 +27,17 @@ const props = defineProps({
 	language: {
 		type: String,
 		required: true,
+		validator: (value) => {
+			if (!supportedLanguages.includes(value)) {
+				console.warn(`Invalid language prop: ${value}`);
+				return false;
+			}
+
+			return true;
+		},
 	},
 });
 
-function loadLanguageModule(language) {
-	const languageModule = languageMap[language];
-	if (languageModule) {
-		hljs.registerLanguage(language, languageModule);
-	} else {
-		console.error(`Language module for ${language} is not available.`);
-	}
-}
-
-// Validate the language prop
-function validateLanguage(language) {
-	if (!supportedLanguages.includes(language)) {
-		console.error(
-			`Unsupported language: ${language}. Supported languages are: ${supportedLanguages.join(', ')}`,
-		);
-	}
-}
-
-validateLanguage(props.language);
-
-onBeforeMount(() => {
-	loadLanguageModule(props.language);
-});
-
 const highlightjs = hljsVuePlugin.component;
 </script>