From 0be33fb337e8d82474922c0fdf9555aa328cd729 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Wed, 3 Aug 2022 12:47:00 +0200
Subject: refactor(display): mutualized code display

---
 src/tools/json-viewer/json-viewer.vue | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

(limited to 'src/tools/json-viewer/json-viewer.vue')

diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue
index 701aebc..00af91d 100644
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -17,26 +17,16 @@
     />
   </n-form-item>
   <n-form-item label="Prettify version of your json">
-    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
-      <n-config-provider :hljs="hljs">
-        <n-code :code="cleanJson" language="json" :trim="false" />
-      </n-config-provider>
-      <n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
-    </n-card>
+    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
   </n-form-item>
 </template>
 
 <script setup lang="ts">
-import { useCopy } from '@/composable/copy';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { useValidation } from '@/composable/validation';
-import { useElementSize } from '@vueuse/core';
-import hljs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
 import { computed, ref } from 'vue';
 
-hljs.registerLanguage('json', json);
 const inputElement = ref<HTMLElement>();
-const { height: inputElementHeight } = useElementSize(inputElement);
 
 const rawJson = ref('{"hello": "world"}');
 const cleanJson = computed(() => {
@@ -47,8 +37,6 @@ const cleanJson = computed(() => {
   }
 });
 
-const { copy } = useCopy({ source: cleanJson });
-
 const rawJsonValidation = useValidation({
   source: rawJson,
   rules: [
-- 
cgit v1.2.3