Fixes string length issue for multibyte characters. (#2443)

2 files changed, 6 insertions, 4 deletions

diff --git a/app/assets/javascripts/components/features/compose/components/character_counter.jsx b/app/assets/javascripts/components/features/compose/components/character_counter.jsx
index 31d82d4d2..284c51b6d 100644
--- a/app/assets/javascripts/components/features/compose/components/character_counter.jsx
+++ b/app/assets/javascripts/components/features/compose/components/character_counter.jsx
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { length } from 'stringz';
 
 class CharacterCounter extends React.PureComponent {
 
@@ -10,7 +11,7 @@ class CharacterCounter extends React.PureComponent {
   }
 
   render () {
-    const diff = this.props.max - this.props.text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length;
+    const diff = this.props.max - length(this.props.text);
 
     return this.checkRemainingText(diff);
   }
diff --git a/app/assets/javascripts/extras.jsx b/app/assets/javascripts/extras.jsx
index 29c37b9e1..7e3b7a256 100644
--- a/app/assets/javascripts/extras.jsx
+++ b/app/assets/javascripts/extras.jsx
@@ -1,4 +1,5 @@
-import emojify from './components/emoji'
+import emojify from './components/emoji';
+import { length } from 'stringz';
 
 $(() => {
   $.each($('.emojify'), (_, content) => {
@@ -40,9 +41,9 @@ $(() => {
 
   // used on /settings/profile
   $('.account_display_name').on('input', e => {
-    $('.name-counter').text(30 - $(e.target).val().length)
+    $('.name-counter').text(30 - length($(e.target).val()));
   });
   $('.account_note').on('input', e => {
-    $('.note-counter').text(160 - $(e.target).val().length)
+    $('.note-counter').text(160 - length($(e.target).val()));
   });
 });