Merge pull request #332 from Deniz97/master

fix: non-ASCII characters at cell focus and tests

Author: nick-keller

src/components/DataSheetGrid.tsx

@@ -28,6 +28,7 @@ import deepEqual from 'fast-deep-equal'
 import { ContextMenu } from './ContextMenu'
 import {
   encodeHtml,
+  isPrintableUnicode,
   parseTextHtmlData,
   parseTextPlainData,
 } from '../utils/copyPasting'
@@ -1456,7 +1457,7 @@ export const DataSheetGrid = React.memo(
             )
             event.preventDefault()
           } else if (
-            (event.key.match(/^[ -~]$/) || event.code.match(/Key[A-Z\p{L}]$/u)) &&
+            (isPrintableUnicode(event.key) || event.code.match(/Key[A-Z]$/)) &&
             !event.ctrlKey &&
             !event.metaKey &&
             !event.altKey

src/utils/copyPasting.test.ts

@@ -2,6 +2,7 @@ import {
   parseTextPlainData,
   parseTextHtmlData,
   encodeHtml,
+  isPrintableUnicode,
 } from './copyPasting'
 import { JSDOM } from 'jsdom'
 
@@ -157,3 +158,23 @@ test('encodeHtml', () => {
     '<div title="foo'bar">baz</div>'
   )
 })
+
+test('isPrintableUnicode', () => {
+  expect(isPrintableUnicode('a')).toBe(true)
+  expect(isPrintableUnicode('ş')).toBe(true)
+  expect(isPrintableUnicode('Ğ')).toBe(true)
+  expect(isPrintableUnicode('中')).toBe(true)
+  expect(isPrintableUnicode('©')).toBe(true)
+  expect(isPrintableUnicode('5')).toBe(true)
+  expect(isPrintableUnicode('!')).toBe(true)
+  expect(isPrintableUnicode('.')).toBe(true)
+  expect(isPrintableUnicode(':')).toBe(true)
+  expect(isPrintableUnicode('[')).toBe(true)
+  expect(isPrintableUnicode('\x0B')).toBe(false) // Vertical Tab
+  expect(isPrintableUnicode('\x7F')).toBe(false) // Delete
+  expect(isPrintableUnicode('\r')).toBe(false)
+  expect(isPrintableUnicode(' ')).toBe(false)
+  expect(isPrintableUnicode('\t')).toBe(false)
+  expect(isPrintableUnicode('\n')).toBe(false)
+  expect(isPrintableUnicode('\x90')).toBe(false) // Non-printable character in the extended ASCII range
+})

src/utils/copyPasting.ts

@@ -103,3 +103,7 @@ export const encodeHtml = (str: string) => {
     .replace(/"/g, '"')
     .replace(/'/g, ''')
 }
+
+export const isPrintableUnicode = (str: string): boolean => {
+  return str.match(/^[^\x00-\x20\x7F-\x9F]$/) !== null
+}

tests/editTextCell.test.tsx

@@ -116,6 +116,26 @@ test('Enter to edit', () => {
   })
 })
 
+test('Non-ascii character to edit', () => {
+  const ref = { current: null as unknown as DataSheetGridRef }
+  const data = {
+    current: [
+      { firstName: 'Elon', lastName: 'Musk' },
+      { firstName: 'Jeff', lastName: 'Bezos' },
+    ],
+  }
+
+  render(<DataWrapper dataRef={data} dsgRef={ref} columns={columns} />)
+
+  act(() => ref.current.setActiveCell({ col: 0, row: 1 }))
+
+  userEvent.keyboard('ş')
+  expect(data.current).toEqual([
+    { firstName: 'Elon', lastName: 'Musk' },
+    { firstName: 'ş', lastName: 'Bezos' },
+  ])
+})
+
 test('Lazy cell validate with Enter', () => {
   const ref = { current: null as unknown as DataSheetGridRef }
   const data = {