editor-svg 1.0.2 → 1.0.3

package/CLAUDE.md

@@ -1,110 +0,0 @@
-# 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/cypress/e2e/control/checkbox.cy.ts

@@ -1,46 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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)
-        })
-    })
-  })
-})

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

@@ -1,25 +0,0 @@
-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('图片', () => {
-    cy.getEditor().then((editor: Editor) => {
-      editor.command.executeSelectAll()
-
-      editor.command.executeBackspace()
-
-      cy.get('#image').attachFile('test.png')
-
-      cy.wait(200).then(() => {
-        const data = editor.command.getValue().data.main
-
-        expect(data[0].type).to.eq('image')
-      })
-    })
-  })
-})

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

@@ -1,34 +0,0 @@
-import Editor from '../../../src/editor'
-
-describe('菜单-LaTeX', () => {
-  beforeEach(() => {
-    cy.visit('http://localhost:3000/canvas-editor/')
-
-    cy.get('canvas').first().as('canvas').should('have.length', 1)
-  })
-
-  const text = 'canvas-editor'
-
-  it('LaTeX', () => {
-    cy.getEditor().then((editor: Editor) => {
-      editor.command.executeSelectAll()
-
-      editor.command.executeBackspace()
-
-      cy.get('.menu-item__latex').click()
-
-      cy.get('.dialog-option__item [name="value"]').type(text)
-
-      cy.get('.dialog-menu button')
-        .eq(1)
-        .click()
-        .then(() => {
-          const data = editor.command.getValue().data.main
-
-          expect(data[0].type).to.eq('latex')
-
-          expect(data[0].value).to.eq(text)
-        })
-    })
-  })
-})

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

@@ -1,21 +0,0 @@
-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('分页符', () => {
-    cy.getEditor().then((editor: Editor) => {
-      editor.command.executeSelectAll()
-
-      editor.command.executeBackspace()
-
-      cy.get('.menu-item__page-break').click().click()
-
-      cy.get('canvas').should('have.length', 2)
-    })
-  })
-})

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

@@ -1,53 +0,0 @@
-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.executeInsertElementList([
-        {
-          value: text
-        }
-      ])
-
-      editor.command.executeSetRange(0, textLength)
-
-      cy.get('.menu-item__painter')
-        .click()
-        .wait(300)
-        .then(() => {
-          editor.command.executeSetRange(textLength, 2 * textLength)
-
-          editor.command.executeApplyPainterStyle()
-
-          const data = editor.command.getValue().data.main
-
-          expect(data.length).to.eq(1)
-
-          expect(data[0].italic).to.eq(true)
-
-          expect(data[0].bold).to.eq(true)
-        })
-    })
-  })
-})