v2.4.0 - Export to Single HTML File & Header Dropdown

Description

Implemented a new "Export as Single HTML" feature, enabling users to download a self-contained file with embedded styles and scripts. To accommodate this, the header "Download" button was refactored into an "Export" dropdown menu offering both ZIP and single-file options.

Changes Made

• Header UI Updates (src/components/Header/Header.tsx):
  • Renamed the "Download" button to "Export" and added a chevron indicator.
  • Implemented a dropdown menu with two distinct options:
    • Download as ZIP: Retained existing functionality for separate files.
    • Export as Single HTML: New feature for self-contained exports.
  • Added visual polish to the dropdown with icons and descriptive subtitles.
  • Implemented state management for dropdown visibility, including click-outside handling.
• Export Logic (src/components/MainContent/MainContent.tsx):
  • Implemented handleExportHTML to generate the combined file.
  • Added logic to inject enabled CDN library tags.
  • Embeds CSS content within <style> tags before the closing </head>.
  • Embeds JS content within <script> tags before the closing </body>.
  • Updated MainContentRef to expose the exportHTML method.
• Layout Integration (src/components/Layout/Layout.tsx):
  • Added a handler to trigger exportHTML() via the MainContent ref.
  • Passed the onExportHTML prop down to the Header component.

How It Works

The export function dynamically constructs a single DOM string by aggregating the current editor states. It places CSS styles into the document head and appends the JavaScript execution block at the end of the body, ensuring a functional standalone file that mirrors the editor's output.

Screenshots

Export Dropdown

Full Changelog: v2.3.0...v2.4.0