From 2e072affb50b4c119af4de20fa7cdb7081df73f8 Mon Sep 17 00:00:00 2001
From: Baptiste Gelez <baptiste@gelez.xyz>
Date: Tue, 30 Oct 2018 18:16:24 +0100
Subject: [PATCH] Fix editor auto-expansion (#293)

---
 static/js/autoExpand.js           | 14 ++++++--------
 templates/posts/details.html.tera |  4 ++--
 templates/posts/new.html.tera     |  4 ++--
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/static/js/autoExpand.js b/static/js/autoExpand.js
index fbc25e82..e9b42b5e 100644
--- a/static/js/autoExpand.js
+++ b/static/js/autoExpand.js
@@ -1,9 +1,7 @@
-function autosize () {
-  const el = this
-  el.style.height = 'auto'
-  el.style.height = `${el.scrollHeight}px`
-}
+const articleContent = document.querySelector('#plume-editor')
+const offset = articleContent.offsetHeight - articleContent.clientHeight
 
-const articleContent = document.querySelector('#content')
-autosize.bind(articleContent)()
-articleContent.addEventListener('keyup', autosize)
+articleContent.addEventListener('keydown', () => {
+  articleContent.style.height = 'auto'
+  articleContent.style.height = `${articleContent.scrollHeight - offset}px`
+})
diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera
index aa7b16f8..0a96869e 100644
--- a/templates/posts/details.html.tera
+++ b/templates/posts/details.html.tera
@@ -104,12 +104,12 @@
 
             {% if account %}
                 <form method="post" action="{{ article.url }}comment">
-                    <label for="content">{{ "Your comment" | _ }}</label>
+                    <label for="plume-editor">{{ "Your comment" | _ }}</label>
                     {% if previous %}
                         <input type="hidden" name="responding_to" value="{{ previous.id }}"/>
                     {% endif %}
                     {# Ugly, but we don't have the choice if we don't want weird paddings #}
-                    <textarea id="content" name="content">{% filter trim %}{% if previous %}{% if previous.author.fqn != user_fqn %}@{{ previous.author.fqn }} {% endif %}{% for mention in previous.mentions %}{% if mention != user_fqn %}@{{ mention }} {% endif %}{% endfor %}{% endif %}{% endfilter %}</textarea>
+                    <textarea id="plume-editor" name="content">{% filter trim %}{% if previous %}{% if previous.author.fqn != user_fqn %}@{{ previous.author.fqn }} {% endif %}{% for mention in previous.mentions %}{% if mention != user_fqn %}@{{ mention }} {% endif %}{% endfor %}{% endif %}{% endfilter %}</textarea>
                     <input type="submit" value="{{ "Submit comment" | _ }}" />
                 </form>
             {%  endif %}
diff --git a/templates/posts/new.html.tera b/templates/posts/new.html.tera
index e8b4d701..6589de87 100644
--- a/templates/posts/new.html.tera
+++ b/templates/posts/new.html.tera
@@ -27,8 +27,8 @@
         {% endfor %}
     {% endif %}
 
-    <label for="content">{{ "Content" | _ }}<small>{{ "Markdown is supported" | _ }}</small></label>
-    <textarea id="content" name="content" rows="20">{{ form.content | default(value="") }}</textarea>
+     <label for="plume-editor">{{ "Content" | _ }}<small>{{ "Markdown is supported" | _ }}</small></label>
+    <textarea id="plume-editor" name="content" rows="20">{{ form.content | default(value="") }}</textarea>
 
     {{ macros::input(name="tags", label="Tags, separated by commas", errors=errors, form=form, optional=true) }}