Added copy as data URL or copy as EcmaScript

2025-07-21 19:51:13 +02:00
parent 6d0436b0b5
commit d03baec918
1 changed files with 104 additions and 27 deletions
--- a/image/test1.html
+++ b/image/test1.html
@@ -3,7 +3,16 @@
 <head>
 	<meta charset="utf-8">
 	<title>Paste Image Demo</title>
+	<!-- TODO: More style reuse -->
 	<style>
+
+		button {
+			border-radius: 0.5em;
+			padding: 0.25em .5em;
+			margin-right: 1em;
+			background-color: #CFC;
+		}
+
 		#dropZone {
 			background-color: #ccc;
 			min-width: 10em;
@@ -14,22 +23,40 @@
 			justify-content: center;
 			text-align: center;
 			color: #888;
+			padding: 1em;
+		}
+
+		kbd {
+			border: 1px #CCC outset;
+			padding: 0em 0.2em;
+			border-radius: 0.3em;
+			margin: 0.2em;
+			background-color: #EEE;
+			box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.5);
+		}
+
+		.toolbar {
+			padding: .5em 0em;
+			background-color: #EEF;
 		}

 		#data_url_bin {
-			cursor: pointer;
-			white-space: pre-wrap;
-			word-wrap: break-word;
-			overflow-wrap: break-word;
+			overflow-x: auto;
+			display: block;
 		}


 	</style>
+	<script src="../lib/cm6.bundle.min.js"></script>
 	<script type="module">
+		let editor_view = null;
 		document.addEventListener('DOMContentLoaded', () => {
 			const dropZone = document.getElementById('dropZone');

 			const data_url_bin = document.getElementById('data_url_bin');
+			const copy_url = document.getElementById('copy_url');
+			const copy_script = document.getElementById('copy_script');
+
 			document.addEventListener('paste', async (event) => {
 				const items = event.clipboardData.items;
 				for (let item of items) {
@@ -40,6 +67,24 @@
 						reader.readAsDataURL(blob);
 						reader.addEventListener('load', ({ target }) => {
 							data_url_bin.innerText = target.result;
+
+							const initial_code = `const image = new Image();\nimage.src = ${JSON.stringify(target.result)};`;
+
+							if (editor_view) {
+								editor_view.dispatch({
+									changes: [{
+										from: 0,
+										to: editor_view.state.doc.length,
+										insert: initial_code,
+									}]
+								});
+							} else {
+								const editor = document.getElementById("editor");
+								const initial_state = cm6.createEditorState(initial_code);
+								editor_view = cm6.createEditorView(initial_state, editor);
+							}
+
+
 						});


@@ -54,36 +99,68 @@
 				}
 			});

-			data_url_bin.addEventListener('click', ({ target }) => {
-				navigator.clipboard.writeText(target.textContent);
-				//TODO - move this stuff to a common API we can use in different places
-				if (Notification.permission === 'granted') {
-					new Notification("Copied  to clipboard");
-				} else {
-					const toast = document.createElement('div');
-					toast.textContent = "Copied!";
-					Object.assign(toast.style, {
-						position: 'fixed',
-						bottom: '1em',
-						left: '50%',
-						transform: 'translateX(-50%)',
-						background: '#333',
-						color: '#fff',
-						padding: '0.5em 1em',
-						borderRadius: '5px',
-						opacity: '0.9',
-						zIndex: 1000
-					});
-					document.body.appendChild(toast);
-					setTimeout(() => toast.remove(), 1500);
+			copy_url.addEventListener('click', () => {
+				navigator.clipboard.writeText(data_url_bin.textContent);
+				notify('Data URL copied');
+			});
+
+			copy_script.addEventListener('click', () => {
+				navigator.clipboard.writeText(editor_view.state.doc.toString());
+				notify('Script copied');
+			});
+
+
+			document.addEventListener('keydown', (event) => {
+				if (event.altKey && event.key.toLowerCase() === 'd') {
+					event.preventDefault();
+					copy_url.dispatchEvent(new Event('click'));
+				}
+				if (event.altKey && event.key.toLowerCase() === 's') {
+					event.preventDefault();
+					copy_script.dispatchEvent(new Event('click'));
 				}
 			});

 		});
+
+
+		function notify(brief) {
+			//TODO - move this stuff to a common API we can use in different places
+			if (Notification.permission === 'granted') {
+				new Notification(brief);
+			} else {
+				const toast = document.createElement('div');
+				toast.textContent = brief;
+				Object.assign(toast.style, {
+					position: 'fixed',
+					bottom: '1em',
+					left: '50%',
+					transform: 'translateX(-50%)',
+					background: '#333',
+					color: '#fff',
+					padding: '0.5em 1em',
+					borderRadius: '5px',
+					opacity: '0.9',
+					zIndex: 1000
+				});
+				document.body.appendChild(toast);
+				setTimeout(() => toast.remove(), 1500);
+			}
+		}
+
 	</script>
 </head>
 <body>
+	<div class="toolbar">
+		<button id="copy_url">Copy <i>Data URL</i></button>(<kbd>Alt</kbd><kbd>D</kbd>)
+		<button id="copy_script">Copy loader script</button>(<kbd>Alt</kbd><kbd>S</kbd>)
+	</div>
 	<div id="dropZone">Paste an image here (Ctrl+V)</div>
-	<code id="data_url_bin" style="width: 80vw"></code>
+	<h2>Data URL</h2>
+	<code id="data_url_bin"></code>
+	<h2>EcmaScript</h2>
+	<div id="editor"></div>
+
+
 </body>
 </html>