@windoc/core 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +131 -0
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +19 -1
package/README.md
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# @windoc/core
|
|
2
|
+
|
|
3
|
+
Canvas-based document editor engine for the web. Renders documents using HTML5 Canvas with pixel-perfect pagination, headers, footers, watermarks, and print support.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @windoc/core
|
|
9
|
+
# or
|
|
10
|
+
npm install @windoc/core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import Editor from '@windoc/core'
|
|
17
|
+
import '@windoc/core/style.css'
|
|
18
|
+
|
|
19
|
+
const container = document.getElementById('editor')
|
|
20
|
+
|
|
21
|
+
const editor = new Editor(container, {
|
|
22
|
+
main: [
|
|
23
|
+
{ value: 'Hello, Windoc!' }
|
|
24
|
+
]
|
|
25
|
+
}, {
|
|
26
|
+
margins: [40, 40, 40, 40],
|
|
27
|
+
watermark: { data: '', size: 120 },
|
|
28
|
+
placeholder: { data: 'Start typing...' },
|
|
29
|
+
})
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
|
|
34
|
+
- **Canvas Rendering** — High-performance rendering via HTML5 Canvas
|
|
35
|
+
- **Pagination** — Automatic page breaking with configurable page sizes (A4, Letter, etc.)
|
|
36
|
+
- **Rich Text** — Bold, italic, underline, strikeout, color, highlight, fonts, font sizes
|
|
37
|
+
- **Tables** — Full table support with merge/split cells, borders, row/column operations
|
|
38
|
+
- **Images** — Inline images with resize, rotate, and alignment
|
|
39
|
+
- **Headers & Footers** — Per-page headers, footers, and page numbers
|
|
40
|
+
- **Watermarks** — Configurable text watermarks
|
|
41
|
+
- **Lists** — Ordered and unordered lists
|
|
42
|
+
- **Zones** — Document zones (header, body, footer) with visual tips
|
|
43
|
+
- **History** — Undo/redo with full state management
|
|
44
|
+
- **Keyboard Shortcuts** — Customizable shortcut registration
|
|
45
|
+
- **Context Menus** — Extensible right-click context menus
|
|
46
|
+
- **Print** — Native print support with accurate pagination
|
|
47
|
+
- **i18n** — Built-in internationalization (English, Chinese)
|
|
48
|
+
- **Plugins** — Plugin architecture for extensibility
|
|
49
|
+
- **Commands** — Comprehensive command API for programmatic control
|
|
50
|
+
|
|
51
|
+
## API
|
|
52
|
+
|
|
53
|
+
### Constructor
|
|
54
|
+
|
|
55
|
+
```typescript
|
|
56
|
+
new Editor(container: HTMLElement, data: EditorData, options?: EditorOptions)
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### EditorData
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
interface EditorData {
|
|
63
|
+
header?: IElement[] // Header elements
|
|
64
|
+
main: IElement[] // Body content elements
|
|
65
|
+
footer?: IElement[] // Footer elements
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Key Options
|
|
70
|
+
|
|
71
|
+
| Option | Type | Description |
|
|
72
|
+
|--------|------|-------------|
|
|
73
|
+
| `margins` | `number[]` | Page margins `[top, right, bottom, left]` |
|
|
74
|
+
| `watermark` | `object` | Watermark config `{ data, size, color, opacity }` |
|
|
75
|
+
| `header` | `object` | Header config `{ top, disabled }` |
|
|
76
|
+
| `footer` | `object` | Footer config `{ bottom, disabled, backgroundColor }` |
|
|
77
|
+
| `pageNumber` | `object` | Page number config `{ disabled, format, color, font, size }` |
|
|
78
|
+
| `placeholder` | `object` | Placeholder text `{ data }` |
|
|
79
|
+
| `zone` | `object` | Zone settings `{ tipDisabled }` |
|
|
80
|
+
| `maskMargin` | `number[]` | Mask margin around pages |
|
|
81
|
+
|
|
82
|
+
### Commands
|
|
83
|
+
|
|
84
|
+
Access via `editor.command`:
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
editor.command.executeSetValue(data) // Set document content
|
|
88
|
+
editor.command.getValue() // Get document data
|
|
89
|
+
editor.command.executePrint() // Print document
|
|
90
|
+
editor.command.executeUndo() // Undo
|
|
91
|
+
editor.command.executeRedo() // Redo
|
|
92
|
+
editor.command.executeBold() // Toggle bold
|
|
93
|
+
editor.command.executeItalic() // Toggle italic
|
|
94
|
+
editor.command.executeInsertTable(rows, cols) // Insert table
|
|
95
|
+
editor.command.getWordCount() // Get word count (async)
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Listeners
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
editor.listener.rangeStyleChange = (payload) => { /* selection style changed */ }
|
|
102
|
+
editor.listener.contentChange = () => { /* content changed */ }
|
|
103
|
+
editor.listener.pageSizeChange = (count) => { /* page count changed */ }
|
|
104
|
+
editor.listener.intersectionPageNoChange = (pageNo) => { /* visible page changed */ }
|
|
105
|
+
editor.listener.pageScaleChange = (scale) => { /* zoom level changed */ }
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Shortcuts
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
editor.register.shortcutList([
|
|
112
|
+
{ key: KeyMap.P, mod: true, isGlobal: true, callback: (cmd) => cmd.executePrint() },
|
|
113
|
+
])
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Context Menus
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
editor.register.contextMenuList([
|
|
120
|
+
{
|
|
121
|
+
name: 'My Action',
|
|
122
|
+
icon: 'custom-icon',
|
|
123
|
+
when: (payload) => !payload.isReadonly,
|
|
124
|
+
callback: (command) => { /* do something */ },
|
|
125
|
+
},
|
|
126
|
+
])
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## License
|
|
130
|
+
|
|
131
|
+
MIT
|
package/dist/index.js
CHANGED
|
@@ -467,9 +467,6 @@ function scrollIntoView(container, selected) {
|
|
|
467
467
|
}
|
|
468
468
|
}
|
|
469
469
|
|
|
470
|
-
// src/core/cursor/Cursor.ts
|
|
471
|
-
var import_process = require("process");
|
|
472
|
-
|
|
473
470
|
// src/dataset/constant/Editor.ts
|
|
474
471
|
var EDITOR_COMPONENT = "editor-component";
|
|
475
472
|
var EDITOR_PREFIX = "ce";
|
|
@@ -6415,6 +6412,7 @@ var CursorAgent = class {
|
|
|
6415
6412
|
};
|
|
6416
6413
|
|
|
6417
6414
|
// src/core/cursor/Cursor.ts
|
|
6415
|
+
var nextTick2 = (fn) => Promise.resolve().then(fn);
|
|
6418
6416
|
var Cursor = class {
|
|
6419
6417
|
constructor(draw, canvasEvent) {
|
|
6420
6418
|
this.ANIMATION_CLASS = `${EDITOR_PREFIX}-cursor--animation`;
|
|
@@ -6551,7 +6549,7 @@ var Cursor = class {
|
|
|
6551
6549
|
} else {
|
|
6552
6550
|
this._clearBlinkTimeout();
|
|
6553
6551
|
}
|
|
6554
|
-
(
|
|
6552
|
+
nextTick2(() => {
|
|
6555
6553
|
this.moveCursorToVisible({
|
|
6556
6554
|
cursorPosition,
|
|
6557
6555
|
direction: parseInt(oldTop) > cursorTop ? "top" /* UP */ : "down" /* DOWN */
|