Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: adds preview to html code snippets #187

Merged
merged 3 commits into from
Jun 10, 2024
Merged

Conversation

tomtobac
Copy link
Collaborator

@tomtobac tomtobac commented Jun 10, 2024

Description

Adds preview to Pre component to render HTML blocks using iframes

  • Issue: OS-1985
  • Dependencies: No dependencies
image image image

AI Description

This pull request introduces a new feature that allows users to include code blocks in their messages, which will be displayed as interactive iframes.

Changes include:

  • New utility functions addOnErrorToImg and getReconstructedHtml in preview.ts to process and reconstruct HTML from a plain string.
  • New Iframe component in Iframe.tsx that renders an iframe with a lazy loading mechanism. It also includes a SyntaxHighlighter to style the code.
  • Updates to package.json and package-lock.json to include new dependencies required for the new feature.
  • Modifications to MessageContent.tsx to incorporate the isFulfilledMessage type and utilize the replaceCodeBlockWithIframe function to replace code blocks with iframes.
  • Changes to Markdown.tsx to import the Iframe component and update the rehypePlugins to include rehypeRaw.

@tomtobac tomtobac merged commit 3447bdb into main Jun 10, 2024
2 checks passed
@tomtobac tomtobac deleted the tomeu/OS-1985-rebase branch June 10, 2024 15:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants