editor-svg 1.0.2 → 1.0.3

package/docs/guide/schema.md

@@ -1,237 +0,0 @@
-# 数据结构
-
-```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

@@ -1,22 +0,0 @@
-# 自定义快捷键
-
-## 使用方式
-
-```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

@@ -1,189 +0,0 @@
-# 内部快捷键
-
-## 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

@@ -1,97 +0,0 @@
-# 入门
-
-> 所见即所得的富文本编辑器。
-
-得益于光标及文字排版的完全自行实现。绘制底层也可由 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

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