AGENTS.md

Guidance for coding agents working on HTML Editor Section Block Editing in the html-editor project.

Project overview

This guide covers section nodes and flow block editing. A section is a top-level document node with layout flow and blocks for headings, paragraphs, lists, and images. Section text can be edited inline through the iframe, and block operations are exposed in the property panel.

Primary source files

• src/model/schema.ts defines sectionBlock and sectionNode.
• src/model/command.ts applies block.set, block.add, block.remove, and block.move.
• src/renderer/src/render/renderModel.ts renders section blocks and data-editor-block attributes.
• src/renderer/src/render/DocumentFrame.tsx starts inline block editing on double click.
• src/renderer/src/ui/PropertyPanel.tsx exposes section block controls.
• src/renderer/src/ui/SidebarPanel.tsx can add a new section page.

Setup commands

npm install npm test npm run typecheck npm run build

Run npm test with command and renderModel tests after section changes.

Change rules

• Keep section layout as flow unless a migration and renderer support are added.
• Preserve data-editor-block values as section id plus block index for inline editing.
• Use block.set for text commits, block.add for inserts, block.remove for deletion, and block.move for reorder.
• Validate any new block kind in schema, renderer, command behavior, and panel controls together.
• Do not assume every block has text; image and list blocks carry different fields.

Testing

Cover heading render, paragraph render, list render, image render, inline block commit, add paragraph, add heading, remove block, move block up, move block down, and undo for each command.

PR checklist

• Block indices remain stable through the edit action.
• Undo and redo work for every block operation.
• Renderer output stays compatible with DocumentFrame selectors.
• Full npm test and npm run typecheck pass.