{"owner":"Hufe921","repo":"canvas-editor","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md","CLAUDE.md"],"skills":{"AGENTS.md":"# Canvas Editor - Agent Development Guide\n\nThis guide provides essential information for agentic coding agents working on the canvas-editor repository.\n\n## Project Overview\n\nCanvas Editor is a TypeScript-based rich text editor library that renders content using HTML5 Canvas/SVG. It's built as an ES module with comprehensive TypeScript support and follows modern development practices.\n\n## Development Commands\n\n### Essential Commands\n```bash\n# Development\nnpm run dev                    # Start Vite dev server\nnpm run serve                  # Preview production build\n\n# Building (includes lint + type check)\nnpm run lib                    # Build library for distribution\nnpm run build                  # Build application\n\n# Code Quality\nnpm run lint                   # Run ESLint\nnpm run type:check            # TypeScript type checking\n\n# Testing\nnpm run cypress:open          # Open Cypress test runner interactively\nnpm run cypress:run           # Run Cypress tests headless\n```\n\n### Pre-commit Hooks\n- Automatically runs `npm run lint && npm run type:check` before commits\n- Commit messages must follow conventional commit format (feat:, fix:, docs:, etc.)\n\n## Code Style Guidelines\n\n### Formatting Rules\n- **No semicolons** - `semi: [1, \"never\"]`\n- **Single quotes** - `quotes: [1, \"single\"]`\n- **2-space indentation** - No tabs\n- **80 character line limit** - `printWidth: 80`\n- **No trailing commas** - `trailingComma: \"none\"`\n- **Arrow function parentheses avoided** - `arrowParens: \"avoid\"`\n- **LF line endings** - `endOfLine: \"lf\"`\n\n### TypeScript Configuration\n- **Strict mode enabled** - All type checking enforced\n- **Target**: ESNext with modern features\n- **Module system**: ESNext modules\n- **Source maps**: Enabled for debugging\n- **Unused locals/parameters**: Checked and reported\n\n### ESLint Rules\n- `any` type allowed (`@typescript-eslint/no-explicit-any: 0`)\n- Console statements permitted\n- Debugger statements allowed\n- No explicit function return type required when inferred\n\n## Project Structure\n\n### Main Directories\n```\nsrc/\n├── editor/                    # Core editor library\n│   ├── index.ts              # Main entry point - exports Editor class\n│   ├── core/                 # Core functionality\n│   │   ├── draw/             # Canvas rendering engine\n│   │   ├── command/         # Command pattern implementation\n│   │   ├── listener/        # Event handling system\n│   │   └── ...\n│   ├── interface/            # TypeScript type definitions\n│   ├── dataset/             # Constants and enums\n│   │   ├── constant/        # Magic numbers and strings\n│   │   └── enum/           # TypeScript enums\n│   ├── utils/              # Editor-specific utilities\n│   └── assets/             # CSS-in-JS and images\n├── plugins/                 # Optional editor plugins\n├── components/              # Reusable UI components\n├── utils/                   # Shared utility functions\n└── assets/                  # Static assets\n```\n\n### Key Files\n- **Main entry**: `src/editor/index.ts` - Exports Editor class and utilities\n- **Package exports**: ES module and UMD builds with TypeScript definitions\n- **Node requirement**: `>=16.9.1`\n\n## Import Conventions\n\n### Module Imports\n- Use ES module imports: `import { Editor } from './editor'`\n- TypeScript interfaces: `import type { EditorInterface } from './interface'`\n- Relative imports with explicit extensions for non-TypeScript files\n\n### Import Organization\n1. External libraries (Node.js built-ins, npm packages)\n2. Internal modules (absolute imports from src/)\n3. Relative imports (sibling/parent directory imports)\n4. Type-only imports (use `import type` when possible)\n\n## Naming Conventions\n\n### Files and Directories\n- **PascalCase** for components and classes: `EditorManager.ts`\n- **camelCase** for utilities and functions: `formatText.ts`\n- **kebab-case** for directories when containing multiple words: `rich-text/`\n\n### Code Elements\n- **PascalCase** for classes and interfaces: `class Editor`, `interface EditorConfig`\n- **camelCase** for functions and variables: `formatText`, `currentSelection`\n- **UPPER_SNAKE_CASE** for constants: `MAX_CANVAS_WIDTH`, `DEFAULT_FONT_SIZE`\n- **PascalCase** for enums: `enum TextAlignment`\n\n## Error Handling\n\n### TypeScript Errors\n- Use strict TypeScript checking - prefer explicit types over `any`\n- Handle nullable types with optional chaining and nullish coalescing\n- Use union types for variant error states\n\n### Runtime Errors\n- Throw descriptive Error objects with context\n- Use try-catch blocks for external API calls\n- Validate user input in public API methods\n\n## Testing Guidelines\n\n### Cypress E2E Tests\n- Tests located in `cypress/` directory\n- Use `npm run cypress:open` for interactive test development\n- Use `npm run cypress:run` for CI/CD automated testing\n- Viewport set to 1366x720 for consistency\n\n### Test Organization\n- Group related tests in describe blocks\n- Use beforeEach for common setup\n- Write descriptive test names that explain the behavior\n- Test both happy path and error conditions\n\n## Build Process\n\n### Library Build\n- TypeScript compilation with strict checking\n- Vite bundling for ES module and UMD outputs\n- Automatic CSS-in-JS injection via plugin\n- Source maps generated for debugging\n\n### Quality Gates\n- Linting must pass before build completion\n- Type checking must pass before build completion\n- Pre-commit hooks enforce quality standards\n\n## API Design\n\n### Public API\n- Main Editor class exported from `src/editor/index.ts`\n- Fluent method chaining where appropriate\n- Consistent parameter ordering (required, then optional)\n- Comprehensive TypeScript definitions\n\n### Plugin System\n- Plugins in `src/plugins/` directory\n- Extend Editor functionality without modifying core\n- Follow established plugin patterns in codebase\n\n## Development Workflow\n\n1. **Start development**: `npm run dev`\n2. **Make changes**: Follow code style guidelines\n3. **Test changes**: Use Cypress for E2E testing\n4. **Quality check**: `npm run lint && npm run type:check`\n5. **Commit**: Pre-commit hooks will validate automatically\n6. **Build**: `npm run lib` for distribution build\n\n## Performance Considerations\n\n- Canvas rendering optimized for frequent updates\n- Minimal DOM manipulation - primarily Canvas-based\n- Efficient event handling with delegation patterns\n- Memory-conscious object pooling where appropriate\n\n## Security Notes\n\n- No external network requests in core library\n- Sanitize all user input before rendering\n- Avoid eval() and Function constructor usage\n- Validate configuration options in public API","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Development Commands\n\n- `npm run dev` - Start development server\n- `npm run lib` - Build library (runs lint, type check, and builds library)\n- `npm run build` - Build app (runs lint, type check, and builds app)\n- `npm run lint` - Run ESLint\n- `npm run type:check` - Run TypeScript type checking without emitting\n- `npm run cypress:open` - Open Cypress test runner GUI\n- `npm run cypress:run` - Run Cypress tests headlessly\n- `npm run docs:dev` - Start VitePress documentation server\n- `npm run docs:build` - Build VitePress documentation\n- `npm run release` - Run release script\n\nTo run a single Cypress test file: `npx cypress run --spec cypress/e2e/<test-file>.cy.ts`\n\n## Git Hooks\n\nPre-commit hooks run `npm run lint` and `npm run type:check`. Commit message must follow Conventional Commits format: `feat:`, `fix:`, `docs:`, `refactor:`, etc.\n\n## Architecture Overview\n\nThis is a canvas-based rich text editor built with TypeScript. The core architecture follows a modular, layered design:\n\n### Core Components\n\n**Editor Class** (`src/editor/index.ts`)\n- Main entry point that orchestrates all subsystems\n- Exposes public API via the `command` property (e.g., `editor.command.executeBold()`)\n- Manages lifecycle through `destroy()` method\n\n**Draw Class** (`src/editor/core/draw/Draw.ts`)\n- Central rendering engine (~96KB) responsible for canvas drawing\n- Manages pages, rows, elements, and cursor rendering\n- Coordinates all particle types and frame elements\n\n**Command Pattern** (`src/editor/core/command/`)\n- `Command.ts`: Facade exposing all execute methods (e.g., `executeBold`, `executeUndo`)\n- `CommandAdapt.ts`: Adapter that bridges commands to Draw context\n- All commands follow `execute*` naming convention\n\n### Element System\n\nThe editor uses a hierarchical element model defined in `src/editor/interface/Element.ts`:\n\n**IElement** - Base interface for all content elements with:\n- Basic properties: `id`, `type`, `value`, `extension`, `externalId`\n- Style: `font`, `size`, `bold`, `color`, etc. (IElementStyle)\n- Rules: `hide` (IElementRule)\n- Groups: `groupIds` (IElementGroup)\n\n**Element Types** (ElementType enum):\n- Text particles: TextParticle, ListParticle, HyperlinkParticle, etc.\n- Block particles: ImageParticle, TableParticle, LaTexParticle, etc.\n- Control particles: CheckboxParticle, RadioParticle, etc.\n- Frame elements: Margin, Background, PageNumber, etc.\n\n### Directory Structure\n\n```\nsrc/editor/\n├── core/\n│   ├── draw/           # Rendering engine\n│   │   ├── particle/    # Element rendering (text, image, table, latex, etc.)\n│   │   ├── control/    # Control component rendering\n│   │   ├── frame/       # Frame elements (margin, background, borders)\n│   │   ├── richtext/    # Rich text decorations (underline, highlight)\n│   │   └── interactive/ # Interactive features (search, graffiti)\n│   ├── command/         # Command pattern implementation\n│   ├── event/          # Canvas and global event handling\n│   ├── observer/        # Mouse, selection, image observers\n│   ├── worker/          # Web workers for async operations\n│   └── [other subsystems]\n├── interface/           # TypeScript interfaces (40+ files)\n├── dataset/            # Enums and constants\n└── utils/               # Utility functions\n```\n\n### Web Workers\n\nAsync operations use Web Workers managed by `WorkerManager.ts`:\n- WordCountWorker - Count words in element list\n- CatalogWorker - Generate document catalog/TOC\n- GroupWorker - Extract group IDs from elements\n- ValueWorker - Get document value asynchronously\n\n### Event System\n\n**EventBus** (`src/editor/core/event/eventbus/`) - Pub/sub system for editor events\n**Listener** (`src/editor/core/listener/`) - Callback system for change notifications\n**CanvasEvent** and **GlobalEvent** - Handle mouse, keyboard, and drag events\n\n### Plugin System\n\nPlugins extend functionality through `editor.use(plugin)` pattern. See `src/editor/core/plugin/Plugin.ts`.\n\n## Key Patterns\n\n**Command-Draw Separation**: Commands access Draw functionality through CommandAdapt, not directly. This prevents exposing internal Draw context to external consumers.\n\n**Element Formatting**: Elements are formatted via `formatElementList()` utility which applies defaults and compensates missing properties.\n\n**Zone-Based Layout**: Documents support header/main/footer zones managed through the Zone system.\n\n**Position-Range Model**: Cursor positions and selections are tracked through Position and RangeManager classes.\n\n**History Management**: Undo/redo functionality via HistoryManager with command history stack.\n"},"files":{"AGENTS.md":"# Canvas Editor - Agent Development Guide\n\nThis guide provides essential information for agentic coding agents working on the canvas-editor repository.\n\n## Project Overview\n\nCanvas Editor is a TypeScript-based rich text editor library that renders content using HTML5 Canvas/SVG. It's built as an ES module with comprehensive TypeScript support and follows modern development practices.\n\n## Development Commands\n\n### Essential Commands\n```bash\n# Development\nnpm run dev                    # Start Vite dev server\nnpm run serve                  # Preview production build\n\n# Building (includes lint + type check)\nnpm run lib                    # Build library for distribution\nnpm run build                  # Build application\n\n# Code Quality\nnpm run lint                   # Run ESLint\nnpm run type:check            # TypeScript type checking\n\n# Testing\nnpm run cypress:open          # Open Cypress test runner interactively\nnpm run cypress:run           # Run Cypress tests headless\n```\n\n### Pre-commit Hooks\n- Automatically runs `npm run lint && npm run type:check` before commits\n- Commit messages must follow conventional commit format (feat:, fix:, docs:, etc.)\n\n## Code Style Guidelines\n\n### Formatting Rules\n- **No semicolons** - `semi: [1, \"never\"]`\n- **Single quotes** - `quotes: [1, \"single\"]`\n- **2-space indentation** - No tabs\n- **80 character line limit** - `printWidth: 80`\n- **No trailing commas** - `trailingComma: \"none\"`\n- **Arrow function parentheses avoided** - `arrowParens: \"avoid\"`\n- **LF line endings** - `endOfLine: \"lf\"`\n\n### TypeScript Configuration\n- **Strict mode enabled** - All type checking enforced\n- **Target**: ESNext with modern features\n- **Module system**: ESNext modules\n- **Source maps**: Enabled for debugging\n- **Unused locals/parameters**: Checked and reported\n\n### ESLint Rules\n- `any` type allowed (`@typescript-eslint/no-explicit-any: 0`)\n- Console statements permitted\n- Debugger statements allowed\n- No explicit function return type required when inferred\n\n## Project Structure\n\n### Main Directories\n```\nsrc/\n├── editor/                    # Core editor library\n│   ├── index.ts              # Main entry point - exports Editor class\n│   ├── core/                 # Core functionality\n│   │   ├── draw/             # Canvas rendering engine\n│   │   ├── command/         # Command pattern implementation\n│   │   ├── listener/        # Event handling system\n│   │   └── ...\n│   ├── interface/            # TypeScript type definitions\n│   ├── dataset/             # Constants and enums\n│   │   ├── constant/        # Magic numbers and strings\n│   │   └── enum/           # TypeScript enums\n│   ├── utils/              # Editor-specific utilities\n│   └── assets/             # CSS-in-JS and images\n├── plugins/                 # Optional editor plugins\n├── components/              # Reusable UI components\n├── utils/                   # Shared utility functions\n└── assets/                  # Static assets\n```\n\n### Key Files\n- **Main entry**: `src/editor/index.ts` - Exports Editor class and utilities\n- **Package exports**: ES module and UMD builds with TypeScript definitions\n- **Node requirement**: `>=16.9.1`\n\n## Import Conventions\n\n### Module Imports\n- Use ES module imports: `import { Editor } from './editor'`\n- TypeScript interfaces: `import type { EditorInterface } from './interface'`\n- Relative imports with explicit extensions for non-TypeScript files\n\n### Import Organization\n1. External libraries (Node.js built-ins, npm packages)\n2. Internal modules (absolute imports from src/)\n3. Relative imports (sibling/parent directory imports)\n4. Type-only imports (use `import type` when possible)\n\n## Naming Conventions\n\n### Files and Directories\n- **PascalCase** for components and classes: `EditorManager.ts`\n- **camelCase** for utilities and functions: `formatText.ts`\n- **kebab-case** for directories when containing multiple words: `rich-text/`\n\n### Code Elements\n- **PascalCase** for classes and interfaces: `class Editor`, `interface EditorConfig`\n- **camelCase** for functions and variables: `formatText`, `currentSelection`\n- **UPPER_SNAKE_CASE** for constants: `MAX_CANVAS_WIDTH`, `DEFAULT_FONT_SIZE`\n- **PascalCase** for enums: `enum TextAlignment`\n\n## Error Handling\n\n### TypeScript Errors\n- Use strict TypeScript checking - prefer explicit types over `any`\n- Handle nullable types with optional chaining and nullish coalescing\n- Use union types for variant error states\n\n### Runtime Errors\n- Throw descriptive Error objects with context\n- Use try-catch blocks for external API calls\n- Validate user input in public API methods\n\n## Testing Guidelines\n\n### Cypress E2E Tests\n- Tests located in `cypress/` directory\n- Use `npm run cypress:open` for interactive test development\n- Use `npm run cypress:run` for CI/CD automated testing\n- Viewport set to 1366x720 for consistency\n\n### Test Organization\n- Group related tests in describe blocks\n- Use beforeEach for common setup\n- Write descriptive test names that explain the behavior\n- Test both happy path and error conditions\n\n## Build Process\n\n### Library Build\n- TypeScript compilation with strict checking\n- Vite bundling for ES module and UMD outputs\n- Automatic CSS-in-JS injection via plugin\n- Source maps generated for debugging\n\n### Quality Gates\n- Linting must pass before build completion\n- Type checking must pass before build completion\n- Pre-commit hooks enforce quality standards\n\n## API Design\n\n### Public API\n- Main Editor class exported from `src/editor/index.ts`\n- Fluent method chaining where appropriate\n- Consistent parameter ordering (required, then optional)\n- Comprehensive TypeScript definitions\n\n### Plugin System\n- Plugins in `src/plugins/` directory\n- Extend Editor functionality without modifying core\n- Follow established plugin patterns in codebase\n\n## Development Workflow\n\n1. **Start development**: `npm run dev`\n2. **Make changes**: Follow code style guidelines\n3. **Test changes**: Use Cypress for E2E testing\n4. **Quality check**: `npm run lint && npm run type:check`\n5. **Commit**: Pre-commit hooks will validate automatically\n6. **Build**: `npm run lib` for distribution build\n\n## Performance Considerations\n\n- Canvas rendering optimized for frequent updates\n- Minimal DOM manipulation - primarily Canvas-based\n- Efficient event handling with delegation patterns\n- Memory-conscious object pooling where appropriate\n\n## Security Notes\n\n- No external network requests in core library\n- Sanitize all user input before rendering\n- Avoid eval() and Function constructor usage\n- Validate configuration options in public API","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Development Commands\n\n- `npm run dev` - Start development server\n- `npm run lib` - Build library (runs lint, type check, and builds library)\n- `npm run build` - Build app (runs lint, type check, and builds app)\n- `npm run lint` - Run ESLint\n- `npm run type:check` - Run TypeScript type checking without emitting\n- `npm run cypress:open` - Open Cypress test runner GUI\n- `npm run cypress:run` - Run Cypress tests headlessly\n- `npm run docs:dev` - Start VitePress documentation server\n- `npm run docs:build` - Build VitePress documentation\n- `npm run release` - Run release script\n\nTo run a single Cypress test file: `npx cypress run --spec cypress/e2e/<test-file>.cy.ts`\n\n## Git Hooks\n\nPre-commit hooks run `npm run lint` and `npm run type:check`. Commit message must follow Conventional Commits format: `feat:`, `fix:`, `docs:`, `refactor:`, etc.\n\n## Architecture Overview\n\nThis is a canvas-based rich text editor built with TypeScript. The core architecture follows a modular, layered design:\n\n### Core Components\n\n**Editor Class** (`src/editor/index.ts`)\n- Main entry point that orchestrates all subsystems\n- Exposes public API via the `command` property (e.g., `editor.command.executeBold()`)\n- Manages lifecycle through `destroy()` method\n\n**Draw Class** (`src/editor/core/draw/Draw.ts`)\n- Central rendering engine (~96KB) responsible for canvas drawing\n- Manages pages, rows, elements, and cursor rendering\n- Coordinates all particle types and frame elements\n\n**Command Pattern** (`src/editor/core/command/`)\n- `Command.ts`: Facade exposing all execute methods (e.g., `executeBold`, `executeUndo`)\n- `CommandAdapt.ts`: Adapter that bridges commands to Draw context\n- All commands follow `execute*` naming convention\n\n### Element System\n\nThe editor uses a hierarchical element model defined in `src/editor/interface/Element.ts`:\n\n**IElement** - Base interface for all content elements with:\n- Basic properties: `id`, `type`, `value`, `extension`, `externalId`\n- Style: `font`, `size`, `bold`, `color`, etc. (IElementStyle)\n- Rules: `hide` (IElementRule)\n- Groups: `groupIds` (IElementGroup)\n\n**Element Types** (ElementType enum):\n- Text particles: TextParticle, ListParticle, HyperlinkParticle, etc.\n- Block particles: ImageParticle, TableParticle, LaTexParticle, etc.\n- Control particles: CheckboxParticle, RadioParticle, etc.\n- Frame elements: Margin, Background, PageNumber, etc.\n\n### Directory Structure\n\n```\nsrc/editor/\n├── core/\n│   ├── draw/           # Rendering engine\n│   │   ├── particle/    # Element rendering (text, image, table, latex, etc.)\n│   │   ├── control/    # Control component rendering\n│   │   ├── frame/       # Frame elements (margin, background, borders)\n│   │   ├── richtext/    # Rich text decorations (underline, highlight)\n│   │   └── interactive/ # Interactive features (search, graffiti)\n│   ├── command/         # Command pattern implementation\n│   ├── event/          # Canvas and global event handling\n│   ├── observer/        # Mouse, selection, image observers\n│   ├── worker/          # Web workers for async operations\n│   └── [other subsystems]\n├── interface/           # TypeScript interfaces (40+ files)\n├── dataset/            # Enums and constants\n└── utils/               # Utility functions\n```\n\n### Web Workers\n\nAsync operations use Web Workers managed by `WorkerManager.ts`:\n- WordCountWorker - Count words in element list\n- CatalogWorker - Generate document catalog/TOC\n- GroupWorker - Extract group IDs from elements\n- ValueWorker - Get document value asynchronously\n\n### Event System\n\n**EventBus** (`src/editor/core/event/eventbus/`) - Pub/sub system for editor events\n**Listener** (`src/editor/core/listener/`) - Callback system for change notifications\n**CanvasEvent** and **GlobalEvent** - Handle mouse, keyboard, and drag events\n\n### Plugin System\n\nPlugins extend functionality through `editor.use(plugin)` pattern. See `src/editor/core/plugin/Plugin.ts`.\n\n## Key Patterns\n\n**Command-Draw Separation**: Commands access Draw functionality through CommandAdapt, not directly. This prevents exposing internal Draw context to external consumers.\n\n**Element Formatting**: Elements are formatted via `formatElementList()` utility which applies defaults and compensates missing properties.\n\n**Zone-Based Layout**: Documents support header/main/footer zones managed through the Zone system.\n\n**Position-Range Model**: Cursor positions and selections are tracked through Position and RangeManager classes.\n\n**History Management**: Undo/redo functionality via HistoryManager with command history stack.\n"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","title":"AGENTS.md","content":"# Canvas Editor - Agent Development Guide\n\nThis guide provides essential information for agentic coding agents working on the canvas-editor repository.\n\n## Project Overview\n\nCanvas Editor is a TypeScript-based rich text editor library that renders content using HTML5 Canvas/SVG. It's built as an ES module with comprehensive TypeScript support and follows modern development practices.\n\n## Development Commands\n\n### Essential Commands\n```bash\n# Development\nnpm run dev                    # Start Vite dev server\nnpm run serve                  # Preview production build\n\n# Building (includes lint + type check)\nnpm run lib                    # Build library for distribution\nnpm run build                  # Build application\n\n# Code Quality\nnpm run lint                   # Run ESLint\nnpm run type:check            # TypeScript type checking\n\n# Testing\nnpm run cypress:open          # Open Cypress test runner interactively\nnpm run cypress:run           # Run Cypress tests headless\n```\n\n### Pre-commit Hooks\n- Automatically runs `npm run lint && npm run type:check` before commits\n- Commit messages must follow conventional commit format (feat:, fix:, docs:, etc.)\n\n## Code Style Guidelines\n\n### Formatting Rules\n- **No semicolons** - `semi: [1, \"never\"]`\n- **Single quotes** - `quotes: [1, \"single\"]`\n- **2-space indentation** - No tabs\n- **80 character line limit** - `printWidth: 80`\n- **No trailing commas** - `trailingComma: \"none\"`\n- **Arrow function parentheses avoided** - `arrowParens: \"avoid\"`\n- **LF line endings** - `endOfLine: \"lf\"`\n\n### TypeScript Configuration\n- **Strict mode enabled** - All type checking enforced\n- **Target**: ESNext with modern features\n- **Module system**: ESNext modules\n- **Source maps**: Enabled for debugging\n- **Unused locals/parameters**: Checked and reported\n\n### ESLint Rules\n- `any` type allowed (`@typescript-eslint/no-explicit-any: 0`)\n- Console statements permitted\n- Debugger statements allowed\n- No explicit function return type required when inferred\n\n## Project Structure\n\n### Main Directories\n```\nsrc/\n├── editor/                    # Core editor library\n│   ├── index.ts              # Main entry point - exports Editor class\n│   ├── core/                 # Core functionality\n│   │   ├── draw/             # Canvas rendering engine\n│   │   ├── command/         # Command pattern implementation\n│   │   ├── listener/        # Event handling system\n│   │   └── ...\n│   ├── interface/            # TypeScript type definitions\n│   ├── dataset/             # Constants and enums\n│   │   ├── constant/        # Magic numbers and strings\n│   │   └── enum/           # TypeScript enums\n│   ├── utils/              # Editor-specific utilities\n│   └── assets/             # CSS-in-JS and images\n├── plugins/                 # Optional editor plugins\n├── components/              # Reusable UI components\n├── utils/                   # Shared utility functions\n└── assets/                  # Static assets\n```\n\n### Key Files\n- **Main entry**: `src/editor/index.ts` - Exports Editor class and utilities\n- **Package exports**: ES module and UMD builds with TypeScript definitions\n- **Node requirement**: `>=16.9.1`\n\n## Import Conventions\n\n### Module Imports\n- Use ES module imports: `import { Editor } from './editor'`\n- TypeScript interfaces: `import type { EditorInterface } from './interface'`\n- Relative imports with explicit extensions for non-TypeScript files\n\n### Import Organization\n1. External libraries (Node.js built-ins, npm packages)\n2. Internal modules (absolute imports from src/)\n3. Relative imports (sibling/parent directory imports)\n4. Type-only imports (use `import type` when possible)\n\n## Naming Conventions\n\n### Files and Directories\n- **PascalCase** for components and classes: `EditorManager.ts`\n- **camelCase** for utilities and functions: `formatText.ts`\n- **kebab-case** for directories when containing multiple words: `rich-text/`\n\n### Code Elements\n- **PascalCase** for classes and interfaces: `class Editor`, `interface EditorConfig`\n- **camelCase** for functions and variables: `formatText`, `currentSelection`\n- **UPPER_SNAKE_CASE** for constants: `MAX_CANVAS_WIDTH`, `DEFAULT_FONT_SIZE`\n- **PascalCase** for enums: `enum TextAlignment`\n\n## Error Handling\n\n### TypeScript Errors\n- Use strict TypeScript checking - prefer explicit types over `any`\n- Handle nullable types with optional chaining and nullish coalescing\n- Use union types for variant error states\n\n### Runtime Errors\n- Throw descriptive Error objects with context\n- Use try-catch blocks for external API calls\n- Validate user input in public API methods\n\n## Testing Guidelines\n\n### Cypress E2E Tests\n- Tests located in `cypress/` directory\n- Use `npm run cypress:open` for interactive test development\n- Use `npm run cypress:run` for CI/CD automated testing\n- Viewport set to 1366x720 for consistency\n\n### Test Organization\n- Group related tests in describe blocks\n- Use beforeEach for common setup\n- Write descriptive test names that explain the behavior\n- Test both happy path and error conditions\n\n## Build Process\n\n### Library Build\n- TypeScript compilation with strict checking\n- Vite bundling for ES module and UMD outputs\n- Automatic CSS-in-JS injection via plugin\n- Source maps generated for debugging\n\n### Quality Gates\n- Linting must pass before build completion\n- Type checking must pass before build completion\n- Pre-commit hooks enforce quality standards\n\n## API Design\n\n### Public API\n- Main Editor class exported from `src/editor/index.ts`\n- Fluent method chaining where appropriate\n- Consistent parameter ordering (required, then optional)\n- Comprehensive TypeScript definitions\n\n### Plugin System\n- Plugins in `src/plugins/` directory\n- Extend Editor functionality without modifying core\n- Follow established plugin patterns in codebase\n\n## Development Workflow\n\n1. **Start development**: `npm run dev`\n2. **Make changes**: Follow code style guidelines\n3. **Test changes**: Use Cypress for E2E testing\n4. **Quality check**: `npm run lint && npm run type:check`\n5. **Commit**: Pre-commit hooks will validate automatically\n6. **Build**: `npm run lib` for distribution build\n\n## Performance Considerations\n\n- Canvas rendering optimized for frequent updates\n- Minimal DOM manipulation - primarily Canvas-based\n- Efficient event handling with delegation patterns\n- Memory-conscious object pooling where appropriate\n\n## Security Notes\n\n- No external network requests in core library\n- Sanitize all user input before rendering\n- Avoid eval() and Function constructor usage\n- Validate configuration options in public API","category":"root","tokens":1643},{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Development Commands\n\n- `npm run dev` - Start development server\n- `npm run lib` - Build library (runs lint, type check, and builds library)\n- `npm run build` - Build app (runs lint, type check, and builds app)\n- `npm run lint` - Run ESLint\n- `npm run type:check` - Run TypeScript type checking without emitting\n- `npm run cypress:open` - Open Cypress test runner GUI\n- `npm run cypress:run` - Run Cypress tests headlessly\n- `npm run docs:dev` - Start VitePress documentation server\n- `npm run docs:build` - Build VitePress documentation\n- `npm run release` - Run release script\n\nTo run a single Cypress test file: `npx cypress run --spec cypress/e2e/<test-file>.cy.ts`\n\n## Git Hooks\n\nPre-commit hooks run `npm run lint` and `npm run type:check`. Commit message must follow Conventional Commits format: `feat:`, `fix:`, `docs:`, `refactor:`, etc.\n\n## Architecture Overview\n\nThis is a canvas-based rich text editor built with TypeScript. The core architecture follows a modular, layered design:\n\n### Core Components\n\n**Editor Class** (`src/editor/index.ts`)\n- Main entry point that orchestrates all subsystems\n- Exposes public API via the `command` property (e.g., `editor.command.executeBold()`)\n- Manages lifecycle through `destroy()` method\n\n**Draw Class** (`src/editor/core/draw/Draw.ts`)\n- Central rendering engine (~96KB) responsible for canvas drawing\n- Manages pages, rows, elements, and cursor rendering\n- Coordinates all particle types and frame elements\n\n**Command Pattern** (`src/editor/core/command/`)\n- `Command.ts`: Facade exposing all execute methods (e.g., `executeBold`, `executeUndo`)\n- `CommandAdapt.ts`: Adapter that bridges commands to Draw context\n- All commands follow `execute*` naming convention\n\n### Element System\n\nThe editor uses a hierarchical element model defined in `src/editor/interface/Element.ts`:\n\n**IElement** - Base interface for all content elements with:\n- Basic properties: `id`, `type`, `value`, `extension`, `externalId`\n- Style: `font`, `size`, `bold`, `color`, etc. (IElementStyle)\n- Rules: `hide` (IElementRule)\n- Groups: `groupIds` (IElementGroup)\n\n**Element Types** (ElementType enum):\n- Text particles: TextParticle, ListParticle, HyperlinkParticle, etc.\n- Block particles: ImageParticle, TableParticle, LaTexParticle, etc.\n- Control particles: CheckboxParticle, RadioParticle, etc.\n- Frame elements: Margin, Background, PageNumber, etc.\n\n### Directory Structure\n\n```\nsrc/editor/\n├── core/\n│   ├── draw/           # Rendering engine\n│   │   ├── particle/    # Element rendering (text, image, table, latex, etc.)\n│   │   ├── control/    # Control component rendering\n│   │   ├── frame/       # Frame elements (margin, background, borders)\n│   │   ├── richtext/    # Rich text decorations (underline, highlight)\n│   │   └── interactive/ # Interactive features (search, graffiti)\n│   ├── command/         # Command pattern implementation\n│   ├── event/          # Canvas and global event handling\n│   ├── observer/        # Mouse, selection, image observers\n│   ├── worker/          # Web workers for async operations\n│   └── [other subsystems]\n├── interface/           # TypeScript interfaces (40+ files)\n├── dataset/            # Enums and constants\n└── utils/               # Utility functions\n```\n\n### Web Workers\n\nAsync operations use Web Workers managed by `WorkerManager.ts`:\n- WordCountWorker - Count words in element list\n- CatalogWorker - Generate document catalog/TOC\n- GroupWorker - Extract group IDs from elements\n- ValueWorker - Get document value asynchronously\n\n### Event System\n\n**EventBus** (`src/editor/core/event/eventbus/`) - Pub/sub system for editor events\n**Listener** (`src/editor/core/listener/`) - Callback system for change notifications\n**CanvasEvent** and **GlobalEvent** - Handle mouse, keyboard, and drag events\n\n### Plugin System\n\nPlugins extend functionality through `editor.use(plugin)` pattern. See `src/editor/core/plugin/Plugin.ts`.\n\n## Key Patterns\n\n**Command-Draw Separation**: Commands access Draw functionality through CommandAdapt, not directly. This prevents exposing internal Draw context to external consumers.\n\n**Element Formatting**: Elements are formatted via `formatElementList()` utility which applies defaults and compensates missing properties.\n\n**Zone-Based Layout**: Documents support header/main/footer zones managed through the Zone system.\n\n**Position-Range Model**: Cursor positions and selections are tracked through Position and RangeManager classes.\n\n**History Management**: Undo/redo functionality via HistoryManager with command history stack.\n","category":"root","tokens":1169}]}