feat: copy source button

histoire-dev · Feb 14, 2022 · f928e9a · f928e9a
1 parent 13a8d0b
commit f928e9a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/packages/histoire/src/client/app/components/StorySourceCode.vue b/packages/histoire/src/client/app/components/StorySourceCode.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { computed, onMounted, PropType, ref, shallowRef, watch } from 'vue'
 import { getHighlighter, Highlighter, setCDN } from 'shiki'
+import { Icon } from '@iconify/vue'
 import { generateSourceCode } from '../codegen/vue3'
 import { Variant } from '../types'
 import { isDark } from '../util/dark'
 import { unindent } from '../codegen/util'
+import { useClipboard } from '@vueuse/core'
 
 const props = defineProps({
  variant: {
@@ -57,10 +59,15 @@ const sourceHtml = computed(() => highlighter.value?.codeToHtml(sourceCode.value
  lang: 'html',
  theme: isDark.value ? 'github-dark' : 'github-light',
 }))
+
+// Copy
+const { copy, copied } = useClipboard()
+
+const copySourceCode = () => copy(sourceCode.value)
 </script>
 
 <template>
- <div class="htw-bg-zinc-100 dark:htw-bg-zinc-800 htw-h-full htw-overflow-hidden">
+ <div class="htw-bg-zinc-100 dark:htw-bg-zinc-800 htw-h-full htw-overflow-hidden htw-relative">
  <div
  v-if="error"
  class="htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm"
@@ -70,17 +77,35 @@ const sourceHtml = computed(() => highlighter.value?.codeToHtml(sourceCode.value
 
  <textarea
  v-else-if="!sourceHtml"
- class="__histoire-code-placeholder htw-w-full htw-h-full htw-p-2 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
+ class="__histoire-code-placeholder htw-w-full htw-h-full htw-p-2.5 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
  :value="sourceCode"
  readonly
  />
  <!-- eslint-disable vue/no-v-html -->
  <div
  v-else
- class="__histoire-code htw-w-full htw-h-full htw-p-2 htw-overflow-auto"
+ class="__histoire-code htw-w-full htw-h-full htw-p-2.5 htw-overflow-auto"
  v-html="sourceHtml"
  />
  <!-- eslint-enable vue/no-v-html -->
+
+ <!-- Toolbar -->
+ <div
+ v-if="!error"
+ class="htw-absolute htw-top-2 htw-right-6 htw-p-1 htw-bg-zinc-100 dark:htw-bg-zinc-800"
+ >
+ <Icon
+ v-tooltip="{
+ content: 'Copied!',
+ triggers: [],
+ shown: copied,
+ distance: 12,
+ }"
+ icon="cil:copy"
+ class="htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer"
+ @click="copySourceCode()"
+ />
+ </div>
  </div>
 </template>
 

diff --git a/packages/histoire/src/client/app/index.ts b/packages/histoire/src/client/app/index.ts
@@ -9,7 +9,9 @@ import { router } from './router'
 
 const app = createApp(App)
 app.use(createPinia())
-app.use(FloatingVue)
+app.use(FloatingVue, {
+ overflowPadding: 4,
+})
 app.use(router)
 registerGlobalComponents(app)
 app.mount('#app')