Use a better string length

Using `string-length` instead of `stringz` that's used by Mastodon

package-lock.json

@@ -19,6 +19,7 @@
         "preact": "~10.11.3",
         "preact-router": "~4.1.0",
         "react-intersection-observer": "~9.4.1",
+        "string-length": "~5.0.1",
         "valtio": "~1.7.6"
       },
       "devDependencies": {
@@ -791,6 +792,17 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -953,6 +965,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/char-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2062,6 +2082,35 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/string-length": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+      "dependencies": {
+        "char-regex": "^2.0.0",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -2856,6 +2905,11 @@
       "dev": true,
       "peer": true
     },
+    "ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -2965,6 +3019,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "char-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3691,6 +3750,23 @@
       "dev": true,
       "peer": true
     },
+    "string-length": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+      "requires": {
+        "char-regex": "^2.0.0",
+        "strip-ansi": "^7.0.1"
+      }
+    },
+    "strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "requires": {
+        "ansi-regex": "^6.0.1"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "preact": "~10.11.3",
     "preact-router": "~4.1.0",
     "react-intersection-observer": "~9.4.1",
+    "string-length": "~5.0.1",
     "valtio": "~1.7.6"
   },
   "devDependencies": {

src/components/compose.jsx

@@ -2,6 +2,7 @@ import './compose.css';
 
 import '@github/text-expander-element';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import stringLength from 'string-length';
 
 import emojifyText from '../utils/emojify-text';
 import store from '../utils/store';
@@ -236,11 +237,14 @@ export default ({ onClose, replyToStatus }) => {
           sensitive = sensitive === 'on'; // checkboxes return "on" if checked
 
           // Validation
-          if (status.length > maxCharacters) {
+          if (stringLength(status) > maxCharacters) {
             alert(`Status is too long! Max characters: ${maxCharacters}`);
             return;
           }
-          if (sensitive && status.length + spoilerText.length > maxCharacters) {
+          if (
+            sensitive &&
+            stringLength(status) + stringLength(spoilerText) > maxCharacters
+          ) {
             alert(
               `Status and content warning is too long! Max characters: ${maxCharacters}`,
             );