discord-html-transcripts-fix 1.1.0 → 1.2.0

package/README.md

@@ -1,28 +1,77 @@
-# `discord-html-transcripts` (Bugfix Fork)
+# `discord-html-transcripts-fix`
 
-This is a fork of [discord-html-transcripts](https://github.com/ItzDerock/discord-html-transcripts) with bug fixes for compatibility with the latest discord.js version and Components v2.
+A nicely formatted HTML transcript generator for discord.js with full **Components V2** support, an **interactive viewer** (search, lightbox, mention popups, i18n) and **hardened security**.
+
+Forked from [discord-html-transcripts](https://github.com/ItzDerock/discord-html-transcripts).
 
 ## Changes compared to the original
 
-- Fixed compatibility with the latest discord.js version
-- Added support for Discord Components v2
-- **Bug fix**: defensive timestamp parsing — invalid `<t:...>` markers in messages no longer throw `RangeError: Invalid time value` and abort the whole transcript
-- **Bug fix**: removed `process.exit(1)` on discord.js version mismatch — the library now only warns, so the host bot keeps running
-- **Bug fix**: render error boundaries at AST-node and message level — a single broken message can no longer kill the entire transcript; it falls back to a "[message failed to render]" placeholder
-- **Bug fix**: `parseDiscordEmoji` no longer crashes on deleted / unknown reactions where `emoji.name` is `null`
-- **New**: clickable user / role / channel mentions — clicking opens a Discord-style popup with avatar, display name, username, roles (as colored pills), join date, account creation date, role color/position/member count, channel topic, IDs, etc.
-- **New**: `buildExtendedContext` collects full user / role / channel details and ships them in `window.$discordMessage` for the popups (also includes mentioned-but-silent users)
-- **New**: stickers in messages are rendered (image, name)
-- **New**: polls are rendered with answer bars, vote counts, percentages, expiry time
-- **New**: more reliable reaction rendering — handles missing emoji name / unknown custom emojis gracefully
-- **New**: many system message types that were previously stubbed (`undefined`) are now rendered — channel name change, channel icon change, thread created, slash-command used, context-menu command, call started, channel-follow added, recipient left, AutoMod block, guild incident reports, poll result
-- **New**: floating "back-to-top" button that fades in after scrolling
-- **New**: `dht-mention` hover effect on all clickable mentions
-- **DX**: `react`, `react-dom` and `debug` moved into regular `dependencies`, so users no longer have to install them manually (`debug` was actually a missing runtime dependency in the original — `images.js` requires it)
+### Security
+- **Critical fix**: `</script>` breakout via inlined JSON is prevented (`<`, `>`, `&`, U+2028/2029 are escaped)
+- **Critical fix**: markdown links with `javascript:`, `data:`, `vbscript:` and similar 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)
+- **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 any more
+- **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**: embed fields are rendered through a proper async component (was an inline `async` arrow inside `.map()` — undefined React behaviour)
+- **Fix**: `JoinMessage` text is now 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
+
+### New: interactive viewer
+- **Clickable mentions** — clicking a user / role / channel mention opens a Discord-style popup with avatar, display name, username, all roles (colored pills), server-since, account-since, color, member count, channel topic, etc.
+- **Search bar** — Ctrl+F is intercepted, live highlighting with "x of n matches", prev / next, Enter / Shift+Enter to navigate, Escape to close
+- **Image lightbox** — click any image to open fullscreen, arrow keys to nav, Escape to close
+- **Participant sidebar (TOC)** — toggle button (top-left), sorted list of every participant, click to jump to their first message
+- **Back-to-top** floating button fades in after scrolling
+- **Date separators** between messages — `— Tuesday, May 13 2026 —` style, automatically inserted on day boundaries
+- **Stats footer** — `324 messages · 12 participants · 5 images` (auto-computed)
+- **Language switcher** (i18n) — built-in English and German dictionaries, switch live in the viewer. Pass your own via `options.i18n: { de: { … } }` to extend
+
+### New: more Discord content rendered
+- **Stickers** — image, name, alt
+- **Polls** — question, answer bars with vote counts and percentages, expiry
+- **Forwarded messages (`messageSnapshots`)** — quoted-block style with original author
+- **Voice messages** — `🎤` indicator, inline SVG waveform from `attachment.waveform`, duration
+- **Edit timestamp tooltip** on `(edited)` marker
+- **Optional edit history** — pass `message.editHistory = [{content, editedAt}, …]` and the viewer shows a collapsible `<details>` block
+- **Pinned indicator** (`📌` badge on pinned messages)
+- **App badge** for application/bot messages with `applicationId`
+- **Suppressed embeds flag** is honored — when set, embeds aren't rendered (and a small `(embeds hidden)` note is shown instead)
+- **Cross-guild replies** are no longer silently dropped — they show a "Message from another server" pill
+- **Burst / super-reactions** are flagged
+- **Thread state badges** — `Archived`, `Locked`
+- **GIFV / animated GIFs** are rendered with `<video autoplay loop muted>` like in Discord
+- **Attachment description (alt text)** is used as `alt`/`title`
+- **`<id:guide>`, `<id:browse>`, `<id:customize>`** etc. pseudo-channels show as styled pills with proper labels
+- **`</cmd:id>` slash command mentions** render as blue pills
+- **Embed video** link and **embed provider** ("YouTube" etc.) are shown
+- **`RoleSubscriptionPurchase`** system message renders properly
+- **`AutoModerationAction`** shows the matched rule name and blocked content excerpt
+- **Container component** with `accent_color` (left border) and `spoiler` support
+- **Media gallery** per-item spoiler support
+- Many additional system message types (`ChannelNameChange`, `ChannelIconChange`, `ThreadCreated`, `ChatInputCommand`, `ContextMenuCommand`, `Call`, `ChannelFollowAdd`, `RecipientRemove`, guild incident reports, poll result)
+
+### Performance
+- **Single-pass profile collector** — `buildAllContext` builds profiles + extended dicts in one walk over the message list
+- **Image downloader is concurrent** — bounded pool (default 6, configurable via `withConcurrency`) instead of sequential
+- **`@skyra/discord-components-core` version is pinned** to an exact resolved version → CDN cacheable
+- **Inline JSON** is shipped via `<script type="application/json">` so it doesn't block HTML parse
+- **Emoji URL resolution** is memoized
+- **`returnType: 'stream'`** option streams the rendered HTML out instead of buffering — usable for 5,000+ message tickets
+
+### DX
+- **`react`, `react-dom`, `debug` moved into regular dependencies** so users don't install them manually (`debug` was actually a missing runtime dep in the original — `images.js` requires it)
+- TypeScript build target unchanged; only `discord.js` remains a peer dependency
 
 ## Requirements
 
-Only [`discord.js`](https://discord.js.org/) is required as a peer dependency (you already have it in your bot). `react`, `react-dom`, and `debug` are installed automatically. Just run:
+Only `discord.js` as a peer dependency. Everything else is auto-installed:
 
 ```bash
 npm install discord-html-transcripts-fix
@@ -30,76 +79,35 @@ npm install discord-html-transcripts-fix
 
 ## Usage
 
-### Example usage using the built in message fetcher.
-
 ```js
-const discordTranscripts = require('discord-html-transcripts');
-// or (if using typescript) import * as discordTranscripts from 'discord-html-transcripts';
-
-const channel = message.channel; // or however you get your TextChannel
-
-// Must be awaited
-const attachment = await discordTranscripts.createTranscript(channel);
-
-channel.send({
-  files: [attachment],
+const { createTranscript } = require('discord-html-transcripts-fix');
+
+const attachment = await createTranscript(channel, {
+    // existing options
+    limit: -1,
+    saveImages: false,
+    poweredBy: true,
+    // new options
+    language: 'de',                 // 'en' (default) or 'de' — also exposed live in the viewer
+    i18n: { de: { joined: 'kam an' } }, // optional overrides per language
+    returnType: 'stream',           // 'buffer' | 'string' | 'attachment' (default) | 'stream'
 });
-```
-
-### Or if you prefer, you can pass in your own messages.
-
-```js
-const discordTranscripts = require('discord-html-transcripts');
-// or (if using typescript) import * as discordTranscripts from 'discord-html-transcripts';
 
-const messages = someWayToGetMessages(); // Must be Collection<string, Message> or Message[]
-const channel = someWayToGetChannel(); // Used for ticket name, guild icon, and guild name
-
-// Must be awaited
-const attachment = await discordTranscripts.generateFromMessages(messages, channel);
-
-channel.send({
-  files: [attachment],
-});
+channel.send({ files: [attachment] });
 ```
 
-## Configuration
+### Hooking edit history (optional)
 
-Both methods of generating a transcript allow for an option object as the last parameter.
-**All configuration options are optional!**
-
-### Built in Message Fetcher
+If your bot tracks message edits, attach the history to the message before passing it to the renderer:
 
 ```js
-const attachment = await discordTranscripts.createTranscript(channel, {
-    limit: -1, // Max amount of messages to fetch. `-1` recursively fetches.
-    returnType: 'attachment', // Valid options: 'buffer' | 'string' | 'attachment' Default: 'attachment' OR use the enum ExportReturnType
-    filename: 'transcript.html', // Only valid with returnType is 'attachment'. Name of attachment.
-    saveImages: false, // Download all images and include the image data in the HTML (allows viewing the image even after it has been deleted) (! WILL INCREASE FILE SIZE !)
-    footerText: "Exported {number} message{s}", // Change text at footer, don't forget to put {number} to show how much messages got exported, and {s} for plural
-    callbacks: {
-      // register custom callbacks for the following:
-      resolveChannel: (channelId: string) => Awaitable<Channel | null>,
-      resolveUser: (userId: string) => Awaitable<User | null>,
-      resolveRole: (roleId: string) => Awaitable<Role | null>,
-      resolveImageSrc: (
-        attachment: APIAttachment,
-        message: APIMessage
-      ) => Awaitable<string | null | undefined>
-    },
-    poweredBy: true, // Whether to include the "Powered by discord-html-transcripts" footer
-    hydrate: true, // Whether to hydrate the html server-side
-    filter: (message) => true // Filter messages, e.g. (message) => !message.author.bot
-});
+message.editHistory = [
+    { content: 'first version', editedAt: new Date('2025-05-13T11:02Z') },
+    { content: 'corrected version', editedAt: new Date('2025-05-13T11:05Z') },
+];
 ```
 
-### Providing your own messages
-
-```js
-const attachment = await discordTranscripts.generateFromMessages(messages, channel, {
-  // Same as createTranscript, except no limit or filter
-});
-```
+The viewer will then render a collapsible `<details>` block next to the `(edited)` marker.
 
 ## Credits
 

package/dist/downloader/images.js

@@ -1,36 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
 var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
+    var ownKeys = function(o){ownKeys = Object.getOwnPropertyNames || function (o){var ar=[];for (var k in o) if (Object.prototype.hasOwnProperty.call(o,k)) ar[ar.length]=k;return ar;};return ownKeys(o);};
+    return function (mod){if (mod && mod.__esModule) return mod;var result={};if (mod != null) for (var k=ownKeys(mod), i=0; i<k.length; i++) if (k[i] !== "default") Object.defineProperty(result,k[i],{get:function(){return mod[k[i]];}});Object.defineProperty(result,"default",{value:mod,enumerable:true});return result;};
 })();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -39,76 +10,80 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TranscriptImageDownloader = void 0;
 const undici_1 = require("undici");
 const debug_1 = __importDefault(require("debug"));
-/**
- * Builder to build a image saving callback.
- */
+const utils_1 = require("../utils/utils");
+
+// Small inline concurrency limiter — no extra dep
+function createLimiter(max) {
+    let active = 0;
+    const queue = [];
+    const next = () => {
+        if (active >= max || queue.length === 0) return;
+        active++;
+        const { fn, resolve, reject } = queue.shift();
+        fn().then((v) => { active--; resolve(v); next(); }, (e) => { active--; reject(e); next(); });
+    };
+    return (fn) => new Promise((resolve, reject) => { queue.push({ fn, resolve, reject }); next(); });
+}
+
 class TranscriptImageDownloader {
     constructor() {
         this.log = TranscriptImageDownloader.log;
+        this.maxConcurrent = 6;
+        this._sharpModule = null;
+        this._limit = null;
     }
-    /**
-     * Sets the maximum file size for *each* individual image.
-     * @param size The maximum file size in kilobytes
-     */
     withMaxSize(size) {
         this.maxFileSize = size;
         return this;
     }
-    /**
-     * Sets the compression quality for each image. This requires `sharp` to be installed.
-     * Optionally, images can be converted to WebP format which is smaller in size.
-     * @param quality The quality of the image (1 lowest - 100 highest). Lower quality means smaller file size.
-     * @param convertToWebP Whether to convert the image to WebP format
-     */
+    withConcurrency(n) {
+        this.maxConcurrent = Math.max(1, Number(n) || 1);
+        return this;
+    }
     withCompression(quality = 80, convertToWebP = false, options = {}) {
-        if (quality < 1 || quality > 100)
-            throw new Error('Quality must be between 1 and 100');
-        // try and import sharp
-        Promise.resolve().then(() => __importStar(require('sharp'))).catch((err) => {
-            console.error(err);
-            console.error(`[discord-html-transcripts] Failed to import 'sharp'. Image compression requires the 'sharp' package to be installed. Either install sharp or remove the compression options.`);
-        });
+        if (quality < 1 || quality > 100) throw new Error('Quality must be between 1 and 100');
+        // Hoist the sharp import so we don't pay it per image
+        Promise.resolve()
+            .then(() => __importStar(require('sharp')))
+            .then((s) => { this._sharpModule = s; })
+            .catch((err) => {
+                this.log('sharp import failed: %s', err && err.message ? err.message : err);
+            });
         this.compression = { quality, convertToWebP, options };
         return this;
     }
-    /**
-     * Builds the image saving callback.
-     */
     build() {
+        if (!this._limit) this._limit = createLimiter(this.maxConcurrent);
         return async (attachment) => {
-            // if the attachment is not an image, return null
-            if (!attachment.width || !attachment.height)
-                return undefined;
-            // if the max file size is set, check if the file size is within the limit
-            if (this.maxFileSize && attachment.size > this.maxFileSize * 1024)
-                return undefined;
-            // fetch the image
-            this.log(`Fetching attachment ${attachment.id}: ${attachment.url}`);
-            const response = await (0, undici_1.request)(attachment.url).catch((err) => {
-                console.error(`[discord-html-transcripts] Failed to download image for transcript: `, err);
-                return null;
-            });
-            if (!response)
-                return undefined;
-            const mimetype = response.headers['content-type'];
-            const buffer = await response.body.arrayBuffer().then((res) => Buffer.from(res));
-            this.log(`Finished fetching ${attachment.id} (${buffer.length} bytes)`);
-            // if the compression options are set, compress the image
-            if (this.compression) {
-                const sharp = await Promise.resolve().then(() => __importStar(require('sharp')));
-                this.log(`Compressing ${attachment.id} with 'sharp'`);
-                const sharpbuf = await sharp
-                    .default(buffer)
-                    .webp(Object.assign({ quality: this.compression.quality, force: this.compression.convertToWebP, effort: 2 }, this.compression.options))
-                    .toBuffer({ resolveWithObject: true });
-                this.log(`Finished compressing ${attachment.id} (${sharpbuf.info.size} bytes)`);
-                return `data:image/${sharpbuf.info.format};base64,${sharpbuf.data.toString('base64')}`;
-            }
-            // return the base64 string
-            return `data:${mimetype};base64,${buffer.toString('base64')}`;
+            if (!attachment.width || !attachment.height) return undefined;
+            if (this.maxFileSize && attachment.size > this.maxFileSize * 1024) return undefined;
+            return this._limit(() => this._fetchOne(attachment));
         };
     }
+    async _fetchOne(attachment) {
+        this.log('fetch %s %s', attachment.id, attachment.url);
+        const response = await (0, undici_1.request)(attachment.url).catch((err) => {
+            this.log('download failed for %s: %s', attachment.id, err && err.message ? err.message : err);
+            return null;
+        });
+        if (!response) return undefined;
+        const rawMime = response.headers['content-type'];
+        const mime = (0, utils_1.safeImageMime)(typeof rawMime === 'string' ? rawMime : '', 'image/png');
+        const arr = await response.body.arrayBuffer();
+        const buffer = Buffer.from(arr);
+        this.log('fetched %s (%d bytes, mime=%s)', attachment.id, buffer.length, mime);
+        if (this.compression) {
+            const sharp = this._sharpModule || (this._sharpModule = await __importStar(require('sharp')));
+            this.log('compressing %s with sharp', attachment.id);
+            const sharpbuf = await sharp
+                .default(buffer)
+                .webp(Object.assign({ quality: this.compression.quality, force: this.compression.convertToWebP, effort: 2 }, this.compression.options))
+                .toBuffer({ resolveWithObject: true });
+            return `data:image/${sharpbuf.info.format};base64,${sharpbuf.data.toString('base64')}`;
+        }
+        return `data:${mime};base64,${buffer.toString('base64')}`;
+    }
 }
 exports.TranscriptImageDownloader = TranscriptImageDownloader;
 TranscriptImageDownloader.log = (0, debug_1.default)('discord-html-transcripts:TranscriptImageDownloader');
-//# sourceMappingURL=images.js.map
+//# sourceMappingURL=images.js.map