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

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);
   }

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()));
   });
 });

package.json

@@ -69,6 +69,7 @@
     "reselect": "^2.5.4",
     "sass-loader": "^6.0.2",
     "sinon": "^1.17.6",
+    "stringz": "^0.1.2",
     "style-loader": "^0.13.2",
     "utf-8-validate": "^3.0.1",
     "uuid": "^3.0.1",

yarn.lock

@@ -3898,11 +3898,11 @@ lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
 
-lodash@4.x.x, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.x.x, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^4.2.0, lodash@^4.6.1, lodash@~4.16.4:
+lodash@^4.15.0, lodash@^4.2.0, lodash@^4.6.1, lodash@~4.16.4:
   version "4.16.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.4.tgz#01ce306b9bad1319f2a5528674f88297aeb70127"
 
@@ -3914,18 +3914,18 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.2.0.tgz#69a65aad3de542cf4ee0f4fe74e8e33c709ccb0f"
-  dependencies:
-    js-tokens "^1.0.1"
-
-loose-envify@^1.3.0:
+loose-envify@^1.0.0, loose-envify@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.1.0, loose-envify@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.2.0.tgz#69a65aad3de542cf4ee0f4fe74e8e33c709ccb0f"
+  dependencies:
+    js-tokens "^1.0.1"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -6064,6 +6064,10 @@ stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
 
+stringz@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/stringz/-/stringz-0.1.2.tgz#016e9b15d64eecf8ec1a1849b6ed47c5cd91042f"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"