Skip to content

add html to canvas download utils for using in mini-editor - #679

Draft
vvineett wants to merge 22 commits into
stagefrom
mini-editor-download-util
Draft

add html to canvas download utils for using in mini-editor#679
vvineett wants to merge 22 commits into
stagefrom
mini-editor-download-util

Conversation

@vvineett

Copy link
Copy Markdown
Contributor

Summary

Added a generic "capture an HTMLElement and download it as an image" utility, vendoring html2canvas per this repo's existing convention (no CDN, no bare npm imports).

New files:

  • express/code/scripts/utils/download-utils.jscaptureElementAsImage() / downloadElementAsImage()
  • express/code/libs/deps/html2canvas.js + html2canvas-all.min.js — esbuild-bundled vendored dep (same pattern as delta-e/lit)
  • test/scripts/utils/download-utils.test.js — unit tests (sinon-stubbed Html2CanvasLoader)

Modified:

  • package.json — added html2canvas devDependency
  • express/code/libs/deps/README.md — documented the html2canvas vendoring
  • express/code/scripts/utils/README.md — documented the new utility's API

Key decisions:

  • html2canvas over dom-to-image-style libs, since .browserslistrc requires Safari ≥15 (unreliable foreignObject support there)
  • Vendored via esbuild bundle + relative import, not CDN loadScript — matches repo convention for npm packages that need real ES imports
  • captureElementAsImage split into a sync wrapper (validates element, throws immediately) + async inner function (rest of the work), so misuse doesn't surface as an unhandled promise rejection

Jira Ticket

Resolves: MWPW-NUMBER


Test URLs

Env URL
Before https://main--da-express-milo--adobecom.aem.page/express/
After https://--da-express-milo--adobecom.aem.page/express/?martech=off

Verification Steps

  • Steps to reproduce the issue or view the new feature.
  • What to expect before and after the change.

Potential Regressions

  • https://--da-express-milo--adobecom.aem.live/express/?martech=off

Additional Notes

(If applicable) Add context, related PRs, or known issues here.

@aem-code-sync

aem-code-sync Bot commented Aug 10, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

@vvineett
vvineett force-pushed the mini-editor-download-util branch from 7e839c2 to 11007f0 Compare August 14, 2026 12:47
// Placeholder handlers — real edit/share behavior (deep-link to the
// Express editor and Web Share API) is follow-up work.
topActions: [
{ type: 'edit', onClick: () => console.info('mini-editor: edit action not yet implemented') },

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ [eslint] <no-console> reported by reviewdog 🐶
Unexpected console statement.

// Express editor and Web Share API) is follow-up work.
topActions: [
{ type: 'edit', onClick: () => console.info('mini-editor: edit action not yet implemented') },
{ type: 'share', onClick: () => console.info('mini-editor: share action not yet implemented') },

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ [eslint] <no-console> reported by reviewdog 🐶
Unexpected console statement.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ [eslint] reported by reviewdog 🐶
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants