diff --git a/src/app/components/text-viewer/TextViewer.tsx b/src/app/components/text-viewer/TextViewer.tsx index 37642db..7829fb3 100644 --- a/src/app/components/text-viewer/TextViewer.tsx +++ b/src/app/components/text-viewer/TextViewer.tsx @@ -4,7 +4,6 @@ import classNames from 'classnames'; import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds'; import { ErrorBoundary } from 'react-error-boundary'; import * as css from './TextViewer.css'; -import { mimeTypeToExt } from '../../utils/mimeTypes'; import { copyToClipboard } from '../../utils/dom'; const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism')); @@ -12,12 +11,12 @@ const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism')); export type TextViewerProps = { name: string; text: string; - mimeType: string; + langName: string; requestClose: () => void; }; export const TextViewer = as<'div', TextViewerProps>( - ({ className, name, text, mimeType, requestClose, ...props }, ref) => { + ({ className, name, text, langName, requestClose, ...props }, ref) => { const handleCopy = () => { copyToClipboard(text); }; @@ -51,10 +50,7 @@ export const TextViewer = as<'div', TextViewerProps>( alignItems="Center" > - + {text}}> {text}}> {(codeRef) => {text}} diff --git a/src/app/organisms/room/message/FileContent.tsx b/src/app/organisms/room/message/FileContent.tsx index 303c453..9c65966 100644 --- a/src/app/organisms/room/message/FileContent.tsx +++ b/src/app/organisms/room/message/FileContent.tsx @@ -23,7 +23,12 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { getFileSrcUrl, getSrcFile } from './util'; import { bytesToSize } from '../../../utils/common'; import { TextViewer } from '../../../components/text-viewer'; -import { READABLE_TEXT_MIME_TYPES } from '../../../utils/mimeTypes'; +import { + READABLE_EXT_TO_MIME_TYPE, + READABLE_TEXT_MIME_TYPES, + getFileNameExt, + mimeTypeToExt, +} from '../../../utils/mimeTypes'; import { PdfViewer } from '../../../components/Pdf-viewer'; import * as css from './styles.css'; @@ -103,7 +108,11 @@ function ReadTextFile({ body, mimeType, url, encInfo }: Omit setTextViewer(false)} /> @@ -247,7 +256,8 @@ function DownloadFile({ body, mimeType, url, info, encInfo }: FileContentProps) export const FileContent = as<'div', FileContentProps>( ({ body, mimeType, url, info, encInfo, ...props }, ref) => ( - {READABLE_TEXT_MIME_TYPES.includes(mimeType) && ( + {(READABLE_TEXT_MIME_TYPES.includes(mimeType) || + READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)]) && ( )} {mimeType === 'application/pdf' && ( diff --git a/src/app/organisms/room/message/Message.tsx b/src/app/organisms/room/message/Message.tsx index 8f25861..13e4326 100644 --- a/src/app/organisms/room/message/Message.tsx +++ b/src/app/organisms/room/message/Message.tsx @@ -246,7 +246,7 @@ export const MessageSourceCodeItem = as< diff --git a/src/app/utils/mimeTypes.ts b/src/app/utils/mimeTypes.ts index c883ddb..2a92367 100644 --- a/src/app/utils/mimeTypes.ts +++ b/src/app/utils/mimeTypes.ts @@ -57,6 +57,43 @@ export const READABLE_TEXT_MIME_TYPES = [ ...TEXT_MIME_TYPE, ]; +export const READABLE_EXT_TO_MIME_TYPE: Record = { + go: 'text/go', + rs: 'text/rust', + py: 'text/python', + swift: 'text/swift', + c: 'text/c', + cpp: 'text/cpp', + java: 'text/java', + kt: 'text/kotlin', + lua: 'text/lua', + php: 'text/php', + ts: 'text/typescript', + js: 'text/javascript', + jsx: 'text/jsx', + tsx: 'text/tsx', + html: 'text/html', + xhtml: 'text/xhtml', + xht: 'text/xhtml', + css: 'text/css', + scss: 'text/scss', + sass: 'text/sass', + json: 'text/json', + md: 'text/markdown', + yaml: 'text/yaml', + yni: 'text/yni', + xml: 'text/xml', + txt: 'text/plain', + text: 'text/plain', + conf: 'text/conf', + cfg: 'text/conf', + cnf: 'text/conf', + log: 'text/log', + me: 'text/me', + cvs: 'text/cvs', + tvs: 'text/tvs', +}; + export const ALLOWED_BLOB_MIME_TYPES = [ ...IMAGE_MIME_TYPES, ...VIDEO_MIME_TYPES, @@ -92,3 +129,7 @@ export const mimeTypeToExt = (mimeType: string): string => { const extStart = mimeType.lastIndexOf('/') + 1; return mimeType.slice(extStart); }; +export const getFileNameExt = (fileName: string): string => { + const extStart = fileName.lastIndexOf('.') + 1; + return fileName.slice(extStart); +};