From 3bf6e6fa19c749dca86827613637e7c60311aa7b Mon Sep 17 00:00:00 2001 From: HannesOberreiter Date: Thu, 16 Apr 2026 14:21:13 +0200 Subject: [PATCH] fix: allow unicodes in initials --- client/package-lock.json | 7 ------- client/package.json | 1 - .../components/users/UserAvatar/UserAvatar.jsx | 16 ++++++++++++++-- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 35e443d8..deedc992 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -45,7 +45,6 @@ "history": "^5.3.0", "i18next": "^25.8.18", "i18next-browser-languagedetector": "^8.2.1", - "initials": "^3.1.2", "javascript-time-ago": "^2.6.4", "js-cookie": "^3.0.5", "jwt-decode": "^4.0.0", @@ -10586,12 +10585,6 @@ "node": ">=10" } }, - "node_modules/initials": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/initials/-/initials-3.1.2.tgz", - "integrity": "sha512-Sltg35nx8+GX1w4U86rmbxFEmqFiSuMJviS6cB2KChB+jcT2/8Td+nlImXD74HkqpZF5PMv8hN57AyrA/7ltXw==", - "license": "MIT" - }, "node_modules/inline-style-prefixer": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz", diff --git a/client/package.json b/client/package.json index 63568455..d750bda2 100644 --- a/client/package.json +++ b/client/package.json @@ -122,7 +122,6 @@ "history": "^5.3.0", "i18next": "^25.8.18", "i18next-browser-languagedetector": "^8.2.1", - "initials": "^3.1.2", "javascript-time-ago": "^2.6.4", "js-cookie": "^3.0.5", "jwt-decode": "^4.0.0", diff --git a/client/src/components/users/UserAvatar/UserAvatar.jsx b/client/src/components/users/UserAvatar/UserAvatar.jsx index c4881230..a522b5dc 100755 --- a/client/src/components/users/UserAvatar/UserAvatar.jsx +++ b/client/src/components/users/UserAvatar/UserAvatar.jsx @@ -5,7 +5,6 @@ import upperFirst from 'lodash/upperFirst'; import camelCase from 'lodash/camelCase'; -import initials from 'initials'; import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -35,6 +34,19 @@ const COLORS = [ 'midnight-blue', ]; +const getInitials = (name) => { + const words = name + .trim() + .split(/[\s-]+/) + .filter(Boolean); + if (words.length === 0) return ''; + if (words.length === 1) return [...words[0]].slice(0, 2).join(''); + return words + .slice(0, 2) + .map((word) => [...word][0]) + .join(''); +}; + const getColor = (name) => { let sum = 0; for (let i = 0; i < name.length; i += 1) { @@ -78,7 +90,7 @@ const UserAvatar = React.memo( background: avatarUrl && `url("${avatarUrl}") center / cover`, }} > - {!avatarUrl && {initials(user.name).slice(0, 2)}} + {!avatarUrl && {getInitials(user.name)}} {withCreatorIndicator && +} );