I didn't introduce any custom colors here but just used built-in token types for highlighting (`string` for red and `variable` for blue)

I think its good, the syntax is pretty minimal so its fine to keep it simple as you did!

From the original ace implementation, I didn't understand what this does, also couldn't understand it from grok docs. Is this important? :

kibana/x-pack/plugins/grokdebugger/public/lib/ace/grok_highlight_rules.js

Lines 33 to 41 in 7c7fd88

	{
	token: (escapeToken /* regexToken */) => {
	if (escapeToken) {
	return ['grokEscape', 'grokEscaped'];
	}
	return 'grokRegex';
	},
	regex: '(\\\\)?([\\[\\]\\(\\)\\?\\:\\|])',
	},

I'm a bit rusty with regexes but it seems like it matches any backslashes followed by square brackets, parentheses, question marks, colons, or vertical bars? I'm unsure what this is for, but perhaps @alisonelizabeth might have some idea 🤔

Pinging @elastic/appex-sharedux (Team:SharedUX)

I think this is a good start. Thanks @Dosant!

Grok debugger has been around a long time and unfortunately I do not have much context into the original implementation. That said, I was able to track down #18572, where it looks like the syntax highlighting was implemented. There is a screenshot that shows the previous behavior.

@sabarasaba, @alisonelizabeth, thanks! so I think I understand what it is now:

first, there were the following CSS classes that added color (probably they were removed by mistake so highlighting stoped working on some point for ace)

  .ace_grokStart,
   .ace_grokEnd,
   .ace_grokSeparator,
   .ace_grokEscape {
     color: #999999; // euiColorMediumShade
   }

   .ace_grokPatternName {
     color: #017F75; // euiColorSecondary
   }

   .ace_grokFieldName,
   .ace_grokRegex {
     color: #0079A5; // euiColorPrimary
   }

   .ace_grokFieldType {
     color: #0079A5; // euiColorPrimary
     font-style: italic;
   }
 }

you can see that from

 { 
   token: (escapeToken /* regexToken */) => { 
     if (escapeToken) { 
       return ['grokEscape', 'grokEscaped']; 
     } 
     return 'grokRegex'; 
   }, 
   regex: '(\\\\)?([\\[\\]\\(\\)\\?\\:\\|])', 
 }, 

we highlighted with css only grokEscape and grokRegex, but not grokEscaped

so the idea was to highlight either grokEscape or grokRegex if it wasn't escaped. (not really sure what grokRegex is, looks like just one of the symbols in the list)

I'll try to repro with monaco highlighting

I think this should work as before in ace now including special symbols and escaping them (a bit different on colors and less variance, as I wanted to avoid adding custom themes):

@sabarasaba, should be ready for review 👍

💚 Build Succeeded

• Buildkite Build
• Commit: 6e5bda6

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

History

• 💚 Build #133780 succeeded ee78d4a

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream