Syntax highlighting for well known configuration files (line#990)

Motivation:

Only JSON was the only supported language to syntax highlight. If we
support other files, readability could be increased.

Modifications:

- Map file extension to Monaco's language ID.

Result:

Syntax highlighting is supported for YAML and XML.

webapp/src/dogma/common/components/editor/FileEditor.tsx

@@ -31,14 +31,34 @@ import Router from 'next/router';
 export type FileEditorProps = {
   projectName: string;
   repoName: string;
-  language: string;
+  extension: string;
   originalContent: string;
   path: string;
   name: string;
 };
 
-const FileEditor = ({ projectName, repoName, language, originalContent, path, name }: FileEditorProps) => {
+// Map file extension to language identifier
+const extensionToLanguageMap: { [key: string]: string } = {
+  js: 'javascript',
+  ts: 'typescript',
+  html: 'html',
+  css: 'css',
+  json: 'json',
+  xml: 'xml',
+  md: 'markdown',
+  py: 'python',
+  yml: 'yaml',
+  yaml: 'yaml',
+  dockerfile: 'dockerfile',
+  sass: 'sass',
+  less: 'less',
+  scss: 'scss',
+  toml: 'toml',
+};
+
+const FileEditor = ({ projectName, repoName, extension, originalContent, path, name }: FileEditorProps) => {
   const dispatch = useAppDispatch();
+  const language = extensionToLanguageMap[extension] || extension;
   let jsonContent = '';
   if (language === 'json') {
     try {

webapp/src/pages/app/projects/[projectName]/repos/[repoName]/files/[revision]/[[...path]]/index.tsx

@@ -18,6 +18,8 @@ const FileContentPage = () => {
     .split('/')
     .filter((v) => v.length > 0)
     .pop();
+
+  const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
   const { data, isLoading, error } = useGetFileContentQuery(
     { projectName, repoName, filePath },
     {
@@ -51,7 +53,7 @@ const FileContentPage = () => {
           <FileEditor
             projectName={projectName}
             repoName={repoName}
-            language={data.type.toLowerCase()}
+            extension={fileExtension}
             originalContent={data.content}
             path={data.path}
             name={fileName}