Add markdown preview to file explorer

[TimeToBuildBob]

Adds rendered markdown preview for markdown files in the file explorer.

---

Important

Adds markdown preview to file explorer with a new MarkdownPreviewTabs component for .md and .markdown files.

• Behavior:
  • Adds markdown preview for .md and .markdown files in FilePreview.tsx.
  • Introduces MarkdownPreviewTabs component for toggling between code and preview views.
• Components:
  • MarkdownPreviewTabs.tsx: Handles rendering of markdown content and tab switching.
  • Updates FilePreview.tsx to use MarkdownPreviewTabs for markdown files.
• Utilities:
  • Uses customRenderer and smd for markdown parsing and rendering in MarkdownPreviewTabs.tsx.

^{This description was created by for f149b10. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to f149b10 in 1 minute and 46 seconds. Click for details.

• Reviewed 149 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. src/components/workspace/FilePreview.tsx:56

• Draft comment:
  Consider memoizing or extracting the markdown file type check. Also, consider supporting other common markdown extensions (e.g. .mdown) if needed.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

2. src/components/workspace/MarkdownPreviewTabs.tsx:21

• Draft comment:
  Ensure that the rendered markdown content is properly sanitized before setting innerHTML to prevent potential XSS vulnerabilities.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% The innerHTML = '' is only used to clear content, not to insert user content. The actual rendering is handled by customRenderer and smd parser which presumably handle sanitization. Without seeing the implementation of customRenderer, we can't be certain about security, but the comment is specifically about innerHTML which isn't the actual security concern here. I can't see the implementation of customRenderer, so I can't be 100% sure that proper sanitization is happening there. The security concern might be valid but misplaced. While security is important, the comment is focusing on the wrong aspect (innerHTML clearing) and we can't evaluate the actual security without seeing customRenderer implementation. Delete the comment as it's focusing on the wrong aspect of security and we can't make a proper assessment without seeing customRenderer implementation.

3. src/components/workspace/MarkdownPreviewTabs.tsx:43

• Draft comment:
  Consider adding ARIA roles and attributes for tab buttons to enhance accessibility.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

4. src/components/workspace/MarkdownPreviewTabs.tsx:21

• Draft comment:
  For very large markdown content, consider debouncing or memoizing the markdown rendering to improve performance when switching tabs.
• Reason this comment was not posted:
  Confidence changes required: 40% <= threshold 50% None

Workflow ID: wflow_q2qwDLKDt30oGbhk

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}