mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-05 10:46:33 +02:00
[RegistryPreview] Adopt Monaco Editor (#35122)
This commit is contained in:
Davide Giacometti
committed by
GitHub
GitHub
parent
b0be69a1b7
commit
f9127b63a5
169
src/Monaco/index.html
Normal file
169
src/Monaco/index.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
// Set variables
|
||||
|
||||
// Get URL parameters:
|
||||
// `code` contains the code of the file in base64 encoded
|
||||
// `theme` can be "vs" for light theme or "vs-dark" for dark theme
|
||||
// `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]]";
|
||||
|
||||
var stickyScroll = ([[PT_STICKY_SCROLL]] == 1) ? true : false;
|
||||
|
||||
var fontSize = [[PT_FONT_SIZE]];
|
||||
var contextMenu = ([[PT_CONTEXTMENU]] == 1) ? true : false;
|
||||
|
||||
var editor;
|
||||
|
||||
// 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(''));
|
||||
|
||||
function runToggleTextWrapCommand() {
|
||||
if (wrap) {
|
||||
editor.updateOptions({ wordWrap: 'off' })
|
||||
} else {
|
||||
editor.updateOptions({ wordWrap: 'on' })
|
||||
}
|
||||
wrap = !wrap;
|
||||
}
|
||||
|
||||
function runCopyCommand() {
|
||||
editor.focus();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
</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>
|
||||
<!-- 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">
|
||||
import { registerAdditionalLanguages } from 'http://[[PT_URL]]/monacoSpecialLanguages.js';
|
||||
import { customTokenColors } from 'http://[[PT_URL]]/customTokenColors.js';
|
||||
require.config({ paths: { vs: 'http://[[PT_URL]]/monacoSRC/min/vs' } });
|
||||
require(['vs/editor/editor.main'], async function () {
|
||||
await registerAdditionalLanguages(monaco)
|
||||
|
||||
// Creates a theme to handle custom tokens
|
||||
monaco.editor.defineTheme('theme', {
|
||||
base: theme, // Sets the base theme to "vs" or "vs-dark" depending on the user's preference
|
||||
inherit: true,
|
||||
rules: customTokenColors,
|
||||
colors: {} // `colors` is a required attribute
|
||||
});
|
||||
|
||||
// Creates the editor
|
||||
// For all parameters: https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html
|
||||
editor = monaco.editor.create(document.getElementById('container'), {
|
||||
value: code, // Sets content of the editor
|
||||
language: lang, // Sets language of the code
|
||||
readOnly: true, // Sets to readonly
|
||||
theme: 'theme', // Sets editor theme
|
||||
minimap: { enabled: false }, // Disables minimap
|
||||
lineNumbersMinChars: '3', // Width of the line numbers
|
||||
contextmenu: contextMenu,
|
||||
scrollbar: {
|
||||
// Deactivate shadows
|
||||
shadows: false,
|
||||
|
||||
// Render scrollbar automatically
|
||||
vertical: 'auto',
|
||||
horizontal: 'auto',
|
||||
},
|
||||
stickyScroll: { enabled: stickyScroll },
|
||||
fontSize: fontSize,
|
||||
wordWrap: (wrap ? 'on' : 'off') // Word wraps
|
||||
});
|
||||
window.onresize = () => {
|
||||
editor.layout();
|
||||
};
|
||||
|
||||
// Add toggle 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: 'cutcopypaste',
|
||||
|
||||
contextMenuOrder: 100,
|
||||
|
||||
// Method that will be executed when the action is triggered.
|
||||
// @param editor The editor instance is passed in as a convenience
|
||||
run: function (ed) {
|
||||
runToggleTextWrapCommand();
|
||||
}
|
||||
});
|
||||
|
||||
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].id == '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 {
|
||||
if (node.element == undefined) break;
|
||||
let shouldRemove = ids.includes(node.element?.command?.id)
|
||||
if (shouldRemove) { list._remove(node) }
|
||||
} while ((node = node.next))
|
||||
}
|
||||
|
||||
removeById(contextMenuLinks, removableIds)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user