fix: convert HTML logs to ANSI format (#102)

src/components/workspace/BuildProject/BuildProject.tsx

@@ -15,6 +15,7 @@ import { buildTs } from '@/utility/typescriptHelper';
 import {
   delay,
   getFileExtension,
+  htmlToAnsi,
   isIncludesTypeCellOrSlice,
   tonHttpEndpoint,
 } from '@/utility/utils';
@@ -290,7 +291,9 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
         const wallet = await blockchain.treasury('user');
         globalWorkspace.sandboxWallet = wallet;
         createLog(
-          `Sandbox account created. Address: <i>${wallet.address.toString()}</i>`,
+          htmlToAnsi(
+            `Sandbox account created. Address: <i>${wallet.address.toString()}</i>`,
+          ),
           'info',
           false,
         );
@@ -312,7 +315,9 @@ const BuildProject: FC<Props> = ({ projectId, contract, updateContract }) => {
         environment: environment.toLowerCase(),
       });
       createLog(
-        `Contract deployed on <b><i>${environment}</i></b> <br /> Contract address: ${_contractAddress}}`,
+        htmlToAnsi(
+          `Contract deployed on <b><i>${environment}</i></b> <br /> Contract address: ${_contractAddress}`,
+        ),
         'success',
       );
 

src/utility/utils.ts

@@ -88,6 +88,32 @@ export const getContractURL = (
   }tonviewer.com/${contractAddress}`;
 };
 
+export const htmlToAnsi = (html: string) => {
+  // Replace <b> and <i> tags with ANSI escape codes for bold and italic
+  html = html.replace(/<b>(.*?)<\/b>/g, '\x1b[1m$1\x1b[22m'); // Bold
+  html = html.replace(/<i>(.*?)<\/i>/g, '\x1b[3m$1\x1b[23m'); // Italic
+
+  // Replace <span> elements with ANSI escape codes for color
+  html = html.replace(
+    /<span style="color:(.*?)">(.*?)<\/span>/g,
+    (_, color, content) => {
+      const colorMap: Record<string, string> = {
+        red: '\x1b[31m',
+        green: '\x1b[32m',
+        yellow: '\x1b[33m',
+        blue: '\x1b[34m',
+        reset: '\x1b[0m',
+      };
+      return `${colorMap[color]}${content}${colorMap.reset}`;
+    },
+  );
+
+  // Remove other HTML tags
+  html = html.replace(/<\/?[^>]+(>|$)/g, '');
+
+  return html;
+};
+
 export const getFileNameFromPath = (filePath: string): string => {
   const pathArray = filePath.split('/');