editor-svg 1.0.0

package/CLAUDE.md

@@ -0,0 +1,110 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- `npm run dev` - Start development server
+- `npm run lib` - Build library (runs lint, type check, and builds library)
+- `npm run build` - Build app (runs lint, type check, and builds app)
+- `npm run lint` - Run ESLint
+- `npm run type:check` - Run TypeScript type checking without emitting
+- `npm run cypress:open` - Open Cypress test runner GUI
+- `npm run cypress:run` - Run Cypress tests headlessly
+- `npm run docs:dev` - Start VitePress documentation server
+- `npm run docs:build` - Build VitePress documentation
+- `npm run release` - Run release script
+
+To run a single Cypress test file: `npx cypress run --spec cypress/e2e/<test-file>.cy.ts`
+
+## Git Hooks
+
+Pre-commit hooks run `npm run lint` and `npm run type:check`. Commit message must follow Conventional Commits format: `feat:`, `fix:`, `docs:`, `refactor:`, etc.
+
+## Architecture Overview
+
+This is a canvas-based rich text editor built with TypeScript. The core architecture follows a modular, layered design:
+
+### Core Components
+
+**Editor Class** (`src/editor/index.ts`)
+- Main entry point that orchestrates all subsystems
+- Exposes public API via the `command` property (e.g., `editor.command.executeBold()`)
+- Manages lifecycle through `destroy()` method
+
+**Draw Class** (`src/editor/core/draw/Draw.ts`)
+- Central rendering engine (~96KB) responsible for canvas drawing
+- Manages pages, rows, elements, and cursor rendering
+- Coordinates all particle types and frame elements
+
+**Command Pattern** (`src/editor/core/command/`)
+- `Command.ts`: Facade exposing all execute methods (e.g., `executeBold`, `executeUndo`)
+- `CommandAdapt.ts`: Adapter that bridges commands to Draw context
+- All commands follow `execute*` naming convention
+
+### Element System
+
+The editor uses a hierarchical element model defined in `src/editor/interface/Element.ts`:
+
+**IElement** - Base interface for all content elements with:
+- Basic properties: `id`, `type`, `value`, `extension`, `externalId`
+- Style: `font`, `size`, `bold`, `color`, etc. (IElementStyle)
+- Rules: `hide` (IElementRule)
+- Groups: `groupIds` (IElementGroup)
+
+**Element Types** (ElementType enum):
+- Text particles: TextParticle, ListParticle, HyperlinkParticle, etc.
+- Block particles: ImageParticle, TableParticle, LaTexParticle, etc.
+- Control particles: CheckboxParticle, RadioParticle, etc.
+- Frame elements: Margin, Background, PageNumber, etc.
+
+### Directory Structure
+
+```
+src/editor/
+├── core/
+│   ├── draw/           # Rendering engine
+│   │   ├── particle/    # Element rendering (text, image, table, latex, etc.)
+│   │   ├── control/    # Control component rendering
+│   │   ├── frame/       # Frame elements (margin, background, borders)
+│   │   ├── richtext/    # Rich text decorations (underline, highlight)
+│   │   └── interactive/ # Interactive features (search, graffiti)
+│   ├── command/         # Command pattern implementation
+│   ├── event/          # Canvas and global event handling
+│   ├── observer/        # Mouse, selection, image observers
+│   ├── worker/          # Web workers for async operations
+│   └── [other subsystems]
+├── interface/           # TypeScript interfaces (40+ files)
+├── dataset/            # Enums and constants
+└── utils/               # Utility functions
+```
+
+### Web Workers
+
+Async operations use Web Workers managed by `WorkerManager.ts`:
+- WordCountWorker - Count words in element list
+- CatalogWorker - Generate document catalog/TOC
+- GroupWorker - Extract group IDs from elements
+- ValueWorker - Get document value asynchronously
+
+### Event System
+
+**EventBus** (`src/editor/core/event/eventbus/`) - Pub/sub system for editor events
+**Listener** (`src/editor/core/listener/`) - Callback system for change notifications
+**CanvasEvent** and **GlobalEvent** - Handle mouse, keyboard, and drag events
+
+### Plugin System
+
+Plugins extend functionality through `editor.use(plugin)` pattern. See `src/editor/core/plugin/Plugin.ts`.
+
+## Key Patterns
+
+**Command-Draw Separation**: Commands access Draw functionality through CommandAdapt, not directly. This prevents exposing internal Draw context to external consumers.
+
+**Element Formatting**: Elements are formatted via `formatElementList()` utility which applies defaults and compensates missing properties.
+
+**Zone-Based Layout**: Documents support header/main/footer zones managed through the Zone system.
+
+**Position-Range Model**: Cursor positions and selections are tracked through Position and RangeManager classes.
+
+**History Management**: Undo/redo functionality via HistoryManager with command history stack.

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021-present, hufe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+<h1 align="center">canvas-editor</h1>
+
+<p align="center">
+  <a href="https://trendshift.io/repositories/8401" target="_blank"><img src="https://trendshift.io/api/badge/repositories/8401" alt="Hufe921%2Fcanvas-editor | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
+<p align="center">
+<a href="https://www.npmjs.com/package/@hufe921/canvas-editor" target="_blank"><img src="https://img.shields.io/npm/v/@hufe921/canvas-editor.svg?sanitize=true" alt="Version"></a>
+ <a href="https://github.com/hufe921/canvas-editor/actions" target="_blank">
+  <img alt="Cypress Passing" src="https://github.com/hufe921/canvas-editor/workflows/cypress/badge.svg" />
+</a>
+<a href="https://github.com/hufe921/canvas-editor/graphs/contributors" target="_blank">
+  <img alt="GitHub Contributors" src="https://img.shields.io/github/contributors/hufe921/canvas-editor" />
+</a>
+<a href="https://www.npmjs.com/package/@hufe921/canvas-editor" target="_blank"><img src="https://img.shields.io/npm/l/@hufe921/canvas-editor.svg?sanitize=true" alt="License"></a>
+<a href="https://github.com/Hufe921/canvas-editor/issues/new/choose" target="_blank"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"></a>
+<a href="https://zread.ai/Hufe921/canvas-editor" target="_blank"><img src="https://img.shields.io/badge/Ask_Zread-_.svg?style=flat&color=00b0aa&labelColor=000000&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuOTYxNTYgMS42MDAxSDIuMjQxNTZDMS44ODgxIDEuNjAwMSAxLjYwMTU2IDEuODg2NjQgMS42MDE1NiAyLjI0MDFWNC45NjAxQzEuNjAxNTYgNS4zMTM1NiAxLjg4ODEgNS42MDAxIDIuMjQxNTYgNS42MDAxSDQuOTYxNTZDNS4zMTUwMiA1LjYwMDEgNS42MDE1NiA1LjMxMzU2IDUuNjAxNTYgNC45NjAxVjIuMjQwMUM1LjYwMTU2IDEuODg2NjQgNS4zMTUwMiAxLjYwMDEgNC45NjE1NiAxLjYwMDFaIiBmaWxsPSIjZmZmIi8%2BCjxwYXRoIGQ9Ik00Ljk2MTU2IDEwLjM5OTlIMi4yNDE1NkMxLjg4ODEgMTAuMzk5OSAxLjYwMTU2IDEwLjY4NjQgMS42MDE1NiAxMS4wMzk5VjEzLjc1OTlDMS42MDE1NiAxNC4xMTM0IDEuODg4MSAxNC4zOTk5IDIuMjQxNTYgMTQuMzk5OUg0Ljk2MTU2QzUuMzE1MDIgMTQuMzk5OSA1LjYwMTU2IDE0LjExMzQgNS42MDE1NiAxMy43NTk5VjExLjAzOTlDNS42MDE1NiAxMC42ODY0IDUuMzE1MDIgMTAuMzk5OSA0Ljk2MTU2IDEwLjM5OTlaIiBmaWxsPSIjZmZmIi8%2BCjxwYXRoIGQ9Ik0xMy43NTg0IDEuNjAwMUgxMS4wMzg0QzEwLjY4NSAxLjYwMDEgMTAuMzk4NCAxLjg4NjY0IDEwLjM5ODQgMi4yNDAxVjQuOTYwMUMxMC4zOTg0IDUuMzEzNTYgMTAuNjg1IDUuNjAwMSAxMS4wMzg0IDUuNjAwMUgxMy43NTg0QzE0LjExMTkgNS42MDAxIDE0LjM5ODQgNS4zMTM1NiAxNC4zOTg0IDQuOTYwMVYyLjI0MDFDMTQuMzk4NCAxLjg4NjY0IDE0LjExMTkgMS42MDAxIDEzLjc1ODQgMS42MDAxWiIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJNNCAxMkwxMiA0TDQgMTJaIiBmaWxsPSIjZmZmIi8%2BCjxwYXRoIGQ9Ik00IDEyTDEyIDQiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K&logoColor=ffffff" alt="zread"/></a>
+<a href="https://deepwiki.com/Hufe921/canvas-editor" target="_blank"><img src="https://img.shields.io/badge/Ask_DeepWiki-_.svg?style=flat&color=0094de&labelColor=000000&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJzaXplLTQgdHJhbnNmb3JtIHRyYW5zaXRpb24tdHJhbnNmb3JtIGR1cmF0aW9uLTcwMCBncm91cC1ob3Zlcjpyb3RhdGUtMTgwIFsmYW1wO19wYXRoXTpzdHJva2UtMCIgdmlld0JveD0iMTEwIDExMCA0NjAgNTAwIj48cGF0aCBkPSJNNDE5IDMzMnExNi03IDMyIDBsMjUgMTUgMyAxIDMgMSAzLTEgMy0xIDUxLTI5cTYtMyA2LTExdi01OHEwLTgtNi0xMWwtNTEtMjlxLTYtMy0xMiAwbC01MSAyOXYxbC0yIDEtMiAydjFsLTEgMnYxbC0xIDN2MjlhMzIgMzIgMCAwIDEtNDggMjhsLTI1LTE1LTMtMS0zLTEtMyAxLTMgMS01MSAyOXEtNSAzLTYgMTF2NThxMSA4IDYgMTFsNTEgMjkgMyAxIDMgMSAzLTEgMy0xIDI1LTE1YTMyIDMyIDAgMCAxIDQ4IDI4djI5bDEgM3YxbDEgMnYxbDIgMiAyIDIgNTEgMjkgNiAyIDYtMiA1MS0yOXE2LTMgNi0xMXYtNThxMC04LTYtMTFsLTUxLTI5LTMtMS0zLTEtMyAxLTMgMS0yNSAxNWEzMiAzMiAwIDAgMS00OC0yOHExLTE4IDE2LTI4IiBzdHlsZT0iZmlsbDojMjFjMTlhIi8+PHBhdGggZD0ibTE0MSAzMTggNTEgMjkgNiAyIDYtMiA1MS0yOXYtMWwyLTEgMi0ydi0xbDEtMnYtMWwxLTN2LTI5YTMyIDMyIDAgMCAxIDQ4LTI4bDI1IDE1IDMgMSAzIDEgMy0xIDMtMSA1MS0yOXE2LTMgNi0xMXYtNThxMC04LTYtMTFsLTUxLTI5cS02LTMtMTIgMGwtNTEgMjktMiAyaC0xbC0xIDJ2MWwtMSAydjFsLTEgM3YyOWEzMiAzMiAwIDAgMS00OCAyOGwtMjUtMTUtMy0xLTMtMS0zIDEtMyAxLTUxIDI5cS02IDMtNiAxMXY1OHEwIDggNiAxMSIgc3R5bGU9ImZpbGw6IzM5NjljYSIvPjxwYXRoIGQ9Im0zOTcgNDg0LTUxLTI5LTMtMS0zLTEtMyAxLTMgMS0yNSAxNWEzMiAzMiAwIDAgMS00OC0yOHYtMjlsLTEtM3YtMWwtMS0ydi0xbC0yLTItMi0xdi0xbC01MS0yOXEtNi0zLTEyIDBsLTUxIDI5cS02IDMtNiAxMXY1OHEwIDggNiAxMWw1MSAyOSAzIDEgMyAxIDMtMSAzLTEgMjUtMTVhMzIgMzIgMCAwIDEgNDggMjh2MjlsMSAzdjFsMSAydjFsMiAyIDIgMiA1MSAyOSA2IDIgNi0yIDUxLTI5cTYtMyA2LTExdi01OHEwLTgtNi0xMSIgc3R5bGU9ImZpbGw6IzAyOTRkZSIvPjwvc3ZnPg==&logoColor=ffffff" alt="DeepWiki"/></a>
+</p>
+
+<p align="center"> a rich text editor by canvas/svg</p>
+
+<p align="center">
+  <a href="https://hufe.club/canvas-editor" target="_blank">View Demo</a>
+  ·
+  <a href="https://hufe.club/canvas-editor-docs" target="_blank">View Docs</a>
+  ·
+  <a href="https://github.com/Hufe921/canvas-editor/issues/new?assignees=&labels=&projects=&template=bug_report.yml" target="_blank">Report Bug</a>
+  ·
+  <a href="https://github.com/Hufe921/canvas-editor/issues/new?assignees=&labels=%3Asparkles%3A+feature+request&projects=&template=feature_request.yml" target="_blank">Request Feature</a>
+  ·
+  <a href="https://github.com/Hufe921/canvas-editor/discussions" target="_blank">FAQ</a>
+</p>
+
+<p align="center">Love the project? Please consider <a href="https://hufe.club/donate.jpg" target="_blank">donating(赞助)</a> to help it improve!</p>
+
+## Tips
+
+1. Official plugin: [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin)
+2. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
+3. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
+4. The AI-powered text processing demo, see [feature/ai](https://github.com/Hufe921/canvas-editor/tree/feature/ai)
+5. Table pagination [#41](https://github.com/Hufe921/canvas-editor/issues/41) is under active development, see: [poc/table-paging](https://github.com/Hufe921/canvas-editor/tree/poc/table-paging) · [demo](https://hufe.club/canvas-editor-table/)
+
+## Basic usage
+
+```bash
+npm i @hufe921/canvas-editor --save
+```
+
+```html
+<div class="canvas-editor"></div>
+```
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(document.querySelector('.canvas-editor'), {
+  main: [
+    {
+      value: 'Hello World'
+    }
+  ]
+})
+```
+
+## Features
+
+- Rich text operations (Undo, Redo, Font, Size, Bold, Italic, Underline, Strikeout, Superscript, Alignment, Title, List, ...)
+- Insert elements (Table, Image, Link, Code Block, Page Break, Math Formula, Date Picker, Block, ...)
+- Print (Based on canvas to picture, pdf drawing)
+- Controls (Select, Text, Date, Radio, Checkbox)
+- Contextmenu (Internal, Custom)
+- Shortcut keys (Internal, Custom)
+- Drag and Drop(Text, Element, Control)
+- Header, Footer, Page Number
+- Page Margin
+- Watermark
+- Pagination
+- Comment
+- Catalog
+
+## Roadmap
+
+1. Table paging
+2. Control rules
+3. Improve performance
+4. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
+
+## Snapshot
+
+![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.35.png)
+
+## Install
+
+`yarn`
+
+## Dev
+
+`npm run dev`
+
+## Build
+
+#### app
+
+`npm run build`
+
+#### lib
+
+`npm run lib`

package/cypress/e2e/control/checkbox.cy.ts

@@ -0,0 +1,46 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-复选框', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'checkbox'
+
+  it('复选框', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type: elementType,
+          value: '',
+          control: {
+            code: '98175',
+            type: controlType,
+            value: null,
+            valueSets: [
+              {
+                value: '有',
+                code: '98175'
+              },
+              {
+                value: '无',
+                code: '98176'
+              }
+            ]
+          }
+        }
+      ])
+
+      const data = editor.command.getValue().data.main[0]
+
+      expect(data.control!.code).to.be.eq('98175')
+    })
+  })
+})

package/cypress/e2e/control/select.cy.ts

@@ -0,0 +1,56 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-列举型', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `有`
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'select'
+
+  it('列举型', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type: elementType,
+          value: '',
+          control: {
+            type: controlType,
+            value: null,
+            placeholder: '列举型',
+            valueSets: [
+              {
+                value: '有',
+                code: '98175'
+              },
+              {
+                value: '无',
+                code: '98176'
+              }
+            ]
+          }
+        }
+      ])
+
+      cy.get('@canvas').type(`{leftArrow}`)
+
+      cy.get('.ce-select-control-popup li')
+        .eq(0)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main[0]
+
+          expect(data.control!.value![0].value).to.be.eq(text)
+
+          expect(data.control!.code).to.be.eq('98175')
+        })
+    })
+  })
+})

package/cypress/e2e/control/text.cy.ts

@@ -0,0 +1,43 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-文本型', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `canvas-editor`
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'text'
+
+  it('文本型', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type: elementType,
+          value: '',
+          control: {
+            type: controlType,
+            value: null,
+            placeholder: '文本型'
+          }
+        }
+      ])
+
+      cy.get('@canvas').type(`{leftArrow}`)
+
+      cy.get('.ce-inputarea')
+        .type(text)
+        .then(() => {
+          const data = editor.command.getValue().data.main[0]
+
+          expect(data.control!.value![0].value).to.be.eq(text)
+        })
+    })
+  })
+})

package/cypress/e2e/editor.cy.ts

@@ -0,0 +1,67 @@
+import Editor from '../../src/editor'
+
+describe('基础功能', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+
+  it('编辑保存', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('@canvas')
+        .type(text)
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].value).to.eq(text)
+        })
+    })
+  })
+
+  it('模式切换', () => {
+    cy.get('@canvas').click()
+
+    cy.get('.ce-cursor').should('have.css', 'display', 'block')
+
+    cy.get('.editor-mode').click().click()
+
+    cy.get('.editor-mode').contains('只读')
+
+    cy.get('@canvas').click()
+
+    cy.get('.ce-cursor').should('have.css', 'display', 'none')
+  })
+
+  it('页面缩放', () => {
+    cy.get('.page-scale-add').click()
+
+    cy.get('.page-scale-percentage').contains('110%')
+
+    cy.get('.page-scale-minus').click().click()
+
+    cy.get('.page-scale-percentage').contains('90%')
+  })
+
+  it('字数统计', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: 'canvas-editor 2022 编辑器'
+        }
+      ])
+
+      cy.get('.word-count').contains('7')
+    })
+  })
+})

package/cypress/e2e/menus/block.cy.ts

@@ -0,0 +1,38 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-内容块', () => {
+  const url = 'http://localhost:3000/canvas-editor/'
+
+  beforeEach(() => {
+    cy.visit(url)
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('内容块', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__block').click()
+
+      cy.get('.dialog-option__item [name="width"]').type('500')
+
+      cy.get('.dialog-option__item [name="height"]').type('300')
+
+      cy.get('.dialog-option__item [name="src"]').type(url)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('block')
+
+          expect(data[0].block?.iframeBlock?.src).to.eq(url)
+        })
+    })
+  })
+})

package/cypress/e2e/menus/checkbox.cy.ts

@@ -0,0 +1,33 @@
+import Editor, { ElementType } from '../../../src/editor'
+
+describe('菜单-复选框', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const type: ElementType = <ElementType>'checkbox'
+
+  it('代码块', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type,
+          value: '',
+          checkbox: {
+            value: true
+          }
+        }
+      ])
+
+      const data = editor.command.getValue().data.main[0]
+
+      expect(data.checkbox?.value).to.eq(true)
+    })
+  })
+})

package/cypress/e2e/menus/codeblock.cy.ts

@@ -0,0 +1,34 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-代码块', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `console.log('canvas-editor')`
+
+  it('代码块', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__codeblock').click()
+
+      cy.get('.dialog-option [name="codeblock"]').type(text)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main[2]
+
+          expect(data.value).to.eq('log')
+
+          expect(data.color).to.eq('#b9a40a')
+        })
+    })
+  })
+})

package/cypress/e2e/menus/date.cy.ts

@@ -0,0 +1,28 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-日期选择器', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('LaTeX', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__date').click()
+
+      cy.get('.menu-item__date li')
+        .first()
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('date')
+        })
+    })
+  })
+})

package/cypress/e2e/menus/format.cy.ts

@@ -0,0 +1,40 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-清除格式', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const textLength = text.length
+
+  it('清除格式', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text,
+          bold: true,
+          italic: true
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__format')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].italic).to.eq(undefined)
+
+          expect(data[0].bold).to.eq(undefined)
+        })
+    })
+  })
+})

package/cypress/e2e/menus/hyperlink.cy.ts

@@ -0,0 +1,39 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-超链接', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const url = 'https://hufe.club/canvas-editor'
+
+  it('超链接', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__hyperlink').click()
+
+      cy.get('.dialog-option__item [name="name"]').type(text)
+
+      cy.get('.dialog-option__item [name="url"]').type(url)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('hyperlink')
+
+          expect(data[0].url).to.eq(url)
+
+          expect(data[0]?.valueList?.[0].value).to.eq(text)
+        })
+    })
+  })
+})