feat: add a button which copies citation value to clipboard

src/components/metadata/CopyCitation.vue

@@ -0,0 +1,51 @@
+<template>
+  <BaseButton
+    display="mono"
+    icon="copy"
+    icon-position="right"
+    text="Copy citation"
+    class="t-mt-[10px] t-ml-[20px]"
+    @click="copyContentToClipboard()"
+  />
+  <Message
+    v-if="copiedCitation"
+    :pt="{
+      root: 't-bg-green-100 t-text-green-500 t-w-[200px] t-h-[25px] t-mt-[10px] t-ml-[20px] t-rounded',
+      wrapper: 't-flex t-flex-row t-relative',
+      icon: 't-hidden',
+      text: 't-pl-[10px]',
+      closebutton: {
+        class: 't-absolute t-right-[10px]',
+        onclick: onCloseClick,
+      },
+    }"
+  >
+    Copied successfully!
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Message from "primevue/message";
+import BaseButton from "@/components/base/BaseButton.vue";
+import { ref } from "vue";
+
+const props = defineProps<{
+  value: string;
+}>();
+
+let copiedCitation = ref(false);
+
+async function copyContentToClipboard() {
+  try {
+    await navigator.clipboard.writeText(props.value);
+    copiedCitation.value = true;
+    setTimeout(() => (this.copiedCitation = false), 1500);
+  } catch (err) {
+    console.error("Citation could not be copied in the keyboard");
+  }
+}
+
+function onCloseClick() {
+  copiedCitation.value = false;
+}
+</script>

src/components/metadata/MetadataItem.vue

@@ -15,6 +15,10 @@
       v-else
       :value="item.value"
     />
+    <CopyCitation
+      v-if="showCopyCitation(item.key, configStore.config)"
+      :value="item.value"
+    />
     <MetadataItem
       v-for="(childItem, idx) in childItems"
       :key="idx"
@@ -25,31 +29,62 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import MetadataLink from '@/components/metadata/MetadataLink.vue';
-import MetadataValue from '@/components/metadata/MetadataValue.vue';
+import { computed } from "vue";
+import MetadataLink from "@/components/metadata/MetadataLink.vue";
+import MetadataValue from "@/components/metadata/MetadataValue.vue";
+import CopyCitation from "@/components/metadata/CopyCitation.vue";
+import { useConfigStore } from "@/stores/config";
 
 const props = defineProps<{
-  item: Metadata,
+  item: Metadata;
 }>();
 
-const label = computed<string>(() => props.item?.key || 'other');
+const label = computed<string>(() => props.item?.key || "other");
 const childItems = computed<Metadata>(() => props.item?.metadata || []);
+const configStore = useConfigStore();
 
 function isLink(): boolean {
-  const regex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
-  const matches = (typeof props.item?.key === 'string') ? props.item?.key?.match(regex) : null;
+  const regex =
+    /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+  const matches =
+    typeof props.item?.key === "string" ? props.item?.key?.match(regex) : null;
 
   return matches !== null;
 }
 
+function getMetadataView(panels) {
+  let panelMetadata = panels.filter(
+    (panel) => panel.label.toLowerCase() === "metadata"
+  );
+  let metadataView;
+  if (panelMetadata.length > 0) {
+    // when metadata is one separate panel
+    metadataView = panelMetadata[0].views[0];
+  } else {
+    // when there is one panel containing content and metadata views
+    const panelContainingMetadata = panels.filter((panel) =>
+      panel.label.toLowerCase().includes("metadata")
+    )[0];
+    metadataView = panelContainingMetadata.views.filter(
+      (view) => view.label.toLowerCase() === "metadata"
+    )[0];
+  }
+  return metadataView;
+}
+
+function showCopyCitation(key, config) {
+  const metadataView = getMetadataView(config.panels);
+  // when we retrieve each MetadataItem, we want to know whether we are in the row of the citation
+  if (metadataView.connector.options.citationKey) {
+    return metadataView.connector.options.citationKey === key;
+  }
+  return false;
+}
 </script>
 
 <style scoped>
-
 .nested-metadata {
   margin-left: 8px;
   margin-top: 2.5px;
 }
-
 </style>