mirror of
https://github.com/balena-io/etcher.git
synced 2025-04-24 07:17:18 +00:00
fix(svg-icon): Handle DOMParser parsererrors (#1663)
This checks for `parsererror`s in the DOMParser's returned document, to prevent re-use of the previous image and avoid displaying an error document in the SVG icon slot. Change-Type: patch Changelog-Entry: Avoid "broken" icon when selecting a zip image archive with invalid SVG.
This commit is contained in:
parent
b5b98cf392
commit
a2f1ddddb5
@ -35,6 +35,8 @@ const angularSVGIcon = angular.module(MODULE_NAME, [])
|
||||
|
||||
const DEFAULT_SIZE = '40px'
|
||||
|
||||
const domParser = new window.DOMParser()
|
||||
|
||||
/**
|
||||
* @summary SVG element that takes both filepaths and file contents
|
||||
* @type {Object}
|
||||
@ -65,11 +67,11 @@ class SVGIcon extends react.Component {
|
||||
const width = this.props.width || DEFAULT_SIZE
|
||||
const height = this.props.height || DEFAULT_SIZE
|
||||
|
||||
const parser = new window.DOMParser()
|
||||
const doc = parser.parseFromString(contents, 'image/svg+xml')
|
||||
const doc = domParser.parseFromString(contents, 'image/svg+xml')
|
||||
const parserError = doc.querySelector('parsererror')
|
||||
const svg = doc.querySelector('svg')
|
||||
|
||||
const svgData = `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
|
||||
const svgXml = svg && _.isNil(parserError) ? svg.outerHTML : ''
|
||||
const svgData = `data:image/svg+xml,${encodeURIComponent(svgXml)}`
|
||||
|
||||
return react.createElement('img', {
|
||||
className: 'svg-icon',
|
||||
|
@ -72,6 +72,17 @@ describe('Browser: SVGIcon', function () {
|
||||
m.chai.expect(element.children().attr('src')).to.equal(imgData)
|
||||
})
|
||||
|
||||
it('should use an empty src if there is a parsererror', function () {
|
||||
// The following is invalid, because there's no closing tag for `foreignObject`
|
||||
const iconContents = '<svg><foreignObject></svg>'
|
||||
const imgData = `data:image/svg+xml,`
|
||||
$rootScope.iconContents = iconContents
|
||||
|
||||
const element = $compile('<svg-icon path="iconContents">Resin.io</svg-icon>')($rootScope)
|
||||
$rootScope.$digest()
|
||||
m.chai.expect(element.children().attr('src')).to.equal(imgData)
|
||||
})
|
||||
|
||||
it('should default the size to 40x40 pixels', function () {
|
||||
const icon = '../../../lib/gui/assets/etcher.svg'
|
||||
const element = $compile(`<svg-icon path="'${icon}'">Resin.io</svg-icon>`)($rootScope)
|
||||
|
Loading…
x
Reference in New Issue
Block a user