Add 'copy' button, use translations for buttons

src/components/code.vue

@@ -8,27 +8,51 @@
         class="inline-progress"
       />
     </i>
+
     <div class="generate-types-textarea">
       <pre v-html="rendered" v-if="rendered" />
       <v-progress-circular indeterminate v-else />
     </div>
-    <v-button
-      class="downloadBtn"
-      v-on:click="downloadTypes"
-      v-if="this.downloadName"
-      ><v-icon
-        name="cloud_download"
-        style="margin-right: 8px"
-        :disabled="!types"
-      />
-      Download</v-button
-    >
+
+
+    <div class="buttonRow">
+      <v-button
+        class="copyBtn"
+        v-if="isCopySupported"
+        @click="copyValue"
+      >
+        <v-icon
+          name="content_copy"
+          style="margin-right: 8px"
+          :disabled="!types"
+        />
+        {{ t('copy') }}
+      </v-button>
+
+      <v-button
+        class="downloadBtn"
+        v-on:click="downloadTypes"
+        v-if="this.downloadName"
+      >
+        <v-icon
+          name="cloud_download"
+          style="margin-right: 8px"
+          :disabled="!types"
+        />
+        {{ t('download') }}
+      </v-button>
+    </div>
+
   </div>
 </template>
 
+
 <script lang="ts">
 import Prism from "prismjs";
 import download from "lib/download";
+import { useStores } from '@directus/extensions-sdk';
+import { useClipboard } from "utils/use-clipboard";
+import { useI18n } from 'vue-i18n';
 
 export default {
   props: {
@@ -51,6 +75,18 @@ export default {
       download(this.value, this.downloadName, "application/json");
     },
   },
+  setup(props) {
+    const { useNotificationsStore } = useStores();
+    const notificationStore = useNotificationsStore();	
+    const { t } = useI18n();
+    const { isCopySupported, copyToClipboard } = useClipboard();
+
+    async function copyValue() {
+      await copyToClipboard(props.value, notificationStore);
+    };
+
+    return { isCopySupported, copyValue, t }
+  }
 };
 </script>
 
@@ -85,11 +121,17 @@ export default {
   border-color: var(--primary);
 }
 
-.downloadBtn {
-  align-self: flex-end;
+.buttonRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   margin-top: 15px;
 }
 
+.buttonRow>div {
+  margin-left: 15px;
+}
+
 .inline-progress {
   --v-progress-circular-size: 1em;
   display: inline;

src/utils/use-clipboard.ts

@@ -0,0 +1,67 @@
+/**
+ * Composable to access the clipboard api and check if the api is available
+ * 
+ * Based on the apps own composable
+ * @see https://github.com/directus/directus/blob/main/app/src/composables/use-clipboard.ts
+ * 
+ * @NOTE in contrast to the original app's solution we need to pass the notification store instance.
+ * @NOTE in the future the app components might get etracted into their own package. Once this is happened it's possible that we could use the app's default composable
+ */
+
+
+ import { computed } from 'vue';
+ import { useI18n } from 'vue-i18n';
+
+
+ type Message = {
+   success?: string;
+   fail?: string;
+ };
+
+
+
+ export function useClipboard() {
+   const { t } = useI18n();
+
+   const isCopySupported = computed(() => {
+     return !!navigator?.clipboard?.writeText;
+   });
+
+   const isPasteSupported = computed(() => {
+     return !!navigator?.clipboard?.readText;
+   });
+
+   return { isCopySupported, isPasteSupported, copyToClipboard, pasteFromClipboard };
+
+   async function copyToClipboard(value: string, notificationStore: any, message?: Message): Promise<boolean> {
+     try {
+       await navigator?.clipboard?.writeText(value);
+       notificationStore.add({
+         title: message?.success ?? t('copy_raw_value_success'),
+       });
+       return true;
+     } catch (err: any) {
+       notificationStore.add({
+         type: 'error',
+         title: message?.fail ?? t('copy_raw_value_fail'),
+       });
+       return false;
+     }
+   }
+
+   async function pasteFromClipboard(notificationStore: any, message?: Message): Promise<string | null> {
+     try {
+       const pasteValue = await navigator?.clipboard?.readText();
+       notificationStore.add({
+         title: message?.success ?? t('paste_raw_value_success'),
+       });
+       return pasteValue;
+     } catch (err: any) {
+       notificationStore.add({
+         type: 'error',
+         title: message?.fail ?? t('paste_raw_value_fail'),
+       });
+       return null;
+     }
+   }
+ }