From c2773a8f6d4b2ca50fd1f44b8affeca93bf1a9f2 Mon Sep 17 00:00:00 2001
From: Vanessa Scherma <vanessa.scherma@gmail.com>
Date: Thu, 10 Oct 2024 13:31:31 +0200
Subject: [PATCH] Update preview tab

---
 .../route/digitaltwins/editor/Editor.tsx      |  1 +
 .../route/digitaltwins/editor/PreviewTab.tsx  | 52 +++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/client/src/preview/route/digitaltwins/editor/Editor.tsx b/client/src/preview/route/digitaltwins/editor/Editor.tsx
index 3834422d7..9065c306b 100644
--- a/client/src/preview/route/digitaltwins/editor/Editor.tsx
+++ b/client/src/preview/route/digitaltwins/editor/Editor.tsx
@@ -45,6 +45,7 @@ function Editor({ DTName }: EditorProps) {
             padding: 2,
             border: '1px solid lightgray',
             marginTop: 2,
+            width: '800px'
           }}
         >
           {activeTab === 0 && (
diff --git a/client/src/preview/route/digitaltwins/editor/PreviewTab.tsx b/client/src/preview/route/digitaltwins/editor/PreviewTab.tsx
index 1f22c214d..ef5c48312 100644
--- a/client/src/preview/route/digitaltwins/editor/PreviewTab.tsx
+++ b/client/src/preview/route/digitaltwins/editor/PreviewTab.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { Remarkable } from 'remarkable';
+import 'katex/dist/katex.min.css';
+// @ts-expect-error: Ignoring TypeScript error due to missing type definitions for 'remarkable-katex'.
+import RemarkableKatex from 'remarkable-katex';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 interface PreviewProps {
@@ -8,16 +11,59 @@ interface PreviewProps {
 }
 
 function PreviewTab({ fileContent, fileType }: PreviewProps) {
-  const md = new Remarkable();
-
   if (fileType === 'md') {
+    const md = new Remarkable({
+      html: true,
+      typographer: true,
+    }).use(RemarkableKatex);
+
     const renderedMarkdown = md.render(fileContent);
 
-    return <div dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />;
+    return (
+      <div style={{
+        width: '100%',
+        overflowWrap: 'break-word',
+        wordWrap: 'break-word',
+        whiteSpace: 'normal',
+        overflow: 'hidden',
+      }}>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: renderedMarkdown,
+          }}
+          style={{
+            maxWidth: '100%',
+          }}
+        />
+        <style>{`
+          img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            margin: 0 auto;
+          }
+          table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+          }
+          th, td {
+            border: 1px solid #ccc;
+            padding: 8px;
+            text-align: left;
+          }
+          th {
+            background-color: #f0f0f0;
+          }
+        `}</style>
+      </div>
+    );
   }
+  
   if (fileType === 'json') {
     return <SyntaxHighlighter language="json">{fileContent}</SyntaxHighlighter>;
   }
+  
   return <SyntaxHighlighter language="yaml">{fileContent}</SyntaxHighlighter>;
 }