From 135ec190ee0484cf56108d291a957440d94bfc65 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 12 Oct 2021 10:31:15 -0500
Subject: [PATCH] Instead of str.replaceAll, use str.replace with regex (for
 better browser support)

---
 app/soapbox/components/scrollable_list.js              | 8 +++++++-
 app/soapbox/features/scheduled_statuses/builder.js     | 2 +-
 app/soapbox/features/ui/util/pending_status_builder.js | 2 +-
 app/soapbox/utils/rich_content.js                      | 3 +--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js
index 0e6c1991b..7c521c9d0 100644
--- a/app/soapbox/components/scrollable_list.js
+++ b/app/soapbox/components/scrollable_list.js
@@ -108,6 +108,7 @@ export default class ScrollableList extends PureComponent {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
+    console.log(snapshot);
     // Reset the scroll position when a new child comes in in order not to
     // jerk the scrollbar around if you're already scrolled down the page.
     if (snapshot !== null) {
@@ -260,7 +261,7 @@ export default class ScrollableList extends PureComponent {
   }
 
   renderFeed = () => {
-    const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore } = this.props;
+    const { children, scrollKey, isLoading, hasMore, prepend, onLoadMore, placeholderComponent: Placeholder, placeholderCount } = this.props;
     const childrenCount = React.Children.count(children);
     const trackScroll = true; //placeholder
     const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
@@ -287,6 +288,11 @@ export default class ScrollableList extends PureComponent {
               })}
             </IntersectionObserverArticleContainer>
           ))}
+          {(isLoading && Placeholder && placeholderCount > 0) && (
+            Array(placeholderCount).fill().map((_, i) => (
+              <Placeholder key={i} />
+            ))
+          )}
           {this.getMoreFollows()}
           {loadMore}
         </div>
diff --git a/app/soapbox/features/scheduled_statuses/builder.js b/app/soapbox/features/scheduled_statuses/builder.js
index c57d0fb34..196a0f6f2 100644
--- a/app/soapbox/features/scheduled_statuses/builder.js
+++ b/app/soapbox/features/scheduled_statuses/builder.js
@@ -14,7 +14,7 @@ export const buildStatus = (state, scheduledStatus) => {
     application: null,
     bookmarked: false,
     card: null,
-    content: params.get('text', '').replaceAll('\n', '<br>'),
+    content: params.get('text', '').replace(new RegExp('\n', 'g'), '<br>'), /* eslint-disable-line no-control-regex */
     created_at: params.get('scheduled_at'),
     emojis: [],
     favourited: false,
diff --git a/app/soapbox/features/ui/util/pending_status_builder.js b/app/soapbox/features/ui/util/pending_status_builder.js
index 0c578329d..191a99f1d 100644
--- a/app/soapbox/features/ui/util/pending_status_builder.js
+++ b/app/soapbox/features/ui/util/pending_status_builder.js
@@ -13,7 +13,7 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
     application: null,
     bookmarked: false,
     card: null,
-    content: pendingStatus.get('status', '').replaceAll('\n', '<br>'),
+    content: pendingStatus.get('status', '').replace(new RegExp('\n', 'g'), '<br>'), /* eslint-disable-line no-control-regex */
     created_at: new Date(),
     emojis: [],
     favourited: false,
diff --git a/app/soapbox/utils/rich_content.js b/app/soapbox/utils/rich_content.js
index 1c56a8b94..c5de1ea1e 100644
--- a/app/soapbox/utils/rich_content.js
+++ b/app/soapbox/utils/rich_content.js
@@ -9,7 +9,7 @@ export const onlyEmoji = (node, limit = 1, ignoreMentions = true) => {
       node.querySelectorAll('a.mention').forEach(m => m.parentNode.removeChild(m));
     }
 
-    if (node.textContent.replaceAll(' ', '') !== '') return false;
+    if (node.textContent.replace(new RegExp(' ', 'g'), '') !== '') return false;
     const emojis = Array.from(node.querySelectorAll('img.emojione'));
     if (emojis.length === 0) return false;
     if (emojis.length > limit) return false;
@@ -17,7 +17,6 @@ export const onlyEmoji = (node, limit = 1, ignoreMentions = true) => {
     if (images.length > emojis.length) return false;
     return true;
   } catch (e) {
-    // Apparently some browsers can't handle `node.textContent.replaceAll`??
     // If anything in here crashes, skipping it is inconsequential.
     console.error(e);
     return false;