diff --git a/packages/react/src/core/CodeMirrorEditor/ImageContent.tsx b/packages/react/src/core/CodeMirrorEditor/ImageContent.tsx new file mode 100644 index 000000000..65367ca77 --- /dev/null +++ b/packages/react/src/core/CodeMirrorEditor/ImageContent.tsx @@ -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 ; +} diff --git a/packages/react/src/core/CodeMirrorEditor/index.tsx b/packages/react/src/core/CodeMirrorEditor/index.tsx index ed02582e9..cc6c0f896 100644 --- a/packages/react/src/core/CodeMirrorEditor/index.tsx +++ b/packages/react/src/core/CodeMirrorEditor/index.tsx @@ -21,6 +21,7 @@ import { BinaryContent } from './BinaryContent.js'; import { getTheme, reconfigureTheme } from './cm-theme.js'; import { indentKeyBinding } from './indent.js'; import { getLanguage } from './languages.js'; +import { isBinaryImagePath, ImageContent, uint8ArrayToDataUrl } from './ImageContent.js'; export interface EditorDocument { value: string | Uint8Array; @@ -90,6 +91,7 @@ export function CodeMirrorEditor({ const onChangeRef = useRef(onChange); const isBinaryFile = doc?.value instanceof Uint8Array; + const isBinaryImageFile = isBinaryFile && doc?.filePath && isBinaryImagePath(doc?.filePath); onScrollRef.current = onScroll; onChangeRef.current = onChange; @@ -187,7 +189,11 @@ export function CodeMirrorEditor({ return (
- {isBinaryFile && } + {isBinaryImageFile ? ( + + ) : isBinaryFile ? ( + + ) : null}
); diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.png b/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.png new file mode 100644 index 000000000..5860818fd Binary files /dev/null and b/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.png differ diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.svg b/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.svg new file mode 100644 index 000000000..4785a87eb --- /dev/null +++ b/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.svg @@ -0,0 +1,4 @@ + + + +