fix: normalize DataTransfer format aliases (#1326)

* fix: normalize DataTransfer format aliases

---------

Co-authored-by: Dylan Pulver <dylanpulver@users.noreply.github.com>
Co-authored-by: Rob Snow <snowystinger@gmail.com>

Author: dylanpulver

src/utils/dataTransfer/DataTransfer.ts

@@ -41,13 +41,23 @@ class DataTransferItemStub implements DataTransferItem {
   }
 }
 
+function toAsciiLowercase(value: string) {
+  return value.replace(/[A-Z]/g, char => char.toLowerCase())
+}
+
 class DataTransferItemListStub
   extends Array<DataTransferItem>
   implements DataTransferItemList {
   add(data: string, type: string): DataTransferItem
   add(file: File): DataTransferItem
   add(...args: never[]) {
-    const item = new DataTransferItemStub(args[0], args[1])
+    // The spec converts the type to ASCII lowercase here, but - unlike
+    // `setData()` - does not replace the `text` and `url` shorthands.
+    // https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitemlist-add
+    const item =
+      typeof args[0] === 'string'
+        ? new DataTransferItemStub(args[0], toAsciiLowercase(args[1]))
+        : new DataTransferItemStub(args[0])
     this.push(item)
     return item
   }
@@ -61,6 +71,18 @@ class DataTransferItemListStub
   }
 }
 
+// The spec requires the format to be converted to ASCII lowercase
+// and the shorthands `text` and `url` to be replaced with their MIME types.
+// https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdata
+function normalizeFormat(format: string) {
+  const type = toAsciiLowercase(format)
+  return type === 'text'
+    ? 'text/plain'
+    : type === 'url'
+      ? 'text/uri-list'
+      : type
+}
+
 function getTypeMatcher(type: string, exact: boolean) {
   const [group, sub] = type.split('/')
   const isGroup = !sub || sub === '*'
@@ -76,9 +98,10 @@ function getTypeMatcher(type: string, exact: boolean) {
 function createDataTransferStub(window: Window & typeof globalThis) {
   return new (class DataTransferStub implements DataTransfer {
     getData(format: string) {
+      const type = normalizeFormat(format)
       const match =
-        this.items.find(getTypeMatcher(format, true)) ??
-        this.items.find(getTypeMatcher(format, false))
+        this.items.find(getTypeMatcher(type, true)) ??
+        this.items.find(getTypeMatcher(type, false))
 
       let text = ''
       match?.getAsString(t => {
@@ -89,9 +112,10 @@ function createDataTransferStub(window: Window & typeof globalThis) {
     }
 
     setData(format: string, data: string) {
-      const matchIndex = this.items.findIndex(getTypeMatcher(format, true))
+      const type = normalizeFormat(format)
+      const matchIndex = this.items.findIndex(getTypeMatcher(type, true))
 
-      const item = new DataTransferItemStub(data, format) as DataTransferItem
+      const item = new DataTransferItemStub(data, type) as DataTransferItem
       if (matchIndex >= 0) {
         this.items.splice(matchIndex, 1, item)
       } else {
@@ -101,7 +125,8 @@ function createDataTransferStub(window: Window & typeof globalThis) {
 
     clearData(format?: string) {
       if (format) {
-        const matchIndex = this.items.findIndex(getTypeMatcher(format, true))
+        const type = normalizeFormat(format)
+        const matchIndex = this.items.findIndex(getTypeMatcher(type, true))
 
         if (matchIndex >= 0) {
           this.items.remove(matchIndex)

tests/clipboard/paste.ts

@@ -86,6 +86,16 @@ test('prevent input per paste event handler', async () => {
   expect(eventWasFired('input')).toBe(false)
 })
 
+test('paste string provides clipboard data as text/plain', async () => {
+  const {getEvents, user} = setup(`<input/>`)
+
+  await user.paste('foo')
+
+  const clipboardData = getEvents('paste')[0].clipboardData
+  expect(clipboardData?.types).toEqual(['text/plain'])
+  expect(clipboardData?.getData('text/plain')).toBe('foo')
+})
+
 test.each(['input', 'textarea'])(
   'should paste text in <%s> up to maxLength if provided',
   async type => {

tests/utils/dataTransfer/DataTransfer.ts

@@ -30,6 +30,70 @@ describe('create DataTransfer', () => {
     expect(dt.getData('text')).toBe('baz')
   })
 
+  test('normalize format shorthands', async () => {
+    const dt = createDataTransfer(window)
+    dt.setData('text', 'foo')
+    dt.setData('url', 'https://example.com')
+
+    expect(dt.types).toEqual(['text/plain', 'text/uri-list'])
+
+    expect(dt.getData('text/plain')).toBe('foo')
+    expect(dt.getData('text')).toBe('foo')
+    expect(dt.getData('text/uri-list')).toBe('https://example.com')
+    expect(dt.getData('url')).toBe('https://example.com')
+  })
+
+  test('normalize format case', async () => {
+    const dt = createDataTransfer(window)
+    dt.setData('TEXT/PLAIN', 'foo')
+    dt.setData('Url', 'https://example.com')
+
+    expect(dt.types).toEqual(['text/plain', 'text/uri-list'])
+
+    expect(dt.getData('text/plain')).toBe('foo')
+    expect(dt.getData('Text')).toBe('foo')
+    expect(dt.getData('text/uri-list')).toBe('https://example.com')
+  })
+
+  test('items.add follows the standard', () => {
+    const dt = createDataTransfer(window)
+    dt.items.add('foo', 'TEXT/PLAIN')
+    dt.items.add('bar', 'TEXT')
+    dt.items.add('baz', 'URL')
+
+    // Chrome currently preserves casing. Keep this spec assertion so the
+    // Toolbox result becomes green when Chrome converges with the standard.
+    expect(dt.types).toEqual(['text/plain', 'text', 'url'])
+    expect(dt.getData('TEXT/PLAIN')).toBe('foo')
+    expect(dt.getData('text/plain')).toBe('foo')
+    expect(dt.getData('text')).toBe('foo')
+  })
+
+  test('overwrite item declared per shorthand', async () => {
+    const dt = createDataTransfer(window)
+    dt.setData('text/plain', 'foo')
+    dt.setData('text', 'bar')
+
+    expect(dt.types).toEqual(['text/plain'])
+    expect(dt.getData('text/plain')).toBe('bar')
+  })
+
+  test('clear data per shorthand', async () => {
+    const dt = createDataTransfer(window)
+    dt.setData('text/plain', 'foo')
+    dt.setData('text/uri-list', 'https://example.com')
+
+    dt.clearData('text')
+
+    expect(dt.types).toEqual(['text/uri-list'])
+    expect(dt.getData('text/plain')).toBe('')
+
+    dt.clearData('URL')
+
+    expect(dt.types).toEqual([])
+    expect(dt.getData('text/uri-list')).toBe('')
+  })
+
   test('overwrite item', async () => {
     const dt = createDataTransfer(window)
     dt.setData('text/plain', 'foo')