Repository: isso-comments/isso (language: python)

Issue:
Bugs with indented code
1. Indented with 4 spaces code is displayed without an indent when seen in the Edit mode.
2. In admin panel such a code is displayed in one line.
3. If the comment has been edited from admin panel, it is no more possible for commenter to remove it from the page: `Failed to load resource: the server responded with a status of 403 () embed.min.js:18 Not authorized to remove this comment!`. Not sure what the default behavior should be in this case.

I made a [gif](https://i.imgur.com/lOwVEek.gif) to illustrate these bugs. I find the most important that in the admin panel there is no line breaks, any comment displayed in one line. 


Discussion / hints:
It seems that it can be solved by applying a css property `white-space: pre-wrap` to `div.textarea` or to `div.text div` for the admin panel.
I encountered this today: one comment was not formatted properly on site and I wanted to edit it in the admin. But in the admin, no line breaks are respected in the display and worst they are lost on save.

I gave your solution a try and it fixes display, which is nice. But if I edit the comment, add line breaks and saves, the line breaks are lost. From what I understand, it comes from the fact that we rely on a div with `editableContent` set to `true`. So, if I originally have:
```html
<div id="isso-text-202">
Test 1
</div>
```
I'll get after the edit:
```html
<div id="isso-text-202" class="" contenteditable="false">
<div>Test 1</div>
<div>Test 2</div>
</div>
```

The display is correct (because by default `div` are displayed as block elements) but when we extract the text with `textContent`, we loose the line breaks that are visually conveyed by the `div`.

I worked on a fast workaround for the admin: use `textarea` instead of editable divs. By default it is disabled so the user can't edit it. If you click on *Edit* it becomes editable. It seems to fix both the display and edit issues. It's not very pretty but it works. You can see it here: https://github.com/Jenselme/isso/commit/e5a1b2ac3b6692e7f1aabb8a1a21b8f028acd28c

To fix this in the "standard edit" on the website, I think you could do something similar: when the user is editing, we rely on a `textarea`. When not (comment saved or in preview), we display the rendered HTML. We could also apply this method to the admin to view rendered comments by default and still be able to edit them correctly.

Let me know what you think. If it sounds like a good idea to you, I should be able to complete the fix for the admin and the standard edit page.
Any thoughts on that?
I thoroughly agree with @Jenselme - the way the whole editing is implemented as `contentEditable` is bound to cause pain. I converted the admin to use `textarea` a while back, see https://github.com/posativ/isso/pull/793

This is currently the "solution" for converting between HTML and plaintext:
https://github.com/posativ/isso/blob/668882f6c551c0cb979139ad62b2a97a0c968914/isso/js/app/utils.js#L29-L42

@Jenselme if you could re-upload your work again (repo seems deleted), I believe you might have some better approaches than my spaghetti code.
I wonder if maybe it would be nicer to replace the admin page with instead being able to log in as an admin on the comment section. Should I make an issue to track that?
> I wonder if maybe it would be nicer to replace the admin page with instead being able to log in as an admin on the comment section.

That'd be nice as an _addition_, but keeping the "traditional" admin still makes sense to me.

> Should I make an issue to track that?

Feel free.
The whole part about the indentation not being preserved when editing seems to be fixed if you just add `white-space: pre-wrap` to `.isso-textarea`. However it still inserts and removes random newlines in weird places, I guess there must be some mistake in the ugly HTML <-> plaintext solution that you sent above.

Editing anything on the admin page seems to work fine currently..? However there are drawbacks to replacing the postbox with a `<textarea>`. Commenters don't want to manually resize the text box, and trying to use math and JS to auto resize the textarea seems to be a bit janky and unreliable.

However, I looked at a few other examples ([Commento](https://github.com/souramoo/commentoplusplus), [Remark42](https://remark42.com/), [Talkyard](https://talkyard.io), [Flarum](https://flarum.org/), [Discourse](https://www.discourse.org/), even the box I'm typing in right now on GitHub) and they all use a `<textarea>` for their post input text (note all of them except Commento and Remark have a fixed size). So I think using a textarea must clearly be the way to go for inputting plaintext.

Maybe if we can style the `<textarea>` to be large enough by default, and/or try and get some working JS code to auto-resize the box height, we can avoid having to do crazy workarounds just to get a `contenteditable` `<div>` working.

In summary, I think @Jenselme's solution is probably best, so I'll try and do this on the main Isso post box, based on what seems to already work on the admin dashboard.

Fix patch:
diff --git a/CHANGES.rst b/CHANGES.rst
index 47471db28..e50f64990 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -32,6 +32,9 @@ Changelog for Isso
     affect the client
   - Remove ``/count`` GET endpoint (use POST instead)
 
+- Replace ``contenteditable`` ``div`` with ``textarea`` to fix issues when
+  editing messages that contain indented code
+
 .. _Gravatar: Image requests: http://en.gravatar.com/site/implement/images/
 .. _879: https://github.com/posativ/isso/pull/879
 .. _488: https://github.com/posativ/isso/pull/488
diff --git a/isso/css/isso.css b/isso/css/isso.css
index 9aee9e41c..cb7bbb7a0 100644
--- a/isso/css/isso.css
+++ b/isso/css/isso.css
@@ -24,11 +24,9 @@
     vertical-align: bottom;
 }
 #isso-thread .isso-textarea {
-    min-height: 58px;
     outline: 0;
-}
-#isso-thread .isso-textarea.isso-placeholder {
-    color: #757575;
+    width: 100%;
+    resize: none;
 }
 
 #isso-root .isso-comment {
diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js
index d8bdc57ff..fbf958a3d 100644
--- a/isso/js/app/isso.js
+++ b/isso/js/app/isso.js
@@ -11,27 +11,6 @@ var globals = require("app/globals");
 
 "use strict";
 
-var editorify = function(el) {
-    el = $.htmlify(el);
-    el.setAttribute("contentEditable", true);
-
-    el.on("focus", function() {
-        if (el.classList.contains("isso-placeholder")) {
-            el.innerHTML = "";
-            el.classList.remove("isso-placeholder");
-        }
-    });
-
-    el.on("blur", function() {
-        if (el.textContent.length === 0) {
-            el.textContent = i18n.translate("postbox-text");
-            el.classList.add("isso-placeholder");
-        }
-    });
-
-    return el;
-}
-
 var Postbox = function(parent) {
 
     var localStorage = utils.localStorageImpl,
@@ -46,9 +25,7 @@ var Postbox = function(parent) {
     el.onsuccess = function() {};
 
     el.validate = function() {
-        if (utils.text($(".isso-textarea", this).innerHTML).length < 3 ||
-            $(".isso-textarea", this).classList.contains("isso-placeholder"))
-        {
+        if ($(".isso-textarea", this).value.length < 3) {
             $(".isso-textarea", this).focus();
             return false;
         }
@@ -92,7 +69,7 @@ var Postbox = function(parent) {
 
     // preview function
     $("[name='preview']", el).on("click", function() {
-        api.preview(utils.text($(".isso-textarea", el).innerHTML)).then(
+        api.preview($(".isso-textarea", el).value).then(
             function(html) {
                 $(".isso-preview .isso-text", el).innerHTML = html;
                 el.classList.add('isso-preview-mode');
@@ -104,8 +81,14 @@ var Postbox = function(parent) {
         $(".isso-preview .isso-text", el).innerHTML = '';
         el.classList.remove('isso-preview-mode');
     };
-    $("[name='edit']", el).on("click", edit);
-    $(".isso-preview", el).on("click", edit);
+    $("[name='edit']", el).on("click", function() {
+      edit();
+      $(".isso-textarea", el).focus();
+    });
+    $(".isso-preview", el).on("click", function() {
+      edit();
+      $(".isso-textarea", el).focus();
+    });
 
     // submit form, initialize optional fields with `null` and reset form.
     // If replied to a comment, remove form completely.
@@ -125,13 +108,12 @@ var Postbox = function(parent) {
 
         api.create($("#isso-thread").getAttribute("data-isso-id"), {
             author: author, email: email, website: website,
-            text: utils.text($(".isso-textarea", el).innerHTML),
+            text: $(".isso-textarea", el).value,
             parent: parent || null,
             title: $("#isso-thread").getAttribute("data-title") || null,
             notification: $("[name=notification]", el).checked() ? 1 : 0,
         }).then(function(comment) {
-            $(".isso-textarea", el).innerHTML = "";
-            $(".isso-textarea", el).blur();
+            $(".isso-textarea", el).value = "";
             insert(comment, true);
 
             if (parent !== null) {
@@ -140,8 +122,6 @@ var Postbox = function(parent) {
         });
     });
 
-    editorify($(".isso-textarea", el));
-
     return el;
 };
 
@@ -296,9 +276,12 @@ var insert = function(comment, scrollIntoView) {
 
             toggler.canceled = false;
             api.view(comment.id, 1).then(function(rv) {
-                var textarea = editorify($.new("div.isso-textarea"));
+                var textarea = $.new("textarea.isso-textarea");
+                textarea.setAttribute("rows", 5);
+                textarea.setAttribute("minlength", 3);
+                textarea.setAttribute("maxlength", 65535);
 
-                textarea.innerHTML = utils.detext(rv.text);
+                textarea.value = rv.text;
                 textarea.focus();
 
                 text.classList.remove("isso-text");
@@ -317,12 +300,12 @@ var insert = function(comment, scrollIntoView) {
             var avatar = config["avatar"] || config["gravatar"] ? $(".isso-avatar", el, false)[0] : null;
 
             if (! toggler.canceled && textarea !== null) {
-                if (utils.text(textarea.innerHTML).length < 3) {
+                if (textarea.value.length < 3) {
                     textarea.focus();
                     toggler.wait();
                     return;
                 } else {
-                    api.modify(comment.id, {"text": utils.text(textarea.innerHTML)}).then(function(rv) {
+                    api.modify(comment.id, {"text": textarea.value}).then(function(rv) {
                         text.innerHTML = rv.text;
                         comment.text = rv.text;
                     });
@@ -416,7 +399,6 @@ var insert = function(comment, scrollIntoView) {
 };
 
 module.exports = {
-    editorify: editorify,
     insert: insert,
     insert_loader: insert_loader,
     Postbox: Postbox,
diff --git a/isso/js/app/templates/postbox.js b/isso/js/app/templates/postbox.js
index bcc75f17b..885bf958a 100644
--- a/isso/js/app/templates/postbox.js
+++ b/isso/js/app/templates/postbox.js
@@ -10,7 +10,7 @@ var html = function (globals) {
 "<div class='isso-postbox'>"
  + "<div class='isso-form-wrapper'>"
    + "<div class='isso-textarea-wrapper'>"
-    + "<div class='isso-textarea isso-placeholder' contenteditable='true'>" + i18n('postbox-text') + "</div>"
+    + "<textarea class='isso-textarea' rows='5' minlength='3' maxlength='65535' placeholder='" + i18n('postbox-text') + "'></textarea>"
     + "<div class='isso-preview'>"
       + "<div class='isso-comment'>"
         + "<div class='isso-text-wrapper'>"
diff --git a/isso/js/app/utils.js b/isso/js/app/utils.js
index 85d4bdffd..53ff65a59 100644
--- a/isso/js/app/utils.js
+++ b/isso/js/app/utils.js
@@ -11,36 +11,6 @@ var pad = function(n, width, z) {
     return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 };
 
-var HTMLEntity = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': '&quot;',
-    "'": '&#39;',
-    "/": '&#x2F;'
-};
-
-var escape = function(html) {
-    return String(html).replace(/[&<>"'\/]/g, function (s) {
-        return HTMLEntity[s];
-    });
-};
-
-var text = function(html) {
-    var _ = document.createElement("div");
-    _.innerHTML = html.replace(/<div><br><\/div>/gi, '<br>')
-                      .replace(/<div>/gi,'<br>')
-                      .replace(/<br>/gi, '\n')
-                      .replace(/&nbsp;/gi, ' ');
-    return _.textContent.trim();
-};
-
-var detext = function(text) {
-    text = escape(text);
-    return text.replace(/\n\n/gi, '<br><div><br></div>')
-               .replace(/\n/gi, '<br>');
-};
-
 // Normalize a BCP47 language tag.
 // Quoting https://tools.ietf.org/html/bcp47 :
 //   An implementation can reproduce this format without accessing
@@ -94,9 +64,7 @@ try {
 
 module.exports = {
     cookie: cookie,
-    detext: detext,
     localStorageImpl: localStorageImpl,
     normalize_bcp47: normalize_bcp47,
     pad: pad,
-    text: text,
 };


Test patch:
diff --git a/isso/js/tests/integration/__snapshots__/puppet.test.js.snap b/isso/js/tests/integration/__snapshots__/puppet.test.js.snap
index 281dbb5ca..02877f206 100644
--- a/isso/js/tests/integration/__snapshots__/puppet.test.js.snap
+++ b/isso/js/tests/integration/__snapshots__/puppet.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should fill Postbox with valid data and receive 201 reply 1`] = `
-"<noscript>Javascript needs to be activated to view comments.</noscript><h4>No Comments Yet</h4><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><div class=\\"isso-textarea\\" contenteditable=\\"true\\"></div><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"johndoe@example.com\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div><div id=\\"isso-root\\"><div class=\\"isso-comment isso-no-votes\\" id=\\"isso-1\\" data-hash=\\"34f4b563ece1\\"><div class=\\"isso-avatar\\"><svg version=\\"1.1\\" viewBox=\\"0 0 48 48\\" preserveAspectRatio=\\"xMinYMin meet\\" shape-rendering=\\"crispEdges\\" data-hash=\\"34f4b563ece1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"56\\" height=\\"56\\" style=\\"fill: #f0f0f0\\"></rect><rect x=\\"4\\" y=\\"4\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"4\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"28\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"28\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"36\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"36\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"12\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"28\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"12\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"28\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"20\\" y=\\"4\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"20\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"20\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect></svg></div><div class=\\"isso-text-wrapper\\"><div class=\\"isso-comment-header\\" role=\\"meta\\"><span class=\\"isso-author\\">Commenter #1</span><span class=\\"isso-spacer\\">•</span><a class=\\"isso-permalink\\" href=\\"#isso-1\\"><time>right now</time></a><span class=\\"isso-note\\"></span></div><div class=\\"isso-text\\"><p>A comment with <em>italics</em> and <a href=\\"http://link.com\\" rel=\\"nofollow noopener\\">a link</a></p></div><div class=\\"isso-comment-footer\\"><span class=\\"isso-votes\\">0</span><a class=\\"isso-upvote\\" href=\\"#\\"><!-- Generator: IcoMoon.io --><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" fill=\\"gray\\">
+"<noscript>Javascript needs to be activated to view comments.</noscript><h4>No Comments Yet</h4><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><textarea class=\\"isso-textarea\\" rows=\\"5\\" minlength=\\"3\\" maxlength=\\"65535\\" placeholder=\\"Type Comment Here (at least 3 chars)\\"></textarea><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"johndoe@example.com\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div><div id=\\"isso-root\\"><div class=\\"isso-comment isso-no-votes\\" id=\\"isso-1\\" data-hash=\\"34f4b563ece1\\"><div class=\\"isso-avatar\\"><svg version=\\"1.1\\" viewBox=\\"0 0 48 48\\" preserveAspectRatio=\\"xMinYMin meet\\" shape-rendering=\\"crispEdges\\" data-hash=\\"34f4b563ece1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"56\\" height=\\"56\\" style=\\"fill: #f0f0f0\\"></rect><rect x=\\"4\\" y=\\"4\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"4\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"28\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"28\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"4\\" y=\\"36\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"36\\" y=\\"36\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"12\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"28\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"12\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"28\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"20\\" y=\\"4\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"20\\" y=\\"12\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect><rect x=\\"20\\" y=\\"20\\" width=\\"8\\" height=\\"8\\" style=\\"fill: #5698c4\\"></rect></svg></div><div class=\\"isso-text-wrapper\\"><div class=\\"isso-comment-header\\" role=\\"meta\\"><span class=\\"isso-author\\">Commenter #1</span><span class=\\"isso-spacer\\">•</span><a class=\\"isso-permalink\\" href=\\"#isso-1\\"><time>right now</time></a><span class=\\"isso-note\\"></span></div><div class=\\"isso-text\\"><p>A comment with <em>italics</em> and <a href=\\"http://link.com\\" rel=\\"nofollow noopener\\">a link</a></p></div><div class=\\"isso-comment-footer\\"><span class=\\"isso-votes\\">0</span><a class=\\"isso-upvote\\" href=\\"#\\"><!-- Generator: IcoMoon.io --><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" fill=\\"gray\\">
   <g>
     <path d=\\"M 24.773,18.299c-0.651-0.669-7.512-7.203-7.512-7.203C 16.912,10.739, 16.456,10.56, 16,10.56c-0.458,0-0.914,0.179-1.261,0.536 c0,0-6.861,6.534-7.514,7.203c-0.651,0.669-0.696,1.872,0,2.586c 0.698,0.712, 1.669,0.77, 2.522,0L 16,14.89l 6.251,5.995 c 0.854,0.77, 1.827,0.712, 2.522,0C 25.47,20.17, 25.427,18.966, 24.773,18.299z\\">
     </path>
@@ -16,4 +16,4 @@ exports[`should fill Postbox with valid data and receive 201 reply 1`] = `
 </a><a class=\\"isso-edit\\" href=\\"#\\">Edit</a><a class=\\"isso-delete\\" href=\\"#\\">Delete</a></div></div><div class=\\"isso-follow-up\\"></div></div></div>"
 `;
 
-exports[`should match blank widget to snapshot 1`] = `"<noscript>Javascript needs to be activated to view comments.</noscript><h4>No Comments Yet</h4><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><div class=\\"isso-textarea isso-placeholder\\" contenteditable=\\"true\\">Type Comment Here (at least 3 chars)</div><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"johndoe@example.com\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div><div id=\\"isso-root\\"></div>"`;
+exports[`should match blank widget to snapshot 1`] = `"<noscript>Javascript needs to be activated to view comments.</noscript><h4>No Comments Yet</h4><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><textarea class=\\"isso-textarea\\" rows=\\"5\\" minlength=\\"3\\" maxlength=\\"65535\\" placeholder=\\"Type Comment Here (at least 3 chars)\\"></textarea><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"johndoe@example.com\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div><div id=\\"isso-root\\"></div>"`;
diff --git a/isso/js/tests/screenshots/reference/comment.png b/isso/js/tests/screenshots/reference/comment.png
index 9e4ddee07..675027d7e 100644
Binary files a/isso/js/tests/screenshots/reference/comment.png and b/isso/js/tests/screenshots/reference/comment.png differ
diff --git a/isso/js/tests/screenshots/reference/comment.png.hash b/isso/js/tests/screenshots/reference/comment.png.hash
index d0b1ddd54..f02dc3c55 100644
--- a/isso/js/tests/screenshots/reference/comment.png.hash
+++ b/isso/js/tests/screenshots/reference/comment.png.hash
@@ -1,1 +1,1 @@
-78fef44d89f68a880570a6d779c8c16e52f79094aa6738617498e1f047f53924
+eb62797f34336468e71ffc1b730e3a7a275f7dd5d7a00b48b988bd64b51000ee
diff --git a/isso/js/tests/screenshots/reference/postbox.png b/isso/js/tests/screenshots/reference/postbox.png
index 55103bd77..9415f0afd 100644
Binary files a/isso/js/tests/screenshots/reference/postbox.png and b/isso/js/tests/screenshots/reference/postbox.png differ
diff --git a/isso/js/tests/screenshots/reference/postbox.png.hash b/isso/js/tests/screenshots/reference/postbox.png.hash
index f4e6e9f38..c3319092f 100644
--- a/isso/js/tests/screenshots/reference/postbox.png.hash
+++ b/isso/js/tests/screenshots/reference/postbox.png.hash
@@ -1,1 +1,1 @@
-73bef08a7cb51eb5b5e0fde0e53ff867c6259d0ac5d68bd1a8d59325707df79b
+ad69338c387ca4aff6a5f0a6288af23dfeae2bb12964b6a6827fa043ac0afaad
diff --git a/isso/js/tests/screenshots/reference/thread.png b/isso/js/tests/screenshots/reference/thread.png
index 7ea97fef0..22d64b58a 100644
Binary files a/isso/js/tests/screenshots/reference/thread.png and b/isso/js/tests/screenshots/reference/thread.png differ
diff --git a/isso/js/tests/screenshots/reference/thread.png.hash b/isso/js/tests/screenshots/reference/thread.png.hash
index 12e105334..f7931cc63 100644
--- a/isso/js/tests/screenshots/reference/thread.png.hash
+++ b/isso/js/tests/screenshots/reference/thread.png.hash
@@ -1,1 +1,1 @@
-03d1d24bbaa7433230c182d8d759c75259127e0a7865add79f675c7eceec1cf3
+803345e8f69612c90b033a85f3f7ed0f6430261c011a8e2201ed39c518b3cb50
diff --git a/isso/js/tests/unit/__snapshots__/postbox.test.js.snap b/isso/js/tests/unit/__snapshots__/postbox.test.js.snap
index 21ff1c64f..28b96c9d8 100644
--- a/isso/js/tests/unit/__snapshots__/postbox.test.js.snap
+++ b/isso/js/tests/unit/__snapshots__/postbox.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Create Postbox 1`] = `"<div id=\\"isso-root\\"></div><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><div class=\\"isso-textarea isso-placeholder\\" contenteditable=\\"true\\">Type Comment Here (at least 3 chars)</div><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"johndoe@example.com\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div>"`;
+exports[`Create Postbox 1`] = `"<div id=\\"isso-root\\"></div><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><textarea class=\\"isso-textarea\\" rows=\\"5\\" minlength=\\"3\\" maxlength=\\"65535\\" placeholder=\\"Type Comment Here (at least 3 chars)\\"></textarea><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"johndoe@example.com\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div>"`;
diff --git a/isso/js/tests/unit/isso.test.js b/isso/js/tests/unit/isso.test.js
index 4b69572b8..7882d380a 100644
--- a/isso/js/tests/unit/isso.test.js
+++ b/isso/js/tests/unit/isso.test.js
@@ -18,7 +18,7 @@
  * Also, untangle Postbox functions from DOM element
  */
 
-test('Editorify text area', () => {
+test.skip('Editorify text area', () => {
   // Set up our document body
   document.body.innerHTML =
     '<div id=isso-thread></div>' +