discord-html-transcripts-fix 2.3.0 → 2.3.1

package/README.md

@@ -275,6 +275,9 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **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`)

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/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/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];

package/dist/generator/renderers/message.js

@@ -74,7 +74,7 @@ async function DiscordMessage({ message, context }) {
             : '';
         const authorName = (message.member?.nickname || message.author?.displayName || message.author?.username || '').toLowerCase();
         const ts = message.createdAt instanceof Date ? message.createdAt.getTime() : 0;
-        const lowerText = (message.content || '').toLowerCase().slice(0, 4096);
+        const lowerText = (0, utils_1.truncateText)((message.content || '').toLowerCase(), 4096);
         const mediaFlags = detectMediaFlags(message);
         const hasImage = mediaFlags.hasImage;
         const hasEmbed = mediaFlags.hasEmbed;
@@ -198,7 +198,7 @@ async function DiscordMessage({ message, context }) {
                 isSilent && (0, jsx_runtime_1.jsx)("span", { className: "dht-badge dht-badge-silent", title: "Silent message (no notification)", children: '🔕 Silent' }),
                 activity && (0, jsx_runtime_1.jsxs)("div", { className: "dht-activity", children: [
                     (0, jsx_runtime_1.jsx)("span", { className: "dht-activity-icon", children: '🎮' }),
-                    (0, jsx_runtime_1.jsxs)("span", { children: [activity.type, ' invite', activity.partyId ? ` · Party ${activity.partyId.slice(-6)}` : ''] })
+                    (0, jsx_runtime_1.jsxs)("span", { children: [activity.type, ' invite', activity.partyId ? ` · Party ${Array.from(activity.partyId).slice(-6).join('')}` : ''] })
                 ] }),
                 editedAtIso && (0, jsx_runtime_1.jsx)("span", { className: "dht-edit-marker", title: editedAtTitle || editedAtIso, "data-edit-iso": editedAtIso, "data-i18n": "edited", "data-i18n-params": JSON.stringify({ time: editedAtLabel || editedAtIso }), children: '(' + t(context, 'edited', 'edited') + ')' }),
                 Array.isArray(message.editHistory) && message.editHistory.length > 0 && renderEditHistory(message.editHistory, context),
@@ -270,7 +270,7 @@ function renderThread(thread, context) {
     return (0, jsx_runtime_1.jsxs)("discord-thread", { slot: "thread", name: thread.name, cta, children: [
         badges,
         thread.lastMessage
-            ? (0, jsx_runtime_1.jsx)("discord-thread-message", { profile: thread.lastMessage.author.id, children: (0, jsx_runtime_1.jsx)(content_1.default, { content: thread.lastMessage.content.length > 128 ? thread.lastMessage.content.substring(0, 125) + '...' : thread.lastMessage.content, context: Object.assign({}, context, { type: content_1.RenderType.REPLY }) }) })
+            ? (0, jsx_runtime_1.jsx)("discord-thread-message", { profile: thread.lastMessage.author.id, children: (0, jsx_runtime_1.jsx)(content_1.default, { content: thread.lastMessage.content.length > 128 ? (0, utils_1.truncateText)(thread.lastMessage.content, 125) + '...' : thread.lastMessage.content, context: Object.assign({}, context, { type: content_1.RenderType.REPLY }) }) })
             : 'Thread messages not saved.'
     ] });
 }

package/dist/generator/renderers/systemMessage.js

@@ -201,7 +201,7 @@ async function SystemMessage({ message, context }) {
             return ((0, jsx_runtime_1.jsxs)("discord-system-message", { id: `m-${message.id}`, timestamp: ts, type: "boost", children: [
                 (0, jsx_runtime_1.jsx)(Highlight, { color, userId: authorId, children: authorName }),
                 ' ',
-                t(ctx, 'roleSubPurchased', 'subscribed to {role}!').replace('{role}', roleName),
+                t(ctx, 'roleSubPurchased', 'subscribed to {role}!').replace('{role}', () => roleName),
             ] }, message.id));
         }
 

package/dist/utils/utils.js

@@ -12,6 +12,7 @@ exports.safeHref = safeHref;
 exports.safeImageSrc = safeImageSrc;
 exports.safeLinkHref = safeLinkHref;
 exports.describeError = describeError;
+exports.truncateText = truncateText;
 exports.safeColor = safeColor;
 exports.safeImageMime = safeImageMime;
 exports.escapeHtml = escapeHtml;
@@ -228,6 +229,16 @@ function safeLinkHref(url) {
     return safeHref(url);
 }
 
+// Cuts `text` to at most `max` UTF-16 code units without cutting through a surrogate
+// pair. Half of a pair cannot be encoded: it ends up as U+FFFD in the page.
+function truncateText(text, max) {
+    if (typeof text !== 'string' || text.length <= max) return text;
+    let end = max;
+    const last = text.charCodeAt(end - 1);
+    if (last >= 0xd800 && last <= 0xdbff) end--; // a first half: leave it out with its second half
+    return text.slice(0, end);
+}
+
 // An error for a log line: its message and stack only. A whole error object can
 // carry what a caller's HTTP client attached to it, request headers included.
 function describeError(err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-html-transcripts-fix",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "A nicely formatted html transcript generator for discord.js. Bugfix fork with support for the latest discord.js and Components v2.",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",