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

packages/web/package.json

@@ -30,7 +30,7 @@
     "@babel/preset-env": "*",
     "@babel/preset-typescript": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@types/jest": "^29.0.2",
+    "@types/jest": "^29.2.0",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
@@ -47,8 +47,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.2",
+    "jest": "^29.2.1",
-    "jest-environment-jsdom": "^28.1.2",
+    "jest-environment-jsdom": "^29.2.1",
     "lint-staged": ">=12",
     "mini-css-extract-plugin": "^2.6.1",
     "node-sass": "*",
@@ -61,8 +61,8 @@
     "sass-loader": "*",
     "svg-jest": "^1.0.1",
     "tailwindcss": "^3.1.8",
-    "ts-jest": "^28.0.5",
+    "ts-jest": "^29.0.3",
-    "ts-loader": "^9.3.1",
+    "ts-loader": "^9.4.1",
     "typescript": "*",
     "webpack": "*",
     "webpack-dev-server": "*",

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

@@ -255,8 +255,8 @@ const ContentListView: FunctionComponent<Props> = ({
                   return
                 }
 
-                for (const file of files) {
+                for (let i = 0; i < files.length; i++) {
-                  void filesController.uploadNewFile(file)
+                  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()
+        record.removedNodes.forEach((node) => {
-        for (const node of removedNodes) {
           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
           }
-        }
+        })
       }
     })
 

packages/web/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../node_modules/@standardnotes/config/src/tsconfig.json",
   "compilerOptions": {
     "skipLibCheck": true,
+    "lib": ["ES2022"],
     "target": "ES2019",
     "module": "commonjs",
     "moduleResolution": "node",