bug: copy-button

[SikandarJODD]

Component Category

Inputs

Component ID

input-26

Current Behavior

when user click on copy it copies the css code rather than original component code

• this is due to you have changed the code -> shiki code vesper
• soln : save the temp-code as code and then change the code to shiki html code please
  so user can copy the original component
  original component code :
  
  what gets copied below :

<pre class="shiki shiki-themes github-light-default github-dark-default" style="background-color:#ffffff;--shiki-dark-bg:#0d1117;color:#1f2328;--shiki-dark:#e6edf3" tabindex="0" data-lang="svelte"><code><span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">script</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> lang</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"ts"</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#CF222E;--shiki-dark:#FF7B72">	import</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> Input </span><span style="color:#CF222E;--shiki-dark:#FF7B72">from</span><span style="color:#0A3069;--shiki-dark:#A5D6FF"> '$lib/components/ui/input.svelte'</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">;</span></span>
  <span class="line"><span style="color:#CF222E;--shiki-dark:#FF7B72">	import</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> Label </span><span style="color:#CF222E;--shiki-dark:#FF7B72">from</span><span style="color:#0A3069;--shiki-dark:#A5D6FF"> '$lib/components/ui/label.svelte'</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">;</span></span>
  <span class="line"></span>
  <span class="line"><span style="color:#CF222E;--shiki-dark:#FF7B72">	import</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> ArrowRight </span><span style="color:#CF222E;--shiki-dark:#FF7B72">from</span><span style="color:#0A3069;--shiki-dark:#A5D6FF"> 'lucide-svelte/icons/arrow-right'</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">;</span></span>
  <span class="line"><span style="color:#CF222E;--shiki-dark:#FF7B72">	import</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> Search </span><span style="color:#CF222E;--shiki-dark:#FF7B72">from</span><span style="color:#0A3069;--shiki-dark:#A5D6FF"> 'lucide-svelte/icons/search'</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">;</span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">&#x3C;/</span><span style="color:#116329;--shiki-dark:#7EE787">script</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">div</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> class</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"space-y-2"</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">	&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">Label</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> for</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"input-26"</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">>Search input with icon and button&#x3C;/</span><span style="color:#116329;--shiki-dark:#7EE787">Label</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">	&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">div</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> class</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"relative"</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">Input</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> id</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"input-26"</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> class</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"peer pe-9 ps-9"</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> placeholder</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"Search..."</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> type</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"search"</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> /></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">div</span></span>
  <span class="line"><span style="color:#0550AE;--shiki-dark:#79C0FF">			class</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50"</span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">			&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">Search</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> size</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#CF222E;--shiki-dark:#FF7B72">{</span><span style="color:#0550AE;--shiki-dark:#79C0FF">16</span><span style="color:#CF222E;--shiki-dark:#FF7B72">}</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> stroke-width</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#CF222E;--shiki-dark:#FF7B72">{</span><span style="color:#0550AE;--shiki-dark:#79C0FF">2</span><span style="color:#CF222E;--shiki-dark:#FF7B72">}</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> /></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		&#x3C;/</span><span style="color:#116329;--shiki-dark:#7EE787">div</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">button</span></span>
  <span class="line"><span style="color:#0550AE;--shiki-dark:#79C0FF">			class</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"</span></span>
  <span class="line"><span style="color:#0550AE;--shiki-dark:#79C0FF">			aria-label</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"Submit search"</span></span>
  <span class="line"><span style="color:#0550AE;--shiki-dark:#79C0FF">			type</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"submit"</span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">			&#x3C;</span><span style="color:#116329;--shiki-dark:#7EE787">ArrowRight</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> size</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#CF222E;--shiki-dark:#FF7B72">{</span><span style="color:#0550AE;--shiki-dark:#79C0FF">16</span><span style="color:#CF222E;--shiki-dark:#FF7B72">}</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> stroke-width</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#CF222E;--shiki-dark:#FF7B72">{</span><span style="color:#0550AE;--shiki-dark:#79C0FF">2</span><span style="color:#CF222E;--shiki-dark:#FF7B72">}</span><span style="color:#0550AE;--shiki-dark:#79C0FF"> aria-hidden</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">=</span><span style="color:#0A3069;--shiki-dark:#A5D6FF">"true"</span><span style="color:#1F2328;--shiki-dark:#E6EDF3"> /></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">		&#x3C;/</span><span style="color:#116329;--shiki-dark:#7EE787">button</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">	&#x3C;/</span><span style="color:#116329;--shiki-dark:#7EE787">div</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"><span style="color:#1F2328;--shiki-dark:#E6EDF3">&#x3C;/</span><span style="color:#116329;--shiki-dark:#7EE787">div</span><span style="color:#1F2328;--shiki-dark:#E6EDF3">></span></span>
  <span class="line"></span></code></pre>

Expected Behavior

• this is due to you have changed the code -> shiki code vesper
• soln : save the temp-code as code and then change the code to shiki html code please
  so user can copy the original component

Steps to Reproduce

1. Go to 'https://github.dev/max-got/originui-svelte/src/lib/demo/copy-button.svelte'
   I don't know where exactly the issues lies - in preview-component code you are sending code.hightlight.content
   ?? need to debug

Affected Browsers

No response

Error Logs

No response

[SikandarJODD]

i think it's important to solve this issue @max-got

[max-got]

Thank you :)