เว็บคลิปบอร์ดและวิธีจัดเก็บข้อมูลหลายประเภท

เว็บคลิปบอร์ดและวิธีจัดเก็บข้อมูล

• การใช้ Web Clipboard API

  • เมื่อนำเนื้อหาที่คัดลอกจากเว็บไซต์ไปวางใน Google Docs รูปแบบจะยังคงอยู่ แต่ถ้าวางใน VS Code จะวางได้เฉพาะข้อความเท่านั้น
  • คลิปบอร์ดจะจัดเก็บข้อมูลเป็นหลาย representation ที่เชื่อมโยงกับ MIME type
  • สเปกคลิปบอร์ดของ W3C กำหนดให้ต้องรองรับข้อมูล 3 ประเภทคือ text/plain, text/html, image/png

• การใช้ Async Clipboard API

  • วิธีอ่าน representation ที่ต้องการ:

    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...
      }
    }
    

  • วิธีเขียนหลาย representation ลงในคลิปบอร์ด:

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

• ชนิดข้อมูลอื่น ๆ

  • หากพยายามเขียนข้อมูล JSON ลงในคลิปบอร์ดจะเกิดข้อผิดพลาด:

    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

• พร็อพเพอร์ตี isTrusted

  • พร็อพเพอร์ตี isTrusted ใช้ระบุว่าอีเวนต์นั้นถูก dispatch โดย user agent หรือไม่
  • สามารถเขียนข้อมูลลงคลิปบอร์ดได้เฉพาะจากอีเวนต์ที่เชื่อถือได้เท่านั้น

• Clipboard Event API

  • ในอีเวนต์ copy, cut, paste สามารถอ่าน/เขียนข้อมูลได้ผ่านพร็อพเพอร์ตี clipboardData
  • วิธีเขียนข้อมูล JSON ลงในคลิปบอร์ด:

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

• ประวัติของ clipboardData

  • Async Clipboard API ถูกเพิ่มเข้ามาในปี 2017 แต่ clipboardData เป็นฟีเจอร์ที่เก่ากว่านั้นมาก
  • clipboardData ถูกนำมาใช้ครั้งแรกใน Internet Explorer 4 เมื่อปี 1997

• สคริปต์ที่ไม่น่าเชื่อถือ

  • สคริปต์ที่ไม่น่าเชื่อถือสามารถเขียนลงคลิปบอร์ดได้เพียงชนิดข้อมูลที่จำกัด
  • หากพยายามเขียนข้อมูลลงคลิปบอร์ดจากอีเวนต์ที่ไม่น่าเชื่อถือจะล้มเหลว

• การสร้างปุ่มคัดลอก

  • เว็บแอปพลิเคชันอย่าง Google Docs ใช้ document.execCommand("copy") เพื่อ trigger อีเวนต์คัดลอกที่เชื่อถือได้
  • วิธีนี้ทำให้สามารถเขียนชนิดข้อมูลตามต้องการลงคลิปบอร์ดได้แม้ในอีเวนต์คลิก

• การสร้างปุ่มวาง

  • execCommand("paste") ทำงานต่างกันไปตามเบราว์เซอร์และระบบปฏิบัติการ
  • Safari ต้องให้ผู้ใช้ยืนยัน ส่วน Chrome และ Edge รองรับเฉพาะบน Windows

• การคัดลอกและวางของ Figma

  • Figma ใช้ representation แบบ HTML เพื่อเก็บข้อมูลในคลิปบอร์ด
  • โดยฝังข้อมูลที่เข้ารหัสแบบ base64 ไว้ใน representation แบบ HTML แล้วจัดเก็บลงคลิปบอร์ด

• Web Custom Formats (Pickling)

  • รองรับในเบราว์เซอร์ที่ใช้ Chromium ตั้งแต่ปี 2022
  • ช่วยให้เว็บแอปพลิเคชันสามารถเขียนชนิดข้อมูลแบบกำหนดเองผ่าน Async Clipboard API ได้
  • ตัวอย่าง:

    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⁺

• บทความนี้สำรวจ Web Clipboard API และวิธีการจัดเก็บข้อมูล
• อธิบายความแตกต่างระหว่าง Async Clipboard API กับ Clipboard Event API
• วิเคราะห์วิธีที่ Google Docs และ Figma ใช้งานการคัดลอก/วาง
• แนะนำข้อเสนอ Web Custom Formats (Pickling)
• เป็นข้อมูลที่มีประโยชน์สำหรับนักพัฒนาเว็บและช่วยให้เข้าใจข้อจำกัดของ Clipboard API ได้ดีขึ้น