fix(editor): Use segments/graphemes when creating the compact sidebar entries (#9776)

This commit is contained in:
Danny Martini 2024-06-17 18:50:29 +02:00 committed by GitHub
parent 551fb6d7a2
commit be7249f568
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 55 additions and 10 deletions

View file

@ -97,6 +97,7 @@ import N8nIcon from '../N8nIcon';
import ConditionalRouterLink from '../ConditionalRouterLink';
import type { IMenuItem } from '../../types';
import { doesMenuItemMatchCurrentRoute } from './routerUtil';
import { getInitials } from './labelUtil';
interface MenuItemProps {
item: IMenuItem;
@ -149,16 +150,6 @@ const isItemActive = (item: IMenuItem): boolean => {
Array.isArray(item.children) && item.children.some((child) => isActive(child));
return isActive(item) || hasActiveChild;
};
const getInitials = (label: string): string => {
const words = label.split(' ');
if (words.length === 1) {
return words[0].substring(0, 2);
} else {
return words[0].charAt(0) + words[1].charAt(0);
}
};
</script>
<style module lang="scss">

View file

@ -0,0 +1,29 @@
import { getInitials } from '../labelUtil';
describe('labelUtil.getInitials', () => {
it.each([
['', ''],
// simple words
['Hello', 'He'],
['Hello World', 'HW'],
['H', 'H'],
// multiple spaces
['Double Space', 'DS'],
[' ', ''],
// simple emoji
['👋 Hello', '👋H'],
['👋Hello', '👋H'],
['Hello 👋', 'H👋'],
['Hello👋', 'He'],
// combined emojis
['1⃣ 1⃣', '1⃣1⃣'],
['1⃣', '1⃣'],
['👩D 👩D', '👩‍⚕️👩‍⚕️'],
])('turns "%s" into "%s"', (input, output) => {
expect(getInitials(input)).toBe(output);
});
});

View file

@ -0,0 +1,25 @@
export const getInitials = (label: string): string => {
const words = label
.split(' ')
.filter((word) => word !== '')
.map((word) => [...new Intl.Segmenter().segment(word)]);
if (words.length === 0) {
return '';
} else if (words.length === 1) {
// first two segments of the first word
return (
words
.at(0)
?.slice(0, 2)
.map((grapheme) => grapheme.segment)
.join('') ?? ''
);
} else {
// first segment ok the first two words
return words
.slice(0, 2)
.map((word) => word.at(0)?.segment ?? '')
.join('');
}
};