asciidiego/CLRF-issue.html

## README.txt
Some references:

- [1]: https://html.spec.whatwg.org/multipage/dnd.html#drag-data-store-item-list
- [2]: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData#specifications
- [3]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event
- [4]: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types

## CLRF-issue.html
<!-- HTML Boilerplate -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Drop</title>
		<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body class="p-4 max-w-lg">
		<h1 class="font-bold">Simple DataTransfer demo</h1>
		<p>
			This is a simple demo where a URI list with a comment will be sent as a
			<a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank"
				><code class="underline">DataTransfer</code></a
			>
			object to the canvas using a standard <code class="inline-block">drop</code> event.
		</p>
		<p>
			The issue is that the <code class="inline-block">DataTransfer</code> object does not contain
			the <code class="inline-block">\r\n</code> characters.
		</p>
		<div class="flex items-center gap-4">
			<div id="source" draggable="true" class="border p-1 rounded bg-white">
				<span class="select-none"> Drag me into canvas </span>
			</div>
			<canvas id="canvas" class="border" width="256" height="256"></canvas>
		</div>
		<hr class="my-2" />
		<pre>Output</pre>
		<div class="p-2 px-4 border rounded w-full h-80">
			<code id="output" class="text-sm"> </code>
		</div>
	</body>

	<script>
		const rawData = `https://www.example.com/\r\n#COMMENT`;
		const source = document.getElementById('source');
		source.addEventListener('dragstart', (e) => {
			e.dataTransfer.setData('text/uri-list', rawData);
		});

		const target = document.getElementById('canvas');

		// Add the start, draw "Hello World" to the canvas
		const ctx = target.getContext('2d');
		ctx.font = '20px serif';
		ctx.fillText('Contains CRLF?', 10, 50);

		target.addEventListener('dragover', (e) => {
			e.preventDefault();
		});
		target.addEventListener('drop', (e) => {
			e.preventDefault();
			const data = e.dataTransfer.getData('text/uri-list');
			console.log(data);
			const containsNewCRLF = data.includes('\r\n');
			const ctx = target.getContext('2d');
			ctx.font = '20px serif';
			ctx.fillText(containsNewCRLF, 10, 80);

			// Put RAW data in the output (Raw string)
			document.getElementById('output').innerText = `Expected:\n${rawData}\n\nActual:\n${data}`;
		});
	</script>
</html>
	Some references:

	- [1]: https://html.spec.whatwg.org/multipage/dnd.html#drag-data-store-item-list
	- [2]: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData#specifications
	- [3]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event
	- [4]: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types
	<!-- HTML Boilerplate -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Drop</title>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body class="p-4 max-w-lg">
	<h1 class="font-bold">Simple DataTransfer demo</h1>
	<p>
	This is a simple demo where a URI list with a comment will be sent as a
	<a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank"
	><code class="underline">DataTransfer</code></a
	>
	object to the canvas using a standard <code class="inline-block">drop</code> event.
	</p>
	<p>
	The issue is that the <code class="inline-block">DataTransfer</code> object does not contain
	the <code class="inline-block">\r\n</code> characters.
	</p>
	<div class="flex items-center gap-4">
	<div id="source" draggable="true" class="border p-1 rounded bg-white">
	<span class="select-none"> Drag me into canvas </span>
	</div>
	<canvas id="canvas" class="border" width="256" height="256"></canvas>
	</div>
	<hr class="my-2" />
	<pre>Output</pre>
	<div class="p-2 px-4 border rounded w-full h-80">
	<code id="output" class="text-sm"> </code>
	</div>
	</body>

	<script>
	const rawData = `https://www.example.com/\r\n#COMMENT`;
	const source = document.getElementById('source');
	source.addEventListener('dragstart', (e) => {
	e.dataTransfer.setData('text/uri-list', rawData);
	});

	const target = document.getElementById('canvas');

	// Add the start, draw "Hello World" to the canvas
	const ctx = target.getContext('2d');
	ctx.font = '20px serif';
	ctx.fillText('Contains CRLF?', 10, 50);

	target.addEventListener('dragover', (e) => {
	e.preventDefault();
	});
	target.addEventListener('drop', (e) => {
	e.preventDefault();
	const data = e.dataTransfer.getData('text/uri-list');
	console.log(data);
	const containsNewCRLF = data.includes('\r\n');
	const ctx = target.getContext('2d');
	ctx.font = '20px serif';
	ctx.fillText(containsNewCRLF, 10, 80);

	// Put RAW data in the output (Raw string)
	document.getElementById('output').innerText = `Expected:\n${rawData}\n\nActual:\n${data}`;
	});
	</script>
	</html>