fix(web): emoji length computation (#1864)

packages/web/src/javascripts/Components/Icon/EmojiLength.spec.ts

@@ -0,0 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { getEmojiLength } from './EmojiLength'
+
+describe('emoji length', () => {
+  it('returns the correct length', () => {
+    expect(getEmojiLength('✍️')).toEqual(1)
+    expect(getEmojiLength('👩‍👩‍👧‍👦')).toEqual(1)
+    expect(getEmojiLength('👩‍❤️‍💋‍👩')).toEqual(1)
+  })
+})

packages/web/src/javascripts/Components/Icon/EmojiLength.ts

@@ -0,0 +1,7 @@
+export function getEmojiLength(emoji: string): number {
+  try {
+    return [...new Intl.Segmenter().segment(emoji)].length
+  } catch (error) {
+    return [...emoji].length
+  }
+}

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -2,6 +2,7 @@ import { EmojiString, Platform, VectorIconNameOrEmoji } from '@standardnotes/snj
 import { FunctionComponent, useMemo, useRef, useState } from 'react'
 import Dropdown from '../Dropdown/Dropdown'
 import { DropdownItem } from '../Dropdown/DropdownItem'
+import { getEmojiLength } from './EmojiLength'
 import { isIconEmoji } from './Icon'
 import { IconNameToSvgMapping } from './IconNameToSvgMapping'
 import { IconPickerType } from './IconPickerType'
@@ -72,7 +73,7 @@ const IconPicker = ({ selectedValue, onIconChange, platform, className }: Props)
   const handleEmojiChange = (value: EmojiString) => {
     setEmojiInputValue(value)
 
-    const emojiLength = [...value].length
+    const emojiLength = getEmojiLength(value)
     if (emojiLength === 1) {
       onIconChange(value)
       emojiInputRef.current?.blur()