From 712a5ea76668e6deed9ac92177b9b4d7c702b520 Mon Sep 17 00:00:00 2001
From: Rene Luria <rene@luria.ch>
Date: Mon, 13 Jul 2026 07:58:13 +0200
Subject: [PATCH] fix: resolve Prism syntax highlighting error in peer config
 modal (#727)

* 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

* Revert "fix: resolve Prism syntax highlighting error in peer config modal"

This reverts commit 8d1155224df75bac8578728c411ab4b06c480c83.

* fix: resolve Prism syntax highlighting error in peer config modal

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

Root cause: Vite bundled prismjs as separate instances per lazy-loaded
chunk, so the ini grammar registered in one instance was invisible to
vue-prism-component which used a different instance.

Fix:
- Add dedupe: ['prismjs'] to vite.config.mjs to force a single Prism
    instance across all chunks
- Add the missing 'prismjs/components/prism-ini' import in
    PeerViewModal.vue (InterfaceViewModal already had it)
---
 frontend/src/components/PeerViewModal.vue | 1 +
 frontend/vite.config.mjs                  | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/PeerViewModal.vue b/frontend/src/components/PeerViewModal.vue
index ed4130e..697ec26 100644
--- a/frontend/src/components/PeerViewModal.vue
+++ b/frontend/src/components/PeerViewModal.vue
@@ -6,6 +6,7 @@ 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 'prismjs/components/prism-ini';
 import { notify } from "@kyvg/vue3-notification";
 import { settingsStore } from "@/stores/settings";
 import { profileStore } from "@/stores/profile";
diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
index e0670af..e94b7c6 100644
--- a/frontend/vite.config.mjs
+++ b/frontend/vite.config.mjs
@@ -10,7 +10,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+    },
+    dedupe: ['prismjs']
   },
   build: {
     //