editor-svg 1.0.0

package/docs/guide/schema.md

@@ -0,0 +1,237 @@
+# 数据结构
+
+```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[]; // 分割线的虚线样式数组
+  lineWidth?: 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;
+    },
+    numberExclusiveOptions?: {
+      calculatorDisabled?: 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;
+  }
+  imgCrop?: {
+    x: number;      // 裁剪起始X坐标（相对于原图）
+    y: number;      // 裁剪起始Y坐标（相对于原图）
+    width: number;  // 裁剪宽度
+    height: number; // 裁剪高度
+  }
+  imgCaption?: {
+    value: string;  // 题注内容，支持{imageNo}占位符
+    color?: string; // 题注字体颜色
+    font?: string;  // 题注字体
+    size?: number;  // 题注字号
+    top?: number;   // 题注与图片的间距
+  }
+  imgToolDisabled?: boolean;
+  imgPreviewDisabled?: boolean;
+  // 内容块
+  block?: {
+    type: {
+      IFRAME = 'iframe',
+      VIDEO = 'video'
+    };
+    iframeBlock?: {
+      src?: string;
+      srcdoc?: string;
+      sandbox?: string[];
+      allow?: 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;
+  };
+  // 标签
+  labelId?: string;
+  label?: {
+    color?: string;
+    backgroundColor?: string;
+    borderRadius?: number;
+    padding?: IPadding;
+  };
+}
+```

package/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;
+    }
+  ])
+```

package/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
+
+功能：有序列表

package/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: 配置编辑器
+
+详见下一节

package/docs/index.md

@@ -0,0 +1,43 @@
+---
+layout: home
+
+title: canvas-editor
+titleTemplate: rich text editor by canvas/svg
+
+hero:
+  name: canvas-editor
+  text: 基于canvas/svg的富文本编辑器
+  actions:
+    - theme: brand
+      text: 开始
+      link: /guide/start.html
+    - theme: alt
+      text: 在 GitHub 上查看
+      link: https://github.com/Hufe921/canvas-editor
+
+features:
+  - icon: 💡
+    title: 所见即所得
+    details: 类word可分页，所见即所得
+  - icon: ⚡️
+    title: 轻量的数据结构
+    details: 一段JSON即可呈现复杂样式
+  - icon: 🛠️
+    title: 丰富的功能
+    details: 支持常见富文本操作、表格、水印、控件、公式等
+  - icon: 📦
+    title: 使用方便
+    details: 官方发布核心npm包，菜单栏、工具栏可自行维护
+  - icon: 🔩
+    title: 灵活的开发机制
+    details: 通过接口可获取生命周期、事件回调、自定义右键菜单、快捷键等
+  - icon: 🔑
+    title: 完全类型化的API
+    details: 灵活的 API 和完整的 TypeScript 类型
+---
+
+<style>
+  .main>p {
+    max-width:100% !important;
+  }
+</style>