🚑 Add copy button for markdown code

argilla-io · Jul 20, 2023 · f8a5c0c · f8a5c0c
1 parent 735cd1f
commit f8a5c0c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 73 deletions.
diff --git a/frontend/components/base/BaseCode.vue b/frontend/components/base/BaseCode.vue
@@ -1,14 +1,9 @@
 <template>
-  <div class="code">
-    <pre>
-      <code v-highlight class="python">{{ code }}</code>
-    </pre>
-    <base-action-tooltip class="code__button" tooltip="Copied">
-      <a href="#" @click.prevent="copy(code)">
-        <svgicon name="copy" width="16" height="16" />
-      </a>
-    </base-action-tooltip>
-  </div>
+  <base-action-tooltip class="button" tooltip="Copied">
+    <a href="#" @click.prevent="copy(code)">
+      <svgicon name="copy" width="16" height="16" />
+    </a>
+  </base-action-tooltip>
 </template>
 
 <script>
@@ -29,68 +24,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.code {
-  position: relative;
-  white-space: normal;
-  :deep(pre) {
-    white-space: normal;
-  }
-  :deep(code) {
-    white-space: pre-line;
-  }
-  &__button {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-    svg {
-      fill: palette(white);
-    }
-  }
-}
-
-.hljs {
-  position: relative;
-  font-family: monospace, serif;
-  margin: 0;
-  background-color: #333346;
-  color: white;
-  padding: 2em !important;
-  border-radius: $border-radius;
-  text-align: left;
-  font-weight: 500;
-  @include font-size(13px);
-}
-:deep() {
-  .hljs-keyword,
-  .hljs-selector-tag,
-  .hljs-literal,
-  .hljs-section,
-  .hljs-link {
-    color: #3ef070;
-    font-weight: bold;
-  }
-  .hljs-deletion,
-  .hljs-number,
-  .hljs-quote,
-  .hljs-selector-class,
-  .hljs-selector-id,
-  .hljs-string,
-  .hljs-template-tag,
-  .hljs-type {
-    color: #febf96;
-  }
-  .hljs-string,
-  .hljs-title,
-  .hljs-name,
-  .hljs-type,
-  .hljs-attribute,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-addition,
-  .hljs-variable,
-  .hljs-template-tag,
-  .hljs-template-variable {
-    color: #a0c7ee;
+.button {
+  position: absolute !important;
+  top: 1em;
+  right: 1em;
+  svg {
+    fill: palette(white);
   }
 }
 </style>
diff --git a/frontend/components/base/render-markdown/RenderMarkdown.base.component.vue b/frontend/components/base/render-markdown/RenderMarkdown.base.component.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="markdown-render" v-html="markdownToHtml" />
+  <div class="markdown-render" v-html="markdownToHtml" v-copy-code />
 </template>
 <script>
 import { marked } from "marked";

diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
@@ -72,6 +72,7 @@ export default {
     { src: "~/plugins/custom-directives/optional-field.directive.js" },
     { src: "~/plugins/custom-directives/prefix-star.directive.js" },
     { src: "~/plugins/custom-directives/tooltip.directive.js" },
+    { src: "~/plugins/custom-directives/copy-code.directive.js" },
     { src: "~plugins/vue-draggable.js" },
   ],
 

diff --git a/frontend/plugins/custom-directives/copy-code.directive.js b/frontend/plugins/custom-directives/copy-code.directive.js
@@ -0,0 +1,28 @@
+import Vue from "vue";
+import BaseCodeVue from "~/components/base/BaseCode.vue";
+
+Vue.directive("copy-code", {
+  bind: (el, _, node) => {
+    const preElements = el.getElementsByTagName("PRE");
+
+    for (const pre of preElements) {
+      const code = pre.children[0].innerText;
+
+      const container = document.createElement("div");
+      container.style.position = "relative";
+
+      const baseCodeComponent = Vue.extend(BaseCodeVue);
+      const instance = new baseCodeComponent({
+        propsData: { code },
+        $copyToClipboard: node.context.$copyToClipboard,
+      });
+
+      instance.$mount();
+
+      pre.parentNode.replaceChild(container, pre);
+
+      container.appendChild(pre);
+      container.appendChild(instance.$el);
+    }
+  },
+});