editor-svg 1.0.0

package/src/editor/dataset/enum/ElementStyle.ts

@@ -0,0 +1,12 @@
+export enum ElementStyleKey {
+  font = 'font',
+  size = 'size',
+  width = 'width',
+  height = 'height',
+  bold = 'bold',
+  color = 'color',
+  highlight = 'highlight',
+  italic = 'italic',
+  underline = 'underline',
+  strikeout = 'strikeout'
+}

package/src/editor/dataset/enum/Event.ts

@@ -0,0 +1,5 @@
+export enum MouseEventButton {
+  LEFT = 0,
+  CENTER = 1,
+  RIGHT = 2
+}

package/src/editor/dataset/enum/KeyMap.ts

@@ -0,0 +1,85 @@
+export enum KeyMap {
+  Delete = 'Delete',
+  Backspace = 'Backspace',
+  Enter = 'Enter',
+  Left = 'ArrowLeft',
+  Right = 'ArrowRight',
+  Up = 'ArrowUp',
+  Down = 'ArrowDown',
+  Home = 'Home',
+  End = 'End',
+  ESC = 'Escape',
+  TAB = 'Tab',
+  META = 'Meta',
+  LEFT_BRACKET = '[',
+  RIGHT_BRACKET = ']',
+  COMMA = ',',
+  PERIOD = '.',
+  LEFT_ANGLE_BRACKET = '<',
+  RIGHT_ANGLE_BRACKET = '>',
+  EQUAL = '=',
+  MINUS = '-',
+  PLUS = '+',
+  A = 'a',
+  B = 'b',
+  C = 'c',
+  D = 'd',
+  E = 'e',
+  F = 'f',
+  G = 'g',
+  H = 'h',
+  I = 'i',
+  J = 'j',
+  K = 'k',
+  L = 'l',
+  M = 'm',
+  N = 'n',
+  O = 'o',
+  P = 'p',
+  Q = 'q',
+  R = 'r',
+  S = 's',
+  T = 't',
+  U = 'u',
+  V = 'v',
+  W = 'w',
+  X = 'x',
+  Y = 'y',
+  Z = 'z',
+  A_UPPERCASE = 'A',
+  B_UPPERCASE = 'B',
+  C_UPPERCASE = 'C',
+  D_UPPERCASE = 'D',
+  E_UPPERCASE = 'E',
+  F_UPPERCASE = 'F',
+  G_UPPERCASE = 'G',
+  H_UPPERCASE = 'H',
+  I_UPPERCASE = 'I',
+  J_UPPERCASE = 'J',
+  K_UPPERCASE = 'K',
+  L_UPPERCASE = 'L',
+  M_UPPERCASE = 'M',
+  N_UPPERCASE = 'N',
+  O_UPPERCASE = 'O',
+  P_UPPERCASE = 'P',
+  Q_UPPERCASE = 'Q',
+  R_UPPERCASE = 'R',
+  S_UPPERCASE = 'S',
+  T_UPPERCASE = 'T',
+  U_UPPERCASE = 'U',
+  V_UPPERCASE = 'V',
+  W_UPPERCASE = 'W',
+  X_UPPERCASE = 'X',
+  Y_UPPERCASE = 'Y',
+  Z_UPPERCASE = 'Z',
+  ZERO = '0',
+  ONE = '1',
+  TWO = '2',
+  THREE = '3',
+  FOUR = '4',
+  FIVE = '5',
+  SIX = '6',
+  SEVEN = '7',
+  EIGHT = '8',
+  NINE = '9'
+}

package/src/editor/dataset/enum/LineNumber.ts

@@ -0,0 +1,4 @@
+export enum LineNumberType {
+  PAGE = 'page',
+  CONTINUITY = 'continuity'
+}

package/src/editor/dataset/enum/List.ts

@@ -0,0 +1,23 @@
+export enum ListType {
+  UL = 'ul',
+  OL = 'ol'
+}
+
+export enum UlStyle {
+  DISC = 'disc', // 实心圆点
+  CIRCLE = 'circle', // 空心圆点
+  SQUARE = 'square', // 实心方块
+  CHECKBOX = 'checkbox' // 复选框
+}
+
+export enum OlStyle {
+  DECIMAL = 'decimal' // 阿拉伯数字
+}
+
+export enum ListStyle {
+  DISC = UlStyle.DISC,
+  CIRCLE = UlStyle.CIRCLE,
+  SQUARE = UlStyle.SQUARE,
+  DECIMAL = OlStyle.DECIMAL,
+  CHECKBOX = UlStyle.CHECKBOX
+}

package/src/editor/dataset/enum/Observer.ts

@@ -0,0 +1,6 @@
+export enum MoveDirection {
+  UP = 'top',
+  DOWN = 'down',
+  LEFT = 'left',
+  RIGHT = 'right'
+}

package/src/editor/dataset/enum/Row.ts

@@ -0,0 +1,7 @@
+export enum RowFlex {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+  ALIGNMENT = 'alignment',
+  JUSTIFY = 'justify'
+}

package/src/editor/dataset/enum/Text.ts

@@ -0,0 +1,13 @@
+export enum TextDecorationStyle {
+  SOLID = 'solid',
+  DOUBLE = 'double',
+  DASHED = 'dashed',
+  DOTTED = 'dotted',
+  WAVY = 'wavy'
+}
+
+export enum DashType {
+  SOLID = 'solid',
+  DASHED = 'dashed',
+  DOTTED = 'dotted'
+}

package/src/editor/dataset/enum/Title.ts

@@ -0,0 +1,8 @@
+export enum TitleLevel {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+  FOURTH = 'fourth',
+  FIFTH = 'fifth',
+  SIXTH = 'sixth'
+}

package/src/editor/dataset/enum/VerticalAlign.ts

@@ -0,0 +1,5 @@
+export enum VerticalAlign {
+  TOP = 'top',
+  MIDDLE = 'middle',
+  BOTTOM = 'bottom'
+}

package/src/editor/dataset/enum/Watermark.ts

@@ -0,0 +1,4 @@
+export enum WatermarkType {
+  TEXT = 'text',
+  IMAGE = 'image'
+}

package/src/editor/dataset/enum/table/Table.ts

@@ -0,0 +1,19 @@
+export enum TableBorder {
+  ALL = 'all',
+  EMPTY = 'empty',
+  EXTERNAL = 'external',
+  INTERNAL = 'internal',
+  DASH = 'dash'
+}
+
+export enum TdBorder {
+  TOP = 'top',
+  RIGHT = 'right',
+  BOTTOM = 'bottom',
+  LEFT = 'left'
+}
+
+export enum TdSlash {
+  FORWARD = 'forward', // 正斜线 /
+  BACK = 'back' // 反斜线 \
+}

package/src/editor/dataset/enum/table/TableTool.ts

@@ -0,0 +1,4 @@
+export enum TableOrder {
+  ROW = 'row',
+  COL = 'col'
+}

package/src/editor/index.ts

@@ -0,0 +1,241 @@
+import './assets/css/index.css'
+import { version } from '../../package.json'
+import { IEditorData, IEditorOption, IEditorResult } from './interface/Editor'
+import { IElement } from './interface/Element'
+import { Draw } from './core/draw/Draw'
+import { Command } from './core/command/Command'
+import { CommandAdapt } from './core/command/CommandAdapt'
+import { Listener } from './core/listener/Listener'
+import { RowFlex } from './dataset/enum/Row'
+import {
+  FlexDirection,
+  ImageDisplay,
+  LocationPosition
+} from './dataset/enum/Common'
+import { ElementType } from './dataset/enum/Element'
+import { formatElementList } from './utils/element'
+import { Register } from './core/register/Register'
+import { ContextMenu } from './core/contextmenu/ContextMenu'
+import {
+  IContextMenuContext,
+  IRegisterContextMenu
+} from './interface/contextmenu/ContextMenu'
+import {
+  EditorComponent,
+  EditorZone,
+  EditorMode,
+  PageMode,
+  PaperDirection,
+  WordBreak,
+  RenderMode
+} from './dataset/enum/Editor'
+import { EDITOR_CLIPBOARD, EDITOR_COMPONENT } from './dataset/constant/Editor'
+import { IWatermark } from './interface/Watermark'
+import {
+  ControlComponent,
+  ControlIndentation,
+  ControlState,
+  ControlType
+} from './dataset/enum/Control'
+import { INavigateInfo } from './core/draw/interactive/Search'
+import { Shortcut } from './core/shortcut/Shortcut'
+import { KeyMap } from './dataset/enum/KeyMap'
+import { BlockType } from './dataset/enum/Block'
+import { IBlock } from './interface/Block'
+import { ILang } from './interface/i18n/I18n'
+import { VerticalAlign } from './dataset/enum/VerticalAlign'
+import { TableBorder, TdBorder, TdSlash } from './dataset/enum/table/Table'
+import { MaxHeightRatio, NumberType } from './dataset/enum/Common'
+import { TitleLevel } from './dataset/enum/Title'
+import { ListStyle, ListType } from './dataset/enum/List'
+import { ICatalog, ICatalogItem } from './interface/Catalog'
+import { Plugin } from './core/plugin/Plugin'
+import { UsePlugin } from './interface/Plugin'
+import { EventBus } from './core/event/eventbus/EventBus'
+import { EventBusMap } from './interface/EventBus'
+import { IRangeStyle } from './interface/Listener'
+import { Override } from './core/override/Override'
+import { LETTER_CLASS } from './dataset/constant/Common'
+import { INTERNAL_CONTEXT_MENU_KEY } from './dataset/constant/ContextMenu'
+import { IRange } from './interface/Range'
+import { deepClone, splitText } from './utils'
+import {
+  createDomFromElementList,
+  getElementListByHTML,
+  getTextFromElementList,
+  IGetElementListByHTMLOption
+} from './utils/element'
+import { BackgroundRepeat, BackgroundSize } from './dataset/enum/Background'
+import { TextDecorationStyle } from './dataset/enum/Text'
+import { mergeOption } from './utils/option'
+import { LineNumberType } from './dataset/enum/LineNumber'
+import { AreaMode } from './dataset/enum/Area'
+import { IBadge } from './interface/Badge'
+import { WatermarkType } from './dataset/enum/Watermark'
+import { INTERNAL_SHORTCUT_KEY } from './dataset/constant/Shortcut'
+import { IGraffitiData } from './interface/Graffiti'
+
+export default class Editor {
+  public command: Command
+  public version: string
+  public listener: Listener
+  public eventBus: EventBus<EventBusMap>
+  public override: Override
+  public register: Register
+  public destroy: () => void
+  public use: UsePlugin
+
+  constructor(
+    container: HTMLDivElement,
+    data: IEditorData | IElement[],
+    options: IEditorOption = {}
+  ) {
+    // 合并配置
+    const editorOptions = mergeOption(options)
+    // 数据处理
+    data = deepClone(data)
+    let headerElementList: IElement[] = []
+    let mainElementList: IElement[] = []
+    let footerElementList: IElement[] = []
+    let graffitiData: IGraffitiData[] = []
+    if (Array.isArray(data)) {
+      mainElementList = data
+    } else {
+      headerElementList = data.header || []
+      mainElementList = data.main
+      footerElementList = data.footer || []
+      graffitiData = data.graffiti || []
+    }
+    const pageComponentData = [
+      headerElementList,
+      mainElementList,
+      footerElementList
+    ]
+    pageComponentData.forEach(elementList => {
+      formatElementList(elementList, {
+        editorOptions,
+        isForceCompensation: true
+      })
+    })
+    // 版本
+    this.version = version
+    // 监听
+    this.listener = new Listener()
+    // 事件
+    this.eventBus = new EventBus<EventBusMap>()
+    // 重写
+    this.override = new Override()
+    // 启动
+    const draw = new Draw(
+      container,
+      editorOptions,
+      {
+        header: headerElementList,
+        main: mainElementList,
+        footer: footerElementList,
+        graffiti: graffitiData
+      },
+      this.listener,
+      this.eventBus,
+      this.override
+    )
+    // 命令
+    this.command = new Command(new CommandAdapt(draw))
+    // 菜单
+    const contextMenu = new ContextMenu(draw, this.command)
+    // 快捷键
+    const shortcut = new Shortcut(draw, this.command)
+    // 注册
+    this.register = new Register({
+      contextMenu,
+      shortcut,
+      i18n: draw.getI18n()
+    })
+    // 注册销毁方法
+    this.destroy = () => {
+      draw.destroy()
+      shortcut.removeEvent()
+      contextMenu.removeEvent()
+      this.eventBus.dangerouslyClearAll()
+    }
+    // 插件
+    const plugin = new Plugin(this)
+    this.use = plugin.use.bind(plugin)
+  }
+}
+
+// 对外方法
+export {
+  splitText,
+  createDomFromElementList,
+  getElementListByHTML,
+  getTextFromElementList
+}
+
+// 对外常量
+export {
+  EDITOR_COMPONENT,
+  LETTER_CLASS,
+  INTERNAL_CONTEXT_MENU_KEY,
+  INTERNAL_SHORTCUT_KEY,
+  EDITOR_CLIPBOARD
+}
+
+// 对外枚举
+export {
+  Editor,
+  RowFlex,
+  VerticalAlign,
+  EditorZone,
+  EditorMode,
+  ElementType,
+  ControlType,
+  EditorComponent,
+  PageMode,
+  RenderMode,
+  ImageDisplay,
+  Command,
+  KeyMap,
+  BlockType,
+  PaperDirection,
+  TableBorder,
+  TdBorder,
+  TdSlash,
+  MaxHeightRatio,
+  NumberType,
+  TitleLevel,
+  ListType,
+  ListStyle,
+  WordBreak,
+  ControlIndentation,
+  ControlComponent,
+  BackgroundRepeat,
+  BackgroundSize,
+  TextDecorationStyle,
+  LineNumberType,
+  LocationPosition,
+  AreaMode,
+  ControlState,
+  FlexDirection,
+  WatermarkType
+}
+
+// 对外类型
+export type {
+  IElement,
+  IEditorData,
+  IEditorOption,
+  IEditorResult,
+  IContextMenuContext,
+  IRegisterContextMenu,
+  IWatermark,
+  INavigateInfo,
+  IBlock,
+  ILang,
+  ICatalog,
+  ICatalogItem,
+  IRange,
+  IRangeStyle,
+  IBadge,
+  IGetElementListByHTMLOption
+}

package/src/editor/interface/Area.ts

@@ -0,0 +1,68 @@
+import { AreaMode } from '../dataset/enum/Area'
+import { LocationPosition } from '../dataset/enum/Common'
+import { IElement, IElementPosition } from './Element'
+import { IPlaceholder } from './Placeholder'
+import { IRange } from './Range'
+
+export interface IAreaBasic {
+  extension?: unknown
+  placeholder?: IPlaceholder
+}
+
+export interface IAreaStyle {
+  top?: number
+  borderColor?: string
+  backgroundColor?: string
+  borderWidth?: number
+  padding?: number[]
+}
+
+export interface IAreaRule {
+  mode?: AreaMode
+  hide?: boolean
+  deletable?: boolean
+}
+
+export type IArea = IAreaBasic & IAreaStyle & IAreaRule
+
+export interface IInsertAreaOption {
+  id?: string
+  area: IArea
+  value: IElement[]
+  position?: LocationPosition
+  range?: Pick<IRange, 'startIndex' | 'endIndex'>
+}
+
+export interface ISetAreaValueOption {
+  id?: string
+  value: IElement[]
+}
+
+export interface ISetAreaPropertiesOption {
+  id?: string
+  properties: IArea
+}
+
+export interface IGetAreaValueOption {
+  id?: string
+}
+
+export interface IGetAreaValueResult {
+  id?: string
+  area: IArea
+  startPageNo: number
+  endPageNo: number
+  value: IElement[]
+}
+
+export interface IAreaInfo {
+  id: string
+  area: IArea
+  elementList: IElement[]
+  positionList: IElementPosition[]
+}
+
+export interface ILocationAreaOption {
+  position: LocationPosition
+  isAppendLastLineBreak?: boolean
+}

package/src/editor/interface/Background.ts

@@ -0,0 +1,9 @@
+import { BackgroundRepeat, BackgroundSize } from '../dataset/enum/Background'
+
+export interface IBackgroundOption {
+  color?: string
+  image?: string
+  size?: BackgroundSize
+  repeat?: BackgroundRepeat
+  applyPageNumbers?: number[]
+}

package/src/editor/interface/Badge.ts

@@ -0,0 +1,17 @@
+export interface IBadge {
+  top?: number
+  left?: number
+  width: number
+  height: number
+  value: string
+}
+
+export interface IBadgeOption {
+  top?: number
+  left?: number
+}
+
+export interface IAreaBadge {
+  areaId: string
+  badge: IBadge
+}

package/src/editor/interface/Block.ts

@@ -0,0 +1,18 @@
+import { BlockType } from '../dataset/enum/Block'
+
+export interface IIFrameBlock {
+  src?: string
+  srcdoc?: string
+  sandbox?: string[]
+  allow?: string[]
+}
+
+export interface IVideoBlock {
+  src: string
+}
+
+export interface IBlock {
+  type: BlockType
+  iframeBlock?: IIFrameBlock
+  videoBlock?: IVideoBlock
+}

package/src/editor/interface/Catalog.ts

@@ -0,0 +1,11 @@
+import { TitleLevel } from '../dataset/enum/Title'
+
+export interface ICatalogItem {
+  id: string
+  name: string
+  level: TitleLevel
+  pageNo: number
+  subCatalog: ICatalogItem[]
+}
+
+export type ICatalog = ICatalogItem[]

package/src/editor/interface/Checkbox.ts

@@ -0,0 +1,17 @@
+import { VerticalAlign } from '../dataset/enum/VerticalAlign'
+
+export interface ICheckbox {
+  value: boolean | null
+  code?: string
+  disabled?: boolean
+}
+
+export interface ICheckboxOption {
+  width?: number
+  height?: number
+  gap?: number
+  lineWidth?: number
+  fillStyle?: string
+  strokeStyle?: string
+  verticalAlign?: VerticalAlign
+}

package/src/editor/interface/Command.ts

@@ -0,0 +1,3 @@
+export interface IRichtextOption {
+  isIgnoreDisabledRule: boolean
+}

package/src/editor/interface/Common.ts

@@ -0,0 +1,43 @@
+export type Primitive =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | undefined
+  | null
+
+export type Builtin = Primitive | Function | Date | Error | RegExp
+
+export type DeepRequired<T> = T extends Error
+  ? Required<T>
+  : T extends Builtin
+  ? T
+  : T extends Map<infer K, infer V>
+  ? Map<DeepRequired<K>, DeepRequired<V>>
+  : T extends ReadonlyMap<infer K, infer V>
+  ? ReadonlyMap<DeepRequired<K>, DeepRequired<V>>
+  : T extends WeakMap<infer K, infer V>
+  ? WeakMap<DeepRequired<K>, DeepRequired<V>>
+  : T extends Set<infer U>
+  ? Set<DeepRequired<U>>
+  : T extends ReadonlySet<infer U>
+  ? ReadonlySet<DeepRequired<U>>
+  : T extends WeakSet<infer U>
+  ? WeakSet<DeepRequired<U>>
+  : T extends Promise<infer U>
+  ? Promise<DeepRequired<U>>
+  : T extends {}
+  ? { [K in keyof T]-?: DeepRequired<T[K]> }
+  : Required<T>
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}
+
+export type IPadding = [
+  top: number,
+  right: number,
+  bottom: number,
+  left: number
+]