PowerToys/src/common/FilePreviewCommon/index.html

<!doctype HTML>
<html>
<head>
	<script>
		// Set variables

		// Get URL parameters:
		// `code` contains the code of the file in base64 encoded
		// `theme` can be "light" or "dark"
		// `lang` is the language of the file
		// `wrap` if the editor is wrapping or not

		var theme = ("[[PT_THEME]]" == "dark") ? "vs-dark" : "vs";
		var lang = "[[PT_LANG]]";
		var wrap = ([[PT_WRAP]] == 1) ? true : false;

		var base64code = "[[PT_CODE]]";

		// Code taken from https://stackoverflow.com/a/30106551/14774889
		var code = decodeURIComponent(atob(base64code).split('').map(function(c) {
			return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
		}).join(''));
	</script>
	<!-- Set browser to Edge-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!-- Set charset -->
	<meta charset="utf-8" />
	<!-- Title (normally not displayed)-->
	<title>Previewer for developer Files</title>
	<style>
		/* Fits content to window size */
		html, body{
			padding:0;
		}
		#container,.monaco-editor {
			position:fixed;
			height:100%;
			left:0;
			top:0;
			right:0;
			bottom:0;
		}
		.overflowingContentWidgets{
			/*Hides alert box */
			display:none!important
		}
	</style>
</head>

<body oncontextmenu="onContextMenu()">
<!-- Container for the editor -->
<div id="container"></div>
<!-- Script -->
<script src="http://[[PT_URL]]/monacoSRC/min/vs/loader.js"></script>
<script src="http://[[PT_URL]]/monacoSpecialLanguages.js" type="module"></script>
<script type="module">
	var editor;
    import { registerAdditionalLanguages } from "http://[[PT_URL]]/monacoSpecialLanguages.js"
	require.config({ paths: { vs: 'http://[[PT_URL]]/monacoSRC/min/vs' } });
	require(['vs/editor/editor.main'], async function () {
		await registerAdditionalLanguages(monaco)
		// Creates the editor
		// For all parameters: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
		editor = monaco.editor.create(document.getElementById('container'), {
			value: code, // Sets content of the editor
			language: lang, // Sets language fof the code
			readOnly: true, // Sets to readonly
			theme: theme, // Sets editor theme
			minimap: {enabled: false}, // Disables minimap
			lineNumbersMinChars: "3", //Width of the line numbers
			scrollbar: {
				// Deactivate shadows
				shadows: false,

				// Render scrollbar automatically
				vertical: 'auto',
				horizontal: 'auto',

			},
			wordWrap: (wrap?"on":"off") // Word wraps
		});
		window.onresize = function (){
			editor.layout();
		};

		// Add switch wrap button to context menu
		editor.addAction({
			id: 'text-wrap',

			label: 'Toggle text wrapping',

			// A precondition for this action.
			precondition: null,

			// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
			keybindingContext: null,

			contextMenuGroupId: 'navigation',

			contextMenuOrder: 1.5,

			// Method that will be executed when the action is triggered.
			// @param editor The editor instance is passed in as a convenience
			run: function (ed) {
				if(wrap){
					editor.updateOptions({ wordWrap: "off" })
				}else{
					editor.updateOptions({ wordWrap: "on" })
				}
				wrap = !wrap;
			}
		});

		onContextMenu();
	});

	function onContextMenu(){
		// Hide context menu items
		// Code modified from https://stackoverflow.com/questions/48745208/disable-cut-and-copy-in-context-menu-in-monaco-editor/65413517#65413517
		let menus = require('vs/platform/actions/common/actions').MenuRegistry._menuItems
		let contextMenuEntry = [...menus].find(entry => entry[0]._debugName == "EditorContext")
		let contextMenuLinks = contextMenuEntry[1]

		let removableIds = ['editor.action.clipboardCutAction', 'editor.action.formatDocument', 'editor.action.formatSelection', 'editor.action.quickCommand', 'editor.action.quickOutline', 'editor.action.refactor', 'editor.action.sourceAction', 'editor.action.rename', undefined, 'editor.action.revealDefinition', 'editor.action.revealDeclaration', 'editor.action.goToTypeDefinition', 'editor.action.goToImplementation', 'editor.action.goToReferences', 'editor.action.changeAll']

		let removeById = (list, ids) => {
			let node = list._first
			do {
				let shouldRemove = ids.includes(node.element?.command?.id)
				if (shouldRemove) { list._remove(node) }
			} while ((node = node.next))
		}

		removeById(contextMenuLinks, removableIds)
	}
</script>

<!-- Context menu-->
</div>
</body>
</html>