[Monaco]Improve .gitignore definition (#33263)

* 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

src/common/FilePreviewCommon/Assets/Monaco/customLanguages/gitignore.js

@@ -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']]
             ]
         }
     };

src/common/FilePreviewCommon/Assets/Monaco/customTokenColors.js

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

src/common/FilePreviewCommon/Assets/Monaco/index.html

@@ -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']

src/common/FilePreviewCommon/FilePreviewCommon.csproj

@@ -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>