diff --git a/apps/desktop/src/components/main/body/changelog/index.tsx b/apps/desktop/src/components/main/body/changelog/index.tsx index 1506b9abb7..e32e10e0b4 100644 --- a/apps/desktop/src/components/main/body/changelog/index.tsx +++ b/apps/desktop/src/components/main/body/changelog/index.tsx @@ -47,8 +47,11 @@ function stripFrontmatter(content: string): string { return content.trim(); } -function stripImageLine(content: string): string { - return content.replace(/^!\[.*?\]\(.*?\)\s*\n*/m, ""); +function fixImageUrls(content: string): string { + return content.replace( + /!\[([^\]]*)\]\(\/api\/images\/([^)]+)\)/g, + "![$1](https://auth.hyprnote.com/storage/v1/object/public/public_images/$2)", + ); } function addEmptyParagraphsBeforeHeaders( @@ -188,7 +191,7 @@ function useChangelogContent(version: string) { changelogFiles[key]() .then((raw) => { - const markdown = stripImageLine(stripFrontmatter(raw as string)); + const markdown = fixImageUrls(stripFrontmatter(raw as string)); const json = md2json(markdown); setContent(addEmptyParagraphsBeforeHeaders(json)); setLoading(false); diff --git a/apps/web/src/routes/api/images.$.ts b/apps/web/src/routes/api/images.$.ts index b7e2737eda..b1381cc569 100644 --- a/apps/web/src/routes/api/images.$.ts +++ b/apps/web/src/routes/api/images.$.ts @@ -1,7 +1,7 @@ import { createFileRoute } from "@tanstack/react-router"; const SUPABASE_STORAGE_URL = - "https://ijoptyyjrfqwaqhyxkxj.supabase.co/storage/v1/object/public/public_images"; + "https://auth.hyprnote.com/storage/v1/object/public/public_images"; const SAFE_SEGMENT = /^[A-Za-z0-9._+-]+$/; diff --git a/packages/tiptap/src/styles/base.css b/packages/tiptap/src/styles/base.css index 308de0e034..53dbab134b 100644 --- a/packages/tiptap/src/styles/base.css +++ b/packages/tiptap/src/styles/base.css @@ -32,8 +32,21 @@ margin-bottom: 0.25rem; } + .tiptap-image-wrapper { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + > .tiptap-image-wrapper:first-child { + padding-top: 0; + } + + > .tiptap-image-wrapper:last-child { + padding-bottom: 0; + } + .tiptap-image { - max-width: 240px; + max-width: 100%; height: auto; display: block; }