init from https://github.com/Hufe921/canvas-editor

docs/guide/api-common.md

@@ -0,0 +1,49 @@
+# 通用 API
+
+## splitText
+
+功能：拆分字符
+
+用法：
+
+```javascript
+import { splitText } from '@hufe921/canvas-editor'
+
+splitText(text: string): string[]
+```
+
+## createDomFromElementList
+
+功能：根据 elementList 创建 dom 树
+
+用法：
+
+```javascript
+import { createDomFromElementList } from '@hufe921/canvas-editor'
+
+createDomFromElementList(elementList: IElement[], options?: IEditorOption): HTMLDivElement
+```
+
+## getElementListByHTML
+
+功能：根据 HTML 创建 elementList
+
+用法：
+
+```javascript
+import { getElementListByHTML } from '@hufe921/canvas-editor'
+
+getElementListByHTML(htmlText: string, options: IGetElementListByHTMLOption): IElement[]
+```
+
+## getTextFromElementList
+
+功能：根据 elementList 创建文本
+
+用法：
+
+```javascript
+import { getTextFromElementList } from '@hufe921/canvas-editor'
+
+getTextFromElementList(elementList: IElement[]): string
+```

docs/guide/api-instance.md

@@ -0,0 +1,24 @@
+# 实例 API
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.apiName()
+```
+
+## destroy
+
+功能：销毁编辑器
+
+用法：
+
+```javascript
+instance.destroy()
+```
+
+::: warning
+仅销毁编辑器 dom 及相关事件，菜单栏、工具栏、外部变量等需自行处理。
+:::

docs/guide/command-get.md

@@ -0,0 +1,331 @@
+# 获取数据命令
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+const value = instance.command.commandName()
+```
+
+## getValue
+
+功能：获取当前文档信息
+
+用法：
+
+```javascript
+const {
+  version: string
+  data: IEditorData
+  options: IEditorOption
+} = instance.command.getValue(options?: IGetValueOption)
+```
+
+## getValueAsync
+
+功能：获取当前文档信息（异步）
+
+用法：
+
+```javascript
+const {
+  version: string
+  data: IEditorData
+  options: IEditorOption
+} = await instance.command.getValueAsync(options?: IGetValueOption)
+```
+
+## getImage
+
+功能：获取当前页面图片 base64 字符串
+
+用法：
+
+```javascript
+const base64StringList = await instance.command.getImage(option?: IGetImageOption)
+```
+
+## getOptions
+
+功能：获取编辑器配置
+
+用法：
+
+```javascript
+const editorOption = await instance.command.getOptions()
+```
+
+## getWordCount
+
+功能：获取文档字数
+
+用法：
+
+```javascript
+const wordCount = await instance.command.getWordCount()
+```
+
+## getCursorPosition
+
+功能: 获取光标位置坐标
+
+用法:
+
+```javascript
+const range = instance.command.getCursorPosition()
+```
+
+## getRange
+
+功能：获取选区
+
+用法：
+
+```javascript
+const range = instance.command.getRange()
+```
+
+## getRangeText
+
+功能：获取选区文本
+
+用法：
+
+```javascript
+const rangeText = instance.command.getRangeText()
+```
+
+## getRangeContext
+
+功能：获取选区上下文
+
+用法：
+
+```javascript
+const rangeContext = instance.command.getRangeContext()
+```
+
+## getRangeRow
+
+功能：获取选区所在行元素列表
+
+用法：
+
+```javascript
+const rowElementList = instance.command.getRangeRow()
+```
+
+## getKeywordRangeList
+
+功能：获取关键词所在选区列表
+
+用法：
+
+```javascript
+const rangeList = instance.command.getKeywordRangeList()
+```
+
+## getKeywordContext
+
+功能：获取关键词所在上下文本信息
+
+用法：
+
+```javascript
+const keywordContextList = instance.command.getKeywordContext(payload: string)
+```
+
+## getRangeParagraph
+
+功能：获取选区所在段落元素列表
+
+用法：
+
+```javascript
+const paragraphElementList = instance.command.getRangeParagraph()
+```
+
+## getPaperMargin
+
+功能：获取页边距
+
+用法：
+
+```javascript
+const [top: number, right: number, bottom: number, left: number] =
+  instance.command.getPaperMargin()
+```
+
+## getSearchNavigateInfo
+
+功能：获取搜索导航信息
+
+用法：
+
+```javascript
+const {
+  index: number;
+  count: number;
+} = instance.command.getSearchNavigateInfo()
+```
+
+## getCatalog
+
+功能：获取目录
+
+用法：
+
+```javascript
+const catalog = await instance.command.getCatalog()
+```
+
+## getHTML
+
+功能：获取 HTML
+
+用法：
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getHTML()
+```
+
+## getText
+
+功能：获取文本
+
+用法：
+
+```javascript
+const {
+  header: string
+  main: string
+  footer: string
+} = await instance.command.getText()
+```
+
+## getLocale
+
+功能：获取当前语言
+
+用法：
+
+```javascript
+const locale = await instance.command.getLocale()
+```
+
+## getGroupIds
+
+功能：获取所有成组 id
+
+用法：
+
+```javascript
+const groupIds = await instance.command.getGroupIds()
+```
+
+## getControlValue
+
+功能：获取控件值
+
+用法：
+
+```javascript
+const {
+  value: string | null
+  innerText: string | null
+  zone: EditorZone
+  elementList?: IElement[]
+}[] = await instance.command.getControlValue(payload: IGetControlValueOption)
+```
+
+## getControlList
+
+功能：获取所有控件
+
+用法：
+
+```javascript
+const controlList = await instance.command.getControlList()
+```
+
+## getContainer
+
+功能：获取编辑器容器
+
+用法：
+
+```javascript
+const container = await instance.command.getContainer()
+```
+
+## getTitleValue
+
+功能：获取标题值
+
+用法：
+
+```javascript
+const {
+  value: string | null
+  elementList: IElement[]
+  zone: EditorZone
+}[] = await instance.command.getTitleValue(payload: IGetTitleValueOption)
+```
+
+## getPositionContextByEvent
+
+功能：获取位置上下文信息通过鼠标事件
+
+用法：
+
+```javascript
+const {
+  pageNo: number
+  element: IElement | null
+  rangeRect: RangeRect | null
+  tableInfo: ITableInfoByEvent | null
+}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent, options?: IPositionContextByEventOption)
+```
+
+示例：
+
+```javascript
+instance.eventBus.on(
+  'mousemove',
+  debounce(evt => {
+    const positionContext = instance.command.getPositionContextByEvent(evt)
+    console.log(positionContext)
+  }, 200)
+)``
+```
+
+## getElementById
+
+功能：根据 id 获取元素
+
+用法：
+
+```javascript
+const elementList = await instance.command.getElementById(payload: IGetElementByIdOption)
+```
+
+## getAreaValue
+
+功能: 获取区域数据
+用法：
+
+```js
+const {
+  id?: string
+  area: IArea
+  value: IElement[]
+  startPageNo: number
+  endPageNo: number
+} = instance.command.getAreaValue(options: IGetAreaValueOption)
+```

docs/guide/contextmenu-custom.md

@@ -0,0 +1,44 @@
+# 自定义右键菜单
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.register.contextMenuList([
+    {
+      key?: string;
+      isDivider?: boolean;
+      icon?: string;
+      name?: string; // 使用%s代表选区文本。示例：搜索：%s
+      shortCut?: string;
+      disable?: boolean;
+      when?: (payload: IContextMenuContext) => boolean;
+      callback?: (command: Command, context: IContextMenuContext) => any;
+      childMenus?: IRegisterContextMenu[];
+    }
+  ])
+```
+
+## getContextMenuList
+
+功能：获取注册的右键菜单列表
+
+用法：
+
+```javascript
+const contextMenuList = await instance.register.getContextMenuList()
+```
+
+备注：
+
+```javascript
+// 修改内部右键菜单示例
+contextmenuList.forEach(menu => {
+  // 通过菜单key找到菜单项后进行属性修改
+  if (menu.key === INTERNAL_CONTEXT_MENU_KEY.GLOBAL.PASTE) {
+    menu.when = () => false
+  }
+})
+```

docs/guide/contextmenu-internal.md

@@ -0,0 +1,61 @@
+# 内部右键菜单
+
+## 全局
+
+- 剪切
+- 复制
+- 粘贴
+- 全选
+- 打印
+
+## 超链接
+
+- 删除链接
+- 取消链接
+- 编辑链接
+
+## 图片
+
+- 更改图片
+- 另存为图片
+- 文字环绕
+  - 嵌入型
+  - 上下型环绕
+  - 四周型环绕
+  - 浮于文字上方
+  - 衬于文字下方
+
+## 表格
+
+- 表格边框
+  - 所有框线
+  - 无框线
+  - 虚框线
+  - 外侧框线
+  - 内侧框线
+  - 单元格边框
+    - 上边框
+    - 右边框
+    - 下边框
+    - 左边框
+    - 正斜线
+    - 反斜线
+- 垂直对齐
+  - 顶端对齐
+  - 垂直居中
+  - 底端对齐
+- 插入行列
+  - 上方插入 1 行
+  - 下方插入 1 行
+  - 左侧插入 1 列
+  - 右侧插入 1 列
+- 删除行列
+  - 删除 1 行
+  - 删除 1 列
+  - 删除整个表格
+- 合并单元格
+- 取消合并
+
+## 控件
+
+- 删除控件

docs/guide/eventbus.md

@@ -0,0 +1,234 @@
+# 事件监听(eventBus)
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+// 注册
+instance.eventBus.on<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+
+// 移除
+instance.eventBus.off<K keyof EventMap>(
+  eventName: K,
+  callback: EventMap[K]
+)
+```
+
+## rangeStyleChange
+
+功能：选区样式发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('rangeStyleChange', (payload: IRangeStyle) => void)
+```
+
+## visiblePageNoListChange
+
+功能：可见页发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('visiblePageNoListChange', (payload: number[]) => void)
+```
+
+## intersectionPageNoChange
+
+功能：当前页发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('intersectionPageNoChange', (payload: number) => void)
+```
+
+## pageSizeChange
+
+功能：当前页数发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('pageSizeChange', (payload: number) => void)
+```
+
+## pageScaleChange
+
+功能：当前页面缩放比例发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('pageScaleChange', (payload: number) => void)
+```
+
+## contentChange
+
+功能：当前内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('contentChange', () => void)
+```
+
+## controlChange
+
+功能：当前光标所在控件发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('controlChange', (payload: IControlChangeResult) => void)
+```
+
+## controlContentChange
+
+功能：控件内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('controlContentChange', (payload: IControlContentChangeResult) => void)
+```
+
+## pageModeChange
+
+功能：页面模式发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('pageModeChange', (payload: PageMode) => void)
+```
+
+## saved
+
+功能：文档执行保存
+
+用法：
+
+```javascript
+instance.eventBus.on('saved', (payload: IEditorResult) => void)
+```
+
+## zoneChange
+
+功能：区域发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('zoneChange', (payload: EditorZone) => void)
+```
+
+## mousemove
+
+功能：编辑器 mousemove 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mousemove', (evt: MouseEvent) => void)
+```
+
+## mouseenter
+
+功能：编辑器 mouseenter 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseenter', (evt: MouseEvent) => void)
+```
+
+## mouseleave
+
+功能：编辑器 mouseleave 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseleave', (evt: MouseEvent) => void)
+```
+
+## mousedown
+
+功能：编辑器 mousedown 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mousedown', (evt: MouseEvent) => void)
+```
+
+## mouseup
+
+功能：编辑器 mouseup 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseup', (evt: MouseEvent) => void)
+```
+
+## click
+
+功能：编辑器 click 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('click', (evt: MouseEvent) => void)
+```
+
+## input
+
+功能：编辑器 input 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('input', (evt: Event) => void)
+```
+
+## positionContextChange
+
+功能：上下文内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('positionContextChange', (payload: IPositionContextChangePayload) => void)
+```
+
+## imageSizeChange
+
+功能：图片尺寸发生改变事件
+
+用法：
+
+```javascript
+instance.eventBus.on('imageSizeChange', (payload: { element: IElement }) => void)
+```
+
+## imageMousedown
+
+功能：图片 mousedown 事件
+
+用法：
+
+```javascript
+instance.eventBus.on('imageMousedown', (payload: {
+  evt: MouseEvent
+  element: IElement
+}) => void)
+```

docs/guide/i18n.md

@@ -0,0 +1,111 @@
+# 国际化
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+// 注册
+instance.register.langMap(locale: string, lang: ILang)
+
+// 设置
+instance.command.executeSetLocale(locale)
+```
+
+## ILang
+
+```typescript
+interface ILang {
+  contextmenu: {
+    global: {
+      cut: string
+      copy: string
+      paste: string
+      selectAll: string
+      print: string
+    }
+    control: {
+      delete: string
+    }
+    hyperlink: {
+      delete: string
+      cancel: string
+      edit: string
+    }
+    image: {
+      change: string
+      saveAs: string
+      textWrap: string
+      textWrapType: {
+        embed: string
+        upDown: string
+        surround: string
+        floatTop: string
+        floatBottom: string
+    }
+    table: {
+      insertRowCol: string
+      insertTopRow: string
+      insertBottomRow: string
+      insertLeftCol: string
+      insertRightCol: string
+      deleteRowCol: string
+      deleteRow: string
+      deleteCol: string
+      deleteTable: string
+      mergeCell: string
+      mergeCancelCell: string
+      verticalAlign: string
+      verticalAlignTop: string
+      verticalAlignMiddle: string
+      verticalAlignBottom: string
+      border: string
+      borderAll: string
+      borderEmpty: string
+      borderDash: string
+      borderExternal: string
+      borderInternal: string
+      borderTd: string
+      borderTdTop: string
+      borderTdRight: string
+      borderTdBottom: string
+      borderTdLeft: string
+      borderTdForward: string
+      borderTdBack: string
+    }
+  }
+  datePicker: {
+    now: string
+    confirm: string
+    return: string
+    timeSelect: string
+    weeks: {
+      sun: string
+      mon: string
+      tue: string
+      wed: string
+      thu: string
+      fri: string
+      sat: string
+    }
+    year: string
+    month: string
+    hour: string
+    minute: string
+    second: string
+  }
+  frame: {
+    header: string
+    footer: string
+  }
+  pageBreak: {
+    displayName: string
+  }
+  zone: {
+    headerTip: string
+    footerTip: string
+  }
+}
+```

docs/guide/listener.md

@@ -0,0 +1,126 @@
+# 事件监听(listener)
+
+::: warning
+listener 只能响应一个方法，后续不再添加新监听方法，推荐使用 eventBus 进行事件监听。
+:::
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.listener.eventName = ()=>{}
+```
+
+## rangeStyleChange
+
+功能：选区样式发生改变
+
+用法：
+
+```javascript
+instance.listener.rangeStyleChange = (payload: IRangeStyle) => {}
+```
+
+## visiblePageNoListChange
+
+功能：可见页发生改变
+
+用法：
+
+```javascript
+instance.listener.visiblePageNoListChange = (payload: number[]) => {}
+```
+
+## intersectionPageNoChange
+
+功能：当前页发生改变
+
+用法：
+
+```javascript
+instance.listener.intersectionPageNoChange = (payload: number) => {}
+```
+
+## pageSizeChange
+
+功能：当前页数发生改变
+
+用法：
+
+```javascript
+instance.listener.pageSizeChange = (payload: number) => {}
+```
+
+## pageScaleChange
+
+功能：当前页面缩放比例发生改变
+
+用法：
+
+```javascript
+instance.listener.pageScaleChange = (payload: number) => {}
+```
+
+## contentChange
+
+功能：当前内容发生改变
+
+用法：
+
+```javascript
+instance.listener.contentChange = () => {}
+```
+
+## controlChange
+
+功能：当前光标所在控件发生改变
+
+用法：
+
+```javascript
+instance.listener.controlChange = (payload: IControlChangeResult) => {}
+```
+
+## controlContentChange
+
+功能：控件内容发生改变
+
+用法：
+
+```javascript
+instance.listener.controlContentChange = (
+  payload: IControlContentChangeResult
+) => {}
+```
+
+## pageModeChange
+
+功能：页面模式发生改变
+
+用法：
+
+```javascript
+instance.listener.pageModeChange = (payload: PageMode) => {}
+```
+
+## saved
+
+功能：文档执行保存
+
+用法：
+
+```javascript
+instance.listener.saved = (payload: IEditorResult) => {}
+```
+
+## zoneChange
+
+功能：区域发生改变
+
+用法：
+
+```javascript
+instance.listener.zoneChange = (payload: EditorZone) => {}
+```

docs/guide/option.md

@@ -0,0 +1,189 @@
+# 配置
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+new Editor(container, IEditorData | IElement[], {
+  // 配置项
+})
+```
+
+## 完整配置
+
+```typescript
+interface IEditorOption {
+  mode?: EditorMode // 编辑器模式：编辑、清洁（不显示视觉辅助元素。如：分页符）、只读、表单（仅控件内可编辑）、打印（不显示辅助元素、未书写控件及前后括号）、设计模式（不可删除、只读等配置不控制）。默认：编辑
+  locale?: string // 多语言类型。默认：zhCN
+  defaultType?: string // 默认元素类型。默认：TEXT
+  defaultColor?: string // 默认字体颜色。默认：#000000
+  defaultFont?: string // 默认字体。默认：Microsoft YaHei
+  defaultSize?: number // 默认字号。默认：16
+  minSize?: number // 最小字号。默认：5
+  maxSize?: number // 最大字号。默认：72
+  defaultBasicRowMarginHeight?: number // 默认行高。默认：8
+  defaultRowMargin?: number // 默认行间距。默认：1
+  defaultTabWidth?: number // 默认tab宽度。默认：32
+  width?: number // 纸张宽度。默认：794
+  height?: number // 纸张高度。默认：1123
+  scale?: number // 缩放比例。默认：1
+  pageGap?: number // 纸张间隔。默认：20
+  underlineColor?: string // 下划线颜色。默认：#000000
+  strikeoutColor?: string // 删除线颜色。默认：#FF0000
+  rangeColor?: string // 选区颜色。默认：#AECBFA
+  rangeAlpha?: number // 选区透明度。默认：0.6
+  rangeMinWidth?: number // 选区最小宽度。默认：5
+  searchMatchColor?: string // 搜索高亮颜色。默认：#FFFF00
+  searchNavigateMatchColor?: string // 搜索导航高亮颜色。默认：#AAD280
+  searchMatchAlpha?: number // 搜索高亮透明度。默认：0.6
+  highlightAlpha?: number // 高亮元素透明度。默认：0.6
+  highlightMarginHeight?: number // 高亮元素边距高度。默认：8
+  resizerColor?: string // 图片尺寸器颜色。默认：#4182D9
+  resizerSize?: number // 图片尺寸器大小。默认：5
+  marginIndicatorSize?: number // 页边距指示器长度。默认：35
+  marginIndicatorColor?: string // 页边距指示器颜色。默认：#BABABA
+  margins?: IMargin // 页面边距。默认：[100, 120, 100, 120]
+  pageMode?: PageMode // 纸张模式：连页、分页。默认：分页
+  renderMode?: RenderMode // 渲染模式：极速（多个字组合渲染）、兼容（逐字渲染：避免浏览器字体等环境差异）。默认：极速
+  defaultHyperlinkColor?: string // 默认超链接颜色。默认：#0000FF
+  table?: ITableOption // 表格配置。{tdPadding?:IPadding; defaultTrMinHeight?:number; defaultColMinWidth?:number}
+  header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;}
+  footer?: IFooter // 页脚信息。{bottom?:number; maxHeightRadio?:MaxHeightRatio;}
+  pageNumber?: IPageNumber // 页码信息。{bottom:number; size:number; font:string; color:string; rowFlex:RowFlex; format:string; numberType:NumberType;}
+  paperDirection?: PaperDirection // 纸张方向：纵向、横向
+  inactiveAlpha?: number // 正文内容失焦时透明度。默认值：0.6
+  historyMaxRecordCount?: number // 历史（撤销重做）最大记录次数。默认：100次
+  printPixelRatio?: number // 打印像素比率（值越大越清晰，但尺寸越大）。默认：3
+  maskMargin?: IMargin // 编辑器上的遮盖边距（如悬浮到编辑器上的菜单栏、底部工具栏）。默认：[0, 0, 0, 0]
+  letterClass?: string[] // 排版支持的字母类。默认：a-zA-Z。内置可选择的字母表类：LETTER_CLASS
+  contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认：[]
+  shortcutDisableKeys?: string[] // 禁用的快捷键。默认：[]
+  scrollContainerSelector?: string // 滚动区域选择器。默认：document
+  pageOuterSelectionDisable?: boolean // 鼠标移出页面时选区禁用。默认：false
+  wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD
+  watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string; numberType:NumberType;}
+  control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string; disabledBackgroundColor?: string; existValueBackgroundColor?: string; noValueBackgroundColor?: string;}
+  checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
+  radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
+  cursor?: ICursorOption // 光标样式。{width?: number; color?: string; dragWidth?: number; dragColor?: string; dragFloatImageDisabled?: boolean;}
+  title?: ITitleOption // 标题配置。{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
+  placeholder?: IPlaceholder // 编辑器空白占位文本
+  group?: IGroup // 成组配置。{opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean; deletable?:boolean;}
+  pageBreak?: IPageBreak // 分页符配置。{font?:string; fontSize?:number; lineDash?:number[];}
+  zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
+  background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat; applyPageNumbers?:number[]}。默认：{color: '#FFFFFF'}
+  lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
+  separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
+  lineNumber?: ILineNumberOption // 行号配置。{size?:number; font?:string; color?:string; disabled?:boolean; right?:number}
+  pageBorder?: IPageBorderOption // 页面边框配置。{color?:string; lineWidth:number; padding?:IPadding; disabled?:boolean;}
+  badge?: IBadgeOption // 徽章配置。{top?:number; left?:number}
+  modeRule?: IModeRule // 编辑器模式规则配置。{print:{imagePreviewerDisabled?: boolean}; readonly:{imagePreviewerDisabled?: boolean}; form:{controlDeletableDisabled?: boolean}}
+}
+```
+
+## 表格配置
+
+```typescript
+interface ITableOption {
+  tdPadding?: IPadding // 单元格内边距。默认：[0, 5, 5, 5]
+  defaultTrMinHeight?: number // 默认表格行最小高度。默认：42
+  defaultColMinWidth?: number // 默认表格列最小宽度（整体宽度足够时应用，否则会按比例缩小）。默认：40
+}
+```
+
+## 页眉配置
+
+```typescript
+interface IHeader {
+  top?: number // 距离页面顶部大小。默认：30
+  inactiveAlpha?: number // 失活时透明度。默认：1
+  maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF
+  disabled?: boolean // 是否禁用
+  editable?: boolean // 禁止编辑标题内容
+}
+```
+
+## 页脚配置
+
+```typescript
+interface IFooter {
+  bottom?: number // 距离页面底部大小。默认：30
+  inactiveAlpha?: number // 失活时透明度。默认：1
+  maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认：HALF
+  disabled?: boolean // 是否禁用
+  editable?: boolean // 禁止编辑页脚内容
+}
+```
+
+## 页码配置
+
+```typescript
+interface IPageNumber {
+  bottom?: number // 距离页面底部大小。默认：60
+  size?: number // 字体大小。默认：12
+  font?: string // 字体。默认：Microsoft YaHei
+  color?: string // 字体颜色。默认：#000000
+  rowFlex?: RowFlex // 行对齐方式。默认：CENTER
+  format?: string // 页码格式。默认：{pageNo}。示例：第{pageNo}页/共{pageCount}页
+  numberType?: NumberType // 数字类型。默认：ARABIC
+  disabled?: boolean // 是否禁用
+  startPageNo?: number // 起始页码。默认：1
+  fromPageNo?: number // 从第几页开始出现页码。默认：0
+  maxPageNo?: number | null // 最大页码（从0开始）。默认：null
+}
+```
+
+## 水印配置
+
+```typescript
+interface IWatermark {
+  data: string // 文本。
+  type?: WatermarkType
+  width?: number
+  height?: number
+  color?: string // 颜色。默认：#AEB5C0
+  opacity?: number // 透明度。默认：0.3
+  size?: number // 字体大小。默认：200
+  font?: string // 字体。默认：Microsoft YaHei
+  repeat?: boolean // 重复水印。默认：false
+  gap?: [horizontal: number, vertical: number] // 水印间距。默认：[10,10]
+  numberType: NumberType.ARABIC // 页码格式。默认：{pageNo}。示例：第{pageNo}页/共{pageCount}页
+}
+```
+
+## 占位文本配置
+
+```typescript
+interface IPlaceholder {
+  data: string // 文本。
+  color?: string // 颜色。默认：#DCDFE6
+  opacity?: number // 透明度。默认：1
+  size?: number // 字体大小。默认：16
+  font?: string // 字体。默认：Microsoft YaHei
+}
+```
+
+## 行号配置
+
+```typescript
+interface ILineNumberOption {
+  size?: number // 字体大小。默认：12
+  font?: string // 字体。默认：Microsoft YaHei
+  color?: string // 颜色。默认：#000000
+  disabled?: boolean // 是否禁用。默认：true
+  right?: number // 距离正文距离。默认：20
+  type?: LineNumberType // 编号类型（每页重新编号、连续编号）。默认：连续编号
+}
+```
+
+## 页面边框配置
+
+```typescript
+interface IPageBorderOption {
+  color?: string // 颜色。默认：#000000
+  lineWidth?: number // 宽度。默认：1
+  padding?: IPadding // 距离正文内边距。默认：[0, 5, 0, 5]
+  disabled?: boolean // 是否禁用。默认：true
+}
+```

docs/guide/override.md

@@ -0,0 +1,47 @@
+# 重写方法
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+
+instance.override.overrideFunction = () => unknown | IOverrideResult
+```
+
+```typescript
+interface IOverrideResult {
+  preventDefault?: boolean // 阻止执行内部默认方法。默认阻止
+}
+```
+
+## paste
+
+功能：重写粘贴方法
+
+用法：
+
+```javascript
+instance.override.paste = (evt?: ClipboardEvent) => unknown | IOverrideResult
+```
+
+## copy
+
+功能：重写复制方法
+
+用法：
+
+```javascript
+instance.override.copy = () => unknown | IOverrideResult
+```
+
+## drop
+
+功能：重写拖放方法
+
+用法：
+
+```javascript
+instance.override.drop = (evt: DragEvent) => unknown | IOverrideResult
+```

docs/guide/plugin-custom.md

@@ -0,0 +1,25 @@
+# 自定义插件
+
+::: tip
+官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin
+:::
+
+## 开发插件
+
+```javascript
+export function myPlugin(editor: Editor, options?: Option) {
+  // 1. 修改方法，详见：src/plugins/copy
+  editor.command.updateFunction = () => {}
+
+  // 2. 增加方法，详见：src/plugins/markdown
+  editor.command.addFunction = () => {}
+
+  // 3. 事件监听、快捷键、右键菜单、重写方法等组合处理
+}
+```
+
+## 使用插件
+
+```javascript
+instance.use(myPlugin, options?: Option)
+```

docs/guide/plugin-internal.md

@@ -0,0 +1,125 @@
+# 官方插件
+
+::: tip
+官方维护插件仓库：https://github.com/Hufe921/canvas-editor-plugin
+
+官方维护插件演示地址：https://hufe.club/canvas-editor-plugin
+:::
+
+## 条形码
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
+
+const instance = new Editor()
+instance.use(barcode1DPlugin)
+
+instance.executeInsertBarcode1D(
+  content: string,
+  width: number,
+  height: number,
+  options?: JsBarcode.Options
+)
+```
+
+## 二维码
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
+
+const instance = new Editor()
+instance.use(barcode2DPlugin, options?: IBarcode2DOption)
+
+instance.executeInsertBarcode2D(
+  content: string,
+  width: number,
+  height: number,
+  hints?: Map<EncodeHintType, any>
+)
+```
+
+## 代码块
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
+
+const instance = new Editor()
+instance.use(codeblockPlugin)
+
+instance.executeInsertCodeblock(content: string)
+```
+
+## Word
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
+
+const instance = new Editor()
+instance.use(docxPlugin)
+
+command.executeImportDocx({
+  arrayBuffer: buffer
+})
+
+instance.executeExportDocx({
+  fileName: string
+})
+```
+
+## Excel
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import excelPlugin from '@hufe921/canvas-editor-plugin-excel'
+
+const instance = new Editor()
+instance.use(excelPlugin)
+
+command.executeImportExcel({
+  arrayBuffer: buffer
+})
+```
+
+## 悬浮工具
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
+
+const instance = new Editor()
+instance.use(floatingToolbarPlugin)
+```
+
+## 流程图
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import diagramPlugin from '@hufe921/canvas-editor-plugin-diagram'
+
+const instance = new Editor()
+instance.use(diagramPlugin)
+
+command.executeLoadDiagram({
+  lang?: Lang
+  data?: string
+  onDestroy?: (message?: any) => void
+})
+```
+
+## 大小写转换
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+import casePlugin from '@hufe921/canvas-editor-plugin-case'
+
+const instance = new Editor()
+instance.use(casePlugin)
+
+command.executeUpperCase()
+
+command.executeLowerCase()
+```

docs/guide/schema.md

@@ -0,0 +1,209 @@
+# 数据结构
+
+```typescript
+interface IElement {
+  // 基础
+  id?: string;
+  type?: {
+    TEXT = 'text',
+    IMAGE = 'image',
+    TABLE = 'table',
+    HYPERLINK = 'hyperlink',
+    SUPERSCRIPT = 'superscript',
+    SUBSCRIPT = 'subscript',
+    SEPARATOR = 'separator',
+    PAGE_BREAK = 'pageBreak',
+    CONTROL = 'control',
+    CHECKBOX = 'checkbox',
+    RADIO = 'radio',
+    LATEX = 'latex',
+    TAB = 'tab',
+    DATE = 'date',
+    BLOCK = 'block'
+  };
+  value: string;
+  valueList?: IElement[]; // 复合元素（超链接、标题、列表等）使用
+  extension?: unknown;
+  externalId?: string;
+  hide?: boolean;
+  // 样式
+  font?: string;
+  size?: number;
+  width?: number;
+  height?: number;
+  bold?: boolean;
+  color?: string;
+  highlight?: string;
+  italic?: boolean;
+  underline?: boolean;
+  strikeout?: boolean;
+  rowFlex?: {
+    LEFT = 'left',
+    CENTER = 'center',
+    RIGHT = 'right',
+    ALIGNMENT = 'alignment',
+    JUSTIFY = 'justify'
+  };
+  rowMargin?: number;
+  letterSpacing?: number;
+  textDecoration?: {
+    style?: TextDecorationStyle;
+  };
+  // 组信息-可用于批注等其他成组使用场景
+  groupIds?: string[];
+  // 表格
+  conceptId?: string;
+  colgroup?: {
+    width: number;
+  }[];
+  trList?: {
+    height: number;
+    pagingRepeat?: boolean;
+    extension?: unknown;
+    externalId?: string;
+    tdList: {
+      colspan: number;
+      rowspan: number;
+      conceptId?: string;
+      verticalAlign?: VerticalAlign;
+      backgroundColor?: string;
+      borderTypes?: TdBorder[];
+      slashTypes?: TdSlash[];
+      value: IElement[];
+      extension?: unknown;
+      externalId?: string;
+      disabled?: boolean;
+      deletable?: boolean;
+    }[];
+  }[];
+  borderType?: TableBorder;
+  borderColor?: string;
+  borderWidth?: number;
+  borderExternalWidth?: number;
+  tableToolDisabled?: boolean;
+  // 超链接
+  url?: string;
+  // 上下标
+  actualSize?: number;
+  // 分割线
+  dashArray?: number[];
+  // 控件
+  control?: {
+    type: {
+      TEXT = 'text',
+      SELECT = 'select',
+      CHECKBOX = 'checkbox',
+      RADIO = 'radio'
+      DATE = 'date',
+      NUMBER = 'number'
+    };
+    value: IElement[] | null;
+    placeholder?: string;
+    groupId?: string;
+    conceptId?: string;
+    prefix?: string;
+    postfix?: string;
+    preText?: string;
+    postText?: string;
+    minWidth?: number;
+    underline?: boolean;
+    border?: boolean;
+    extension?: unknown;
+    indentation?: ControlIndentation;
+    rowFlex?: RowFlex
+    deletable?: boolean;
+    disabled?: boolean;
+    pasteDisabled?: boolean;
+    hide?: boolean;
+    code: string | null;
+    min?: number;
+    max?: number;
+    flexDirection: FlexDirection;
+    valueSets: {
+      value: string;
+      code: string;
+    }[];
+    isMultiSelect?: boolean;
+    multiSelectDelimiter?: string;
+    dateFormat?: string;
+    font?: string;
+    size?: number;
+    bold?: boolean;
+    color?: string;
+    highlight?: string;
+    italic?: boolean;
+    strikeout?: boolean;
+    selectExclusiveOptions?: {
+      inputAble?: boolean;
+    }
+  };
+  controlComponent?: {
+    PREFIX = 'prefix',
+    POSTFIX = 'postfix',
+    PLACEHOLDER = 'placeholder',
+    VALUE = 'value',
+    CHECKBOX = 'checkbox',
+    RADIO = 'radio'
+  };
+  // 复选框
+  checkbox?: {
+    value: boolean | null;
+  };
+  // 单选框
+  radio?: {
+    value: boolean | null;
+  };
+  // LaTeX
+  laTexSVG?: string;
+  // 日期
+  dateFormat?: string;
+  // 图片
+  imgDisplay?: {
+    INLINE = 'inline',
+    BLOCK = 'block'
+  }
+  imgFloatPosition?: {
+    x: number;
+    y: number;
+    pageNo?: number;
+  }
+  imgToolDisabled?: boolean;
+  // 内容块
+  block?: {
+    type: {
+      IFRAME = 'iframe',
+      VIDEO = 'video'
+    };
+    iframeBlock?: {
+      src?: string;
+      srcdoc?: string;
+    };
+    videoBlock?: {
+      src: string;
+    };
+  };
+  // 标题
+  level?: TitleLevel;
+  title?: {
+    conceptId?: string;
+    deletable?: boolean;
+    disabled?: boolean;
+  };
+  // 列表
+  listType?: ListType;
+  listStyle?: ListStyle;
+  listWrap?: boolean;
+  // 区域
+  areaId?: string;
+  area?: {
+    extension?: unknown;
+    top?: number;
+    hide?: boolean;
+    borderColor?: string;
+    backgroundColor?: string;
+    mode?: AreaMode;
+    deletable?: boolean;
+    placeholder?: IPlaceholder;
+  };
+}
+```

docs/guide/shortcut-custom.md

@@ -0,0 +1,22 @@
+# 自定义快捷键
+
+## 使用方式
+
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+const instance = new Editor(container, <IElement[]>data, options)
+instance.register.shortcutList([
+    {
+      key: KeyMap;
+      ctrl?: boolean;
+      meta?: boolean;
+      mod?: boolean; // windows:ctrl || mac:command
+      shift?: boolean;
+      alt?: boolean;
+      isGlobal?: boolean;
+      callback?: (command: Command) => any;
+      disable?: boolean;
+    }
+  ])
+```

docs/guide/shortcut-internal.md

@@ -0,0 +1,189 @@
+# 内部快捷键
+
+## Backspace
+
+功能：向前删除
+
+## Delete
+
+功能：向后删除
+
+## Enter
+
+功能：换行
+
+## Shift + Enter
+
+功能：列表内换行
+
+## ←
+
+功能：向左移动
+
+## Shift + ←
+
+功能：向左缩放选区
+
+## Ctrl/Cmd + ←
+
+功能：向左移动（跳单词）
+
+## Ctrl/Cmd + Shift + ←
+
+功能：向左缩放选区（跳单词）
+
+## →
+
+功能：向右移动
+
+## Shift + →
+
+功能：向右缩放选区
+
+## Ctrl/Cmd + →
+
+功能：向右移动（跳单词）
+
+## Ctrl/Cmd + Shift + →
+
+功能：向右缩放选区（跳单词）
+
+## ↑
+
+功能：向上移动
+
+## Shift + ↑
+
+功能：向上缩放选区
+
+## ↓
+
+功能：向下移动
+
+## Shift + ↓
+
+功能：向下缩放选区
+
+## Esc
+
+功能：退出格式刷
+
+## Tab
+
+功能：增加缩进/移动到下一个控件
+
+## Shift + Tab
+
+功能：移动到上一个控件
+
+## Ctrl/Cmd + Z
+
+功能：撤销
+
+## Ctrl/Cmd + Y
+
+功能：重做
+
+## Ctrl/Cmd + C
+
+功能：复制
+
+## Ctrl/Cmd + X
+
+功能：剪切
+
+## Ctrl/Cmd + A
+
+功能：全选
+
+## Ctrl/Cmd + S
+
+功能：保存
+
+## Ctrl/Cmd + {
+
+功能：增大字体
+
+## Ctrl/Cmd + }
+
+功能：减小字体
+
+## Ctrl/Cmd + B
+
+功能：加粗
+
+## Ctrl/Cmd + I
+
+功能：斜体
+
+## Ctrl/Cmd + U
+
+功能：下划线
+
+## Ctrl/Cmd + L
+
+功能：行居左
+
+## Ctrl/Cmd + E
+
+功能：行居中
+
+## Ctrl/Cmd + R
+
+功能：行居右
+
+## Ctrl/Cmd + J
+
+功能：两端对齐
+
+## Ctrl/Cmd + Shift + J
+
+功能：分散对齐
+
+## Ctrl + Shift + X
+
+功能：删除线
+
+## Ctrl/Cmd + Shift + >
+
+功能：上标
+
+## Ctrl/Cmd + Shift + <
+
+功能：下标
+
+## Ctrl + Alt/Option + 0
+
+功能：正文
+
+## Ctrl + Alt/Option + 1
+
+功能：标题一
+
+## Ctrl + Alt/Option + 2
+
+功能：标题二
+
+## Ctrl + Alt/Option + 3
+
+功能：标题三
+
+## Ctrl + Alt/Option + 4
+
+功能：标题四
+
+## Ctrl + Alt/Option + 5
+
+功能：标题五
+
+## Ctrl + Alt/Option + 6
+
+功能：标题六
+
+## Ctrl/Cmd + Shift + I
+
+功能：无序列表
+
+## Ctrl/Cmd + Shift + U
+
+功能：有序列表

docs/guide/start.md

@@ -0,0 +1,97 @@
+# 入门
+
+> 所见即所得的富文本编辑器。
+
+得益于光标及文字排版的完全自行实现。绘制底层也可由 svg 渲染，详见代码：[feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)；或借助 pdfjs 可以完成 pdf 的绘制，详见代码：[feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)。
+
+::: warning
+官方仅提供编辑器核心层 npm 包，菜单栏或其他外部工具可自行参考文档扩展，或直接参考[官方](https://github.com/Hufe921/canvas-editor)实现，详见[demo](https://hufe.club/canvas-editor/)。
+:::
+
+## 功能点
+
+- 富文本操作（撤销、重做、字体、字号、加粗、斜体、下划线、删除线、上下标、对齐方式、标题、列表.....）
+- 插入元素（表格、图片、链接、代码块、分页符、Math 公式、日期选择器、内容块......）
+- 打印（基于 canvas 转图片、pdf 绘制）
+- 控件（单选、文本、日期、单选框组、复选框组）
+- 右键菜单（内部、自定义）
+- 快捷键（内部、自定义）
+- 拖拽（文字、元素、控件）
+- 页眉、页脚、页码
+- 页边距
+- 分页
+- 水印
+- 批注
+- 目录
+- [插件](https://github.com/Hufe921/canvas-editor-plugin)
+
+## 待开发
+
+- 计算性能
+- 控件规则
+- 表格分页
+- vue、react 等框架开箱即用版
+
+## Step. 1: 下载 npm 包
+
+```sh
+npm i @hufe921/canvas-editor --save
+```
+
+## Step. 2: 准备一个容器
+
+```html
+<div class="canvas-editor"></div>
+```
+
+## Step. 3: 实例化编辑器
+
+- 仅包含正文内容
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(
+  document.querySelector('.canvas-editor'),
+  [
+    {
+      value: 'Hello World'
+    }
+  ],
+  {}
+)
+```
+
+- 包含正文、页眉、页脚内容
+
+```javascript
+import Editor from '@hufe921/canvas-editor'
+
+new Editor(
+  document.querySelector('.canvas-editor'),
+  {
+    header: [
+      {
+        value: 'Header',
+        rowFlex: RowFlex.CENTER
+      }
+    ],
+    main: [
+      {
+        value: 'Hello World'
+      }
+    ],
+    footer: [
+      {
+        value: 'canvas-editor',
+        size: 12
+      }
+    ]
+  },
+  {}
+)
+```
+
+## Step. 4: 配置编辑器
+
+详见下一节