Web panosu ve farklı veri türlerini saklama yöntemleri

Web panosu ve veri saklama yöntemleri

• Web Clipboard API kullanımı

  • Bir web sitesinden kopyalanan içerik Google Docs'a yapıştırıldığında biçim korunur, ancak VS Code'a yapıştırıldığında yalnızca metin yapıştırılır
  • Pano, bilgiyi MIME türleriyle ilişkilendirilmiş birden çok gösterim olarak saklar
  • W3C pano spesifikasyonu text/plain, text/html, image/png olmak üzere üç veri türünün desteklenmesini zorunlu kılar

• Asenkron Clipboard API kullanımı

  • Belirli bir gösterimin nasıl okunacağı:

    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();
        // HTML 처리...
      }
    }
    

  • Panoya birden çok gösterim yazmanın yolu:

    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]);
    

• Diğer veri türleri

  • JSON verisini panoya yazmaya çalışınca hata oluşur:

    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]);
    

  • application/json türü desteklenmez

• isTrusted özelliği

  • isTrusted özelliği, olayın kullanıcı aracısı tarafından dispatch edilip edilmediğini gösterir
  • Panoya veri yalnızca güvenilir olaylarda yazılabilir

• Pano olay API'si

  • copy, cut, paste olaylarında clipboardData özelliği kullanılarak veri okunup yazılabilir
  • JSON verisini panoya yazmanın yolu:

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

• clipboardData geçmişi

  • Asenkron Clipboard API 2017'de eklendi, ancak clipboardData çok daha eski bir özellik
  • clipboardData ilk kez 1997'de Internet Explorer 4'te kullanıma sunuldu

• Güvenilmeyen script'ler

  • Güvenilmeyen script'ler panoya yalnızca sınırlı veri türleri yazabilir
  • Güvenilmeyen olaylarda panoya veri yazmaya çalışmak başarısız olur

• Kopyala düğmesi oluşturma

  • Google Docs gibi web uygulamaları, güvenilir bir kopyalama olayı tetiklemek için document.execCommand("copy") kullanır
  • Bu yöntemle tıklama olayında da panoya istenen veri türleri yazılabilir

• Yapıştır düğmesi oluşturma

  • execCommand("paste") tarayıcıya ve işletim sistemine göre farklı çalışır
  • Safari kullanıcı onayı isterken, Chrome ve Edge bunu yalnızca Windows'ta destekler

• Figma'nın kopyalama ve yapıştırması

  • Figma, veriyi panoda saklamak için HTML gösterimini kullanır
  • HTML gösterimine base64 ile kodlanmış veriyi dahil ederek panoya kaydeder

• Web custom formats (Pickling)

  • 2022'den beri Chromium tabanlı tarayıcılarda destekleniyor
  • Web uygulamalarının Asenkron Clipboard API üzerinden özel veri türleri yazmasına izin veriyor
  • Örnek:

    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]);
    

GN⁺ özeti

• Bu yazı, Web Clipboard API'yi ve veri saklama yöntemlerini inceliyor
• Asenkron Clipboard API ile pano olay API'si arasındaki farkları açıklıyor
• Google Docs ve Figma'nın kopyalama/yapıştırma uygulama biçimlerini analiz ediyor
• Web custom formats (Pickling) önerisini tanıtıyor
• Web geliştiricileri için yararlı bilgiler sunuyor ve Clipboard API'nin sınırlarını anlamaya yardımcı oluyor