From 7f02a7f794170aead81beab5c248132250e212b4 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 10 Dec 2022 20:46:56 +0800
Subject: [PATCH] Use a better string length
Using `string-length` instead of `stringz` that's used by Mastodon
---
package-lock.json | 76 ++++++++++++++++++++++++++++++++++++++
package.json | 1 +
src/components/compose.jsx | 8 +++-
3 files changed, 83 insertions(+), 2 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 48396eb7..f4abf455 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 04cedc19..55b2d029 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 0e9bd28d..c1ec65bf 100644
--- a/src/components/compose.jsx
+++ b/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}`,
);