Merge branch 'emoji-optimizations' into 'develop'

Emoji fixes, optimizations and improvements

Closes #690, #686, #682, #674, and #678

See merge request pleroma/pleroma-fe!969

2 files changed, 24 insertions, 15 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c1d7209e..af6299e4 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -276,11 +276,15 @@ const PostStatusForm = {
         return
       }
 
-      const rootRef = this.$refs['root']
+      const formRef = this.$refs['form']
+      const bottomRef = this.$refs['bottom']
       /* Scroller is either `window` (replies in TL), sidebar (main post form,
        * replies in notifs) or mobile post form. Note that getting and setting
        * scroll is different for `Window` and `Element`s
        */
+      const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
+      const bottomBottomPadding = Number(bottomBottomPaddingStr.substring(0, bottomBottomPaddingStr.length - 2))
+
       const scrollerRef = this.$el.closest('.sidebar-scroller') ||
             this.$el.closest('.post-form-modal-view') ||
             window
@@ -292,9 +296,6 @@ const PostStatusForm = {
       const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
       const vertPadding = topPadding + bottomPadding
 
-      const oldHeightStr = target.style.height || ''
-      const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2))
-
       /* Explanation:
        *
        * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
@@ -306,7 +307,7 @@ const PostStatusForm = {
        * SHRINK the textarea when there's extra space. To workaround that we set
        * height to 'auto' which makes textarea tiny again, so that scrollHeight
        * will match text height again. HOWEVER, shrinking textarea can screw with
-       * the scroll since there might be not enough padding around root to even
+       * the scroll since there might be not enough padding around form-bottom to even
        * warrant a scroll, so it will jump to 0 and refuse to move anywhere,
        * so we check current scroll position before shrinking and then restore it
        * with needed delta.
@@ -327,16 +328,21 @@ const PostStatusForm = {
       target.style.height = `${newHeight}px`
       // END content size update
 
-      // We check where the bottom border of root element is, this uses findOffset
+      // We check where the bottom border of form-bottom element is, this uses findOffset
       // to find offset relative to scrollable container (scroller)
-      const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
-
-      const textareaSizeChangeDelta = newHeight - oldHeight || 0
-      const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
-      const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
-      const totalDelta = textareaSizeChangeDelta +
-        (isBottomObstructed ? rootChangeDelta : 0)
+      const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding
 
+      const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
+      const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
+      const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
+      // The intention is basically this;
+      // Keep form-bottom always visible so that submit button is in view EXCEPT
+      // if form element bigger than scroller and caret isn't at the end, so that
+      // if you scroll up and edit middle of text you won't get scrolled back to bottom
+      const shouldScrollToBottom = isBottomObstructed &&
+            !(isFormBiggerThanScroller &&
+              this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
+      const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
       const targetScroll = currentScroll + totalDelta
 
       if (scrollerRef === window) {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 237ed725..0094b1aa 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    ref="form"
     class="post-status-form"
   >
     <form
@@ -160,7 +160,10 @@
         :visible="pollFormVisible"
         @update-poll="setPoll"
       />
-      <div class="form-bottom">
+      <div
+        ref="bottom"
+        class="form-bottom"
+      >
         <div class="form-bottom-left">
           <media-upload
             ref="mediaUpload"