वेब clipboard और अलग-अलग प्रकार के डेटा को स्टोर करने के तरीके

वेब clipboard और डेटा स्टोर करने के तरीके

• वेब Clipboard API का उपयोग

  • वेबसाइट से कॉपी की गई सामग्री को Google Docs में paste करने पर formatting बनी रहती है, लेकिन VS Code में paste करने पर केवल text paste होता है
  • clipboard जानकारी को MIME type से जुड़े कई representations के रूप में स्टोर करता है
  • W3C Clipboard specification के अनुसार text/plain, text/html, image/png इन तीन डेटा types का समर्थन होना चाहिए

• Asynchronous 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 처리...
      }
    }
    

  • clipboard में कई representations लिखने का तरीका:

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

• अन्य डेटा types

  • clipboard में JSON डेटा लिखने की कोशिश करने पर 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]);
    

  • application/json type समर्थित नहीं है

• isTrusted प्रॉपर्टी

  • isTrusted प्रॉपर्टी यह दिखाती है कि event user agent द्वारा dispatch किया गया था या नहीं
  • केवल trusted events में ही clipboard पर डेटा लिखा जा सकता है

• Clipboard Event API

  • copy, cut, paste events में clipboardData प्रॉपर्टी का उपयोग करके डेटा पढ़ा/लिखा जा सकता है
  • clipboard में JSON डेटा लिखने का तरीका:

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

• clipboardData का इतिहास

  • Asynchronous Clipboard API 2017 में जोड़ा गया था, लेकिन clipboardData उससे कहीं पुरानी सुविधा है
  • clipboardData पहली बार 1997 में Internet Explorer 4 में पेश किया गया था

• Untrusted script

  • untrusted script केवल सीमित डेटा types ही clipboard पर लिख सकती है
  • untrusted events में clipboard पर डेटा लिखने की कोशिश विफल हो जाती है

• Copy button बनाना

  • Google Docs जैसे web applications document.execCommand("copy") का उपयोग करके trusted copy event ट्रिगर करते हैं
  • इस तरीके से click event में भी arbitrary data types को clipboard पर लिखा जा सकता है

• Paste button बनाना

  • execCommand("paste") का व्यवहार browser और operating system के अनुसार अलग होता है
  • Safari उपयोगकर्ता की पुष्टि मांगता है, जबकि Chrome और Edge इसे केवल Windows पर support करते हैं

• Figma में copy और paste

  • Figma clipboard में डेटा स्टोर करने के लिए HTML representation का उपयोग करता है
  • वह HTML representation में base64-encoded डेटा शामिल करके उसे clipboard में स्टोर करता है

• Web custom format (Pickling)

  • 2022 से Chromium-आधारित browsers में supported
  • यह web applications को Asynchronous Clipboard API के जरिए custom data types लिखने की अनुमति देता है
  • उदाहरण:

    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⁺ की संक्षिप्त टिप्पणी

• यह लेख वेब Clipboard API और डेटा स्टोर करने के तरीकों की पड़ताल करता है
• इसमें Asynchronous Clipboard API और Clipboard Event API के बीच के अंतर को समझाया गया है
• Google Docs और Figma के copy/paste implementation का विश्लेषण किया गया है
• Web custom format (Pickling) प्रस्ताव का परिचय दिया गया है
• यह वेब डेवलपर्स के लिए उपयोगी जानकारी देता है और Clipboard API की सीमाओं को समझने में मदद कर सकता है