Add text version of the response Timeline tab

src-web/components/core/Editor/Editor.tsx

@@ -77,7 +77,7 @@ export interface EditorProps {
   heightMode?: 'auto' | 'full';
   hideGutter?: boolean;
   id?: string;
-  language?: EditorLanguage | 'pairs' | 'url' | null;
+  language?: EditorLanguage | 'pairs' | 'url' | 'timeline' | null;
   graphQLSchema?: GraphQLSchema | null;
   onBlur?: () => void;
   onChange?: (value: string) => void;

src-web/components/core/Editor/extensions.ts

@@ -48,6 +48,7 @@ import type { EditorProps } from './Editor';
 import { jsonParseLinter } from './json-lint';
 import { pairs } from './pairs/extension';
 import { text } from './text/extension';
+import { timeline } from './timeline/extension';
 import type { TwigCompletionOption } from './twig/completion';
 import { twig } from './twig/extension';
 import { pathParametersPlugin } from './twig/pathParameters';
@@ -95,6 +96,7 @@ const syntaxExtensions: Record<
   url: url,
   pairs: pairs,
   text: text,
+  timeline: timeline,
   markdown: markdown,
 };
 

src-web/components/core/Editor/timeline/extension.ts

@@ -0,0 +1,12 @@
+import { LanguageSupport, LRLanguage } from '@codemirror/language';
+import { parser } from './timeline';
+
+export const timelineLanguage = LRLanguage.define({
+  name: 'timeline',
+  parser,
+  languageData: {},
+});
+
+export function timeline() {
+  return new LanguageSupport(timelineLanguage);
+}

src-web/components/core/Editor/timeline/highlight.ts

@@ -0,0 +1,7 @@
+import { styleTags, tags as t } from '@lezer/highlight';
+
+export const highlight = styleTags({
+  OutgoingText: t.propertyName, // > lines - primary color (matches timeline icons)
+  IncomingText: t.tagName, // < lines - info color (matches timeline icons)
+  InfoText: t.comment, // * lines - subtle color (matches timeline icons)
+});

src-web/components/core/Editor/timeline/timeline.grammar

@@ -0,0 +1,21 @@
+@top Timeline { line* }
+
+line { OutgoingLine | IncomingLine | InfoLine | PlainLine }
+
+@skip {} {
+  OutgoingLine { OutgoingText Newline }
+  IncomingLine { IncomingText Newline }
+  InfoLine { InfoText Newline }
+  PlainLine { PlainText Newline }
+}
+
+@tokens {
+  OutgoingText { "> " ![\n]* }
+  IncomingText { "< " ![\n]* }
+  InfoText { "* " ![\n]* }
+  PlainText { ![\n]+ }
+  Newline { "\n" }
+  @precedence { OutgoingText, IncomingText, InfoText, PlainText }
+}
+
+@external propSource highlight from "./highlight"

src-web/components/core/Editor/timeline/timeline.terms.ts

@@ -0,0 +1,12 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  Timeline = 1,
+  OutgoingLine = 2,
+  OutgoingText = 3,
+  Newline = 4,
+  IncomingLine = 5,
+  IncomingText = 6,
+  InfoLine = 7,
+  InfoText = 8,
+  PlainLine = 9,
+  PlainText = 10

src-web/components/core/Editor/timeline/timeline.ts

@@ -0,0 +1,18 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+import {highlight} from "./highlight"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "!pQQOPOOO`OPO'#C^OeOPO'#CaOjOPO'#CcOoOPO'#CeOOOO'#Ci'#CiOOOO'#Cg'#CgQQOPOOOOOO,58x,58xOOOO,58{,58{OOOO,58},58}OOOO,59P,59POOOO-E6e-E6e",
+  stateData: "z~ORPOUQOWROYSO~OSWO~OSXO~OSYO~OSZO~ORUWYW~",
+  goto: "m^PP_PP_P_P_PcPiTTOVQVOR[VTUOV",
+  nodeNames: "⚠ Timeline OutgoingLine OutgoingText Newline IncomingLine IncomingText InfoLine InfoText PlainLine PlainText",
+  maxTerm: 13,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: "%h~RZOYtYZ!]Zztz{!b{!^t!^!_#d!_!`t!`!a$f!a;'St;'S;=`!V<%lOt~ySY~OYtZ;'St;'S;=`!V<%lOt~!YP;=`<%lt~!bOS~~!gUY~OYtZptpq!yq;'St;'S;=`!V<%lOt~#QSW~Y~OY!yZ;'S!y;'S;=`#^<%lO!y~#aP;=`<%l!y~#iUY~OYtZptpq#{q;'St;'S;=`!V<%lOt~$SSU~Y~OY#{Z;'S#{;'S;=`$`<%lO#{~$cP;=`<%l#{~$kUY~OYtZptpq$}q;'St;'S;=`!V<%lOt~%USR~Y~OY$}Z;'S$};'S;=`%b<%lO$}~%eP;=`<%l$}",
+  tokenizers: [0],
+  topRules: {"Timeline":[0,1]},
+  tokenPrec: 36
+})