mirrors/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys synced 2024-11-21 15:53:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Monaco]Improve .gitignore definition (#33263)

Browse Source 
* Update gitignore.js

* Update gitignore.js

* Add custom color for negations

* Add custom color for negations

* Regex refactoring

* Regex refactoring again

* Move customTokenColors to a separate file

* Move customTokenColors to a separate file

* Update devdocs

* Use kebab case for token names

* Update negation color

* Update index.html formatting
This commit is contained in:
PesBandi 2024-06-14 17:09:52 +02:00 committed by GitHub
parent bc0811e6a1
commit cdf5677eb9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 46 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
doc/devdocs/common/FilePreviewCommon.md
View File

@ -47,7 +47,16 @@ registerAdditionalNewLanguage("id", [".fileExtension"], idDefinition(), monaco)
* The id can be anything. Recommended is one of the file extensions. For example "php" or "reg".
4. Execute the steps described in the [monaco_languages.json](#monaco_languagesjson) section.
4. In case you wish to add a custom color for a token, you can do so by adding the following line to [`customTokenColors.js`](/src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js):
```javascript
{token: 'token-name', foreground: 'ff0000'}
```
> Replace `token-name` with the name of the token and `ff0000` with the hex code of the desired color.
> Note: you can also specify a `background` and a `fontStyle` attribute for your token.
* Keep in mind that these rules apply to all languages. Therefore, you should not change the colors of any default tokens. Instead, create new tokens specific to the language you are adding.
5. Execute the steps described in the [monaco_languages.json](#monaco_languagesjson) section.
### Add a new file extension to an existing language

2
installer/PowerToysSetup/generateFileList.ps1
View File

@ -21,7 +21,7 @@ $fileWxs = Get-Content $wxsFilePath;
$fileExclusionList = @("*.pdb", "*.lastcodeanalysissucceeded", "createdump.exe", "powertoys.exe")
$fileInclusionList = @("*.dll", "*.exe", "*.json", "*.msix", "*.png", "*.gif", "*.ico", "*.cur", "*.svg", "index.html", "reg.js", "gitignore.js", "monacoSpecialLanguages.js", "*.pri")
$fileInclusionList = @("*.dll", "*.exe", "*.json", "*.msix", "*.png", "*.gif", "*.ico", "*.cur", "*.svg", "index.html", "reg.js", "gitignore.js", "monacoSpecialLanguages.js", "customTokenColors.js", "*.pri")
$dllsToIgnore = @("System.CodeDom.dll", "WindowsBase.dll")

4
src/common/FilePreviewCommon/Assets/Monaco/customLanguages/gitignore.js
View File

@ -5,8 +5,8 @@
tokenizer: {
root: [
[/^#.*$/, 'comment'],
[/^\s*!.*/, 'invalid'],
[/^\s*[^#]+/, "tag"]
[/.*((?<!(^|\/))\*\*.*|\*\*(?!(\/|$))).*/, 'invalid'],
[/((?:^!\s*(?:\\\s|\S)+)?)((?:^\s*(?:\\\s|\S)+)?)((?:\s+(?:\\\s|\S)+)*)/, ['custom-gitignore.negation', 'tag', 'invalid']]
]
}
};

3
src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js Normal file
View File

@ -0,0 +1,3 @@
export const customTokenColors = [
{token: 'custom-gitignore.negation', foreground: 'c00ce0'}
];

45
src/common/FilePreviewCommon/Assets/Monaco/index.html
View File

@ -6,7 +6,7 @@
// Get URL parameters:
// `code` contains the code of the file in base64 encoded
// `theme` can be "light" or "dark"
// `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
@ -59,19 +59,29 @@
<script src="http://[[PT_URL]]/monacoSpecialLanguages.js" type="module"></script>
<script type="module">
var editor;
import { registerAdditionalLanguages } from "http://[[PT_URL]]/monacoSpecialLanguages.js"
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/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
// 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 fof the code
language: lang, // Sets language of the code
readOnly: true, // Sets to readonly
theme: theme, // Sets editor theme
theme: 'theme', // Sets editor theme
minimap: {enabled: false}, // Disables minimap
lineNumbersMinChars: "3", //Width of the line numbers
lineNumbersMinChars: '3', // Width of the line numbers
scrollbar: {
// Deactivate shadows
shadows: false,
@ -79,17 +89,16 @@
// Render scrollbar automatically
vertical: 'auto',
horizontal: 'auto',
},
stickyScroll: {enabled: stickyScroll},
fontSize: fontSize,
wordWrap: (wrap?"on":"off") // Word wraps
wordWrap: (wrap ? 'on' : 'off') // Word wraps
});
window.onresize = function (){
window.onresize = () => {
editor.layout();
};
// Add switch wrap button to context menu
// Add toggle wrap button to context menu
editor.addAction({
id: 'text-wrap',
@ -101,17 +110,17 @@
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
keybindingContext: null,
contextMenuGroupId: 'cutcopypaste',
contextMenuGroupId: 'cutcopypaste',
contextMenuOrder: 100,
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) {
if(wrap){
editor.updateOptions({ wordWrap: "off" })
}else{
editor.updateOptions({ wordWrap: "on" })
if (wrap) {
editor.updateOptions({ wordWrap: 'off' })
} else {
editor.updateOptions({ wordWrap: 'on' })
}
wrap = !wrap;
}
@ -120,11 +129,11 @@
onContextMenu();
});
function 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 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']

3
src/common/FilePreviewCommon/FilePreviewCommon.csproj
View File

@ -34,6 +34,9 @@
<None Update="Assets\Monaco\monacoSpecialLanguages.js">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Assets\Monaco\customTokenColors.js">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<Content Include="Assets\Monaco\monacoSRC\**">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>