@hufe921/canvas-editor 0.9.133 → 0.9.134

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [0.9.134](https://github.com/Hufe921/canvas-editor/compare/v0.9.133...v0.9.134) (2026-05-22)
+
+
+### Chores
+
+* add dependabot config ([4478c59](https://github.com/Hufe921/canvas-editor/commit/4478c59a77bdedf58c655319254be3485a5438b4))
+* lock pnpm version ([c474691](https://github.com/Hufe921/canvas-editor/commit/c47469115dd1ffb5a5251d04e0665547b4022dfc))
+* update workflow config ([0e9aa29](https://github.com/Hufe921/canvas-editor/commit/0e9aa29a16cedbe51bd22130656840797eb02cb9))
+
+
+### Documentation
+
+* add CONTRIBUTING.md ([c7b138d](https://github.com/Hufe921/canvas-editor/commit/c7b138d436da7105fb21027fa8cfdba78214f69b))
+* update documentation descriptions ([1322c86](https://github.com/Hufe921/canvas-editor/commit/1322c86a98356110ad3255b8aaf8d209311ce6d4))
+
+
+### Features
+
+* add filterHideElementRow option for print mode #1410 ([67ca33a](https://github.com/Hufe921/canvas-editor/commit/67ca33a1f2002c1e70eee6f04882e55b65fed8ee)), closes [#1410](https://github.com/Hufe921/canvas-editor/issues/1410)
+* add year and month picker for date control #1256 ([fb45ee1](https://github.com/Hufe921/canvas-editor/commit/fb45ee18811f23b733b8fa2c6e7529d31b83691b)), closes [#1256](https://github.com/Hufe921/canvas-editor/issues/1256)
+* use table-relative coordinates for float images #1372 ([1d403ea](https://github.com/Hufe921/canvas-editor/commit/1d403ea6f344217791de151c8606e93788bce533)), closes [#1372](https://github.com/Hufe921/canvas-editor/issues/1372)
+
+
+
 ## [0.9.133](https://github.com/Hufe921/canvas-editor/compare/v0.9.132...v0.9.133) (2026-05-05)
 
 

package/README.md

@@ -1,7 +1,13 @@
-<h1 align="center">canvas-editor</h1>
+<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>
+  <strong>A Canvas/SVG-based rich text editor.</strong>
+</p>
+
+<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">
@@ -18,36 +24,64 @@
 <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"><strong>Live Demo</strong></a> ·
+  <a href="https://hufe.club/canvas-editor-docs" target="_blank"><strong>Documentation</strong></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">Discussions</a>
+</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>
+  English · <a href="https://hufe.club/canvas-editor-docs">中文文档</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
+## Overview
 
-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/)
+**Canvas Editor** is a feature-rich, WYSIWYG document editor built on top of the HTML `<canvas>` API. It is designed for use cases that demand pixel-perfect rendering, advanced typography, complex layouts, and Word-like document experiences in the browser — including EMR (Electronic Medical Records), legal contracts, reports, and other document-centric applications.
 
-## Basic usage
+Unlike traditional `contenteditable`-based editors, Canvas Editor takes full control of the rendering pipeline, providing consistent typography across browsers, precise pagination, and a uniform export experience.
+
+## Features
+
+- **Rich Text** — Undo / Redo, Font, Size, Bold, Italic, Underline, Strikeout, Superscript, Alignment, Headings, Lists, and more
+- **Insertable Elements** — Tables, Images, Hyperlinks, Code Blocks, Page Breaks, Math Formulas (LaTeX), Date Pickers, Block elements
+- **Form Controls** — Select, Text, Date, Radio, Checkbox controls
+- **Pagination** — Native pagination with headers, footers, and page numbers
+- **Page Layout** — Configurable page margins, watermarks, backgrounds
+- **Document Structure** — Catalog (TOC) generation, comments, group annotations
+- **Print & Export** — Print-ready output via canvas-to-image / PDF rendering
+- **Interaction** — Custom context menus, customizable shortcut keys, drag-and-drop for text, elements, and controls
+- **Extensibility** — Plugin system for adding custom functionality
+- **Performance** — Web Workers for word counting, catalog generation, and async value retrieval
+
+## Why Canvas Editor?
+
+|                         | Canvas Editor                    | contenteditable Editors     |
+| ----------------------- | -------------------------------- | --------------------------- |
+| Cross-browser rendering | Pixel-perfect, identical         | Varies by browser           |
+| Pagination              | Native, document-style           | Manual / unsupported        |
+| Print fidelity          | Matches on-screen output         | Often diverges              |
+| Typography control      | Full control                     | Limited by the browser      |
+| Document features       | TOC, headers/footers, watermarks | Requires heavy custom logic |
+
+## Installation
 
 ```bash
-npm i @hufe921/canvas-editor --save
+# npm
+npm install @hufe921/canvas-editor
+
+# pnpm
+pnpm add @hufe921/canvas-editor
+
+# yarn
+yarn add @hufe921/canvas-editor
 ```
 
+## Quick Start
+
 ```html
 <div class="canvas-editor"></div>
 ```
@@ -55,56 +89,135 @@ npm i @hufe921/canvas-editor --save
 ```javascript
 import Editor from '@hufe921/canvas-editor'
 
-new Editor(document.querySelector('.canvas-editor'), {
+const container = document.querySelector('.canvas-editor')
+
+const editor = new Editor(container, {
   main: [
     {
-      value: 'Hello World'
+      value: 'Hello, Canvas Editor!'
     }
   ]
 })
 ```
 
-## Features
+For complete API documentation, see the [official docs](https://hufe.club/canvas-editor-docs).
+
+## Ecosystem
+
+| Project                                                                            | Description                                                           |
+| ---------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin)            | Official plugin collection                                            |
+| [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)           | SVG render layer (in development)                                     |
+| [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)           | PDF export feature                                                    |
+| [feature/ai](https://github.com/Hufe921/canvas-editor/tree/feature/ai)             | AI-powered text processing demo                                       |
+| [poc/table-paging](https://github.com/Hufe921/canvas-editor/tree/poc/table-paging) | Table pagination POC ([demo](https://hufe.club/canvas-editor-table/)) |
+| [feature/CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)         | CRDT-based collaboration (experimental)                               |
+
+## Development
+
+### Prerequisites
+
+- Node.js `>= 24.13.1`
+- pnpm (recommended)
+
+### Setup
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start the development server
+npm run dev
+```
+
+### Build
+
+```bash
+# Build the application (demo)
+npm run build
+
+# Build the library (publishable package)
+npm run lib
+```
+
+### Quality Checks
+
+```bash
+# Lint
+npm run lint
+
+# Type check
+npm run type:check
+
+# Unit tests (Vitest)
+npm run test:unit
 
-- 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
+# E2E tests (Cypress)
+npm run cypress:open    # interactive
+npm run cypress:run     # headless
+```
+
+### Documentation
 
-## Roadmap
+```bash
+npm run docs:dev        # Start VitePress docs locally
+npm run docs:build      # Build the documentation site
+```
 
-1. Table paging
-2. Control rules
-3. Improve performance
-4. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
+## Project Structure
 
-## Snapshot
+```
+src/editor/
+├── core/
+│   ├── draw/           # Rendering engine (canvas drawing)
+│   │   ├── particle/   # Element renderers (text, image, table, latex, ...)
+│   │   ├── control/    # Form control rendering
+│   │   ├── frame/      # Frame elements (margin, background, borders)
+│   │   ├── richtext/   # Decorations (underline, highlight)
+│   │   └── interactive/# Interactive features (search, graffiti)
+│   ├── command/        # Command pattern (executeBold, executeUndo, ...)
+│   ├── event/          # Canvas and global event handling
+│   ├── observer/       # Mouse, selection, image observers
+│   ├── worker/         # Web Workers for async operations
+│   └── plugin/         # Plugin system
+├── interface/          # TypeScript interfaces
+├── dataset/            # Enums and constants
+└── utils/              # Utility helpers
+```
 
-![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.35.png)
+## Contributing
 
-## Install
+Contributions are what make the open-source community such an amazing place. **Any contributions you make are greatly appreciated** — bug reports, feature requests, documentation improvements, or pull requests.
 
-`pnpm install`
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feat/amazing-feature`)
+3. Commit your changes following [Conventional Commits](https://www.conventionalcommits.org/) (`git commit -m 'feat: add amazing feature'`)
+4. Push to the branch (`git push origin feat/amazing-feature`)
+5. Open a Pull Request
+
+> Pre-commit hooks automatically run `lint` and `type:check`. Commit messages must follow Conventional Commits format (`feat:`, `fix:`, `docs:`, `refactor:`, ...).
+
+### Contributors
+
+Thanks to all the people who have contributed to Canvas Editor!
+
+<a href="https://github.com/Hufe921/canvas-editor/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Hufe921/canvas-editor" />
+</a>
 
-## Dev
+## Community & Support
 
-`npm run dev`
+- **Documentation** — [hufe.club/canvas-editor-docs](https://hufe.club/canvas-editor-docs)
+- **Discussions** — [GitHub Discussions](https://github.com/Hufe921/canvas-editor/discussions)
+- **Bug Reports** — [GitHub Issues](https://github.com/Hufe921/canvas-editor/issues)
+- **AI-Assisted Q&A** — [Zread](https://zread.ai/Hufe921/canvas-editor) · [DeepWiki](https://deepwiki.com/Hufe921/canvas-editor)
 
-## Build
+## Sponsors
 
-#### app
+If you find this project useful, please consider [sponsoring](https://hufe.club/donate.jpg) to support its continued development.
 
-`npm run build`
+## License
 
-#### lib
+This project is licensed under the [MIT License](./LICENSE).
 
-`npm run lib`
+Copyright © 2022–present, [Hufe921](https://github.com/Hufe921).