Proper decoding UTF8 content to support Emoji / special UTF8 chars (#360)

web/src/pages/Repository/RepositoryContent/FileContent/FileContent.tsx

@@ -4,7 +4,15 @@ import { Render } from 'react-jsx-match'
 import { useHistory } from 'react-router-dom'
 import { SourceCodeViewer } from 'components/SourceCodeViewer/SourceCodeViewer'
 import type { OpenapiContentInfo, RepoFileContent } from 'services/code'
-import { CodeIcon, findMarkdownInfo, GitCommitAction, GitInfoProps, isRefATag, makeDiffRefs } from 'utils/GitUtils'
+import {
+  CodeIcon,
+  decodeGitContent,
+  findMarkdownInfo,
+  GitCommitAction,
+  GitInfoProps,
+  isRefATag,
+  makeDiffRefs
+} from 'utils/GitUtils'
 import { filenameToLanguage } from 'utils/Utils'
 import { useAppContext } from 'AppContext'
 import { LatestCommitForFile } from 'components/LatestCommit/LatestCommit'
@@ -23,7 +31,7 @@ export function FileContent({
   const { getString } = useStrings()
   const history = useHistory()
   const content = useMemo(
-    () => window.atob((resourceContent?.content as RepoFileContent)?.data || ''),
+    () => decodeGitContent((resourceContent?.content as RepoFileContent)?.data),
     [resourceContent?.content]
   )
   const markdownInfo = useMemo(() => findMarkdownInfo(resourceContent), [resourceContent])

web/src/pages/Repository/RepositoryContent/FolderContent/Readme.tsx

@@ -8,7 +8,7 @@ import { MarkdownViewer } from 'components/SourceCodeViewer/SourceCodeViewer'
 import { useAppContext } from 'AppContext'
 import type { OpenapiContentInfo, OpenapiGetContentOutput, RepoFileContent, TypesRepository } from 'services/code'
 import { useShowRequestError } from 'hooks/useShowRequestError'
-import { CodeIcon } from 'utils/GitUtils'
+import { CodeIcon, decodeGitContent } from 'utils/GitUtils'
 import css from './Readme.module.scss'
 
 interface FolderContentProps {
@@ -61,7 +61,7 @@ function ReadmeViewer({ metadata, gitRef, readmeInfo, contentOnly, maxWidth }: F
 
       <Render when={(data?.content as RepoFileContent)?.data}>
         <Container className={css.readmeContent}>
-          <MarkdownViewer source={window.atob((data?.content as RepoFileContent)?.data || '')} />
+          <MarkdownViewer source={decodeGitContent((data?.content as RepoFileContent)?.data)} />
         </Container>
       </Render>
     </Container>

web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.tsx

@@ -6,7 +6,7 @@ import cx from 'classnames'
 import { SourceCodeEditor } from 'components/SourceCodeEditor/SourceCodeEditor'
 import type { RepoFileContent } from 'services/code'
 import { useAppContext } from 'AppContext'
-import { GitCommitAction, GitContentType, GitInfoProps, isDir, makeDiffRefs } from 'utils/GitUtils'
+import { decodeGitContent, GitCommitAction, GitContentType, GitInfoProps, isDir, makeDiffRefs } from 'utils/GitUtils'
 import { useStrings } from 'framework/strings'
 import { filenameToLanguage, FILE_SEPERATOR } from 'utils/Utils'
 import { useGetResourceContent } from 'hooks/useGetResourceContent'
@@ -31,7 +31,7 @@ function Editor({ resourceContent, repoMetadata, gitRef, resourcePath, isReposit
   const { routes } = useAppContext()
   const [language, setLanguage] = useState(() => filenameToLanguage(fileName))
   const [originalContent, setOriginalContent] = useState(
-    window.atob((resourceContent?.content as RepoFileContent)?.data || '')
+    decodeGitContent((resourceContent?.content as RepoFileContent)?.data)
   )
   const [content, setContent] = useState(originalContent)
   const fileResourcePath = useMemo(

web/src/utils/GitUtils.ts

@@ -146,3 +146,5 @@ export const diffRefsToRefs = (diffRefs: string) => {
     sourceGitRef: parts[1] || ''
   }
 }
+
+export const decodeGitContent = (content = '') => decodeURIComponent(escape(window.atob(content)))