feat: custom letter class #279

src/editor/core/draw/Draw.ts

@@ -79,7 +79,6 @@ import { Footer } from './frame/Footer'
 import { INLINE_ELEMENT_TYPE } from '../../dataset/constant/Element'
 import { ListParticle } from './particle/ListParticle'
 import { Placeholder } from './frame/Placeholder'
-import { WORD_LIKE_REG } from '../../dataset/constant/Regular'
 import { EventBus } from '../event/eventbus/EventBus'
 import { EventBusMap } from '../../interface/EventBus'
 import { Group } from './interactive/Group'
@@ -140,6 +139,8 @@ export class Draw {
   private selectionObserver: SelectionObserver
   private imageObserver: ImageObserver
 
+  private LETTER_REG: RegExp
+  private WORD_LIKE_REG: RegExp
   private rowList: IRow[]
   private pageRowList: IRow[][]
   private painterStyle: IElementStyle | null
@@ -219,6 +220,11 @@ export class Draw {
 
     this.workerManager = new WorkerManager(this)
 
+    const { letterClass } = options
+    this.LETTER_REG = new RegExp(`[${letterClass.join('')}]`)
+    this.WORD_LIKE_REG = new RegExp(
+      `${letterClass.map(letter => `[^${letter}][${letter}]`).join('|')}`
+    )
     this.rowList = []
     this.pageRowList = []
     this.painterStyle = null
@@ -234,6 +240,10 @@ export class Draw {
     })
   }
 
+  public getLetterReg(): RegExp {
+    return this.LETTER_REG
+  }
+
   public getMode(): EditorMode {
     return this.mode
   }
@@ -1346,7 +1356,7 @@ export class Draw {
         ) {
           // 英文单词
           const word = `${preElement?.value || ''}${element.value}`
-          if (WORD_LIKE_REG.test(word)) {
+          if (this.WORD_LIKE_REG.test(word)) {
             const { width, endElement } = this.textParticle.measureWord(
               ctx,
               elementList,

src/editor/core/draw/particle/TextParticle.ts

@@ -1,6 +1,5 @@
 import { ElementType, IElement } from '../../..'
 import { PUNCTUATION_LIST } from '../../../dataset/constant/Common'
-import { LETTER_REG } from '../../../dataset/constant/Regular'
 import { IRowElement } from '../../../interface/Row'
 import { Draw } from '../Draw'
 
@@ -10,6 +9,7 @@ export interface IMeasureWordResult {
 }
 
 export class TextParticle {
+  private draw: Draw
   private ctx: CanvasRenderingContext2D
   private curX: number
   private curY: number
@@ -19,6 +19,7 @@ export class TextParticle {
   public cacheMeasureText: Map<string, TextMetrics>
 
   constructor(draw: Draw) {
+    this.draw = draw
     this.ctx = draw.getCtx()
     this.curX = -1
     this.curY = -1
@@ -32,6 +33,7 @@ export class TextParticle {
     elementList: IElement[],
     curIndex: number
   ): IMeasureWordResult {
+    const LETTER_REG = this.draw.getLetterReg()
     let width = 0
     let endElement: IElement = elementList[curIndex]
     let i = curIndex

src/editor/core/event/handlers/click.ts

@@ -1,9 +1,10 @@
 import { ZERO } from '../../../dataset/constant/Common'
-import { LETTER_REG, NUMBER_LIKE_REG } from '../../../dataset/constant/Regular'
+import { NUMBER_LIKE_REG } from '../../../dataset/constant/Regular'
 import { CanvasEvent } from '../CanvasEvent'
 
 function dblclick(host: CanvasEvent, evt: MouseEvent) {
   const draw = host.getDraw()
+  const LETTER_REG = draw.getLetterReg()
   const position = draw.getPosition()
   // 切换区域
   if (draw.getIsPagingMode()) {

src/editor/dataset/constant/Common.ts

@@ -27,3 +27,16 @@ export const maxHeightRadioMapping: Record<MaxHeightRatio, number> = {
   [MaxHeightRatio.ONE_THIRD]: 1 / 3,
   [MaxHeightRatio.QUARTER]: 1 / 4
 }
+
+export const LETTER_CLASS = {
+  ENGLISH: 'A-Za-z',
+  SPANISH: 'A-Za-zÁÉÍÓÚáéíóúÑñÜü',
+  FRENCH: 'A-Za-zÀÂÇàâçÉéÈèÊêËëÎîÏïÔôÙùÛûŸÿ',
+  GERMAN: 'A-Za-zÄäÖöÜüß',
+  RUSSIAN: 'А-Яа-яЁё',
+  PORTUGUESE: 'A-Za-zÁÉÍÓÚáéíóúÃÕãõÇç',
+  ITALIAN: 'A-Za-zÀàÈèÉéÌìÍíÎîÓóÒòÙù',
+  DUTCH: 'A-Za-zÀàÁáÂâÄäÈèÉéÊêËëÌìÍíÎîÏïÓóÒòÔôÖöÙùÛûÜü',
+  SWEDISH: 'A-Za-zÅåÄäÖö',
+  GREEK: 'ΑαΒβΓγΔδΕεΖζΗηΘθΙιΚκΛλΜμΝνΞξΟοΠπΡρΣσςΤτΥυΦφΧχΨψΩω'
+}

src/editor/dataset/constant/Regular.ts

@@ -1,8 +1,6 @@
 export const NUMBER_REG = /[0-9]/
-export const LETTER_REG = /[a-zA-Z]/
 export const NUMBER_LIKE_REG = /[0-9.]/
 export const CHINESE_REG = /[\u4e00-\u9fa5]/
-export const WORD_LIKE_REG = /[^a-zA-Z][a-zA-Z]/
 export const SURROGATE_PAIR_REG = /[\uD800-\uDBFF][\uDC00-\uDFFF]/ // unicode代理对（surrogate pair）
 // https://github.com/mathiasbynens/emoji-test-regex-pattern
 export const EMOJI_REG =

src/editor/index.ts

@@ -65,6 +65,7 @@ import { IRangeStyle } from './interface/Listener'
 import { Override } from './core/override/Override'
 import { defaultPageBreakOption } from './dataset/constant/PageBreak'
 import { IPageBreak } from './interface/PageBreak'
+import { LETTER_CLASS } from './dataset/constant/Common'
 
 export default class Editor {
   public command: Command
@@ -164,6 +165,7 @@ export default class Editor {
       wordBreak: WordBreak.BREAK_WORD,
       printPixelRatio: 3,
       maskMargin: [0, 0, 0, 0],
+      letterClass: [LETTER_CLASS.ENGLISH],
       ...options,
       header: headerOptions,
       footer: footerOptions,
@@ -243,6 +245,8 @@ export default class Editor {
 
 // 对外对象
 export {
+  EDITOR_COMPONENT,
+  LETTER_CLASS,
   Editor,
   RowFlex,
   VerticalAlign,
@@ -251,7 +255,6 @@ export {
   ElementType,
   ControlType,
   EditorComponent,
-  EDITOR_COMPONENT,
   PageMode,
   ImageDisplay,
   Command,

src/editor/interface/Editor.ts

@@ -63,6 +63,7 @@ export interface IEditorOption {
   historyMaxRecordCount?: number
   printPixelRatio?: number
   maskMargin?: IMargin
+  letterClass?: string[]
   wordBreak?: WordBreak
   header?: IHeader
   footer?: IFooter