fix: prevent duplicate child cloning of iframe content

[joshualoehr]

Description

Currently, iframe content is duplicated during the recursive cloneNode process. See this repo for a minimal reproduction of the issue: https://github.com/joshualoehr/html-to-image-iframe-bug

I'm new to this library so it's not clear to me if there's a downside to the fix I'm proposing, or a better way to approach a solution. But all of the existing tests pass and the new test I've added covers the scenario in my repro repo.

Motivation and Context

When the iframe node is originally passed into cloneNode, it is forwarded to cloneSingleNode. In cloneSingleNode, the iframe's document body is extracted and recursively passed back into cloneNode as another root node. That latter cloneNode call takes care of cloning all of the iframe content just fine.

However, since the original call to cloneNode with the iframe node is still promise-chained, it will then pass through cloneChildren, decorate, and ensureSVGSymbols again, after its document body node has already done so. That causes the iframe's body and other nested contents to be cloned again, redundantly. The result is two copies of the iframe contents in the SVG.

The changes in this PR stop cloneChildren and decorate from doing anything if operating on the iframe node itself, rather than its nested document body. ensureSVGSymbols seems to be irrelevant for iframes, so I've left it alone.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[biiibooo]

👋 @joshualoehr

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (b751cbf) 62.93% compared to head (eba8d40) 62.93%.
Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #434   +/-   ##
=======================================
  Coverage   62.93%   62.93%           
=======================================
  Files          10       10           
  Lines         580      580           
  Branches      143      143           
=======================================
  Hits          365      365           
  Misses        151      151           
  Partials       64       64           

Files Changed	Coverage Δ
src/clone-node.ts	71.42% <ø> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.