feat: make variables copyable

Author: Justineo

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 # Changelog
 
+## 0.10.0
+
+- Variables in code panels are now copyable.
+
 ## 0.9.0
 
 - Updated the script rewrite logic.

components/Code.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useCopy } from '@/composables'
+import { transformHTML } from '@/utils/dom'
 
 import IconButton from './IconButton.vue'
 import Copy from './icons/Copy.vue'
@@ -12,7 +13,7 @@ const props = defineProps<{
 }>()
 
 const prismAlias: Record<string, string> = {
-  vue: 'html',
+  vue: 'html'
 }
 
 const lang = computed(() => {
@@ -29,11 +30,36 @@ const highlighted = computed(() => {
     return props.code
   }
 
-  return Prism.highlight(props.code, Prism.languages[lang.value], lang.value)
+  const html = Prism.highlight(props.code, Prism.languages[lang.value], lang.value)
+
+  return transformHTML(html, (tpl) => {
+    tpl.querySelectorAll<HTMLElement>('.token.variable, .token.constant').forEach((el) => {
+      el.setAttribute('tabindex', '0')
+      el.classList.add('copyable')
+      el.dataset.tooltipType = 'text'
+      el.dataset.tooltip = 'Copy'
+      el.innerHTML = `<span>${el.innerHTML}</span>`
+    })
+
+    tpl.querySelectorAll('.token.number + .token.unit').forEach((el) => {
+      const span = document.createElement('span')
+      span.className = 'token dimension'
+      el.parentNode!.insertBefore(span, el.nextElementSibling)
+      span.appendChild(el.previousElementSibling!)
+      span.appendChild(el)
+    })
+  })
 })
 
 const code = computed(() => props.code)
 const copy = useCopy(code)
+
+function handleClick(event: MouseEvent) {
+  const target = event.target as HTMLElement
+  if (target.closest('.token.copyable')) {
+    copy(target)
+  }
+}
 </script>
 
 <template>
@@ -47,7 +73,7 @@ const copy = useCopy(code)
         </IconButton>
       </div>
     </header>
-    <pre class="tp-code-content"><code v-html="highlighted"/></pre>
+    <pre class="tp-code-content"><code v-html="highlighted" @click="handleClick"/></pre>
   </section>
 </template>
 
@@ -100,6 +126,14 @@ const copy = useCopy(code)
   color: var(--color-text);
 }
 
+.tp-code-content .token.property {
+  color: var(--color-text);
+}
+
+.tp-code-content .token.plain {
+  color: var(--color-codevalue);
+}
+
 .tp-code-content .token.selector {
   color: var(--color-codeclassname);
 }
@@ -144,4 +178,52 @@ const copy = useCopy(code)
 .highlight .token.number {
   color: var(--color-codevalue);
 }
+
+.tp-code-content .token.number,
+.tp-code-content .token.unit {
+  color: var(--color-codevalue);
+}
+
+.tp-code-content .token.copyable {
+  text-decoration-line: underline;
+  text-decoration-color: color-mix(in srgb, var(--color-codevariable) 50%, transparent);
+  text-decoration-style: dashed;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  -webkit-user-select: text;
+  user-select: text;
+  background: transparent;
+  display: unset;
+}
+
+.tp-code-content .token.copyable > span {
+  line-height: 130%;
+  background: transparent;
+  border-radius: 4px;
+  padding: 0 2px;
+  margin: -2px;
+}
+
+.tp-code-content .token.copyable:hover > span {
+  background: color-mix(in srgb, var(--color-codevariable) 15%, transparent);
+}
+
+.tp-code-content .token.copyable {
+  outline: 2px solid transparent;
+}
+
+.tp-code-content .token.copyable:focus-visible {
+  outline: 2px solid var(--color-border-selected);
+  outline-offset: -2px;
+}
+
+.tp-code-content .token.variable:focus {
+  outline: 2px solid var(--color-border-selected);
+  outline-offset: -2px;
+}
+
+.tp-code-content .token.variable:focus:not(:focus-visible) {
+  outline: 2px solid transparent;
+}
 </style>

composables/copy.ts

@@ -1,13 +1,15 @@
 import { useToast } from '@/composables'
 import { useClipboard } from '@vueuse/core'
 
-export function useCopy(content: MaybeRefOrGetter<HTMLElement | string | null | undefined>) {
+type CopySource = HTMLElement | string | null | undefined
+
+export function useCopy(content?: MaybeRefOrGetter<CopySource>) {
   const { copy } = useClipboard()
   const { show } = useToast()
 
-  return () => {
+  return (source?: CopySource) => {
     try {
-      const value = toValue(content)
+      const value = toValue(source ?? content)
       copy(typeof value === 'string' ? value : value?.dataset?.copy || value?.textContent || '')
       show('Copied to clipboard')
     } catch (e) {

entrypoints/ui/prism.ts

@@ -1,7 +1,7 @@
 import { evaluate } from '@/utils'
 import waitFor from 'p-wait-for'
 
-const EXTRA_LANGS = ['sass', 'scss', 'less', 'stylus'] as const
+const EXTRA_LANGS = ['sass', 'scss', 'less', 'stylus', 'css-extras'] as const
 
 // We are importing this in this way is because if we use
 // `import('prismjs/components/prism-sass')` Rollup will not resolve it correctly

package.json

@@ -2,7 +2,7 @@
   "name": "tempad-dev",
   "description": "Inspect panel on Figma, for everyone.",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",

utils/dom.ts

@@ -0,0 +1,8 @@
+export function transformHTML(html: string, transform: (frag: DocumentFragment) => void): string {
+  const template = document.createElement('template')
+  template.innerHTML = html
+
+  transform(template.content)
+
+  return template.innerHTML
+}