Skip to content

Conversation

@golok727
Copy link
Contributor

@golok727 golok727 commented Mar 22, 2024

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
Copy link

vercel bot commented Mar 22, 2024

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
Copy link
Contributor Author

golok727 commented Mar 22, 2024

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

@golok727 golok727 marked this pull request as draft March 22, 2024 16:19
@golok727 golok727 marked this pull request as ready for review March 22, 2024 16:23
Copy link
Collaborator

@Saul-Mirone Saul-Mirone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add integration test for this case.

@golok727 golok727 changed the title feat(edgeless): paste SVG copied from other tools feat(edgeless): paste SVG in text/plain Mar 25, 2024
@golok727 golok727 changed the title feat(edgeless): paste SVG in text/plain feat(edgeless): paste SVG in text/plain mime Mar 25, 2024
@fourdim
Copy link
Collaborator

fourdim commented Mar 25, 2024

@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
Copy link
Contributor Author

@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
Copy link
Collaborator

fourdim commented Mar 26, 2024

@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
Copy link
Contributor Author

@fourdim PTAL

@fourdim fourdim dismissed Saul-Mirone’s stale review March 26, 2024 16:24

Test case added.

@fourdim fourdim enabled auto-merge (squash) March 26, 2024 16:24
@fourdim fourdim added the merge label Mar 26, 2024
@fourdim fourdim disabled auto-merge March 26, 2024 16:26
@graphite-app
Copy link

graphite-app bot commented Mar 26, 2024

Merge activity

@graphite-app graphite-app bot removed the merge label Mar 26, 2024
@Saul-Mirone Saul-Mirone merged commit 0714c3c into toeverything:master Mar 27, 2024
@golok727 golok727 deleted the feat/edgeless-paste-svg-in-text branch March 27, 2024 03:02
darkskygit pushed a commit to toeverything/AFFiNE that referenced this pull request Apr 10, 2024
## Features
- toeverything/blocksuite#6679 @pengx17
- toeverything/blocksuite#6620 @doouding
- toeverything/blocksuite#6602 @golok727
- toeverything/blocksuite#6661 @Flrande
- toeverything/blocksuite#6591 @fundon
- toeverything/blocksuite#6634 @golok727
- toeverything/blocksuite#6626 @regischen
- toeverything/blocksuite#6630 @Saul-Mirone
- toeverything/blocksuite#6605 @donteatfriedrice
- toeverything/blocksuite#6614 @zzj3720
- toeverything/blocksuite#6508 @doouding
- toeverything/blocksuite#6578 @donteatfriedrice
- toeverything/blocksuite#6572 @zzj3720
- toeverything/blocksuite#6571 @golok727
- toeverything/blocksuite#6573 @fundon
- toeverything/blocksuite#6580 @Flrande
- toeverything/blocksuite#6540 @golok727
- toeverything/blocksuite#6567 @Flrande
- toeverything/blocksuite#6565 @zzj3720
- toeverything/blocksuite#6561 @zzj3720

## Bugfix
- toeverything/blocksuite#6677 @donteatfriedrice
- toeverything/blocksuite#6681 @fundon
- toeverything/blocksuite#6673 @fundon
- toeverything/blocksuite#6652 @fundon
- toeverything/blocksuite#6641 @fourdim
- toeverything/blocksuite#6649 @golok727
- toeverything/blocksuite#6648 @doouding
- toeverything/blocksuite#6662 @Flrande
- toeverything/blocksuite#6659 @zkwolf
- toeverything/blocksuite#6644 @doouding
- toeverything/blocksuite#6633 @golok727
- toeverything/blocksuite#6632 @golok727
- toeverything/blocksuite#6622 @RubaXa
- toeverything/blocksuite#6622 @RubaXa
- toeverything/blocksuite#6622 @RubaXa
- toeverything/blocksuite#6622 @RubaXa
- toeverything/blocksuite#6622 @RubaXa
- toeverything/blocksuite#6600 @fourdim
- toeverything/blocksuite#6617 @zzj3720
- toeverything/blocksuite#6618 @Flrande
- toeverything/blocksuite#6576 @fundon
- toeverything/blocksuite#6595 @fundon
- toeverything/blocksuite#6596 @zzj3720
- toeverything/blocksuite#6574 @fundon
- toeverything/blocksuite#6593 @Saul-Mirone
- toeverything/blocksuite#6588 @zzj3720
- toeverything/blocksuite#6590 @zzj3720
- toeverything/blocksuite#6589 @zzj3720
- toeverything/blocksuite#6584 @lawvs
- toeverything/blocksuite#6579 @fundon
- toeverything/blocksuite#6538 @golok727
- toeverything/blocksuite#6570 @zzj3720
- toeverything/blocksuite#6569 @zzj3720
- toeverything/blocksuite#6564 @zzj3720
- toeverything/blocksuite#6563 @zzj3720

## Refactor
- toeverything/blocksuite#6683 @doodlewind
- toeverything/blocksuite#6668 @Flrande
- toeverything/blocksuite#6635 @donteatfriedrice
- toeverything/blocksuite#6653 @fundon
- toeverything/blocksuite#6615 @Flrande
- toeverything/blocksuite#6534 @Saul-Mirone
- toeverything/blocksuite#6553 @golok727

## Misc
- chore(examples): cleanup types
- toeverything/blocksuite#6664 @fourdim
- toeverything/blocksuite#6657 @fourdim
- toeverything/blocksuite#6654 @fourdim
- toeverything/blocksuite#6587 @Saul-Mirone
- toeverything/blocksuite#6562 @donteatfriedrice
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

3 participants