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

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -255,8 +255,8 @@ const ContentListView: FunctionComponent<Props> = ({
                   return
                 }
 
-                for (const file of files) {
-                  void filesController.uploadNewFile(file)
+                for (let i = 0; i < files.length; i++) {
+                  void filesController.uploadNewFile(files[i])
                 }
               }}
             />

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()

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -898,8 +898,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
 
     const observer = new MutationObserver((records) => {
       for (const record of records) {
-        const removedNodes = record.removedNodes.values()
-        for (const node of removedNodes) {
+        record.removedNodes.forEach((node) => {
           if (node === editor) {
             this.removeTabObserver?.()
             this.removeTabObserver = undefined
@@ -907,7 +906,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
             editor.removeEventListener('scroll', this.resetScrollPosition)
             this.scrollPosition = 0
           }
-        }
+        })
       }
     })