AlexandrAI AGENTS.md
agents-md

HTML Editor Toolbar File Workflow Agent Guide

Agent guide for Toolbar save, open, image insertion, and new-document workflows.

AGENTS.md

Guidance for coding agents working on HTML Editor Toolbar File Workflow in the html-editor project.

Project overview

This guide covers the top toolbar workflow in src/renderer/src/ui/Toolbar.tsx. The toolbar creates new slide or sheet documents, appends slides, imports images as data URLs, saves the current model as single-file HTML, and opens editor-format HTML through either Electron IPC or browser file input.

Primary source files

  • src/renderer/src/ui/Toolbar.tsx owns user-facing file actions.
  • src/renderer/src/state/docTemplates.ts creates empty slide and sheet documents through schema validation.
  • src/renderer/src/render/exportHtml.ts exports and imports the editable HTML format.
  • src/preload/index.ts and src/main/index.ts provide desktop open and save operations when Electron APIs are available.

Setup commands

npm install npm test npm run typecheck npm run build

For focused coverage, run npm test with exportHtml, docTemplates, and command tests when changing toolbar behavior.

Change rules

  • Keep new documents validated by editorDocument.parse through the template helpers.
  • Do not bypass exportDocumentHtml when saving; saved files must include both rendered HTML and the embedded model.
  • Browser fallback save should create a Blob and revoke the object URL after triggering the download.
  • Image insertion should read local files as data URLs and create image nodes only inside slide documents.
  • Open operations must reject non-editor HTML by catching importDocumentHtml failures.

Testing

Test new slide, new sheet, add slide, browser open fallback, desktop open path, export save path, and image insertion into a slide. Include the no-slide case for image insertion.

PR checklist

  • Desktop and browser modes still work.
  • Saved HTML can be reopened by importDocumentHtml.
  • File input values are cleared after use.
  • Full npm test and npm run typecheck pass.