Setup text selection for editor components

src/routes/+layout.ts

@@ -1 +1 @@
-export const prerender = true;
+export const prerender = true;

src/routes/+page.svelte

@@ -3,12 +3,14 @@
 	import { Disclosure } from "@sd-jwt/core";
 	import Disclosures from "./Disclosures.svelte";
 	import Editor from "./Editor.svelte";
+	import { onMount } from "svelte";
 
 	let encodedJwt: string | undefined =
 		"eyJhbGciOiJFZERTQSIsInR5cCI6InNkLWp3dCJ9.eyJpYXQiOjE3MDc2NjcxNTM2MzQsImlzcyI6ImRpZDprZXk6c29tZS1yYW5kb20tZGlkLWtleSIsIm5iZiI6MTcwNzY2NzE1MzczNCwiY3JlZGVudGlhbCI6eyJfc2QiOlsiNjRkUkN0YllkVkVMYW90eDBRVlFMZEdqcm9RSG1OUEI0TmI4b1BzbnE3YyIsIjZBMHF6TDQtZ3hrSkFuQ1EtSzN6b2hMYXo2Qzh3TUhXei0tSW41eFdsZmMiLCI2UFgxYXRrNEtpdm5NRDlSZjBMcF9LV2JBRkJVT1RPQjN1NzFmZzRPZ2NrIiwiWE4tZzluLXphODViVnhPaWlQUXF2Vl9VVmtLdG04VXlWbFZJZElCU3ltNCIsIm5Xc29GQ2V1cnFLZzJDbmFEeUxKMXV5UUtNUmtPdFFNMV95dUtaTjR5VlEiLCJ2bnBZcU1qOTdVMUZPX3VzRHhacWZVcl84Z2ZvdkpfdDNpVmo1OWtfZGkwIl19LCJfc2RfYWxnIjoic2hhLTI1NiIsIl9zZCI6WyJFX2N2SWNYOGYzYnZFNXVNVzctNEp5ZnNNMkNycUFhLVBjOU15MmtNaGFNIiwidlcxdWJSTUotVFBlRzIzS0J1OElleXlNeXVJRG5QNDB3SzR0YmRjbDdxdyIsInl5aTItMVJLaVNiR2YyY3hyX2VkQkljbVNUdzJMSVQ4dWUwVm1RemNpeTgiXX0.zeCXWQgiWFJIFZBVC9GKKSilJ--6u8OIQ4AnDRopKN4KQtYS8Z98ORxWb3_bDOdmNEHDvMqtAkEvxqk08_USCQ~WyJpSFFLaDlFM3BxZUluLXFvelVMMU93IiwiY3JlZGVudGlhbFN1YmplY3QiLCJkaWQ6cGVlcjo0cmVjZWl2ZXItcGVlci1kaWQiXQ~WyJxYzlObkVjeVA4YmsxV2RKTE53c1BBIiwiZGF0ZU9mQmlydGgiLCIyMDAwMDEwMSJd~WyJvVXJsUnNfRzlncWlQN2o4TDhPekd3IiwibmFtZSIsIkpvaG4iXQ~WyJpeld6c3BQMzUxdm55dzN0eno0blNnIiwibGFzdE5hbWUiLCJEb2UiXQ~eyJ0eXAiOiJrYitqd3QiLCJhbGciOiJFZERTQSJ9.eyJpYXQiOjE3MDc2NjcxNTM2MzMsImF1ZCI6ImRpZDpwZWVyOjQ6c29tZS12ZXJpZmllciIsIm5vbmNlIjoiaVloOXBoU3ZWWTFVcUpsX05pNklJUSIsIl9zZF9oYXNoIjoiRTYwNWJfbnJPallsdUlSbktfQThKNTNhemwwcG8wcThBbHBJczZrQm5JWSJ9.6ZAydMHRVByM02Z79zQSWuZU3ZfNIkmVrMXM2ZVR-nN92h_J9D5-2cB7gPZ3aDP3Z-BY1Wj2kp_cIakv5ji3Cw";
 	let jwtHeader = "";
 	let jwtPayload = "";
 	let jwtSignature = "";
+	let jwtPayloadSelection = "credential";
 	let disclosures: Disclosure[] = [];
 
 	$: sdJWt = encodedJwt ? decodeSdJwt(encodedJwt) : undefined;
@@ -30,7 +32,13 @@
 		</div>
 		<div class="column" style="border-top: 0;">
 			<Editor title="Header" language="json" value={jwtHeader} emitChanges={false}></Editor>
-			<Editor title="Payload" language="json" value={jwtPayload} emitChanges={false} flexSize={3}
+			<Editor
+				title="Payload"
+				language="json"
+				value={jwtPayload}
+				emitChanges={false}
+				flexSize={3}
+				selectedText={jwtPayloadSelection}
 			></Editor>
 			<Editor title="Signature" value={jwtSignature} emitChanges={false}></Editor>
 		</div>
@@ -68,4 +76,10 @@
 		margin: 0px 0px 0px 0.5rem;
 		min-width: 0;
 	}
+
+	@media screen and (max-width: 600px) {
+		.row {
+			flex-direction: column;
+		}
+	}
 </style>

src/routes/Editor.svelte

@@ -7,10 +7,12 @@
 	export let language: string = "plaintext";
 	export let emitChanges = true;
 	export let flexSize: number = 1;
+	export let selectedText: string = "";
 
 	let monaco: typeof Monaco;
 	let editorElement: HTMLElement;
 	let editorInstance: Monaco.editor.IStandaloneCodeEditor;
+	let selectText: any = null;
 
 	onMount(async () => {
 		monaco = (await import("./monaco")).default;
@@ -64,12 +66,25 @@
 				value = editorInstance.getValue();
 			});
 		}
+
+		selectText = (substring: string) => {
+			const matches: Monaco.editor.FindMatch[] | undefined = editorInstance
+				.getModel()
+				?.findMatches(substring, true, false, false, null, true);
+
+			if (matches && matches.length > 0) {
+				editorInstance.setSelection(matches[0].range);
+			}
+		};
 	});
 
 	$: if (editorInstance && !emitChanges) {
 		console.log("Set value", value);
 		editorInstance.setValue(value);
 	}
+	$: if (selectText != null) {
+		selectedText ? selectText(selectedText) : undefined;
+	}
 
 	onDestroy(() => {
 		monaco?.editor.getModels().forEach((model) => model.dispose());