Merge pull request #2272 from stakwork/feature/add-code-formatter

feat: added code formater for selected view

package.json

@@ -33,6 +33,7 @@
     "lsat-js": "^2.0.6",
     "moment": "^2.29.4",
     "postprocessing": "^6.31.0",
+    "prism-react-renderer": "^2.4.0",
     "process": "^0.11.10",
     "r3f-perf": "6.7.0",
     "react": "^18.2.0",
@@ -48,6 +49,7 @@
     "react-player": "^2.11.2",
     "react-router-dom": "6.23.1",
     "react-spinners": "^0.13.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^10.0.4",
     "reactflow": "^11.9.2",
     "recharts": "^2.4.3",
@@ -185,6 +187,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-input-mask": "3.0.2",
     "@types/react-lottie": "^1.2.10",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/styled-components": "^5.1.25",
     "@types/three": "^0.150.2",
     "@typescript-eslint/eslint-plugin": "^5.27.1",

src/components/App/SideBar/SelectedNodeView/Default/index.tsx

@@ -2,6 +2,8 @@ import Button from '@mui/material/Button'
 import clsx from 'clsx'
 import moment from 'moment'
 import { useEffect, useRef, useState } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'
 import { Divider } from '~/components/common/Divider'
 import { Flex } from '~/components/common/Flex'
@@ -136,7 +138,10 @@ const NodeDetail = ({ label, value, hasAudio, isPlaying, togglePlay }: Props) =>
             <AudioButton onClick={togglePlay}>{isPlaying ? <AiPauseIcon /> : <AiPlayIcon />}</AudioButton>
           )}
         </Text>
-        <Text className="node-detail__value">{highlightSearchTerm(String(value), searchTerm)}</Text>
+        {false && <Text className="node-detail__value">{highlightSearchTerm(String(value), searchTerm)}</Text>}
+        <SyntaxHighlighter language="javascript" style={okaidia}>
+          {String(value)}
+        </SyntaxHighlighter>
       </StyledDetail>
       <StyledDivider />
     </>