feat(ui): add syntax highlighting for other payloads than json

springwolf-ui/src/app/components/info/info.component.spec.ts

@@ -38,6 +38,7 @@ describe("InfoComponent", function () {
         components: {
           schemas: new Map<string, Schema>(),
         },
+        defaultContentType: "application/json",
       }),
   };
 

springwolf-ui/src/app/components/mock-components.spec.ts

@@ -37,6 +37,7 @@ export class MockChannelOperationComponent {
 @Component({ selector: "app-prism-editor", template: "" })
 export class MockPrismEditorComponent {
   code = input<string>("");
+  language = input<string>("");
 }
 
 @Component({ selector: "app-schema-new", template: "" })

springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.html

@@ -132,7 +132,10 @@ <h6>Payload</h6>
   </div>
 
   <div class="width-6/12 width-12/12-s">
-    <app-prism-editor [(code)]="defaultExample.value" language="json" />
+    <app-prism-editor
+      [(code)]="defaultExample.value"
+      [language]="exampleContentType"
+    />
 
     <div class="flex space-between">
       <div class="flex gap-8">

springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.ts

@@ -28,6 +28,7 @@ export class ChannelOperationComponent implements OnInit {
   defaultSchema: Schema = initSchema;
   defaultExample: Example = initExample;
   originalDefaultExample: Example = this.defaultExample;
+  exampleContentType: string = "json";
 
   headers: Schema = initSchema;
   headersExample: Example = initExample;
@@ -56,6 +57,8 @@ export class ChannelOperationComponent implements OnInit {
       const schema = schemas.get(schemaIdentifier)!!;
       this.defaultSchema = schema;
       this.originalDefaultExample = schema.example || noExample;
+      this.exampleContentType =
+        this.operation().message.contentType.split("/").pop() || "json";
 
       const headersSchemaIdentifier =
         this.operation().message.headers.name.slice(

springwolf-ui/src/app/components/new/code/prism-editor.component.ts

@@ -15,10 +15,12 @@ import { highlightBracketPairs } from "prism-code-editor/highlight-brackets";
 import { editHistory } from "prism-code-editor/commands";
 import { copyButton } from "prism-code-editor/copy-button";
 import "prism-code-editor/prism/languages/json";
+import "prism-code-editor/prism/languages/yaml";
 import "prism-code-editor/prism/languages/http";
 import "prism-code-editor/prism/languages/java";
 import "prism-code-editor/prism/languages/kotlin";
 import "prism-code-editor/prism/languages/markdown";
+import "prism-code-editor/prism/languages/xml";
 
 @Component({
   selector: "app-prism-editor",

springwolf-ui/src/app/components/new/schemas/schemas.component.spec.ts

@@ -24,6 +24,7 @@ describe("SchemasNewComponent", () => {
         components: {
           schemas: new Map<string, Schema>(),
         },
+        defaultContentType: "application/json",
       }),
   };
 

springwolf-ui/src/app/components/schemas/schemas.component.spec.ts

@@ -24,6 +24,7 @@ describe("SchemasComponent", () => {
         components: {
           schemas: new Map<string, Schema>(),
         },
+        defaultContentType: "application/json",
       }),
   };
 

springwolf-ui/src/app/models/asyncapi.model.ts

@@ -13,4 +13,5 @@ export interface AsyncApi {
    */
   channelOperations: ChannelOperation[];
   components: { schemas: Map<string, Schema> };
+  defaultContentType: string;
 }

springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts

@@ -58,6 +58,7 @@ export class AsyncApiMapperService {
         components: {
           schemas: this.mapSchemas(item.components.schemas),
         },
+        defaultContentType: item.defaultContentType,
       };
       this.postProcess(asyncApi);
       return asyncApi;

springwolf-ui/src/main.css

@@ -21,6 +21,10 @@ a {
   background-color: #f5f5f5;
 }
 
+.mat-typography markdown > p {
+  margin: 0;
+}
+
 /* Migration away from @angular/flex-layout (https://github.com/angular/flex-layout/issues/1426) */
 .flex {
   display: flex;