¿Cómo copiar texto al portapapeles?

Copiar texto al portapapeles puede parecer complicado, pero en realidad es un proceso muy sencillo.

En este tutorial aprenderás cómo copiar el contenido de un bloque de código en un proyecto Astro utilizando un pequeño script.

Configuración inicial

Supongamos que estás utilizando el componente <Code /> de Astro, el cual puedes importar de la siguiente manera:

import { Code } from 'astro:components';

Este componente genera un bloque de código que, dentro del HTML, tiene una clase astro-code aplicada al elemento <pre>. Aprovecharemos esta clase para identificar el contenido que queremos copiar.

A continuación, te muestro un ejemplo de cómo estructurar el bloque de código junto con un botón de copiar:

Estructura HTML

<article class="flex flex-col p-10">
  <h1 class="text-4xl mb-2">COPIAR BLOQUE DE CÓDIGO</h1>	
  <div class="flex gap-x-5">
    <Code code={`console.log("Hello World");`} lang="javascript" />
    <button class="copy-button bg-slate-600 px-2 rounded-md hover:bg-slate-600/80 cursor-pointer">
      Copiar
    </button> <!-- Botón con la clase "copy-button" -->
  </div>
</article>

En este ejemplo:

• El componente <Code /> renderiza el bloque de código.
• El botón con clase copy-button permitirá copiar el contenido del código.

Script para copiar el contenido

Para que el botón funcione correctamente, necesitamos un pequeño script.
Este debe colocarse en el mismo archivo .astro y debe ser is:inline para asegurarnos de que el script se inserte directamente en la página.

Aquí tienes el script, explicado línea por línea:

<script is:inline> // nos aseguramos de que el script sea is:inline para que se incluya directamente en el HTML

const code = document.querySelector(".astro-code"); // seleccionamos el bloque de código que queremos copiar
const copyBtn = document.querySelector(".copy-button"); // seleccionamos el botón que el usuario presionará para copiar

copyBtn.addEventListener('click', () => { // agregamos un evento que se activa al hacer clic en el botón
  navigator.clipboard.writeText(code.textContent) // copiamos el contenido del bloque de código al portapapeles
    .then(() => { // si la copia es exitosa...
      copyBtn.textContent = "¡Copiado!"; // cambiamos el texto del botón para mostrar que se copió
      setTimeout(() => { // luego de un tiempo...
        copyBtn.textContent = "Copiar"; // restauramos el texto original del botón
      }, 2000); // pasados 2 segundos
    })
    .catch(err => { // si ocurre un error
      console.error("Error al copiar el código: ", err); // mostramos el error en la consola
    });
});
</script>

Resultado

Con esta estructura, cuando el usuario haga clic en el botón “Copiar”, el contenido del bloque de código será copiado al portapapeles y se mostrará el mensaje “¡Copiado!” durante 2 segundos como confirmación.

Así de fácil es agregar funcionalidad de copia en tus proyectos usando Astro 🚀.