vue-editify 0.1.43 → 0.1.44

Sign up to get free protection for your applications and to get access to all the features.
@@ -6,19 +6,195 @@ import { common as DapCommon } from 'dap-util'
6
6
  import { cloneData, queryHasValue, getButtonOptionsConfig, ObjectType } from './tool'
7
7
  import { ButtonOptionsItemType } from '../components/button/props'
8
8
 
9
- export type ElementMatchConfig = {
9
+ export type ElementMatchConfigType = {
10
10
  parsedom?: string
11
11
  marks?: ObjectType
12
12
  styles?: ObjectType
13
13
  }
14
14
 
15
+ export type CellMergeTypeResultType = {
16
+ crossRow: boolean
17
+ crossColumn: boolean
18
+ rowspan?: number
19
+ colspan?: number
20
+ }
21
+
22
+ /**
23
+ * 清空单元格的内容并隐藏
24
+ * @param editor
25
+ * @param cell
26
+ */
27
+ export const setTableCellMerged = (cell: AlexElement) => {
28
+ const breakEl = new AlexElement('closed', 'br', null, null, null)
29
+ cell.children = [breakEl]
30
+ breakEl.parent = cell
31
+ if (cell.hasMarks()) {
32
+ cell.marks!['data-editify-merged'] = 'true'
33
+ } else {
34
+ cell.marks = {
35
+ 'data-editify-merged': 'true'
36
+ }
37
+ }
38
+ }
39
+
40
+ /**
41
+ * 判断被隐藏的单元格是属于跨行的单元格还是跨列的单元格,返回跨行或者跨列的单元格
42
+ * @param editor
43
+ * @param cell
44
+ * @returns
45
+ */
46
+ export const getCellMergeElement = (editor: AlexEditor, cell: AlexElement) => {
47
+ const queryLeft = () => {
48
+ //跨列的单元格
49
+ let crossColumnElement = null
50
+ //获取前一个单元格
51
+ let el = editor.getPreviousElement(cell)
52
+ let temIndex = 1
53
+ //如果前一个单元格存在
54
+ while (el) {
55
+ const { colspan } = getCellSpanNumber(el)
56
+ //是否隐藏的单元格
57
+ const isMergedCell = el.hasMarks() && el.marks!['data-editify-merged']
58
+ //不是隐藏的单元格并且是跨列的单元格
59
+ if (!isMergedCell && colspan > temIndex) {
60
+ crossColumnElement = el
61
+ break
62
+ }
63
+ //否则继续向左查询
64
+ else {
65
+ el = editor.getPreviousElement(el)
66
+ temIndex++
67
+ }
68
+ }
69
+ return crossColumnElement
70
+ }
71
+ const queryUp = () => {
72
+ //跨行的单元格
73
+ let crossRowElement = null
74
+ //单元格在行中的序列
75
+ const index = cell.parent!.children!.findIndex(item => item.isEqual(cell))
76
+ //获取前一行
77
+ let el = editor.getPreviousElement(cell.parent!)
78
+ let temIndex = 1
79
+ //如果前一行存在
80
+ while (el) {
81
+ //获取前一行对应序列的单元格
82
+ const column = el.children![index]
83
+ const { rowspan } = getCellSpanNumber(column)
84
+ //是否隐藏的单元格
85
+ const isMergedCell = column.hasMarks() && column.marks!['data-editify-merged']
86
+ //不是隐藏的单元格并且是跨行的单元格
87
+ if (!isMergedCell && rowspan > temIndex) {
88
+ crossRowElement = column
89
+ break
90
+ }
91
+ //否则继续向上查询
92
+ else {
93
+ el = editor.getPreviousElement(el)
94
+ temIndex++
95
+ }
96
+ }
97
+ return crossRowElement
98
+ }
99
+ return {
100
+ crossRowElement: queryUp(),
101
+ crossColumnElement: queryLeft()
102
+ }
103
+ }
104
+
105
+ /**
106
+ * 获取某个单元格的rowspan和colspan值
107
+ * @param cell
108
+ * @returns
109
+ */
110
+ export const getCellSpanNumber = (cell: AlexElement) => {
111
+ let rowspan = 1
112
+ let colspan = 1
113
+ if (cell.hasMarks()) {
114
+ if (cell.marks!['rowspan']) {
115
+ const num = Number(cell.marks!['rowspan'])
116
+ rowspan = isNaN(num) ? 1 : num
117
+ }
118
+ if (cell.marks!['colspan']) {
119
+ const num = Number(cell.marks!['colspan'])
120
+ colspan = isNaN(num) ? 1 : num
121
+ }
122
+ }
123
+ return {
124
+ rowspan,
125
+ colspan
126
+ }
127
+ }
128
+
129
+ /**
130
+ * 获取表格规格:行数和列数
131
+ * @param rowElements
132
+ * @returns
133
+ */
134
+ export const getTableSize = (rowElements: AlexElement[]) => {
135
+ //将单元格按照同列进行整理
136
+ const columns: AlexElement[][] = []
137
+ //将单元格按照同行进行整理
138
+ const rows: AlexElement[][] = []
139
+ //遍历行
140
+ rowElements.forEach((rowElement, rowIndex) => {
141
+ //遍历行的每一个单元格
142
+ rowElement.children!.forEach((colElement, colIndex) => {
143
+ if (Array.isArray(rows[rowIndex])) {
144
+ rows[rowIndex].push(colElement)
145
+ } else {
146
+ rows[rowIndex] = [colElement]
147
+ }
148
+ if (Array.isArray(columns[colIndex])) {
149
+ columns[colIndex].push(colElement)
150
+ } else {
151
+ columns[colIndex] = [colElement]
152
+ }
153
+ })
154
+ })
155
+ //遍历每一列单元格获取每列占据的行数
156
+ const rowNumbers = columns.map(item => {
157
+ return item.reduce((total: number, current: AlexElement) => {
158
+ if (current.hasMarks()) {
159
+ if (!!current.marks!['data-editify-merged']) {
160
+ return total + 0
161
+ }
162
+ if (!!current.marks!['rowspan']) {
163
+ const num = Number(current.marks!['rowspan'])
164
+ return total + (isNaN(num) ? 1 : num)
165
+ }
166
+ }
167
+ return total + 1
168
+ }, 0)
169
+ })
170
+ //遍历每一行单元格获取每行占据的列数
171
+ const columnNumbers = rows.map(item => {
172
+ return item.reduce((total: number, current: AlexElement) => {
173
+ if (current.hasMarks()) {
174
+ if (!!current.marks!['data-editify-merged']) {
175
+ return total + 0
176
+ }
177
+ if (!!current.marks!['colspan']) {
178
+ const num = Number(current.marks!['colspan'])
179
+ return total + (isNaN(num) ? 1 : num)
180
+ }
181
+ }
182
+ return total + 1
183
+ }, 0)
184
+ })
185
+ return {
186
+ rowNumber: Math.max(...rowNumbers),
187
+ columnNumber: Math.max(...columnNumbers)
188
+ }
189
+ }
190
+
15
191
  /**
16
- * 判断元素是否符合指定的条件
192
+ * Open API:判断元素是否符合指定的条件
17
193
  * @param element
18
194
  * @param config
19
195
  * @returns
20
196
  */
21
- export const elementIsMatch = (element: AlexElement, config: ElementMatchConfig) => {
197
+ export const elementIsMatch = (element: AlexElement, config: ElementMatchConfigType) => {
22
198
  //默认是符合的
23
199
  let isMatch = true
24
200
  //如果存在parsedom判断并且parsedom不一样
@@ -49,12 +225,12 @@ export const elementIsMatch = (element: AlexElement, config: ElementMatchConfig)
49
225
  }
50
226
 
51
227
  /**
52
- * 判断元素是否在符合条件的元素下,如果是返回符合条件的元素,否则返回null
228
+ * Open API:判断元素是否在符合条件的元素下,如果是返回符合条件的元素,否则返回null
53
229
  * @param element
54
230
  * @param config
55
231
  * @returns
56
232
  */
57
- export const getMatchElementByElement = (element: AlexElement, config: ElementMatchConfig): AlexElement | null => {
233
+ export const getMatchElementByElement = (element: AlexElement, config: ElementMatchConfigType): AlexElement | null => {
58
234
  if (element.isBlock()) {
59
235
  return elementIsMatch(element, config) ? element : null
60
236
  }
@@ -65,13 +241,13 @@ export const getMatchElementByElement = (element: AlexElement, config: ElementMa
65
241
  }
66
242
 
67
243
  /**
68
- * 判断光标范围内的元素是否在符合条件的元素下,如果是所有的返回符合条件的元素,否则返回[]
244
+ * Open API:判断光标范围内的元素是否在符合条件的元素下,如果是所有的返回符合条件的元素,否则返回[]
69
245
  * @param editor
70
246
  * @param dataRangeCaches
71
247
  * @param config
72
248
  * @returns
73
249
  */
74
- export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfig) => {
250
+ export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => {
75
251
  let elements: AlexElement[] = []
76
252
  if (!editor.range) {
77
253
  return elements
@@ -93,7 +269,7 @@ export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: Ale
93
269
  }
94
270
 
95
271
  /**
96
- * 判断元素是否在有序列表或者无序列表下
272
+ * Open API:判断元素是否在有序列表或者无序列表下
97
273
  * @param element
98
274
  * @param ordered
99
275
  * @returns
@@ -109,7 +285,7 @@ export const elementIsInList = (element: AlexElement, ordered: boolean): boolean
109
285
  }
110
286
 
111
287
  /**
112
- * 判断元素是否在任务列表下
288
+ * Open API:判断元素是否在任务列表下
113
289
  * @param element
114
290
  * @returns
115
291
  */
@@ -124,7 +300,7 @@ export const elementIsInTask = (element: AlexElement): boolean => {
124
300
  }
125
301
 
126
302
  /**
127
- * 判断元素是否有序或者无序列表
303
+ * Open API:判断元素是否有序或者无序列表
128
304
  * @param element
129
305
  * @param ordered
130
306
  * @returns
@@ -137,7 +313,7 @@ export const isList = (element: AlexElement, ordered: boolean | undefined = fals
137
313
  }
138
314
 
139
315
  /**
140
- * 判断元素是否任务列表
316
+ * Open API:判断元素是否任务列表
141
317
  * @param element
142
318
  * @returns
143
319
  */
@@ -149,7 +325,7 @@ export const isTask = (element: AlexElement) => {
149
325
  }
150
326
 
151
327
  /**
152
- * 选区是否含有代码块
328
+ * Open API:选区是否含有代码块
153
329
  * @param editor
154
330
  * @param dataRangeCaches
155
331
  * @returns
@@ -167,7 +343,7 @@ export const hasPreInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsR
167
343
  }
168
344
 
169
345
  /**
170
- * 选区是否全部在代码块内
346
+ * Open API:选区是否全部在代码块内
171
347
  * @param editor
172
348
  * @param dataRangeCaches
173
349
  * @returns
@@ -185,7 +361,7 @@ export const isRangeInPre = (editor: AlexEditor, dataRangeCaches: AlexElementsRa
185
361
  }
186
362
 
187
363
  /**
188
- * 选区是否含有引用
364
+ * Open API:选区是否含有引用
189
365
  * @param editor
190
366
  * @param dataRangeCaches
191
367
  * @returns
@@ -203,7 +379,7 @@ export const hasQuoteInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
203
379
  }
204
380
 
205
381
  /**
206
- * 选区是否全部在引用内
382
+ * Open API:选区是否全部在引用内
207
383
  * @param editor
208
384
  * @param dataRangeCaches
209
385
  * @returns
@@ -221,7 +397,7 @@ export const isRangeInQuote = (editor: AlexEditor, dataRangeCaches: AlexElements
221
397
  }
222
398
 
223
399
  /**
224
- * 选区是否含有有序列表或者无序列表
400
+ * Open API:选区是否含有有序列表或者无序列表
225
401
  * @param editor
226
402
  * @param dataRangeCaches
227
403
  * @param ordered
@@ -240,7 +416,7 @@ export const hasListInRange = (editor: AlexEditor, dataRangeCaches: AlexElements
240
416
  }
241
417
 
242
418
  /**
243
- * 选区是否全部在有序列表或者无序列表内
419
+ * Open API:选区是否全部在有序列表或者无序列表内
244
420
  * @param editor
245
421
  * @param dataRangeCaches
246
422
  * @param ordered
@@ -259,7 +435,7 @@ export const isRangeInList = (editor: AlexEditor, dataRangeCaches: AlexElementsR
259
435
  }
260
436
 
261
437
  /**
262
- * 选区是否含有任务列表
438
+ * Open API:选区是否含有任务列表
263
439
  * @param editor
264
440
  * @param dataRangeCaches
265
441
  * @returns
@@ -277,7 +453,7 @@ export const hasTaskInRange = (editor: AlexEditor, dataRangeCaches: AlexElements
277
453
  }
278
454
 
279
455
  /**
280
- * 选区是否全部在任务列表里
456
+ * Open API:选区是否全部在任务列表里
281
457
  * @param editor
282
458
  * @param dataRangeCaches
283
459
  * @returns
@@ -295,7 +471,7 @@ export const isRangeInTask = (editor: AlexEditor, dataRangeCaches: AlexElementsR
295
471
  }
296
472
 
297
473
  /**
298
- * 选区是否含有链接
474
+ * Open API:选区是否含有链接
299
475
  * @param editor
300
476
  * @param dataRangeCaches
301
477
  * @returns
@@ -313,7 +489,7 @@ export const hasLinkInRange = (editor: AlexEditor, dataRangeCaches: AlexElements
313
489
  }
314
490
 
315
491
  /**
316
- * 选区是否含有表格
492
+ * Open API:选区是否含有表格
317
493
  * @param editor
318
494
  * @param dataRangeCaches
319
495
  * @returns
@@ -331,7 +507,7 @@ export const hasTableInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
331
507
  }
332
508
 
333
509
  /**
334
- * 选区是否含有图片
510
+ * Open API:选区是否含有图片
335
511
  * @param editor
336
512
  * @param dataRangeCaches
337
513
  * @returns
@@ -349,7 +525,7 @@ export const hasImageInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
349
525
  }
350
526
 
351
527
  /**
352
- * 选区是否含有视频
528
+ * Open API:选区是否含有视频
353
529
  * @param editor
354
530
  * @param dataRangeCaches
355
531
  * @returns
@@ -367,7 +543,7 @@ export const hasVideoInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
367
543
  }
368
544
 
369
545
  /**
370
- * 查询光标所在的文本元素是否具有某个样式
546
+ * Open API:查询光标所在的文本元素是否具有某个样式
371
547
  * @param editor
372
548
  * @param dataRangeCaches
373
549
  * @param name
@@ -408,7 +584,7 @@ export const queryTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElements
408
584
  }
409
585
 
410
586
  /**
411
- * 查询光标所在的文本元素是否具有某个标记
587
+ * Open API:查询光标所在的文本元素是否具有某个标记
412
588
  * @param editor
413
589
  * @param dataRangeCaches
414
590
  * @param name
@@ -449,7 +625,7 @@ export const queryTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsR
449
625
  }
450
626
 
451
627
  /**
452
- * 获取选区内的文字内容,用于预置链接文字
628
+ * Open API:获取选区内的文字内容,用于预置链接文字
453
629
  * @param dataRangeCaches
454
630
  * @returns
455
631
  */
@@ -624,7 +800,7 @@ export const setHeading = (editor: AlexEditor, dataRangeCaches: AlexElementsRang
624
800
  }
625
801
 
626
802
  /**
627
- * 根级块元素或者内部块元素增加缩进
803
+ * Open API:根级块元素或者内部块元素增加缩进
628
804
  * @param editor
629
805
  * @param dataRangeCaches
630
806
  * @returns
@@ -674,7 +850,7 @@ export const setIndentIncrease = (editor: AlexEditor, dataRangeCaches: AlexEleme
674
850
  }
675
851
 
676
852
  /**
677
- * 根级块元素或者内部块元素减少缩进
853
+ * Open API:根级块元素或者内部块元素减少缩进
678
854
  * @param editor
679
855
  * @param dataRangeCaches
680
856
  * @returns
@@ -716,7 +892,7 @@ export const setIndentDecrease = (editor: AlexEditor, dataRangeCaches: AlexEleme
716
892
  }
717
893
 
718
894
  /**
719
- * 插入或者取消引用
895
+ * Open API:插入或者取消引用
720
896
  * @param editor
721
897
  * @param dataRangeCaches
722
898
  * @returns
@@ -755,7 +931,7 @@ export const setQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
755
931
  }
756
932
 
757
933
  /**
758
- * 设置对齐方式,参数取值justify/left/right/center
934
+ * Open API:设置对齐方式,参数取值justify/left/right/center
759
935
  * @param editor
760
936
  * @param dataRangeCaches
761
937
  * @param value
@@ -821,7 +997,7 @@ export const setAlign = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
821
997
  }
822
998
 
823
999
  /**
824
- * 插入或者取消 有序或者无序列表 ordered为true表示有序列表
1000
+ * Open API:插入或者取消 有序或者无序列表 ordered为true表示有序列表
825
1001
  * @param editor
826
1002
  * @param dataRangeCaches
827
1003
  * @param ordered
@@ -863,7 +1039,7 @@ export const setList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
863
1039
  }
864
1040
 
865
1041
  /**
866
- * 插入或者取消任务列表
1042
+ * Open API:插入或者取消任务列表
867
1043
  * @param editor
868
1044
  * @param dataRangeCaches
869
1045
  * @returns
@@ -904,7 +1080,7 @@ export const setTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
904
1080
  }
905
1081
 
906
1082
  /**
907
- * 设置文本元素的样式,styles为{ 'font-weight':'bold' }这类格式
1083
+ * Open API:设置文本元素的样式,styles为{ 'font-weight':'bold' }这类格式
908
1084
  * @param editor
909
1085
  * @param dataRangeCaches
910
1086
  * @param styles
@@ -963,7 +1139,7 @@ export const setTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElementsRa
963
1139
  }
964
1140
 
965
1141
  /**
966
- * 设置文本元素的标记,marks为{ 'class':'a' }这类格式
1142
+ * Open API:设置文本元素的标记,marks为{ 'class':'a' }这类格式
967
1143
  * @param editor
968
1144
  * @param dataRangeCaches
969
1145
  * @param marks
@@ -1025,7 +1201,7 @@ export const setTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsRan
1025
1201
  }
1026
1202
 
1027
1203
  /**
1028
- * 移除文本元素的样式,styleNames是样式名称数组,如果不存在则移除全部样式
1204
+ * Open API:移除文本元素的样式,styleNames是样式名称数组,如果不存在则移除全部样式
1029
1205
  * @param editor
1030
1206
  * @param dataRangeCaches
1031
1207
  * @param styleNames
@@ -1084,7 +1260,7 @@ export const removeTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElement
1084
1260
  }
1085
1261
 
1086
1262
  /**
1087
- * 移除文本元素的标记,markNames是标记名称数组,如果不存在则移除全部标记
1263
+ * Open API:移除文本元素的标记,markNames是标记名称数组,如果不存在则移除全部标记
1088
1264
  * @param editor
1089
1265
  * @param dataRangeCaches
1090
1266
  * @param markNames
@@ -1143,7 +1319,7 @@ export const removeTextMark = (editor: AlexEditor, dataRangeCaches: AlexElements
1143
1319
  }
1144
1320
 
1145
1321
  /**
1146
- * 设置块元素或者根级块元素的行高
1322
+ * Open API:设置块元素或者根级块元素的行高
1147
1323
  * @param editor
1148
1324
  * @param dataRangeCaches
1149
1325
  * @param value
@@ -1209,7 +1385,7 @@ export const setLineHeight = (editor: AlexEditor, dataRangeCaches: AlexElementsR
1209
1385
  }
1210
1386
 
1211
1387
  /**
1212
- * 插入链接
1388
+ * Open API:插入链接
1213
1389
  * @param editor
1214
1390
  * @param text
1215
1391
  * @param url
@@ -1236,7 +1412,7 @@ export const insertLink = (editor: AlexEditor, text: string, url: string, newOpe
1236
1412
  }
1237
1413
 
1238
1414
  /**
1239
- * 插入图片
1415
+ * Open API:插入图片
1240
1416
  * @param editor
1241
1417
  * @param value
1242
1418
  * @returns
@@ -1258,7 +1434,7 @@ export const insertImage = (editor: AlexEditor, value: string) => {
1258
1434
  }
1259
1435
 
1260
1436
  /**
1261
- * 插入视频
1437
+ * Open API:插入视频
1262
1438
  * @param editor
1263
1439
  * @param value
1264
1440
  * @returns
@@ -1282,7 +1458,7 @@ export const insertVideo = (editor: AlexEditor, value: string) => {
1282
1458
  }
1283
1459
 
1284
1460
  /**
1285
- * 插入表格
1461
+ * Open API:插入表格
1286
1462
  * @param editor
1287
1463
  * @param rowLength
1288
1464
  * @param colLength
@@ -1316,7 +1492,7 @@ export const insertTable = (editor: AlexEditor, rowLength: number, colLength: nu
1316
1492
  }
1317
1493
 
1318
1494
  /**
1319
- * 插入或者取消代码块
1495
+ * Open API:插入或者取消代码块
1320
1496
  * @param editor
1321
1497
  * @param dataRangeCaches
1322
1498
  * @returns
@@ -1396,7 +1572,7 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
1396
1572
  }
1397
1573
 
1398
1574
  /**
1399
- * 插入分隔线
1575
+ * Open API:插入分隔线
1400
1576
  * @param editor
1401
1577
  * @param dataRangeCaches
1402
1578
  * @returns