Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

editor: fix loading of images that have wrong mime type

Browse Source
This commit is contained in:
Abdullah Atta
2024-01-26 20:12:59 +05:00
committed by Abdullah Atta
parent 95666bee36
commit a442677e91
6 changed files with 92 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/editor/src/extensions/image/component.tsx
View File

@@ -34,13 +34,13 @@ import { Resizer } from "../../components/resizer";
import {
corsify,
downloadImage,
isDataUrl,
toBlobURL,
toDataURL
} from "../../utils/downloader";
import { motion } from "framer-motion";
import { useObserver } from "../../hooks/use-observer";
import { Attachment, ImageAlignmentOptions } from "../attachment";
import DataURL from "@notesnook/core/dist/utils/dataurl";
export const AnimatedImage = motion(Image);
@@ -51,7 +51,7 @@ export function ImageComponent(
const { src, alt, title, textDirection, hash, aspectRatio, mime } =
node.attrs;
const [bloburl, setBloburl] = useState<string | undefined>(
toBlobURL("", hash)
toBlobURL("", "image", mime, hash)
);
const isMobile = useIsMobile();
@@ -82,11 +82,10 @@ export function ImageComponent(
.catch(() => null);
if (typeof data !== "string" || !data) return; // TODO: show error
setBloburl(toBlobURL(data, hash));
setBloburl(toBlobURL(data, "image", node.attrs.mime, hash));
})();
}, [inView]);
console.log({ width, height, aspectRatio });
return (
<>
<Box
@@ -263,7 +262,7 @@ export function ImageComponent(
const naturalAspectRatio = orignalWidth / orignalHeight;
const fixedDimensions = fixAspectRatio(width, naturalAspectRatio);
if (src && !isDataUrl(src) && canParse(src)) {
if (src && !DataURL.isValid(src) && canParse(src)) {
const image = await downloadImage(src, downloadOptions);
if (!image) return;
const { url, size, blob, mimeType } = image;
@@ -292,7 +291,6 @@ export function ImageComponent(
)
);
} else if (height !== fixedDimensions.height) {
console.log("RESETTING HEIGHT");
await editor.threadsafe((editor) =>
editor.commands.updateAttachment(fixedDimensions, {
query: makeImageQuery(src, hash)

29
packages/editor/src/utils/downloader.ts
View File

@@ -61,7 +61,7 @@ const UTITypes: Record<string, string> = {
};
export function corsify(url?: string, host?: string) {
if (host && url && !url.startsWith("blob:") && !isDataUrl(url))
if (host && url && !url.startsWith("blob:") && !DataURL.isValid(url))
return `${host}/${url}`;
return url;
}
@@ -115,17 +115,28 @@ export function toDataURL(blob: Blob): Promise<string> {
});
}
export function isDataUrl(url?: string): boolean {
return url?.startsWith("data:") || false;
}
const OBJECT_URL_CACHE: Record<string, string | undefined> = {};
export function toBlobURL(dataurl: string, id?: string) {
export function toBlobURL(
dataurl: string,
type: "image" | "other" = "other",
mimeType?: string,
id?: string
) {
if (id && OBJECT_URL_CACHE[id]) return OBJECT_URL_CACHE[id];
if (!isDataUrl(dataurl)) return;
if (!DataURL.isValid(dataurl)) return;
const dataurlObject = DataURL.toObject(dataurl);
let mime = dataurlObject.mime || "";
const data = dataurlObject.data;
if (!data) return;
// sometimes the provided mime type in the dataurl can be wrong so we
// fallback and make sure the browser loads the image properly.
if (type === "image" && !mime.startsWith("image/")) {
mime = mimeType && mimeType.startsWith("image/") ? mimeType : "image/*";
}
const { data, mime } = DataURL.toObject(dataurl); //.split(",");
if (!data || !mime) return;
const objectURL = URL.createObjectURL(
new Blob([Buffer.from(data, "base64")], { type: mime })
);