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) { "
" + "
" + "
" - + "
" + i18n('postbox-text') + "
" + + "" + "
" + "
" + "
" 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 = { - "&": "&", - "<": "<", - ">": ">", - '"': '"', - "'": ''', - "/": '/' -}; - -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>/gi, '
') - .replace(/
/gi,'
') - .replace(/
/gi, '\n') - .replace(/ /gi, ' '); - return _.textContent.trim(); -}; - -var detext = function(text) { - text = escape(text); - return text.replace(/\n\n/gi, '

') - .replace(/\n/gi, '
'); -}; - // 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, }; 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`] = ` -"

No Comments Yet

Commenter #1•

A comment with italics and a link

0 +"

No Comments Yet

" `; -exports[`should match blank widget to snapshot 1`] = `"

No Comments Yet

Type Comment Here (at least 3 chars)

"`; +exports[`should match blank widget to snapshot 1`] = `"

No Comments Yet

"`; 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 @@ -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 @@ -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 @@ -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`] = `"
Type Comment Here (at least 3 chars)

"`; +exports[`Create Postbox 1`] = `"

"`; 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 = '
' +