chore: improve import tools (#3000)

Author: antsgar

packages/ui-services/src/Import/EvernoteConverter/EvernoteConverter.ts

@@ -388,15 +388,23 @@ export class EvernoteConverter implements Converter {
   }
 
   stripHTML(html: string) {
-    const tmp = document.createElement('html')
-    tmp.innerHTML = html
-    return tmp.textContent || tmp.innerText || ''
+    const doc = new DOMParser().parseFromString(html, 'text/html')
+    return doc.body.textContent || ''
   }
 }
 
 function changeElementTag(element: HTMLElement, newTag: string) {
-  const attributes = Array.prototype.slice.call(element.attributes)
-  element.outerHTML = `<${newTag} ${attributes.map((attr) => attr.name + '="' + attr.value + '"').join(' ')}>${
-    element.innerHTML
-  }</${newTag}>`
+  const doc = element.ownerDocument
+  const parent = element.parentElement
+  if (!parent) {
+    return
+  }
+  const replacement = doc.createElement(newTag)
+  for (const attr of Array.from(element.attributes)) {
+    replacement.setAttribute(attr.name, attr.value)
+  }
+  while (element.firstChild) {
+    replacement.appendChild(element.firstChild)
+  }
+  parent.replaceChild(replacement, element)
 }

packages/ui-services/src/Import/GoogleKeepConverter/GoogleKeepConverter.ts

@@ -74,8 +74,8 @@ export class GoogleKeepConverter implements Converter {
     convertHTMLToSuper: HTMLToSuperConverterFunction,
     canUseSuper: boolean,
   ): Promise<SNNote> {
-    const rootElement = document.createElement('html')
-    rootElement.innerHTML = data
+    const doc = new DOMParser().parseFromString(data, 'text/html')
+    const rootElement = doc.documentElement
 
     const headingElement = rootElement.getElementsByClassName('heading')[0]
     const parsedDate = new Date(headingElement?.textContent || '')
@@ -110,8 +110,9 @@ export class GoogleKeepConverter implements Converter {
     })
 
     if (!canUseSuper) {
-      // Replace <br> with \n so line breaks get recognised
-      contentElement.innerHTML = contentElement.innerHTML.replace(/<br>/g, '\n')
+      Array.from(contentElement.querySelectorAll('br')).forEach((br) => {
+        br.replaceWith(doc.createTextNode('\n'))
+      })
       content = contentElement.textContent
     } else {
       content = convertHTMLToSuper(rootElement.innerHTML, {

packages/ui-services/src/Import/ImportLimits.spec.ts

@@ -0,0 +1,15 @@
+import { assertImportFileWithinSizeLimit, MaxImportFileSizeBytes } from './ImportLimits'
+
+describe('ImportLimits', () => {
+  it('rejects files over the configured limit', () => {
+    const file = new File(['x'], 'note.html', { type: 'text/html' })
+    Object.defineProperty(file, 'size', { value: MaxImportFileSizeBytes + 1 })
+    expect(() => assertImportFileWithinSizeLimit(file)).toThrow('Import file is too large')
+  })
+
+  it('allows files at or below max import size', () => {
+    const file = new File(['x'], 'note.html', { type: 'text/html' })
+    Object.defineProperty(file, 'size', { value: MaxImportFileSizeBytes })
+    expect(() => assertImportFileWithinSizeLimit(file)).not.toThrow()
+  })
+})

packages/ui-services/src/Import/ImportLimits.ts

@@ -0,0 +1,7 @@
+export const MaxImportFileSizeBytes = 50 * 1_000_000
+
+export function assertImportFileWithinSizeLimit(file: File): void {
+  if (file.size > MaxImportFileSizeBytes) {
+    throw new Error('Import file is too large')
+  }
+}

packages/ui-services/src/Import/Importer.ts

@@ -12,6 +12,7 @@ import { EvernoteConverter } from './EvernoteConverter/EvernoteConverter'
 import { GoogleKeepConverter } from './GoogleKeepConverter/GoogleKeepConverter'
 import { PlaintextConverter } from './PlaintextConverter/PlaintextConverter'
 import { SimplenoteConverter } from './SimplenoteConverter/SimplenoteConverter'
+import { assertImportFileWithinSizeLimit, MaxImportFileSizeBytes } from './ImportLimits'
 import { readFileAsText } from './Utils'
 import {
   DecryptedItemInterface,
@@ -74,6 +75,9 @@ export class Importer {
   }
 
   detectService = async (file: File): Promise<string | null> => {
+    if (file.size > MaxImportFileSizeBytes) {
+      return null
+    }
     const content = await readFileAsText(file)
 
     const { ext } = parseFileName(file.name)
@@ -232,6 +236,8 @@ export class Importer {
       throw new Error('Importing Super notes requires a subscription')
     }
 
+    assertImportFileWithinSizeLimit(file)
+
     const successful: ConversionResult['successful'] = []
     const errored: ConversionResult['errored'] = []