Clipboard web dan cara menyimpan berbagai jenis data

Clipboard web dan cara penyimpanan data

• Menggunakan Web Clipboard API

  • Saat konten yang disalin dari situs web ditempel ke Google Docs, formatnya tetap dipertahankan, tetapi jika ditempel ke VS Code, hanya teksnya saja yang ditempel
  • Clipboard menyimpan informasi dalam beberapa representasi yang terkait dengan tipe MIME
  • Spesifikasi clipboard W3C mewajibkan dukungan untuk tiga tipe data: text/plain, text/html, image/png

• Menggunakan Async Clipboard API

  • Cara membaca representasi tertentu:

    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes("text/html")) {
        const blob = await item.getType("text/html");
        const html = await blob.text();
        // Proses HTML...
      }
    }
    

  • Cara menulis beberapa representasi ke clipboard:

    const textBlob = new Blob(["Hello, world"], { type: "text/plain" });
    const htmlBlob = new Blob(["Hello, <em>world<em>"], { type: "text/html" });
    const clipboardItem = new ClipboardItem({ [textBlob.type]: textBlob, [htmlBlob.type]: htmlBlob });
    await navigator.clipboard.write([clipboardItem]);
    

• Tipe data lain

  • Jika mencoba menulis data JSON ke clipboard, akan terjadi error:

    const json = JSON.stringify({ message: "Hello" });
    const blob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [blob.type]: blob });
    await navigator.clipboard.write([clipboardItem]);
    

  • Tipe application/json tidak didukung

• Properti isTrusted

  • Properti isTrusted menunjukkan apakah sebuah event didispatch oleh user agent
  • Data hanya bisa ditulis ke clipboard dari event yang tepercaya

• Clipboard Event API

  • Pada event copy, cut, paste, data dapat dibaca/ditulis menggunakan properti clipboardData
  • Cara menulis data JSON ke clipboard:

    document.addEventListener("copy", (e) => {
      e.preventDefault();
      const json = JSON.stringify({ message: "Hello" });
      e.clipboardData.setData("application/json", json);
    });
    

• Sejarah clipboardData

  • Async Clipboard API ditambahkan pada 2017, tetapi clipboardData adalah fitur yang jauh lebih lama
  • clipboardData pertama kali diperkenalkan pada Internet Explorer 4 tahun 1997

• Skrip yang tidak tepercaya

  • Skrip yang tidak tepercaya hanya dapat menulis tipe data terbatas ke clipboard
  • Jika mencoba menulis data ke clipboard dari event yang tidak tepercaya, operasi akan gagal

• Membuat tombol salin

  • Aplikasi web seperti Google Docs memicu event salin yang tepercaya dengan menggunakan document.execCommand("copy")
  • Dengan cara ini, bahkan dari event klik pun dimungkinkan untuk menulis tipe data arbitrer ke clipboard

• Membuat tombol tempel

  • execCommand("paste") bekerja berbeda tergantung browser dan sistem operasi
  • Safari meminta konfirmasi pengguna, sedangkan Chrome dan Edge hanya mendukungnya di Windows

• Salin dan tempel di Figma

  • Figma menggunakan representasi HTML untuk menyimpan data di clipboard
  • Data yang di-encode dalam base64 dimasukkan ke dalam representasi HTML lalu disimpan ke clipboard

• Web custom format (Pickling)

  • Didukung di browser berbasis Chromium sejak 2022
  • Memungkinkan aplikasi web menulis tipe data kustom melalui Async Clipboard API
  • Contoh:

    const json = JSON.stringify({ message: "Hello, world" });
    const jsonBlob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [`web ${jsonBlob.type}`]: jsonBlob });
    navigator.clipboard.write([clipboardItem]);
    

Ringkasan GN⁺

• Artikel ini membahas Web Clipboard API dan cara penyimpanan data
• Menjelaskan perbedaan antara Async Clipboard API dan Clipboard Event API
• Menganalisis cara Google Docs dan Figma mengimplementasikan salin/tempel
• Memperkenalkan proposal web custom format (Pickling)
• Berguna bagi pengembang web untuk memahami keterbatasan Clipboard API dan informasi praktis seputarnya