discord-html-transcripts-fix 2.2.0 → 2.3.1

package/README.md

@@ -15,9 +15,9 @@ Forked from [discord-html-transcripts](https://github.com/ItzDerock/discord-html
 - **[`sharp`](https://sharp.pixelplumbing.com/)** — *optional* peer dependency, only needed if you use `.withCompression()` to compress / convert transcript images to WebP.
 
 The **generated HTML** additionally reaches out to third-party CDNs when it is *opened*
-— jsDelivr for the `<discord-*>` component runtime and cdnjs for Twemoji SVGs. Set
-[`inlineAssets: true`](#self-contained-transcripts) to embed them and get a file that
-renders offline.
+— jsDelivr for the `<discord-*>` component runtime and the gg sans font, cdnjs for
+Twemoji SVGs. Set [`inlineAssets: true`](#self-contained-transcripts) to embed them and
+get a file that renders offline.
 
 ## Install
 
@@ -67,11 +67,11 @@ const stream = await createTranscript(channel, {
 | `filter` | `(m) => boolean` | `() => true` | Predicate to filter messages. |
 | `returnType` | `'attachment'` \| `'buffer'` \| `'string'` \| `'stream'` | `'attachment'` | Return value shape. In TypeScript pass the `ExportReturnType` enum. `'stream'` returns a Node `Readable` and is best for 5k+ message exports. |
 | `filename` | `string` | `transcript-{channel-id}.html` | Output filename when returning as attachment. |
-| `saveImages` | `boolean` | `false` | Download images and inline them as base64 data URLs. |
+| `saveImages` | `boolean` | `false` | Download image **attachments** and inline them as base64 data URLs. Avatars, embed images and custom emoji keep loading from Discord. |
 | `favicon` | `'guild'` \| `string` | `'guild'` | Page favicon — `'guild'` uses the server icon, or pass a URL. |
 | `hydrate` | `boolean` | `false` | Enables the client-side spoiler-reveal script. |
-| `inlineAssets` | `boolean` | `false` | Embed the component runtime and emoji so the file renders offline. See below. |
-| `inlineAssetsTimeout` | `number` | `30000` | Per-request timeout in ms while downloading those assets. |
+| `inlineAssets` | `boolean` | `false` | Embed the component runtime, the gg sans font and the emoji so the file renders without third-party CDNs. See below. |
+| `inlineAssetsTimeout` | `number` | `30000` | Timeout in ms for each of those downloads, connection setup included. |
 | `dateFormat` | `'dd/mm/yyyy'` \| `'mm/dd/yyyy'` | `'dd/mm/yyyy'` | Date order for message timestamps older than yesterday. |
 | `timeFormat` | `'24h'` \| `'12h'` | `'24h'` | Clock format for message timestamps — `07:16` vs `07:16 AM`. |
 | `language` | `'en'` \| `'de'` | `'en'` | UI language for participant labels, filter strings, etc. |
@@ -84,32 +84,54 @@ const stream = await createTranscript(channel, {
 ### Self-contained transcripts
 
 By default the rendered file is not standalone: opening it fetches the `<discord-*>`
-component runtime from jsDelivr and the emoji SVGs from cdnjs. Offline, on a network
-that blocks those CDNs, or after a CDN outage the transcript renders unstyled — and
-every viewer's IP reaches both CDNs, which can matter for archived tickets.
+component runtime and the gg sans font from jsDelivr and the emoji SVGs from cdnjs.
+Offline, on a network that blocks those CDNs, or after a CDN outage the transcript
+renders unstyled — and every viewer's IP reaches both CDNs, which can matter for
+archived tickets.
 
 ```js
 await createTranscript(channel, {
     inlineAssets: true,
-    saveImages: true, // also inlines Discord's avatars/attachments
+    saveImages: true, // also embeds image attachments
 });
 ```
 
-`inlineAssets` embeds the component runtime and every emoji used, so the file opens
-with **zero external requests**. Verified in a browser: the inlined transcript renders
-identically to the CDN version (same layout, same shadow DOM), loading 35 modules from
-`blob:` URLs and nothing from the network.
+`inlineAssets` embeds the component runtime, all ten gg sans font files and every emoji
+the transcript shows, so opening the file makes **no request to a third-party CDN**.
+Verified in a browser: it renders like the CDN version — reactions included — loads the
+runtime from about 35 `blob:` modules, and the only remaining network request goes to
+Discord's own CDN for avatars.
 
 | | Default | `inlineAssets: true` |
 | --- | --- | --- |
-| File size | ~72 kB | ~620 kB |
-| External hosts on open | jsDelivr, cdnjs, Discord CDN | Discord CDN only (none with `saveImages`) |
-| Works offline | no | yes |
-
-The download happens once per process and is cached, so the first transcript pays
-about a second and later ones are unaffected. If an asset cannot be fetched the CDN
-reference is kept and a warning is logged — the export never fails over this. Use
-`inlineAssetsTimeout` (default `30000` ms) to bound the downloads.
+| File size | ~72 kB | ~960 kB |
+| Hosts contacted on open | jsDelivr, cdnjs, Discord CDN | Discord CDN only (`cdn.discordapp.com`, `media.discordapp.net`) |
+| Without network | unstyled | styled; avatars, and attachments unless `saveImages` is set, are missing |
+
+What stays on Discord's CDN: avatars always; attachment images unless `saveImages` is
+set; embed images, stickers, custom emoji and Components V2 media. Emoji typed as URLs
+in messages are never rewritten — only the images the renderer itself emits are
+embedded.
+
+The downloads happen once per process and are cached, and concurrent exports share
+them, so the first transcript pays about a second and later ones are unaffected. If an
+asset cannot be fetched the CDN reference is kept and a warning naming the cause is
+logged — the export never fails over this:
+
+- A CDN that is unreachable or answers 5xx is given up on after the first failed wave
+  instead of waiting out the timeout for every file, and retried a minute later.
+- A response that is not the expected file (a captive portal or error page answering
+  `200`) is never embedded and never cached.
+- Emoji newer than Twemoji 14.0.2 do not exist on the CDN at all; they are reported once
+  per process instead of on every export.
+- A bug in the inliner itself goes to `console.error` with its stack rather than being
+  reported as a CDN problem.
+
+`inlineAssetsTimeout` (default `30000` ms) caps each download, connection setup
+included; numeric strings from environment variables are accepted. Per-file details are
+available with `DEBUG=discord-html-transcripts:selfContained`. With a stream return type
+the document is buffered before it is streamed, so `stream` saves no memory in
+combination with `inlineAssets`.
 
 ### Message timestamps
 
@@ -207,11 +229,11 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **Action rows** — buttons with proper spacing and Discord-style colors (`primary`, `secondary`, `success`, `destructive`)
 - **Stickers** — PNG, APNG, GIF, Lottie placeholder
 - **Polls** — question, answer bars with vote counts and percentages, expiry
-- **Forwarded messages** (`messageSnapshots`) — quoted-block style with original author, recursive nesting
+- **Forwarded messages** (`messageSnapshots`) — quoted-block style with their text, attachments, embeds and components, naming the source channel (same server only, and never the original author, which Discord hides), recursive nesting; a forward whose snapshot is missing is marked as unavailable
 - **Voice messages** — `🎤` indicator, inline SVG waveform from `attachment.waveform`, duration
 - **Pinned messages** — Discord-style amber left rail (no extra icon clutter)
 - **Slash command interactions** — `{user} used /cmd` header + clickable pill that reveals parameters
-- **System messages** — `ChannelPinnedMessage`, `ChannelNameChange`, `ChannelIconChange`, `ThreadCreated`, `ChatInputCommand`, `ContextMenuCommand`, `Call`, `ChannelFollowAdd`, `RecipientRemove`, `RoleSubscriptionPurchase`, guild incident reports, poll result, AutoMod actions
+- **System messages** — `ChannelPinnedMessage`, `ChannelNameChange`, `ChannelIconChange`, `ThreadCreated`, `ChatInputCommand`, `ContextMenuCommand`, `Call`, `ChannelFollowAdd`, `RecipientRemove`, `RoleSubscriptionPurchase`, guild incident reports, poll result, AutoMod actions, and any other type as a neutral "System message" line
 - **Cross-guild replies** — show a "Message from another server" pill
 - **Burst / super-reactions** flagged
 - **Thread state badges** — `Archived`, `Locked`
@@ -231,16 +253,36 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **Critical fix** markdown links with `javascript:`, `data:`, `vbscript:` and other dangerous URI schemes are rewritten to `#`
 - **Hardened** inline `style="color:…"` sinks in the mention popup are hex-validated to block CSS injection
 - **Hardened** `data:` URI MIME types from the image downloader are restricted to image types only (no `text/html` smuggling)
+- **Hardened** URLs that components render without checking them: image sources (embed author icons, thumbnails, images and footer icons, Components V2 thumbnails and media galleries) only pass as web URLs, inline images or `attachment://`; links (link buttons, Components V2 file links) only as web, `mailto:`, `discord:` or `attachment://` links. A `javascript:` file link in a Components V2 message used to stay clickable
 - **Fixed** `process.exit(1)` on discord.js version mismatch removed — library no longer kills the host bot
 
 ### Robustness
 
 - **Fix** invalid Discord timestamp markers (`<t:abc:F>`, oversized values) no longer abort the transcript with `RangeError`
 - **Fix** per-AST-node error boundary in `MessageSingleASTNode` and per-message error boundary in `DiscordMessage` — one broken message can never kill the whole render
+- **Fix** a failed image download with `saveImages` — or a custom `resolveImageSrc` that throws — no longer fails the whole export: the image keeps its link and a warning names it
 - **Fix** `parseDiscordEmoji` no longer throws on deleted reactions with `emoji.name === null`
 - **Fix** `formatBytes(null/undefined/NaN)` no longer returns `NaN undefined`
 - **Fix** `createTranscript` slice uses the resolved limit instead of the raw `limit`
 - **Fix** `statsFooter` (custom template / `false`) is now forwarded end-to-end — it used to be silently ignored by `createTranscript`/`generateFromMessages`
+- **Fix** `dateFormat`, `timeFormat`, `inlineAssets` and `inlineAssetsTimeout` are forwarded by `createTranscript`/`generateFromMessages` — 2.1.0 and 2.2.0 silently ignored them, the same way `statsFooter` once was. A test derived from the typings now fails whenever a declared option does not reach the renderer
+- **Fix** `hydrate` combined with `returnType: 'stream'` / `stream: true` returns a `Readable` again instead of a string
+- **Fix** `inlineAssets` hardened now that it actually runs: reaction emoji render as images instead of base64 text, user-typed URLs are never rewritten, the timeout also bounds connection setup, a CDN outage is not waited out per file, error pages are never embedded or cached, and a bug in the inliner is no longer reported as a CDN problem
+- **Fix** `inlineAssets` + stream yields Buffer chunks like every other stream (a single string chunk broke `Buffer.concat`)
+- **Fix** invalid `dateFormat` / `timeFormat` / `inlineAssetsTimeout` values are reported instead of silently replaced; case and numeric strings are tolerated
+- **Fix** forwarded messages show their content — discord.js hands over `messageSnapshots` as a Collection, and an array check left every forward empty ("Message could not be loaded."). A forward is no longer mistaken for a reply or a cross-server message (on discord.js before 14.16 too), its header names the source channel when that channel is on the same server, and a forward whose snapshot is missing says so. The original author is never shown, as in Discord, even though discord.js hands it over when the bot has the original message cached
+- **Fix** forwarded messages show their embeds and Components V2 content in full instead of a "1 embed" count, and forwarded images go through `saveImages` / `resolveImageSrc` like any other instead of staying on Discord's expiring CDN links. They also count in the stats footer and for the image, attachment and embed filters
+- **Fix** link previews, GIFs (`gifv`) and video embeds get their own layout — discord.js keeps the embed type only in `embed.data`, so every embed rendered as `rich` and an image preview showed up as an empty card with a small thumbnail
+- **Fix** super reactions and voice-message durations show — the renderer read the raw API names (`count_details`, `burst_colors`, `duration_secs`), which discord.js renames
+- **Fix** reply authors get their role color, and embed footer icons and audio file sizes show — the values were passed as camelCase attributes, which HTML lowercases, so the components never received them. Members without a colored role are no longer painted black
+- **Fix** text outside the Basic Multilingual Plane showed as pairs of `�` — fancy-font ("math italic") server and channel names, rare ideographs, symbols — in messages, embeds and Components V2 containers. The markdown parser cuts its text at every non-ASCII character and counts UTF-16 code units, so such a character arrived as two lone halves that could not be encoded. Text is merged back (and renders as one piece per run instead of one node per non-ASCII character, which also shrinks the HTML). Reply and thread previews, the search text, activity party ids and the server's initial letters no longer cut through a character either, and a server name with a double space no longer reads "Aundefined"
+- **Fix** a fenced code block in a language highlight.js does not know — ` ```ansi `, ` ```log `, a typo such as `js2` — made the whole export fail, because the error was raised while rendering, outside the per-message safety net. Such blocks now show as plain text, like in Discord; `ansi` blocks lose their color escape codes
+- **Fix** a role-subscription tier name containing `$&`, `$'`, `` $` `` or `$$` was altered when the message was composed; it is shown exactly as written
+- **Fix** reaction counts of 1,000 and more showed `NaN` — the abbreviated "1.5K" went to a component that only reads numbers; the full count is shown now
+- **Fix** system messages of types without their own wording — Server Discovery notices, invite reminders, premium upsells, purchase notifications, and any type Discord adds later — were silently dropped from the transcript. They appear as a neutral "System message" line with Discord's text now (new i18n key `systemMessage`)
+- **Fix** the stats footer counts one of something in the singular — "1 message · 1 participant · 1 image" instead of "1 messages", in German too (new i18n keys `statsMessage`, `statsParticipant`, `statsImage`)
+- **Fix** select menu options show their emoji instead of its URL as text, and AutoMod alerts name the channel instead of printing `<#id>` (its id remains when the server does not know it)
+- **Fix** profile cards no longer depend on the order users appear in: someone first seen without member data, as the user of a slash command for example, now gets their nickname, roles and color from their own messages. One malformed user or message in plain-object input no longer drops every profile of the transcript, and a guild member that cannot be read falls back to the user's own name and avatar
 - **Fix** embed fields render through a proper async component (was an inline `async` arrow inside `.map()`)
 - **Fix** `JoinMessage` text is deterministic per message id — re-rendering the same channel always yields the same join line
 - **Fix** random `console.log` calls in production paths replaced by the `debug` namespace
@@ -268,7 +310,7 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **Discord-style message timestamps** — today shows the bare time (`07:16`), yesterday reads `Yesterday at 07:16`, anything older gets `11/08/2026 07:16`. Configurable via `dateFormat` and `timeFormat`. Previously the raw ISO string (`2026-08-14T07:16:07.422Z`) was rendered, because the web component only formats real `Date` objects and an HTML attribute always arrives as a string
 - **`hydrate: true` actually works** — the markup was handed to Lit as a plain string, which Lit HTML-escapes, so the option emitted a page of visible `&lt;!DOCTYPE html&gt;…` source text instead of a transcript
 - **`@lit-labs/ssr` and `lit` removed entirely** — the `hydrate` path pushed the finished markup through Lit SSR, which was measured to contribute exactly four inert `<!--lit-part-->` comments and nothing else, since the page never loads a Lit hydration client. Two dependencies and the deprecated `node-fetch → fetch-blob → node-domexception` chain for four comments. `hydrate: true` keeps its real effect (the spoiler-reveal script), and the install is now warning-free
-- **`inlineAssets` option** — embeds the component runtime and emoji so a transcript renders with zero external requests
+- **`inlineAssets` option** — embeds the component runtime, the gg sans font and the emoji so a transcript opens without any third-party CDN
 - **TypeScript declarations match runtime** — `ExportReturnType.Stream`, `language`, `i18n`, `stream`, and `withConcurrency()` are now exposed in the types
 - `discord.js` remains the only **required** peer dependency
 
@@ -282,6 +324,18 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 | `TranscriptImageDownloader` | Builder for a custom image-saving callback (`withMaxSize`, `withConcurrency`, `withCompression`, `build`). |
 | `DiscordMessages` | The underlying React component, for advanced/custom rendering. |
 
+## Development
+
+```bash
+npm test
+npm run test:update
+```
+
+`npm test` runs the unit tests and the golden transcripts: every scenario in
+`tests/fixtures/scenarios.js` is rendered from real discord.js objects and compared with
+`tests/golden/`. After an intended change to the output, `npm run test:update` rewrites
+the snapshots — review the diff before committing it.
+
 ## License
 
 [Apache-2.0](./LICENSE) — same as the original package.

package/dist/generator/index.js

@@ -39,16 +39,26 @@ try {
     if (/^\d+\.\d+\.\d+/.test(cleaned)) discordComponentsVersion = cleaned;
 } catch (_b) { /* ignore */ }
 
+// Images of a message, including those it forwards — they are part of the transcript too.
+function countImages(m, depth = 0) {
+    let n = 0;
+    if (m?.attachments && typeof m.attachments.forEach === 'function') {
+        m.attachments.forEach((a) => {
+            if (typeof a?.contentType === 'string' && a.contentType.startsWith('image/')) n++;
+        });
+    }
+    if (depth < 5 && m?.messageSnapshots && typeof m.messageSnapshots.forEach === 'function') {
+        m.messageSnapshots.forEach((snap) => { n += countImages(snap?.message || snap, depth + 1); });
+    }
+    return n;
+}
+
 function computeStats(messages) {
     let images = 0;
     let humans = new Set();
     let firstTs = null, lastTs = null;
     for (const m of messages) {
-        if (m.attachments && m.attachments.forEach) {
-            m.attachments.forEach((a) => {
-                if (typeof a.contentType === 'string' && a.contentType.startsWith('image/')) images++;
-            });
-        }
+        images += countImages(m);
         if (m.author && !m.author.bot) humans.add(m.author.id);
         const ts = m.createdAt instanceof Date ? m.createdAt.getTime() : (snowflakeToDate(m.id)?.getTime() || null);
         if (ts) {
@@ -104,7 +114,7 @@ async function render(_a) {
 
     // Single-pass collector (profiles + extended in one walk)
     const allCtx = await (0, buildProfiles_1.buildAllContext)(messages, channel).catch((e) => {
-        console.warn('[discord-html-transcripts-fix] buildAllContext failed:', e?.message || e);
+        console.warn('[discord-html-transcripts-fix] buildAllContext failed:', e);
         return { profiles: {}, users: {}, roles: {}, channels: {} };
     });
 
@@ -182,14 +192,12 @@ async function render(_a) {
 
     const { prelude } = await (0, static_1.prerenderToNodeStream)(docTree);
 
-    // `hydrate` used to additionally push the finished markup through
-    // @lit-labs/ssr. That round-trip was measured to contribute exactly four
-    // inert <!--lit-part--> comments and nothing else — the page never loads a
-    // lit hydration client, and the <discord-*> elements hydrate themselves once
-    // their definitions are registered. Two dependencies (and the deprecated
-    // node-fetch → fetch-blob → node-domexception chain they dragged along) for
-    // four comments was a bad trade, so the round-trip is gone. The option keeps
-    // its real effect: it enables the spoiler-reveal script emitted above.
+    // `hydrate` needs no branch of its own here. It used to push the finished
+    // markup through @lit-labs/ssr, which contributed only four inert
+    // <!--lit-part--> comments and was removed; its remaining effect, the
+    // spoiler-reveal script, is already part of the tree above. A leftover
+    // `if (options.hydrate) return string` kept overriding the stream contract,
+    // so hydrate + stream handed callers a string where they expect a Readable.
     const wantsStream = options.returnType === 'stream' || options.stream;
 
     if (options.inlineAssets) {
@@ -199,11 +207,9 @@ async function render(_a) {
         const markup = await (0, selfContained_1.inlineExternalAssets)(await (0, utils_1.streamToString)(prelude), {
             timeout: options.inlineAssetsTimeout,
         });
-        return wantsStream ? stream_1.Readable.from([markup]) : markup;
-    }
-
-    if (options.hydrate) {
-        return await (0, utils_1.streamToString)(prelude);
+        // Same chunk type as the plain stream: Buffers, not one object-mode string
+        // (consumers that Buffer.concat() the chunks would otherwise throw).
+        return wantsStream ? stream_1.Readable.from([Buffer.from(markup, 'utf8')], { objectMode: false }) : markup;
     }
 
     if (wantsStream) {
@@ -258,10 +264,13 @@ function renderStatsFooter(stats, lang, i18n, opts) {
     }
 
     const dict = (i18n && i18n[lang]) || (i18n && i18n.en) || {};
+    // "1 message", not "1 messages".
+    const count = (n, one, many, fallbackOne, fallbackMany) =>
+        (n === 1 ? (dict[one] || fallbackOne) : (dict[many] || fallbackMany)).replace('{n}', String(n));
     const parts = [
-        (dict.statsMessages || '{n} messages').replace('{n}', values.messages),
-        (dict.statsParticipants || '{n} participants').replace('{n}', values.participants),
-        (dict.statsImages || '{n} images').replace('{n}', values.images),
+        count(stats.messageCount, 'statsMessage', 'statsMessages', '{n} message', '{n} messages'),
+        count(stats.participantCount, 'statsParticipant', 'statsParticipants', '{n} participant', '{n} participants'),
+        count(stats.imageCount, 'statsImage', 'statsImages', '{n} image', '{n} images'),
     ];
     if (values.from && values.to) parts.push(values.from + ' → ' + values.to);
     if (values.span) parts.push(values.span);
@@ -306,6 +315,7 @@ discord-action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin
 .dht-forwarded-icon{margin-right:4px}
 .dht-forwarded-body{color:#dbdee1}
 .dht-forwarded-attachments{margin-top:4px;font-size:11px;color:#949ba4}
+.dht-forwarded-media{margin-top:4px}
 .dht-edit-history{font-size:12px;color:#b5bac1;margin-top:4px}
 .dht-edit-history summary{cursor:pointer;color:#949ba4}
 .dht-edit-history li{margin-top:4px}

package/dist/generator/renderers/attachment.js

@@ -23,7 +23,17 @@ async function Attachment({ attachment, context, message }) {
 
     switch (attachmentType) {
         case types_1.AttachmentTypes.Image: {
-            const downloaded = await context.callbacks.resolveImageSrc(attachment.toJSON(), message.toJSON());
+            let downloaded;
+            try {
+                downloaded = await context.callbacks.resolveImageSrc(attachment.toJSON(), message.toJSON());
+            }
+            catch (err) {
+                // Rendering runs in async components outside the per-message boundary: a
+                // failed download (saveImages, a custom resolver) used to reject the whole
+                // export. The image keeps its link instead.
+                console.warn('[discord-html-transcripts-fix] could not save image', attachment.id, (0, utils_1.describeError)(err));
+                downloaded = undefined;
+            }
             if (downloaded !== null) {
                 url = downloaded ?? url;
             }
@@ -37,8 +47,10 @@ async function Attachment({ attachment, context, message }) {
             return (0, jsx_runtime_1.jsx)("discord-video-attachment", { slot: "attachments", href: url }, attachment.id);
         }
         case types_1.AttachmentTypes.Audio: {
-            // Voice messages have waveform + duration_secs — message.js renders the indicator
-            return (0, jsx_runtime_1.jsx)("discord-audio-attachment", { slot: "attachments", href: url, bytes: bytes, bytesUnit: bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);
+            // Voice messages have waveform + duration_secs — message.js renders the indicator.
+            // "bytes-unit", like the file attachment below: HTML lowercases attribute
+            // names, and `bytesUnit` arrived as `bytesunit`, which is not observed.
+            return (0, jsx_runtime_1.jsx)("discord-audio-attachment", { slot: "attachments", href: url, bytes: bytes, "bytes-unit": bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);
         }
         case types_1.AttachmentTypes.File: {
             return (0, jsx_runtime_1.jsx)("discord-file-attachment", { slot: "attachments", href: url, bytes: bytes, "bytes-unit": bytesUnit, name: attachment.name, title: attachment.description || undefined }, attachment.id);

package/dist/generator/renderers/components/DiscordHighlightedCode.js

@@ -7,6 +7,7 @@ exports.DiscordHighlightStyles = void 0;
 exports.DiscordHighlightedCode = DiscordHighlightedCode;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const highlight_js_1 = __importDefault(require("highlight.js"));
+const utils_1 = require("../../../utils/utils");
 // styles from https://github.com/cherryblossom000/discord-syntax-highlighting/tree/main
 exports.DiscordHighlightStyles = `
   .hljs-ansi-control-sequence {
@@ -190,10 +191,35 @@ exports.DiscordHighlightStyles = `
 	background-color: #67060c;
   }
 `;
+const ESC = String.fromCharCode(27);
+// Discord colors ANSI blocks; the transcript shows their text without the control sequences.
+const ANSI_SGR = new RegExp(ESC + '\\[[0-9;]*m', 'g');
+
+function escapeHtml(text) {
+    return String(text)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#x27;');
+}
+
+// The block is rendered while React runs, outside every per-message safety net, so a
+// throw here used to reject the whole export: highlight.js raises an error for a language
+// it does not know ("ansi", "log", a typo such as "js2"), and users write those all the time.
+// Those blocks show as plain text, which is what Discord does for them.
+function highlightCode(content, language) {
+    const name = typeof language === 'string' ? language.trim() : '';
+    try {
+        if (!name) return highlight_js_1.default.highlightAuto(content).value;
+        if (highlight_js_1.default.getLanguage(name)) return highlight_js_1.default.highlight(content, { language: name }).value;
+    } catch (err) {
+        console.warn('[discord-html-transcripts-fix] could not highlight a code block:', (0, utils_1.describeError)(err));
+    }
+    return escapeHtml(name.toLowerCase() === 'ansi' ? content.replace(ANSI_SGR, '') : content);
+}
+
 function DiscordHighlightedCode(props) {
-    const highlighted = props.language
-        ? highlight_js_1.default.highlight(props.content, { language: props.language })
-        : highlight_js_1.default.highlightAuto(props.content);
-    return (0, jsx_runtime_1.jsx)("discord-code", { multiline: true, className: "theme-dark hljs", dangerouslySetInnerHTML: { __html: highlighted.value } });
+    return (0, jsx_runtime_1.jsx)("discord-code", { multiline: true, className: "theme-dark hljs", dangerouslySetInnerHTML: { __html: highlightCode(props.content, props.language) } });
 }
 //# sourceMappingURL=DiscordHighlightedCode.js.map

package/dist/generator/renderers/components/Media Gallery.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("./utils");
+const utils_2 = require("../../../utils/utils");
 function DiscordMediaGallery({ component }) {
     if (!component.items || component.items.length === 0) {
         return null;
@@ -10,7 +11,7 @@ function DiscordMediaGallery({ component }) {
     const imagesToShow = component.items.slice(0, 10);
     const hasMore = component.items.length > 10;
     return ((0, jsx_runtime_1.jsx)("div", { style: (0, utils_1.getGalleryLayout)(count), children: imagesToShow.map((media, idx) => {
-        const url = media.media.url;
+        const url = (0, utils_2.safeImageSrc)(media.media?.url);
         const isVideo = typeof url === 'string' && /\.(mp4|webm|mov)(\?|$)/i.test(url);
         const img = isVideo
             ? (0, jsx_runtime_1.jsx)("video", { src: url, autoPlay: true, loop: true, muted: true, playsInline: true, style: { width: '100%', height: '100%', objectFit: 'cover' } })

package/dist/generator/renderers/components/Select Menu.js

@@ -19,13 +19,19 @@ function DiscordSelectMenu({ component, }) {
                     border: '1px solid #1e1f22',
                     maxHeight: '320px',
                     overflowY: 'auto',
-                }, children: component.options.map((option, idx) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: component.options.map((option, idx) => {
+                    // parseDiscordEmoji returns an image URL — empty when the emoji has
+                    // neither id nor name. As plain children it showed up as raw URL text
+                    // in the opened menu instead of the emoji.
+                    const emojiSrc = option.emoji ? (0, utils_1.parseDiscordEmoji)(option.emoji) : '';
+                    return ((0, jsx_runtime_1.jsxs)("div", { style: {
                         padding: '8px 12px',
                         cursor: 'pointer',
                         display: 'flex',
                         alignItems: 'center',
                         borderBottom: idx < component.options.length - 1 ? '1px solid #1e1f22' : 'none',
-                    }, children: [option.emoji && (0, jsx_runtime_1.jsx)("span", { style: { marginRight: '8px' }, children: (0, utils_1.parseDiscordEmoji)(option.emoji) }), (0, jsx_runtime_1.jsx)("span", { children: option.label })] }, idx))) }))] }));
+                    }, children: [emojiSrc && (0, jsx_runtime_1.jsx)("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)("img", { src: emojiSrc, alt: option.emoji.name || 'emoji', style: { width: '16px', height: '16px' } }) }), (0, jsx_runtime_1.jsx)("span", { children: option.label })] }, idx));
+                }) }))] }));
 }
 exports.default = DiscordSelectMenu;
 //# sourceMappingURL=Select%20Menu.js.map

package/dist/generator/renderers/components/TranscriptHeader.js

@@ -2,12 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TranscriptHeader = TranscriptHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
+
+// The first user-perceived character of a word. word[0] is one UTF-16 code unit —
+// half of a character outside the Basic Multilingual Plane (fancy-font letters, emoji),
+// which cannot be encoded — and would also cut an accent off its letter or an emoji
+// sequence apart.
+const segmenter = typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+function firstCharacter(word) {
+    if (segmenter) {
+        for (const { segment } of segmenter.segment(word)) return segment;
+        return '';
+    }
+    const codePoint = word.codePointAt(0);
+    return codePoint === undefined ? '' : String.fromCodePoint(codePoint);
+}
+
 function TranscriptHeader(props) {
     // If guild has no icon, we take first letter of guild name words
     // i.e. Guild A -> GA
     // and OneWordGuildName -> O
-    const split = props.guildName.split(' ');
-    const placeholder = split.length > 1 ? split[0][0] + split[1][0] : split[0][0];
+    if (typeof props.guildName !== 'string') {
+        console.warn('[discord-html-transcripts-fix] the server has no name (an unavailable guild?); the header shows none');
+    }
+    const words = String(props.guildName ?? '').split(/\s+/).filter(Boolean);
+    const placeholder = words.length > 1 ? firstCharacter(words[0]) + firstCharacter(words[1]) : firstCharacter(words[0] ?? '');
     return ((0, jsx_runtime_1.jsxs)("div", { className: "discord-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "discord-header-icon", children: props.guildIcon ? ((0, jsx_runtime_1.jsx)("img", { src: props.guildIcon, alt: "guild icon" })) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("span", { children: placeholder }) })) }), (0, jsx_runtime_1.jsxs)("div", { className: "discord-header-text", children: [(0, jsx_runtime_1.jsx)("div", { className: "discord-header-text-guild", children: props.guildName }), (0, jsx_runtime_1.jsxs)("div", { className: "discord-header-text-channel", children: ["#", props.channelName] }), props.children] })] }));
 }
 //# sourceMappingURL=TranscriptHeader.js.map

package/dist/generator/renderers/components.js

@@ -30,7 +30,10 @@ function ComponentRow({ component, id, context, }) {
             return ((0, jsx_runtime_1.jsx)(Container_1.default, { accentColor: accentColor, spoiler: spoiler, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: component.components.map((nestedComponent, id) => ((0, jsx_runtime_1.jsx)(ComponentRow, { component: nestedComponent, id: id, context: context }, id))) }) }, id));
         }
         case discord_js_1.ComponentType.File: {
-            const attachmentComponent = (0, jsx_runtime_1.jsx)("discord-file-attachment", { href: component.file.url });
+            // <discord-file-attachment> turns href into a link without checking it.
+            const fileHref = (0, utils_1.safeLinkHref)(component.file?.url);
+            // A rejected link gets no href at all: "#" would open the transcript itself.
+            const attachmentComponent = (0, jsx_runtime_1.jsx)("discord-file-attachment", { href: fileHref === '#' ? undefined : fileHref });
             if (component.spoiler) {
                 return ((0, jsx_runtime_1.jsx)("discord-spoiler", { slot: "attachment", children: attachmentComponent }, component.id));
             }
@@ -54,7 +57,7 @@ function Component({ component, id, }) {
     var _a;
     switch (component.type) {
         case discord_js_1.ComponentType.Button:
-            return ((0, jsx_runtime_1.jsx)(Button_1.default, { type: styles_1.ButtonStyleMapping[component.style], url: (_a = component.url) !== null && _a !== void 0 ? _a : undefined, emoji: component.emoji ? (0, utils_1.parseDiscordEmoji)(component.emoji) : undefined, children: component.label }, id));
+            return ((0, jsx_runtime_1.jsx)(Button_1.default, { type: styles_1.ButtonStyleMapping[component.style], url: (_a = component.url) !== null && _a !== void 0 ? (0, utils_1.safeLinkHref)(_a) : undefined, emoji: component.emoji ? (0, utils_1.parseDiscordEmoji)(component.emoji) : undefined, children: component.label }, id));
         case discord_js_1.ComponentType.StringSelect:
         case discord_js_1.ComponentType.UserSelect:
         case discord_js_1.ComponentType.RoleSelect:
@@ -62,7 +65,7 @@ function Component({ component, id, }) {
         case discord_js_1.ComponentType.ChannelSelect:
             return (0, jsx_runtime_1.jsx)(Select_Menu_1.default, { component: component }, id);
         case discord_js_1.ComponentType.Thumbnail:
-            return (0, jsx_runtime_1.jsx)(Thumbnail_1.default, { url: component.media.url }, id);
+            return (0, jsx_runtime_1.jsx)(Thumbnail_1.default, { url: (0, utils_1.safeImageSrc)(component.media?.url) }, id);
         default:
             return undefined;
     }

package/dist/generator/renderers/content.js

@@ -32,6 +32,44 @@ function hexToRgba(hex, alpha) {
     return `rgba(${r},${g},${b},${alpha})`;
 }
 
+// discord-markdown-parser ends a text node before every character outside
+// [0-9A-Za-z] and whitespace, and it counts UTF-16 code units. A character outside
+// the Basic Multilingual Plane — fancy-font letters, rare CJK, symbols — therefore
+// arrives as two text nodes holding one lone surrogate half each, and encoding the
+// page turned every half into U+FFFD. Adjacent text nodes are joined again, which
+// also stops non-ASCII text from becoming one node (and one markup separator) per
+// character. Plain text content is all that is merged; nothing else changes.
+function mergeTextNodes(nodes) {
+    if (!Array.isArray(nodes)) return nodes;
+    const out = [];
+    for (const node of nodes) {
+        if (Array.isArray(node)) {
+            out.push(mergeTextNodes(node));
+            continue;
+        }
+        if (!node || typeof node !== 'object') {
+            out.push(node);
+            continue;
+        }
+        const previous = out[out.length - 1];
+        if (node.type === 'text' && typeof node.content === 'string'
+            && previous && !Array.isArray(previous) && previous.type === 'text' && typeof previous.content === 'string') {
+            out[out.length - 1] = Object.assign({}, previous, { content: previous.content + node.content });
+            continue;
+        }
+        const merged = Object.assign({}, node);
+        if (Array.isArray(node.content)) merged.content = mergeTextNodes(node.content);
+        if (Array.isArray(node.items)) merged.items = mergeTextNodes(node.items);
+        out.push(merged);
+    }
+    return out;
+}
+
+function parseMarkdown(source, mode) {
+    const parsed = discord_markdown_parser_1.default(source, mode);
+    return mergeTextNodes(Array.isArray(parsed) ? parsed : [parsed]);
+}
+
 // Discord-specific block-level markdown that discord-markdown-parser misses in inline mode.
 // Run BEFORE the parser, extract heading/subtext lines, parse the rest, splice back together.
 const HEADING_RE = /^(#{1,3})\s+(.+?)\s*$/;
@@ -47,9 +85,7 @@ function preParseDiscord(content, mode) {
 
     const flushInline = () => {
         if (!inlineBuffer) return;
-        const parsed = discord_markdown_parser_1.default(inlineBuffer, mode);
-        const arr = Array.isArray(parsed) ? parsed : [parsed];
-        nodes.push(...arr);
+        nodes.push(...parseMarkdown(inlineBuffer, mode));
         inlineBuffer = '';
     };
 
@@ -77,16 +113,14 @@ function preParseDiscord(content, mode) {
         if (h) {
             flushInline();
             const level = h[1].length;
-            const headingInner = discord_markdown_parser_1.default(h[2], mode);
-            nodes.push({ type: 'heading', level, content: Array.isArray(headingInner) ? headingInner : [headingInner] });
+            nodes.push({ type: 'heading', level, content: parseMarkdown(h[2], mode) });
             continue;
         }
 
         const s = line.match(SUBTEXT_RE);
         if (s) {
             flushInline();
-            const innerNodes = discord_markdown_parser_1.default(s[1], mode);
-            nodes.push({ type: 'subtext', content: Array.isArray(innerNodes) ? innerNodes : [innerNodes] });
+            nodes.push({ type: 'subtext', content: parseMarkdown(s[1], mode) });
             continue;
         }
 
@@ -103,14 +137,15 @@ function preParseDiscord(content, mode) {
 
 async function MessageContent({ content, context }) {
     if (context.type === RenderType.REPLY && content.length > 180) {
-        content = content.slice(0, 180) + '...';
+        // Not through the middle of a surrogate pair: half of one cannot be encoded.
+        content = (0, utils_1.truncateText)(content, 180) + '...';
     }
     const mode = context.type === RenderType.EMBED || context.type === RenderType.WEBHOOK ? 'extended' : 'normal';
     // REPLY mode is always inline-only (heading inside a reply preview makes no sense).
     // For all other modes (NORMAL/EMBED/WEBHOOK) we pre-process headings/subtext/code-fences
     // so they render correctly even though discord-markdown-parser is inline-only.
     const parsed = context.type === RenderType.REPLY
-        ? discord_markdown_parser_1.default(content, mode)
+        ? parseMarkdown(content, mode)
         : preParseDiscord(content, mode);
 
     const nodes = Array.isArray(parsed) ? parsed : [parsed];
@@ -136,7 +171,7 @@ async function MessageSingleASTNode({ node, context }) {
     try {
         return await renderASTNode(node, context);
     } catch (err) {
-        console.warn('[discord-html-transcripts-fix] AST node render failed:', err && err.message ? err.message : err);
+        console.warn('[discord-html-transcripts-fix] AST node render failed:', err);
         try {
             if (typeof node.content === 'string') return node.content;
             if (Array.isArray(node.content)) return (0, jsx_runtime_1.jsx)(MessageASTNodes, { nodes: node.content, context });