From 63a3c33fa6c17aa9496eb5e93f76024e516c1b1f Mon Sep 17 00:00:00 2001
From: Florian Hotze <dev@florianhotze.com>
Date: Fri, 16 May 2025 12:10:36 +0200
Subject: [PATCH] Make Vue clipboard plugin available globally (#3192)

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../web/src/components/util/clipboard-icon.vue              | 5 -----
 bundles/org.openhab.ui/web/src/js/app.js                    | 5 +++++
 .../org.openhab.ui/web/src/pages/developer/log-viewer.vue   | 6 +-----
 .../web/src/pages/settings/file-definition-mixin.js         | 5 -----
 4 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/util/clipboard-icon.vue b/bundles/org.openhab.ui/web/src/components/util/clipboard-icon.vue
index c32714c82..0a98db0a9 100644
--- a/bundles/org.openhab.ui/web/src/components/util/clipboard-icon.vue
+++ b/bundles/org.openhab.ui/web/src/components/util/clipboard-icon.vue
@@ -8,11 +8,6 @@
 </style>
 
 <script>
-import Vue from 'vue'
-import Clipboard from 'v-clipboard'
-
-Vue.use(Clipboard)
-
 export default {
   props: ['value', 'size'],
   methods: {
diff --git a/bundles/org.openhab.ui/web/src/js/app.js b/bundles/org.openhab.ui/web/src/js/app.js
index 490c6a644..8004a7407 100644
--- a/bundles/org.openhab.ui/web/src/js/app.js
+++ b/bundles/org.openhab.ui/web/src/js/app.js
@@ -58,6 +58,10 @@ Vue.use(Trend)
 import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
 
+// Import clipboard plugin
+import Clipboard from 'v-clipboard'
+Vue.use(Clipboard)
+
 // Extend prototype with the openHAB API interface
 Vue.prototype.$oh = openhab
 
@@ -74,6 +78,7 @@ const app = new Vue({
   }
 })
 
+// Register global components
 Vue.component('oh-icon', OHIconComponent)
 Vue.component('generic-widget-component', GenericWidgetComponent)
 Vue.component('developer-dock-icon', DeveloperDockIcon)
diff --git a/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue b/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue
index b41f1569c..82686f894 100644
--- a/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue
@@ -434,11 +434,6 @@
 </style>
 
 <script lang="ts">
-import Vue from 'vue'
-import Clipboard from 'v-clipboard'
-
-Vue.use(Clipboard)
-
 import MovablePopupMixin from '@/pages/settings/movable-popup-mixin'
 
 export default {
@@ -916,6 +911,7 @@ export default {
       })
 
       // Copy to clipboard
+      // Uses the Clipboard API to write the ClipboardItem, as v-clipboard does not support HTML. This might not work in insecure contexts.
       navigator.clipboard
         .write([clipboardItem])
         .then(() => {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/file-definition-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/file-definition-mixin.js
index 0a91fb4f9..cb3d00194 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/file-definition-mixin.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/file-definition-mixin.js
@@ -1,8 +1,3 @@
-import Vue from 'vue'
-import Clipboard from 'v-clipboard'
-
-Vue.use(Clipboard)
-
 function executeFileDefinitionCopy (vueInstance, objectType, objectTypeLabel, objectIds, copiedObjectsLabel, fileFormatLabel, mediaType) {
   const progressDialog = vueInstance.$f7.dialog.progress(`Loading ${objectTypeLabel} ${fileFormatLabel} definition...`)