File Preview: Support for text files and PDFs

[Innders]

Description of changes

• Support all text/ mime formats and some custom text formats.
• Use code editor in read only mode for syntax highlighting
• Markdown files preview as rendered markdown.
• PDF files now open in a new tab for previewing.
• UploadFileCard now has a consistent UX for pre-viewing and downloading files.

Technical details

It is now a lot easier to add support for new file types using the object expandableMimeTypes in FileUploadPreview.jsx

// define expandable mime types and their components
export const expandableMimeTypes = {
  image: {
    component: ImageMime,
    mimeTypes: ['image/'],
    fullPreviews: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],
    id: 'image',
  },
  text: {
    component: TextMime,
    mimeTypes: ['text/', 'application/json', 'scss', 'jsx'],
    id: 'text',
  },
  pdf: {
    component: null,
    mimeTypes: ['pdf'],
    id: 'pdf',
    callback: (file) => window.open(getFileURL(file.id, file.projectName), '_blank'),
  },
// add new file support and their custom rendering component here
}

Adding a new file value to the object will also automatically show the expand icon when hovering over a file card.

Additional context

[martastain]

works like a charm!

[BigRoy]

Really lovely work! :)