fix: text overflow (closes #45)

feat: displays dates in local timezone
ItzDerock · Jul 20, 2022 · 7fc4f9c · 7fc4f9c
1 parent 3affa03
commit 7fc4f9c
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 70 deletions.
diff --git a/src/exporthtml.ts b/src/exporthtml.ts
@@ -18,7 +18,7 @@ import {
 } from './types';
 
 import { downloadImageToDataURL } from './utils';
-const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8');
+const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8').replace('{{staticTypes.timestampShort}}', JSON.stringify(staticTypes.timestampShort));
 
 const version = require('../package.json').version;
 const isDJSv14 = userDiscord.version.startsWith('14');
@@ -67,17 +67,19 @@ async function generateTranscript<T extends ReturnTypes>(
     const document = dom.window.document;
 
     // Replace <style>...</style> with <link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/discord-html-transcripts@version/dist/template.css">
-    const style = document.querySelector('style')!;
-    style.parentNode!.removeChild(style);
-    const link = document.createElement('link');
-    link.setAttribute('rel', 'stylesheet');
-    link.setAttribute(
-        'href',
-        'https://cdn.jsdelivr.net/npm/discord-html-transcripts@' +
-            (version ?? 'latest') +
-            '/dist/template.css'
-    );
-    document.head.appendChild(link);
+    if(opts.useCDN) {
+        const style = document.querySelector('style')!;
+        style.parentNode!.removeChild(style);
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute(
+            'href',
+            'https://cdn.jsdelivr.net/npm/discord-html-transcripts@' +
+                (version ?? 'latest') +
+                '/dist/template.css'
+        );
+        document.head.appendChild(link);
+    }
 
     // Basic Info (header)
     const guildIcon = document.getElementsByClassName(
@@ -209,6 +211,7 @@ async function generateTranscript<T extends ReturnTypes>(
             // timestamp
             const timestamp = document.createElement('span');
             timestamp.classList.add('chatlog__timestamp');
+            timestamp.setAttribute('data-timestamp', message.createdTimestamp.toString());
             timestamp.textContent = message.createdAt.toLocaleString(
                 'en-us',
                 staticTypes.timestampShort

diff --git a/src/template.html b/src/template.html
@@ -43,8 +43,7 @@
             font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
             font-size: 17px;
             font-weight: 400;
-            margin: 0;
-            overflow-x: hidden;
+            max-width: 100vw;
         }
 
         a {
@@ -64,7 +63,11 @@
         .markdown {
             max-width: 100%;
             line-height: 1.3;
-            overflow-wrap: break-word;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+            white-space: break-spaces;
+            word-wrap: break-word;
+            word-break: break-word;
         }
 
         .preserve-whitespace {
@@ -412,7 +415,6 @@
         .chatlog__content {
             display: inline-block;
             font-size: 0.95em;
-            word-wrap: break-word;
         }
 
         .chatlog__edited {
@@ -739,57 +741,78 @@
     </script>
 
     <script>
+        const timestampShortStyle = JSON.parse(`{{staticTypes.timestampShort}}`); 
+
         document.addEventListener('DOMContentLoaded', (event) => {
+
             document.querySelectorAll('.chatlog__reference-name').forEach(function (element) {
-                if (element.title == "Unknown User") {
-                    let div = document.createElement("div");
-                    div.setAttribute("class", "chatlog__reference-replybadge");
-
-                    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    svg.setAttribute("width", "12");
-                    svg.setAttribute("height", "8");
-                    svg.setAttribute("viewBox", "0 0 12 8");
-                    svg.setAttribute("class", "chatlog__reference-replyicon");
-
-                    let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    path.setAttribute("d", "M0.809739 3.59646L5.12565 0.468433C5.17446 0.431163 5.23323 0.408043 5.2951 0.401763C5.35698 0.395482 5.41943 0.406298 5.4752 0.432954C5.53096 0.45961 5.57776 0.50101 5.61013 0.552343C5.64251 0.603676 5.65914 0.662833 5.6581 0.722939V2.3707C10.3624 2.3707 11.2539 5.52482 11.3991 7.21174C11.4028 7.27916 11.3848 7.34603 11.3474 7.40312C11.3101 7.46021 11.2554 7.50471 11.1908 7.53049C11.1262 7.55626 11.0549 7.56204 10.9868 7.54703C10.9187 7.53201 10.857 7.49695 10.8104 7.44666C8.72224 5.08977 5.6581 5.63359 5.6581 5.63359V7.28135C5.65831 7.34051 5.64141 7.39856 5.60931 7.44894C5.5772 7.49932 5.53117 7.54004 5.4764 7.5665C5.42163 7.59296 5.3603 7.60411 5.29932 7.59869C5.23834 7.59328 5.18014 7.57151 5.13128 7.53585L0.809739 4.40892C0.744492 4.3616 0.691538 4.30026 0.655067 4.22975C0.618596 4.15925 0.599609 4.08151 0.599609 4.00269C0.599609 3.92386 0.618596 3.84612 0.655067 3.77562C0.691538 3.70511 0.744492 3.64377 0.809739 3.59646Z");
-                    path.setAttribute("fill", "currentColor");
-
-                    svg.append(path);
-                    div.append(svg);
-
-                    element.parentNode.childNodes[0].remove();
-                    element.parentNode.prepend(div);
-                    element.remove();
-                } else {
-                    var id = element.parentNode.childNodes[4].childNodes[1].attributes[1].value.split("'")[1];
-                    element.style.color = document.getElementById('message-' + id).parentNode.childNodes[0].style.color;
+                try {
+                    if (element.title == "Unknown User") {
+                        let div = document.createElement("div");
+                        div.setAttribute("class", "chatlog__reference-replybadge");
+
+                        let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                        svg.setAttribute("width", "12");
+                        svg.setAttribute("height", "8");
+                        svg.setAttribute("viewBox", "0 0 12 8");
+                        svg.setAttribute("class", "chatlog__reference-replyicon");
+
+                        let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                        path.setAttribute("d", "M0.809739 3.59646L5.12565 0.468433C5.17446 0.431163 5.23323 0.408043 5.2951 0.401763C5.35698 0.395482 5.41943 0.406298 5.4752 0.432954C5.53096 0.45961 5.57776 0.50101 5.61013 0.552343C5.64251 0.603676 5.65914 0.662833 5.6581 0.722939V2.3707C10.3624 2.3707 11.2539 5.52482 11.3991 7.21174C11.4028 7.27916 11.3848 7.34603 11.3474 7.40312C11.3101 7.46021 11.2554 7.50471 11.1908 7.53049C11.1262 7.55626 11.0549 7.56204 10.9868 7.54703C10.9187 7.53201 10.857 7.49695 10.8104 7.44666C8.72224 5.08977 5.6581 5.63359 5.6581 5.63359V7.28135C5.65831 7.34051 5.64141 7.39856 5.60931 7.44894C5.5772 7.49932 5.53117 7.54004 5.4764 7.5665C5.42163 7.59296 5.3603 7.60411 5.29932 7.59869C5.23834 7.59328 5.18014 7.57151 5.13128 7.53585L0.809739 4.40892C0.744492 4.3616 0.691538 4.30026 0.655067 4.22975C0.618596 4.15925 0.599609 4.08151 0.599609 4.00269C0.599609 3.92386 0.618596 3.84612 0.655067 3.77562C0.691538 3.70511 0.744492 3.64377 0.809739 3.59646Z");
+                        path.setAttribute("fill", "currentColor");
+
+                        svg.append(path);
+                        div.append(svg);
+
+                        element.parentNode.childNodes[0].remove();
+                        element.parentNode.prepend(div);
+                        element.remove();
+                    } else {
+                        var id = element.parentNode.childNodes[4].childNodes[1].attributes[1].value.split("'")[1];
+                        element.style.color = document.getElementById('message-' + id).parentNode.childNodes[0].style.color;
+                    }
+                } catch (error) {
+                    console.log(error);
                 }
             });
 
             document.querySelectorAll('.chatlog__reference-link').forEach(function (element) {
-                if (element.childNodes[1] && element.childNodes[1].textContent == "Original message was deleted.") {
-                    element.classList.add("chatlog__reference-link--disabled");
-                    element.removeAttribute("onclick");
+                try {
+                    if (element.childNodes[1] && element.childNodes[1].textContent == "Original message was deleted.") {
+                        element.classList.add("chatlog__reference-link--disabled");
+                        element.removeAttribute("onclick");
+                    }
+
+                    if (element.childNodes[1] && element.childNodes[1].textContent == "Click to see attachment") {
+                        let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                        svg.setAttribute("width", "24");
+                        svg.setAttribute("height", "24");
+                        svg.setAttribute("viewBox", "0 0 24 24");
+                        svg.setAttribute("class", "chatlog__reference-attachment-icon");
+                        svg.setAttribute("aria-hidden", "false");
+
+                        let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                        path.setAttribute("d", "M6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6ZM10 8C10 6.8952 9.1032 6 8 6C6.8944 6 6 6.8952 6 8C6 9.1056 6.8944 10 8 10C9.1032 10 10 9.1056 10 8ZM9 14L6 18H18L15 11L11 16L9 14Z");
+                        path.setAttribute("fill", "currentColor");
+                        path.setAttribute("fill-rule", "evenodd");
+                        path.setAttribute("clip-rule", "evenodd");
+
+                        svg.append(path);
+
+                        element.parentNode.append(svg);
+                    }
+                } catch (error) {
+                    console.log(error);
                 }
+            });
 
-                if (element.childNodes[1] && element.childNodes[1].textContent == "Click to see attachment") {
-                    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                    svg.setAttribute("width", "24");
-                    svg.setAttribute("height", "24");
-                    svg.setAttribute("viewBox", "0 0 24 24");
-                    svg.setAttribute("class", "chatlog__reference-attachment-icon");
-                    svg.setAttribute("aria-hidden", "false");
-
-                    let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    path.setAttribute("d", "M6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6ZM10 8C10 6.8952 9.1032 6 8 6C6.8944 6 6 6.8952 6 8C6 9.1056 6.8944 10 8 10C9.1032 10 10 9.1056 10 8ZM9 14L6 18H18L15 11L11 16L9 14Z");
-                    path.setAttribute("fill", "currentColor");
-                    path.setAttribute("fill-rule", "evenodd");
-                    path.setAttribute("clip-rule", "evenodd");
-
-                    svg.append(path);
-
-                    element.parentNode.append(svg);
+            // format all chatlog__timestamp in local timezone
+            document.querySelectorAll('.chatlog__timestamp').forEach(function (element) {
+                try {
+                    let date = new Date(parseInt(element.getAttribute('data-timestamp')));
+                    element.textContent = date.toLocaleString(undefined, timestampShortStyle);
+                } catch (error) {
+                    console.log(error);
                 }
             });
         });

diff --git a/src/utils.ts b/src/utils.ts
@@ -45,15 +45,20 @@ export function castToType<T>(type: any) {
     return type as unknown as T;
 }
 
-export function optsSetup(
-    opts: CreateTranscriptOptions | GenerateFromMessagesOpts | undefined,
-    channel: ValidTextChannels
-) {
-    var options = opts || {};
-
-    if (!('fileName' in options))
-        options.fileName = `transcript-${channel.id}.html`;
-    if (!('returnType' in options)) options.returnType = 'attachment';
+const DEFAULT_OPTIONS = {
+    returnType: 'attachment',
+    fileName: 'transcript.html',
+    minify: true,
+    saveImages: false,
+    useCDN: true
+}
 
-    return options;
+export function optsSetup<T extends CreateTranscriptOptions | GenerateFromMessagesOpts>(
+    opts: T = {} as T,
+    _channel: ValidTextChannels
+) {
+    return {
+        ...DEFAULT_OPTIONS,
+        ...opts,
+    } as T
 }
diff --git a/tests/generate-v14.ts b/tests/generate-v14.ts
@@ -24,7 +24,7 @@ client.on('ready', async () => {
         process.exit(1);
     }
 
-    const attachment = await createTranscript(channel, { minify: true });
+    const attachment = await createTranscript(channel, { minify: true, useCDN: false });
 
     await channel.send({
         files: [attachment],