Group keyboard and contenteditable pasting into one bullet point

Author: danburzo

index.js

@@ -33,6 +33,10 @@
 	var __toESM = (mod, isNodeMode, target) => (
 		(target = mod != null ? __create(__getProtoOf(mod)) : {}),
 		__copyProps(
+			// If the importer is in node compatibility mode or this is not an ESM
+			// file that has been converted to a CommonJS file using a Babel-
+			// compatible transform (i.e. "__esModule" has not been set), then set
+			// "default" to the CommonJS "module.exports" for node compatibility.
 			isNodeMode || !mod || !mod.__esModule
 				? __defProp(target, 'default', { value: mod, enumerable: true })
 				: target,
@@ -10309,6 +10313,13 @@
 				render(data2, 'ClipboardItems');
 			});
 		}, []);
+		const autoselect = (0, import_react.useCallback)(e => {
+			const range = document.createRange();
+			range.selectNodeContents(e.target);
+			const selection = window.getSelection();
+			selection.removeAllRanges();
+			selection.addRange(range);
+		}, []);
 		function render_file(file) {
 			return file
 				? /* @__PURE__ */ import_react.default.createElement(
@@ -10446,23 +10457,20 @@
 							'\u2318V'
 						),
 						' ',
-						'keyboard shortcut'
+						'keyboard shortcut or',
+						' ',
+						/* @__PURE__ */ import_react.default.createElement(
+							'span',
+							{ contentEditable: true, onFocus: autoselect },
+							'paste in here'
+						),
+						' ',
+						"if you don't have a keyboard"
 					),
 					/* @__PURE__ */ import_react.default.createElement(
 						'li',
 						null,
 						'Drop something on the page'
-					),
-					/* @__PURE__ */ import_react.default.createElement(
-						'li',
-						null,
-						/* @__PURE__ */ import_react.default.createElement(
-							'span',
-							{ contentEditable: true, class: 'editable' },
-							'Paste using context menu'
-						),
-						' ',
-						'if you are on mobile.'
 					)
 				)
 			);

index.jsx

@@ -88,6 +88,14 @@ function ClipboardInspector(props) {
 		});
 	}, []);
 
+	const autoselect = useCallback(e => {
+		const range = document.createRange();
+		range.selectNodeContents(e.target);
+		const selection = window.getSelection();
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}, []);
+
 	function render_file(file) {
 		return file ? (
 			<table>
@@ -145,15 +153,13 @@ function ClipboardInspector(props) {
 					</li>
 					<li>
 						Paste with the <kbd>Ctrl+V</kbd> / <kbd>⌘V</kbd>{' '}
-						keyboard shortcut
-					</li>
-					<li>Drop something on the page</li>
-					<li>
-						<span contentEditable class="editable">
-							Paste using context menu
+						keyboard shortcut or{' '}
+						<span contentEditable onFocus={autoselect}>
+							paste in here
 						</span>{' '}
-						if you are on mobile.
+						if you don't have a keyboard
 					</li>
+					<li>Drop something on the page</li>
 				</ul>
 			</div>
 		);

style.css

@@ -20,28 +20,33 @@ body {
 input,
 select,
 textarea,
-button {
+button,
+[contenteditable] {
 	font: inherit;
 	font-size: max(1em, 16px);
 }
 
-button,
-.editable {
+button {
 	appearance: none;
 	border: 0.1em solid;
-	display: inline-block;
 	padding: 0.25em 0.5em;
 	background: #f3f3f3;
 	color: #000;
 	white-space: nowrap;
 	box-shadow: 0.1em 0.1em currentColor;
 }
 
-button:active,
-.editable:active {
+button:active {
 	background: #fe0;
 }
 
+[contenteditable] {
+	white-space: nowrap;
+	padding: 0.25em 0.5em;
+	border: 1px dotted;
+	background: #fff;
+}
+
 button[disabled] {
 	color: #777;
 	cursor: not-allowed;
@@ -76,6 +81,10 @@ pre {
 	margin: 0;
 }
 
+kbd {
+	border-bottom: 1px dotted;
+}
+
 .anno {
 	font-size: 0.6em;
 	font-weight: bold;