vue-editify 0.1.10 → 0.1.12
Sign up to get free protection for your applications and to get access to all the features.
- package/examples/App.vue +21 -96
- package/examples/main.ts +4 -0
- package/lib/components/button/button.vue.d.ts +143 -0
- package/lib/components/button/props.d.ts +73 -0
- package/lib/components/checkbox/checkbox.vue.d.ts +80 -0
- package/lib/components/checkbox/props.d.ts +36 -0
- package/lib/components/colors/colors.vue.d.ts +47 -0
- package/lib/components/colors/props.d.ts +22 -0
- package/lib/components/icon/icon.vue.d.ts +14 -0
- package/lib/components/icon/props.d.ts +9 -0
- package/lib/components/insertImage/insertImage.vue.d.ts +74 -0
- package/lib/components/insertImage/props.d.ts +34 -0
- package/lib/components/insertLink/insertLink.vue.d.ts +27 -0
- package/lib/components/insertLink/props.d.ts +13 -0
- package/lib/components/insertTable/insertTable.vue.d.ts +36 -0
- package/lib/components/insertTable/props.d.ts +22 -0
- package/lib/components/insertVideo/insertVideo.vue.d.ts +74 -0
- package/lib/components/insertVideo/props.d.ts +34 -0
- package/lib/components/layer/layer.vue.d.ts +129 -0
- package/lib/components/layer/props.d.ts +53 -0
- package/lib/components/menu/menu.vue.d.ts +25 -0
- package/lib/components/menu/props.d.ts +14 -0
- package/lib/components/toolbar/props.d.ts +27 -0
- package/lib/components/toolbar/toolbar.vue.d.ts +56 -0
- package/lib/components/tooltip/props.d.ts +17 -0
- package/lib/components/tooltip/tooltip.vue.d.ts +39 -0
- package/lib/components/triangle/props.d.ts +19 -0
- package/lib/components/triangle/triangle.vue.d.ts +34 -0
- package/lib/core/function.d.ts +45 -0
- package/lib/core/rule.d.ts +9 -0
- package/lib/core/tool.d.ts +185 -0
- package/lib/editify/editify.vue.d.ts +676 -0
- package/lib/editify/props.d.ts +110 -0
- package/lib/editify.es.js +5541 -5661
- package/lib/editify.umd.js +1 -1
- package/lib/hljs/index.d.ts +7 -0
- package/lib/index.d.ts +17 -0
- package/lib/locale/en_US.d.ts +3 -0
- package/lib/locale/index.d.ts +2 -0
- package/lib/locale/zh_CN.d.ts +3 -0
- package/lib/style.css +1 -1
- package/package.json +16 -8
- package/src/components/button/button.less +145 -0
- package/src/components/button/button.vue +197 -0
- package/src/components/button/props.ts +95 -0
- package/src/components/checkbox/checkbox.less +84 -0
- package/src/components/checkbox/checkbox.vue +68 -0
- package/src/components/checkbox/props.ts +49 -0
- package/src/components/colors/colors.less +75 -0
- package/src/components/colors/colors.vue +36 -0
- package/src/components/colors/props.ts +29 -0
- package/src/components/{base/Icon.vue → icon/icon.less} +0 -17
- package/src/components/icon/icon.vue +12 -0
- package/src/components/icon/props.ts +11 -0
- package/src/components/insertImage/insertImage.less +135 -0
- package/src/components/insertImage/insertImage.vue +146 -0
- package/src/components/insertImage/props.ts +43 -0
- package/src/components/insertLink/insertLink.less +64 -0
- package/src/components/insertLink/insertLink.vue +58 -0
- package/src/components/insertLink/props.ts +16 -0
- package/src/components/insertTable/insertTable.less +54 -0
- package/src/components/insertTable/insertTable.vue +85 -0
- package/src/components/insertTable/props.ts +27 -0
- package/src/components/insertVideo/insertVideo.less +135 -0
- package/src/components/insertVideo/insertVideo.vue +146 -0
- package/src/components/insertVideo/props.ts +43 -0
- package/src/components/layer/layer.less +49 -0
- package/src/components/layer/layer.vue +598 -0
- package/src/components/layer/props.ts +71 -0
- package/src/components/menu/menu.less +64 -0
- package/src/components/menu/menu.vue +1570 -0
- package/src/components/menu/props.ts +17 -0
- package/src/components/toolbar/props.ts +35 -0
- package/src/components/toolbar/toolbar.less +89 -0
- package/src/components/toolbar/toolbar.vue +1101 -0
- package/src/components/tooltip/props.ts +21 -0
- package/src/components/tooltip/tooltip.less +23 -0
- package/src/components/tooltip/tooltip.vue +37 -0
- package/src/components/triangle/props.ts +26 -0
- package/src/components/triangle/triangle.less +79 -0
- package/src/components/triangle/triangle.vue +65 -0
- package/src/core/{function.js → function.ts} +268 -267
- package/src/core/{rule.js → rule.ts} +33 -33
- package/src/core/{tool.js → tool.ts} +221 -145
- package/src/editify/editify.less +404 -0
- package/src/editify/editify.vue +805 -0
- package/src/editify/props.ts +141 -0
- package/src/hljs/{index.js → index.ts} +7 -4
- package/src/index.ts +32 -0
- package/src/locale/{en_US.js → en_US.ts} +3 -1
- package/src/locale/index.ts +12 -0
- package/src/locale/{zh_CN.js → zh_CN.ts} +3 -1
- package/tsconfig.json +27 -0
- package/tsconfig.node.json +11 -0
- package/vite-env.d.ts +1 -0
- package/vite.config.ts +39 -0
- package/examples/main.js +0 -4
- package/src/Editify.vue +0 -1184
- package/src/components/Menu.vue +0 -1623
- package/src/components/Toolbar.vue +0 -1215
- package/src/components/base/Button.vue +0 -450
- package/src/components/base/Checkbox.vue +0 -196
- package/src/components/base/Layer.vue +0 -713
- package/src/components/base/Tooltip.vue +0 -82
- package/src/components/base/Triangle.vue +0 -159
- package/src/components/common/Colors.vue +0 -138
- package/src/components/common/InsertImage.vue +0 -316
- package/src/components/common/InsertLink.vue +0 -136
- package/src/components/common/InsertTable.vue +0 -157
- package/src/components/common/InsertVideo.vue +0 -316
- package/src/index.js +0 -24
- package/src/locale/index.js +0 -14
@@ -1,27 +1,27 @@
|
|
1
|
-
import { AlexElement } from 'alex-editor'
|
2
|
-
import { getHljsHtml } from '../hljs'
|
1
|
+
import AlexEditor, { AlexElement } from 'alex-editor'
|
2
|
+
import { LanguagesItemType, getHljsHtml } from '../hljs'
|
3
3
|
import { getColNumbers } from './tool'
|
4
4
|
import { isList, isTask } from './function'
|
5
5
|
import { common as DapCommon } from 'dap-util'
|
6
6
|
|
7
7
|
//更新代码块内的光标位置
|
8
|
-
const updateRangeInPre = (editor, element, originalTextElements, newElements) => {
|
8
|
+
const updateRangeInPre = (editor: AlexEditor, element: AlexElement, originalTextElements: AlexElement[], newElements: AlexElement[]) => {
|
9
9
|
if (!editor.range) {
|
10
10
|
return
|
11
11
|
}
|
12
12
|
//如果虚拟光标的起点在代码块内对虚拟光标的起点进行重新定位
|
13
13
|
if (editor.range.anchor.element.getBlock().isEqual(element)) {
|
14
14
|
//获取起点所在文本元素的在所有文本元素中的序列
|
15
|
-
const elIndex = originalTextElements.findIndex(el => editor.range
|
15
|
+
const elIndex = originalTextElements.findIndex(el => editor.range!.anchor.element.isEqual(el))
|
16
16
|
//起点在整个代码内容中的位置
|
17
|
-
const offset = originalTextElements.filter((
|
17
|
+
const offset = originalTextElements.filter((_el, i) => i < elIndex).reduce((total, item) => total + item.textContent!.length, 0) + editor.range.anchor.offset
|
18
18
|
//获取pre下新的子孙元素中全部的文本元素
|
19
19
|
const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
|
20
20
|
let i = 0
|
21
21
|
let index = 0
|
22
22
|
//遍历
|
23
23
|
while (i < newTextElements.length) {
|
24
|
-
let newIndex = index + newTextElements[i].textContent
|
24
|
+
let newIndex = index + newTextElements[i].textContent!.length
|
25
25
|
if (offset >= index && offset <= newIndex) {
|
26
26
|
editor.range.anchor.element = newTextElements[i]
|
27
27
|
editor.range.anchor.offset = offset - index
|
@@ -34,16 +34,16 @@ const updateRangeInPre = (editor, element, originalTextElements, newElements) =>
|
|
34
34
|
//如果虚拟光标的终点在代码块内需要对虚拟光标的终点进行重新定位
|
35
35
|
if (editor.range.focus.element.getBlock().isEqual(element)) {
|
36
36
|
//获取终点所在文本元素的在所有文本元素中的序列
|
37
|
-
const elIndex = originalTextElements.findIndex(el => editor.range
|
37
|
+
const elIndex = originalTextElements.findIndex(el => editor.range!.focus.element.isEqual(el))
|
38
38
|
//终点在整个代码内容中的位置
|
39
|
-
const offset = originalTextElements.filter((
|
39
|
+
const offset = originalTextElements.filter((_el, i) => i < elIndex).reduce((total, item) => total + item.textContent!.length, 0) + editor.range.focus.offset
|
40
40
|
//获取全部的新文本元素
|
41
41
|
const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
|
42
42
|
let i = 0
|
43
43
|
let index = 0
|
44
44
|
//遍历
|
45
45
|
while (i < newTextElements.length) {
|
46
|
-
let newIndex = index + newTextElements[i].textContent
|
46
|
+
let newIndex = index + newTextElements[i].textContent!.length
|
47
47
|
if (offset >= index && offset <= newIndex) {
|
48
48
|
editor.range.focus.element = newTextElements[i]
|
49
49
|
editor.range.focus.offset = offset - index
|
@@ -56,18 +56,18 @@ const updateRangeInPre = (editor, element, originalTextElements, newElements) =>
|
|
56
56
|
}
|
57
57
|
|
58
58
|
//元素格式化时转换ol和li标签
|
59
|
-
export const parseList = (editor, element) => {
|
59
|
+
export const parseList = (editor: AlexEditor, element: AlexElement) => {
|
60
60
|
//ol标签和ul标签转为div
|
61
61
|
if (element.parsedom == 'ol' || element.parsedom == 'ul') {
|
62
62
|
if (element.hasChildren()) {
|
63
|
-
element.children
|
63
|
+
element.children!.forEach(el => {
|
64
64
|
const newEl = el.clone()
|
65
65
|
newEl.parsedom = 'div'
|
66
66
|
newEl.type = element.type
|
67
67
|
if (!newEl.hasMarks()) {
|
68
68
|
newEl.marks = {}
|
69
69
|
}
|
70
|
-
newEl.marks['data-editify-list'] = element.parsedom
|
70
|
+
newEl.marks!['data-editify-list'] = element.parsedom
|
71
71
|
//插入到该元素之前
|
72
72
|
editor.addElementBefore(newEl, element)
|
73
73
|
})
|
@@ -77,32 +77,32 @@ export const parseList = (editor, element) => {
|
|
77
77
|
}
|
78
78
|
|
79
79
|
//元素格式化时处理有序列表的序号值
|
80
|
-
export const orderdListHandle = function (editor, element) {
|
80
|
+
export const orderdListHandle = function (editor: AlexEditor, element: AlexElement) {
|
81
81
|
//有序列表的序号处理
|
82
82
|
if (isList(element, true)) {
|
83
83
|
//获取前一个元素
|
84
84
|
const previousElement = editor.getPreviousElement(element)
|
85
85
|
//如果前一个元素存在并且也是有序列表
|
86
86
|
if (previousElement && isList(previousElement, true)) {
|
87
|
-
const previousValue = Number(previousElement.marks['data-editify-value'])
|
88
|
-
element.marks['data-editify-value'] = previousValue + 1
|
87
|
+
const previousValue = Number(previousElement.marks!['data-editify-value'])
|
88
|
+
element.marks!['data-editify-value'] = previousValue + 1
|
89
89
|
}
|
90
90
|
//前一个元素不是有序列表,则从0开始
|
91
91
|
else {
|
92
|
-
element.marks['data-editify-value'] = 1
|
92
|
+
element.marks!['data-editify-value'] = 1
|
93
93
|
}
|
94
94
|
}
|
95
95
|
}
|
96
96
|
|
97
97
|
//元素格式化时处理媒体元素和链接
|
98
|
-
export const mediaHandle = function (editor, element) {
|
98
|
+
export const mediaHandle = function (editor: AlexEditor, element: AlexElement) {
|
99
99
|
//图片、视频和链接设置marks
|
100
100
|
if (element.parsedom == 'img' || element.parsedom == 'video' || element.parsedom == 'a') {
|
101
101
|
const marks = {
|
102
102
|
'data-editify-element': element.key
|
103
103
|
}
|
104
104
|
if (element.hasMarks()) {
|
105
|
-
Object.assign(element.marks
|
105
|
+
Object.assign(element.marks!, marks)
|
106
106
|
} else {
|
107
107
|
element.marks = marks
|
108
108
|
}
|
@@ -126,17 +126,17 @@ export const mediaHandle = function (editor, element) {
|
|
126
126
|
}
|
127
127
|
|
128
128
|
//元素格式化时处理表格
|
129
|
-
export const tableHandle = function (editor, element) {
|
129
|
+
export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
|
130
130
|
if (element.parsedom == 'table') {
|
131
131
|
const marks = {
|
132
132
|
'data-editify-element': element.key
|
133
133
|
}
|
134
134
|
if (element.hasMarks()) {
|
135
|
-
Object.assign(element.marks
|
135
|
+
Object.assign(element.marks!, marks)
|
136
136
|
} else {
|
137
137
|
element.marks = marks
|
138
138
|
}
|
139
|
-
const elements = AlexElement.flatElements(element.children)
|
139
|
+
const elements = AlexElement.flatElements(element.children!)
|
140
140
|
const rows = elements.filter(el => {
|
141
141
|
return el.parsedom == 'tr'
|
142
142
|
})
|
@@ -144,13 +144,13 @@ export const tableHandle = function (editor, element) {
|
|
144
144
|
return el.parsedom == 'colgroup'
|
145
145
|
})
|
146
146
|
if (colgroup) {
|
147
|
-
colgroup.children
|
147
|
+
colgroup.children!.forEach(col => {
|
148
148
|
if (!col.hasMarks()) {
|
149
149
|
col.marks = {
|
150
150
|
width: 'auto'
|
151
151
|
}
|
152
|
-
} else if (!col.marks['width']) {
|
153
|
-
col.marks['width'] = 'auto'
|
152
|
+
} else if (!col.marks!['width']) {
|
153
|
+
col.marks!['width'] = 'auto'
|
154
154
|
}
|
155
155
|
})
|
156
156
|
} else {
|
@@ -183,28 +183,28 @@ export const tableHandle = function (editor, element) {
|
|
183
183
|
}
|
184
184
|
|
185
185
|
//元素格式化时处理pre,将pre的内容根据语言进行样式处理
|
186
|
-
export const preHandle = function (editor, element, highlight, languages) {
|
186
|
+
export const preHandle = function (editor: AlexEditor, element: AlexElement, highlight: boolean, languages: (string | LanguagesItemType)[]) {
|
187
187
|
//如果是代码块进行处理
|
188
188
|
if (element.parsedom == 'pre') {
|
189
189
|
const marks = {
|
190
190
|
'data-editify-element': element.key
|
191
191
|
}
|
192
192
|
if (element.hasMarks()) {
|
193
|
-
Object.assign(element.marks
|
193
|
+
Object.assign(element.marks!, marks)
|
194
194
|
} else {
|
195
195
|
element.marks = marks
|
196
196
|
}
|
197
197
|
//高亮处理
|
198
198
|
if (highlight && element.hasChildren()) {
|
199
199
|
//获取语言类型
|
200
|
-
let language = element.marks['data-editify-hljs'] || ''
|
200
|
+
let language: string = element.marks!['data-editify-hljs'] || ''
|
201
201
|
if (language && languages) {
|
202
202
|
//语言类型是否是列表内的
|
203
203
|
const flag = languages.some(item => {
|
204
204
|
if (DapCommon.isObject(item)) {
|
205
|
-
return item.value == language
|
205
|
+
return (<LanguagesItemType>item).value == language
|
206
206
|
}
|
207
|
-
return item == language
|
207
|
+
return <string>item == language
|
208
208
|
})
|
209
209
|
//如果不是列表内的则清除
|
210
210
|
if (!flag) {
|
@@ -212,7 +212,7 @@ export const preHandle = function (editor, element, highlight, languages) {
|
|
212
212
|
}
|
213
213
|
}
|
214
214
|
//获取pre标签下所有的文本元素
|
215
|
-
const originalTextElements = AlexElement.flatElements(element.children).filter(el => el.isText() && !el.isEmpty())
|
215
|
+
const originalTextElements = AlexElement.flatElements(element.children!).filter(el => el.isText() && !el.isEmpty())
|
216
216
|
//获取pre下的代码文本值
|
217
217
|
const textContent = originalTextElements.reduce((val, item) => {
|
218
218
|
return val + item.textContent
|
@@ -235,10 +235,10 @@ export const preHandle = function (editor, element, highlight, languages) {
|
|
235
235
|
}
|
236
236
|
|
237
237
|
//元素格式化时处理一些特殊的内部块元素,转为根级块元素
|
238
|
-
export const specialInblockHandle = function (editor, element) {
|
238
|
+
export const specialInblockHandle = function (editor: AlexEditor, element: AlexElement) {
|
239
239
|
if (element.hasChildren()) {
|
240
|
-
element.children
|
241
|
-
if (isList(el, true) || isList(el, false) || isTask(el) || ['blockquote', 'pre', 'table', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(el.parsedom)) {
|
240
|
+
element.children!.forEach(el => {
|
241
|
+
if (isList(el, true) || isList(el, false) || isTask(el) || ['blockquote', 'pre', 'table', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(el.parsedom!)) {
|
242
242
|
const newEl = el.clone()
|
243
243
|
newEl.type = 'block'
|
244
244
|
const block = element.getBlock()
|