feat(edgeless): paste SVG in text/plain mime

[golok727]

Changes

• This PR allows to paste SVG in text format from the clipboard

Usage

• Copy as SVG from tools like Figma and directly paste it into edgeless

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 27, 2024 2:09am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Mar 27, 2024 2:09am

[golok727]

@doodlewind do we need sanitization? as scripts in SVG usually do not get executed. Also we are loading it as image src

[Saul-Mirone]

Please add integration test for this case.

[fourdim]

@doodlewind do we need sanitization? as scripts in SVG usually do not get executed. Also we are loading it as image src

Yeah, we do need to sanitize it.

[golok727]

@doodlewind do we need sanitization? as scripts in SVG usually do not get executed. Also we are loading it as image src

Yeah, we do need to sanitize it

Is a simple sanitization like below enough or does blocksuite uses any specific tool? haven't found anything yet.

const attributes = Array.from(svgEl.attributes).map(({ name }) => name)
 const hasScriptAttr = !!attributes.find((attr) => attr.startsWith('on'))
 const disallowedSvgElements = svgEl.querySelectorAll(svgDisallowed.join(','))
  return disallowedSvgElements.length === 0 && !hasScriptAttr ? svg : null

[fourdim]

@doodlewind do we need sanitization? as scripts in SVG usually do not get executed. Also we are loading it as image src

Yeah, we do need to sanitize it

Is a simple sanitization like below enough or does blocksuite uses any specific tool? haven't found anything yet.

const attributes = Array.from(svgEl.attributes).map(({ name }) => name)
 const hasScriptAttr = !!attributes.find((attr) => attr.startsWith('on'))
 const disallowedSvgElements = svgEl.querySelectorAll(svgDisallowed.join(','))
  return disallowedSvgElements.length === 0 && !hasScriptAttr ? svg : null

You can use https://www.npmjs.com/package/dompurify.

[golok727]

@fourdim PTAL

Test case added.

[graphite-app]

Merge activity

• Mar 26, 12:30 PM EDT: fourdim added this pull request to the Graphite merge queue.
• Mar 26, 12:34 PM EDT: The Graphite merge queue wasn't able to merge this pull request due to internal failures.