editor-svg 1.0.2 → 1.0.3

package/docs/en/guide/schema.md

@@ -1,237 +0,0 @@
-# Data Structure
-
-```typescript
-interface IElement {
-  // basic
-  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[]; // Use of composite elements (hyperlinks, titles, lists, and so on).
-  extension?: unknown;
-  externalId?: string;
-  hide?: boolean;
-  // style
-  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
-  groupIds?: string[];
-  // table
-  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;
-  // Hyperlinks
-  url?: string;
-  // Superscript and subscript
-  actualSize?: number;
-  // Dividing line
-  dashArray?: number[]; // Array for dashed line style
-  lineWidth?: number; // Line width of the separator
-  // control
-  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
-  checkbox?: {
-    value: boolean | null;
-  };
-  // radio
-  radio?: {
-    value: boolean | null;
-  };
-  // LaTeX
-  laTexSVG?: string;
-  // date
-  dateFormat?: string;
-  // picture
-  imgDisplay?: {
-    INLINE = 'inline',
-    BLOCK = 'block'
-  }
-  imgFloatPosition?: {
-    x: number;
-    y: number;
-    pageNo?: number;
-  }
-  imgCrop?: {
-    x: number;      // Crop start X coordinate (relative to original image)
-    y: number;      // Crop start Y coordinate (relative to original image)
-    width: number;  // Crop width
-    height: number; // Crop height
-  }
-  imgCaption?: {
-    value: string;  // Caption content, supports {imageNo} placeholder
-    color?: string; // Caption font color
-    font?: string;  // Caption font family
-    size?: number;  // Caption font size
-    top?: number;   // Spacing between caption and image
-  }
-  imgToolDisabled?: boolean;
-  imgPreviewDisabled?: boolean;
-  // block
-  block?: {
-    type: {
-      IFRAME = 'iframe',
-      VIDEO = 'video'
-    };
-    iframeBlock?: {
-      src?: string;
-      srcdoc?: string;
-      sandbox?: string[];
-      allow?: string[];
-    };
-    videoBlock?: {
-      src: string;
-    };
-  };
-  // title
-  level?: TitleLevel;
-  title?: {
-    conceptId?: string;
-    deletable?: boolean;
-    disabled?: boolean;
-  };
-  // list
-  listType?: ListType;
-  listStyle?: ListStyle;
-  listWrap?: boolean;
-  // area
-  areaId?: string;
-  area?: {
-    extension?: unknown;
-    top?: number;
-    hide?: boolean;
-    borderColor?: string;
-    backgroundColor?: string;
-    mode?: AreaMode;
-    deletable?: boolean;
-    placeholder?: IPlaceholder;
-  };
-  // label
-  labelId?: string;
-  label?: {
-    color?: string;
-    backgroundColor?: string;
-    borderRadius?: number;
-    padding?: IPadding;
-  };
-}
-```

package/docs/en/guide/shortcut-custom.md

@@ -1,22 +0,0 @@
-# Custom shortcut keys
-
-## How to use?
-
-```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/en/guide/shortcut-internal.md

@@ -1,189 +0,0 @@
-# Internal shortcut keys
-
-## Backspace
-
-Feature: Forward delete
-
-## Delete
-
-Feature: Backward delete
-
-## Enter
-
-Feature: Line break
-
-## Shift + Enter
-
-Feature: Line breaks within the list
-
-## ←
-
-Feature: Move to the left
-
-## Shift + ←
-
-Feature: Zoom the selection to the left
-
-## Ctrl/Cmd + ←
-
-Feature: Move to the left(jump word)
-
-## Ctrl/Cmd + Shift + ←
-
-Feature: Zoom the selection to the left(jump word)
-
-## →
-
-Feature: Move to the right
-
-## Shift + →
-
-Feature: Zoom the selection to the right
-
-## Ctrl/Cmd + →
-
-Feature: Move to the right(jump word)
-
-## Ctrl/Cmd + Shift + →
-
-Feature: Zoom the selection to the right(jump word)
-
-## ↑
-
-Feature: Move up
-
-## Shift + ↑
-
-Feature: Zoom up the selection
-
-## ↓
-
-Feature: Move down
-
-## Shift + ↓
-
-Feature: Zoom down the selection
-
-## Esc
-
-Feature: Exit format brush
-
-## Tab
-
-Feature: Increase indent/Move next control
-
-## Shift + Tab
-
-Feature: Move previous control
-
-## Ctrl/Cmd + Z
-
-Feature: Undo
-
-## Ctrl/Cmd + Y
-
-Feature: Redo
-
-## Ctrl/Cmd + C
-
-Feature: Copy
-
-## Ctrl/Cmd + X
-
-Feature: Cut
-
-## Ctrl/Cmd + A
-
-Feature: Select all
-
-## Ctrl/Cmd + S
-
-Feature: Save
-
-## Ctrl/Cmd + {
-
-Feature: Increase the font
-
-## Ctrl/Cmd + }
-
-Feature: Reduce the font
-
-## Ctrl/Cmd + B
-
-Feature: Bold
-
-## Ctrl/Cmd + I
-
-Feature: Italic
-
-## Ctrl/Cmd + U
-
-Feature: Underline
-
-## Ctrl/Cmd + L
-
-Feature: Line left
-
-## Ctrl/Cmd + E
-
-Feature: Line center
-
-## Ctrl/Cmd + R
-
-Feature: Line right
-
-## Ctrl/Cmd + J
-
-Feature: Both sides are aligned
-
-## Ctrl/Cmd + Shift + J
-
-Feature: Line justify
-
-## Ctrl + Shift + X
-
-Feature: Strikethrough
-
-## Ctrl/Cmd + Shift + >
-
-Feature: Superscript
-
-## Ctrl/Cmd + Shift + <
-
-Feature: Subscript
-
-## Ctrl + Alt/Option + 0
-
-Feature: Main body
-
-## Ctrl + Alt/Option + 1
-
-Feature: Header1
-
-## Ctrl + Alt/Option + 2
-
-Feature: Header2
-
-## Ctrl + Alt/Option + 3
-
-Feature: Header3
-
-## Ctrl + Alt/Option + 4
-
-Feature: Header4
-
-## Ctrl + Alt/Option + 5
-
-Feature: Header5
-
-## Ctrl + Alt/Option + 6
-
-Feature: Header6
-
-## Ctrl/Cmd + Shift + I
-
-Feature: Unordered list
-
-## Ctrl/Cmd + Shift + U
-
-Feature: Ordered list

package/docs/en/guide/start.md

@@ -1,97 +0,0 @@
-# Getting Started
-
-> WYSIWYG rich text editor.
-
-Benefit from the complete self-implementation of cursor and text layout. The underlying rendering can also be rendered by svg, See code：[feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg); Or complete pdf drawing with pdfjs,See code：[feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf).
-
-::: warning
-The official only provides the editor core layer npm package, the menu bar or other external tools can refer to the document extension, or directly refer the implementation of [official](https://github.com/Hufe921/canvas-editor), See details [demo](https://hufe.club/canvas-editor/).
-:::
-
-## Features
-
-- 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)
-- Right-click menu (Internal, Custom)
-- Shortcut keys (Internal, Custom)
-- Drag and Drop(Text, Element, Control)
-- Header, Footer, Page Number
-- Page Margin
-- Watermark
-- Pagination
-- Comment
-- Catalog
-- [Plugin](https://github.com/Hufe921/canvas-editor-plugin)
-
-## TODO
-
-- Computational performance
-- Control rule
-- Table paging
-- Out of the box version for vue, react and other frameworks
-
-## Step. 1: Download NPM Package
-
-```sh
-npm i @hufe921/canvas-editor --save
-```
-
-## Step. 2: Prepare Container
-
-```html
-<div class="canvas-editor"></div>
-```
-
-## Step. 3: Instantiate Editor
-
-- Examples that only the body content is included
-
-```javascript
-import Editor from '@hufe921/canvas-editor'
-
-new Editor(
-  document.querySelector('.canvas-editor'),
-  [
-    {
-      value: 'Hello World'
-    }
-  ],
-  {}
-)
-```
-
-- Examples that contain body, header, footer content
-
-```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: Configuration Editor
-
-See the next section for details

package/docs/en/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 based rich text editor
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /en/guide/start.html
-    - theme: alt
-      text: View on Github
-      link: https://github.com/Hufe921/canvas-editor
-
-features:
-  - icon: 💡
-    title: WYSIWYG
-    details: Similar to word pageable, what you see is what you get
-  - icon: ⚡️
-    title: Lightweight Data Structure
-    details: A piece of JSON can render complex styles
-  - icon: 🛠️
-    title: Rich Features
-    details: Supports familiar rich text operations, tables, watermarks, controls, formulas, etc
-  - icon: 📦
-    title: Easy to Use
-    details: The core npm package is officially released, and the menu bar and toolbar can be maintained by themselves
-  - icon: 🔩
-    title: Flexible Development Mechanism
-    details: Through the interface, you can obtain the life cycle, event callback, custom right-click menu, and shortcut keys
-  - icon: 🔑
-    title: Full TypeScript Types API
-    details: Flexible apis and full TypeScript types
----
-
-<style>
-  .main>p {
-    max-width:100% !important;
-  }
-</style>

package/docs/guide/api-common.md

@@ -1,49 +0,0 @@
-# 通用 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
-```

package/docs/guide/api-instance.md

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