minetoblend/clipboard-test.html Secret

## clipboard-test.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Web custom format clipboard test</title>
    <style>
      body {
        padding: 2rem;
        font-family: sans-serif;
      }
      section {
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
      }
      h1,
      p {
        margin: 0;
      }
      h1 {
        font-size: 1.5rem;
      }
      i {
        font-style: italic;
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <section>
      <h1>Read clipboard content</h1>
      <button id="read-clipboard">Read clipboard</button>
      <pre><code id="clipboard-output">Click button to see contents</code></pre>
    </section>
    <section>
      <h1>Copy to clipboard</h1>
      <p>
        <i><code>"web "</code> prefix is needed for web custom formats</i>
      </p>
      <div>
        <button id="copy-clipboard">Copy to clipboard</button>
        <span id="copy-confirmation" style="display: none">
          &#10003; Copied to clipboard
        </span>
      </div>
      <textarea id="clipboard-input" rows="10" cols="50"></textarea>
    </section>

    <script>
      const defaultEntries = {
        "text/plain": "Hello, world!",
        "web foo/bar": "custom clipboard type",
      };

      document.getElementById("clipboard-input").value = JSON.stringify(
        defaultEntries,
        null,
        2
      );

      document
        .getElementById("read-clipboard")
        .addEventListener("click", async () => {
          try {
            const clipboardItems = await navigator.clipboard.read();

            const entries = {};
            for (const clipboardItem of clipboardItems) {
              for (const type of clipboardItem.types) {
                const blob = await clipboardItem.getType(type);
                entries[type] = await blob.text();
              }
            }

            document.getElementById("clipboard-output").textContent =
              JSON.stringify(entries, null, 2);
          } catch (err) {
            console.error("Failed to read clipboard contents: ", err);
            document.getElementById("clipboard-output").textContent =
              "Failed to read clipboard contents";
          }
        });

      document
        .getElementById("copy-clipboard")
        .addEventListener("click", async () => {
          try {
            let parsed;
            try {
              const text = document.getElementById("clipboard-input").value;
              parsed = JSON.parse(text);
            } catch (e) {
              alert("Invalid JSON");
              return;
            }

            const entries = {};
            for (const [type, value] of Object.entries(parsed)) {
              entries[type] = new Blob([value], { type });
            }

            const clipboardItem = new ClipboardItem(entries);

            await navigator.clipboard.write([clipboardItem]);
            showCopyConfirmation();
          } catch (err) {
            console.error("Failed to write to clipboard: ", err);
            alert("Failed to write to clipboard: " + err.message)
          }
        });

      function showCopyConfirmation() {
        document.getElementById("copy-confirmation").style.display = "inline";
        setTimeout(() => {
          document.getElementById("copy-confirmation").style.display = "none";
        }, 3000);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Web custom format clipboard test</title>
	<style>
	body {
	padding: 2rem;
	font-family: sans-serif;
	}
	section {
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	}
	h1,
	p {
	margin: 0;
	}
	h1 {
	font-size: 1.5rem;
	}
	i {
	font-style: italic;
	opacity: 0.8;
	}
	</style>
	</head>
	<body>
	<section>
	<h1>Read clipboard content</h1>
	<button id="read-clipboard">Read clipboard</button>
	<pre><code id="clipboard-output">Click button to see contents</code></pre>
	</section>
	<section>
	<h1>Copy to clipboard</h1>
	<p>
	<i><code>"web "</code> prefix is needed for web custom formats</i>
	</p>
	<div>
	<button id="copy-clipboard">Copy to clipboard</button>
	<span id="copy-confirmation" style="display: none">
	✓ Copied to clipboard
	</span>
	</div>
	<textarea id="clipboard-input" rows="10" cols="50"></textarea>
	</section>

	<script>
	const defaultEntries = {
	"text/plain": "Hello, world!",
	"web foo/bar": "custom clipboard type",
	};

	document.getElementById("clipboard-input").value = JSON.stringify(
	defaultEntries,
	null,
	2
	);

	document
	.getElementById("read-clipboard")
	.addEventListener("click", async () => {
	try {
	const clipboardItems = await navigator.clipboard.read();

	const entries = {};
	for (const clipboardItem of clipboardItems) {
	for (const type of clipboardItem.types) {
	const blob = await clipboardItem.getType(type);
	entries[type] = await blob.text();
	}
	}

	document.getElementById("clipboard-output").textContent =
	JSON.stringify(entries, null, 2);
	} catch (err) {
	console.error("Failed to read clipboard contents: ", err);
	document.getElementById("clipboard-output").textContent =
	"Failed to read clipboard contents";
	}
	});

	document
	.getElementById("copy-clipboard")
	.addEventListener("click", async () => {
	try {
	let parsed;
	try {
	const text = document.getElementById("clipboard-input").value;
	parsed = JSON.parse(text);
	} catch (e) {
	alert("Invalid JSON");
	return;
	}

	const entries = {};
	for (const [type, value] of Object.entries(parsed)) {
	entries[type] = new Blob([value], { type });
	}

	const clipboardItem = new ClipboardItem(entries);

	await navigator.clipboard.write([clipboardItem]);
	showCopyConfirmation();
	} catch (err) {
	console.error("Failed to write to clipboard: ", err);
	alert("Failed to write to clipboard: " + err.message)
	}
	});

	function showCopyConfirmation() {
	document.getElementById("copy-confirmation").style.display = "inline";
	setTimeout(() => {
	document.getElementById("copy-confirmation").style.display = "none";
	}, 3000);
	}
	</script>
	</body>
	</html>