-
Notifications
You must be signed in to change notification settings - Fork 102
feat: introduce an ImageContent component in editor #328
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /** | ||
| * Based on https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types | ||
| * Removing svg, which is not binary. | ||
| */ | ||
| const binaryImageExtensions = new Set(['apng', 'png', 'avif', 'gif', 'jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp', 'webp']); | ||
|
|
||
| export function uint8ArrayToDataUrl(arr: Uint8Array) { | ||
| return URL.createObjectURL(new Blob([arr.buffer])); | ||
| } | ||
| export function isBinaryImagePath(filePath: string) { | ||
| const split = filePath.split('.'); | ||
|
|
||
| if (split.length < 2) { | ||
| return false; | ||
| } | ||
|
|
||
| const ext = split[split.length - 1]; | ||
|
|
||
| return binaryImageExtensions.has(ext); | ||
| } | ||
|
|
||
| export function ImageContent({ src }: { src: string }) { | ||
| return <img src={src} />; | ||
| } | ||
|
Comment on lines
+22
to
+24
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The existing
Suggested change
export function ImageContent({ src }: { src: string }) {
return <img src={src} />;
}
export function ImageContent({ src }: { src: string }) {
return (
<div className="flex items-center justify-center absolute inset-0 z-10 bg-tk-elements-app-backgroundColor">
<img src={src} />
</div>
);
}
This isn't actually good approach as the text content of previous file is still present in DOM. It's part of tab and read order so users can actually navigate to this invisible element. But as this bug is already present in TutorialKit we can ignore it on this PR. 🤷♂️
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this is a leftover of a time where we were trying to cache the |
||
