From 878d1fe7fc58d169781202b393b066480bc154b4 Mon Sep 17 00:00:00 2001
From: ix5 <ix5@users.noreply.github.com>
Date: Tue, 3 May 2022 15:07:31 +0200
Subject: [PATCH 1/2] js: template: Do not strip newlines

Non-discriminatory newline stripping would wrongfully
collate pre-formatted (code) blocks.

The newline stripping/trimming was introduced as a
workaround because at the time, templates were written in
ES6 template literals (`${foo}`) and left a lot of newlines
in rendered HTML output, which lead to failures to convert
text to DOM elements using the `htmlify` helper.

These templates ended up being replaced by ES5 plain string
concatenation, which no longer requires the workaround.

Fixes https://github.com/posativ/isso/discussions/856
---
 isso/js/app/template.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/isso/js/app/template.js b/isso/js/app/template.js
index 4f884848c..1f04ca7c5 100644
--- a/isso/js/app/template.js
+++ b/isso/js/app/template.js
@@ -63,12 +63,6 @@ var render = function(name, locals) {
 
     rv = templates[name](globals);
 
-    // These are all needed, else DOM.htmlify will fail to create the element!
-    // Strip newlines rendered from template literals
-    rv = rv.replace(/\r?\n|\r/g, " ");
-    // Trim whitespace
-    rv = rv.trim();
-
     for (var i = 0; i < keys.length; i++) {
         delete globals[keys[i]];
     }

From 4abdc2924dea1f256c3f9fac0b19961e6f74a5da Mon Sep 17 00:00:00 2001
From: ix5 <ix5@users.noreply.github.com>
Date: Fri, 6 May 2022 00:20:07 +0200
Subject: [PATCH 2/2] js: tests/unit: Add test for clipping code blocks

Ensures that https://github.com/posativ/isso/discussions/856
does not occur again:

> This means that comments containing fenced code blocks -
> which are rendered server-side as
> `<pre><code>some code here\nanother new line</code></pre>` -
> have their `\n` newline characters ignored when the
> client-side JS renders, and so the whole output gets
> rendered on one line. This makes code blocks hard to read.
>
> I'd quite like to keep these newline characters when the
> comment is rendered. I tried just commenting that
> newline-stripping line of code, and everything seems to
> work. Is there a reason for this line being there?
---
 .../template-comment-newlines.test.js.snap    | 12 ++++
 .../unit/template-comment-newlines.test.js    | 67 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 isso/js/tests/unit/__snapshots__/template-comment-newlines.test.js.snap
 create mode 100644 isso/js/tests/unit/template-comment-newlines.test.js

diff --git a/isso/js/tests/unit/__snapshots__/template-comment-newlines.test.js.snap b/isso/js/tests/unit/__snapshots__/template-comment-newlines.test.js.snap
new file mode 100644
index 000000000..ce2ffb4ab
--- /dev/null
+++ b/isso/js/tests/unit/__snapshots__/template-comment-newlines.test.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Code blocks in rendered comment should not be clipped 1`] = `
+"<p>A comment with</p>
+<pre><code>code blocks
+New line: preformatted
+
+Double newline
+</code></pre>"
+`;
+
+exports[`Simple comment text should render on one line 1`] = `"<p>A comment</p>"`;
diff --git a/isso/js/tests/unit/template-comment-newlines.test.js b/isso/js/tests/unit/template-comment-newlines.test.js
new file mode 100644
index 000000000..3a5943f78
--- /dev/null
+++ b/isso/js/tests/unit/template-comment-newlines.test.js
@@ -0,0 +1,67 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/* Keep the above exactly as-is!
+ * https://jestjs.io/docs/configuration#testenvironment-string
+ * https://jestjs.io/docs/configuration#testenvironmentoptions-object
+ */
+
+"use strict";
+
+/* Test rendered code blocks inside "comment" template
+ * See https://github.com/posativ/isso/discussions/856
+ * and https://github.com/posativ/isso/pull/857
+ */
+
+// Set up our document body
+document.body.innerHTML =
+  '<div id=isso-thread></div>' +
+  '<script ' +
+    'src="http://isso.api/js/embed.min.js" ' +
+    'data-isso="/" ' +
+    '></script>';
+
+const isso = require("app/isso");
+const $ = require("app/dom");
+const config = require("app/config");
+const template = require("app/template");
+
+const i18n = require("app/i18n");
+const svg = require("app/svg");
+
+template.set("conf", config);
+template.set("i18n", i18n.translate);
+template.set("pluralize", i18n.pluralize);
+template.set("svg", svg);
+
+test('Simple comment text should render on one line', () => {
+  let comment = {
+      "id": 1,
+      "created": 1651788192.4473603,
+      "mode": 1,
+      "text": "<p>A comment</p>",
+      "author": "John",
+      "website": "http://website.org",
+      "hash": "4505c1eeda98",
+  }
+  let rendered = template.render("comment", {"comment": comment});
+  let el = $.htmlify(rendered);
+  expect($('.isso-text', el).innerHTML).toMatchSnapshot();
+
+});
+
+test('Code blocks in rendered comment should not be clipped', () => {
+  let comment = {
+      "id": 2,
+      "created": 1651788192.4473603,
+      "mode": 1,
+      "text": "<p>A comment with</p>\n<pre><code>code blocks\nNew line: preformatted\n\nDouble newline\n</code></pre>",
+      "author": "John",
+      "website": "http://website.org",
+      "hash": "4505c1eeda98",
+  }
+  let rendered = template.render("comment", {"comment": comment});
+  let el = $.htmlify(rendered);
+  expect($('.isso-text', el).innerHTML).toMatchSnapshot();
+});