diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx index c38e4ec9..a6d47c79 100644 --- a/components/Blocks/ImageBlock.tsx +++ b/components/Blocks/ImageBlock.tsx @@ -100,7 +100,7 @@ export function ImageBlock(props: BlockProps & { preview?: boolean }) { src={ image?.data.local && image.data.local !== rep?.clientID ? image?.data.fallback - : image?.data.src + : `${image?.data.src}${image?.data.local ? "?local" : ""}` } height={image?.data.height} width={image?.data.width} diff --git a/components/Blocks/TextBlock/useHandlePaste.ts b/components/Blocks/TextBlock/useHandlePaste.ts index abbc3432..0ccbd557 100644 --- a/components/Blocks/TextBlock/useHandlePaste.ts +++ b/components/Blocks/TextBlock/useHandlePaste.ts @@ -55,7 +55,8 @@ export const useHandlePaste = ( if ( children.find((c) => ["P", "H1", "H2", "H3", "UL", "DIV", "IMG"].includes(c.tagName), - ) + ) && + !(children.length === 1 && children[0].tagName === "IMG") ) { children.forEach((child, index) => { createBlockFromHTML(child, { diff --git a/public/worker.js b/public/worker.js index 55bb5a27..4fd2b7b1 100644 --- a/public/worker.js +++ b/public/worker.js @@ -1,4 +1,5 @@ self.addEventListener("fetch", (event) => { + if (!event.request.url.includes("?local")) return; event.respondWith( caches.open("minilink-user-assets").then(async (cache) => { return cache diff --git a/src/replicache/mutations.ts b/src/replicache/mutations.ts index d1fe9bc0..29d1a46e 100644 --- a/src/replicache/mutations.ts +++ b/src/replicache/mutations.ts @@ -306,7 +306,7 @@ const removeBlock: Mutation< ctx.runOnClient(async () => { let cache = await caches.open("minilink-user-assets"); for (let image of images) { - await cache.delete(image.data.src); + await cache.delete(image.data.src + "?local"); } }); await ctx.deleteEntity(block.blockEntity); diff --git a/src/utils/addImage.ts b/src/utils/addImage.ts index ab3261b2..385d4a03 100644 --- a/src/utils/addImage.ts +++ b/src/utils/addImage.ts @@ -20,7 +20,7 @@ export async function addImage( .data.publicUrl; let dimensions = await getImageDimensions(file); await cache.put( - url, + new URL(url + "?local"), new Response(file, { headers: { "Content-Type": file.type, @@ -43,11 +43,9 @@ export async function addImage( width: dimensions.width, }, }); - await client.storage - .from("minilink-user-assets") - .upload(fileID, file, { - cacheControl: "public, max-age=31560000, immutable", - }); + await client.storage.from("minilink-user-assets").upload(fileID, file, { + cacheControl: "public, max-age=31560000, immutable", + }); await rep.mutate.assertFact({ entity: args.entityID, attribute: args.attribute,