From 8d1155224df75bac8578728c411ab4b06c480c83 Mon Sep 17 00:00:00 2001
From: Rene Luria <rene.luria@infomaniak.com>
Date: Fri, 10 Jul 2026 17:49:36 +0200
Subject: [PATCH] fix: resolve Prism syntax highlighting error in peer config
 modal

The PeerViewModal and InterfaceViewModal components displayed:
  Error: The language "undefined" has no grammar.

Root cause: vue-prism-component bundles its own instance of prismjs
(separate from the one imported elsewhere), so registering the ini
grammar on a different Prism instance had no effect on the one
actually performing the highlighting.

Fix: bypass vue-prism-component entirely. Import a single Prism
instance via a new helper (frontend/src/helpers/prism-setup.js) that
also registers the ini grammar, then render highlighted HTML directly
with <pre><code v-html="highlightedConfig">. This ensures the same
Prism object that owns the ini grammar is the one calling highlight().

Affected files:
- frontend/src/helpers/prism-setup.js (new): imports prismjs, defines
  the ini grammar on the Prism instance, re-exports it
- frontend/src/components/PeerViewModal.vue: replaces <Prism> with
  v-html using the shared Prism instance
- frontend/src/components/InterfaceViewModal.vue: same replacement
- frontend/src/main.js: removes the now-unused prism-setup import

Fixes #726
---
 .../src/components/InterfaceViewModal.vue     | 13 +++++--
 frontend/src/components/PeerViewModal.vue     | 12 +++++-
 frontend/src/helpers/prism-setup.js           | 39 +++++++++++++++++++
 frontend/src/main.js                          |  1 -
 4 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/helpers/prism-setup.js

diff --git a/frontend/src/components/InterfaceViewModal.vue b/frontend/src/components/InterfaceViewModal.vue
index b71c400..453cd6e 100644
--- a/frontend/src/components/InterfaceViewModal.vue
+++ b/frontend/src/components/InterfaceViewModal.vue
@@ -3,8 +3,7 @@ import Modal from "./Modal.vue";
 import {computed, ref, watch} from "vue";
 import { useI18n } from 'vue-i18n';
 import {interfaceStore} from "@/stores/interfaces";
-import Prism from 'vue-prism-component'
-import 'prismjs/components/prism-ini'
+import Prism from '@/helpers/prism-setup';
 
 const { t } = useI18n()
 
@@ -17,6 +16,14 @@ const props = defineProps({
 
 const configString = ref("")
 
+const highlightedConfig = computed(() => {
+  const grammar = Prism.languages.ini
+  if (grammar) {
+    return Prism.highlight(configString.value, grammar, 'ini')
+  }
+  return configString.value
+})
+
 const emit = defineEmits(['close'])
 
 const selectedInterface = computed(() => {
@@ -51,7 +58,7 @@ function close() {
 <template>
   <Modal :title="title" :visible="visible" @close="close">
     <template #default>
-      <Prism language="ini" :code="configString"></Prism>
+      <pre class="language-ini"><code class="language-ini" v-html="highlightedConfig"></code></pre>
     </template>
     <template #footer>
       <button class="btn btn-primary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
diff --git a/frontend/src/components/PeerViewModal.vue b/frontend/src/components/PeerViewModal.vue
index ed4130e..c526acf 100644
--- a/frontend/src/components/PeerViewModal.vue
+++ b/frontend/src/components/PeerViewModal.vue
@@ -5,7 +5,7 @@ import { interfaceStore } from "@/stores/interfaces";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { freshInterface, freshPeer, freshStats } from '@/helpers/models';
-import Prism from "vue-prism-component";
+import Prism from '@/helpers/prism-setup';
 import { notify } from "@kyvg/vue3-notification";
 import { settingsStore } from "@/stores/settings";
 import { profileStore } from "@/stores/profile";
@@ -81,6 +81,14 @@ const title = computed(() => {
 
 const configStyle = ref("wgquick")
 
+const highlightedConfig = computed(() => {
+  const grammar = Prism.languages.ini
+  if (grammar) {
+    return Prism.highlight(configString.value, grammar, 'ini')
+  }
+  return configString.value
+})
+
 watch(() => props.visible, async (newValue, oldValue) => {
   if (oldValue === false && newValue === true) { // if modal is shown
     await peers.LoadPeerConfig(selectedPeer.value.Identifier, configStyle.value)
@@ -217,7 +225,7 @@ function ConfigQrUrl() {
           <div id="collapseConfig" class="accordion-collapse collapse" aria-labelledby="headingConfig"
             data-bs-parent="#peerInformation" style="">
             <div class="accordion-body">
-              <Prism language="ini" :code="configString"></Prism>
+              <pre class="language-ini"><code class="language-ini" v-html="highlightedConfig"></code></pre>
             </div>
           </div>
         </div>
diff --git a/frontend/src/helpers/prism-setup.js b/frontend/src/helpers/prism-setup.js
new file mode 100644
index 0000000..627ab9d
--- /dev/null
+++ b/frontend/src/helpers/prism-setup.js
@@ -0,0 +1,39 @@
+import Prism from 'prismjs'
+
+Prism.languages.ini = {
+  comment: {
+    pattern: /(^[ \f\t\v]*)[#;][^\n\r]*/m,
+    lookbehind: true
+  },
+  section: {
+    pattern: /(^[ \f\t\v]*)\[[^\n\r\]]*\]?/m,
+    lookbehind: true,
+    inside: {
+      'section-name': {
+        pattern: /(^\[[ \f\t\v]*)[^ \f\t\v\]]+(?:[ \f\t\v]+[^ \f\t\v\]]+)*/,
+        lookbehind: true,
+        alias: 'selector'
+      },
+      punctuation: /\[|\]/
+    }
+  },
+  key: {
+    pattern: /(^[ \f\t\v]*)[^ \f\n\r\t\v=]+(?:[ \f\t\v]+[^ \f\n\r\t\v=]+)*(?=[ \f\t\v]*=)/m,
+    lookbehind: true,
+    alias: 'attr-name'
+  },
+  value: {
+    pattern: /(=[ \f\t\v]*)[^ \f\n\r\t\v]+(?:[ \f\t\v]+[^ \f\n\r\t\v]+)*/,
+    lookbehind: true,
+    alias: 'attr-value',
+    inside: {
+      'inner-value': {
+        pattern: /^("|').+(?=\1$)/,
+        lookbehind: true
+      }
+    }
+  },
+  punctuation: /=/
+}
+
+export default Prism
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 4c59e41..bae2bf8 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -22,7 +22,6 @@ import "@fontsource/nunito-sans/600.css";
 import "flag-icons/css/flag-icons.min.css"
 
 // Syntax Highlighting
-import 'prismjs'
 import 'prismjs/themes/prism-okaidia.css'
 
 const app = createApp(App);