vue-editify 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/editify.es.js +2 -2
- package/lib/editify.umd.js +2 -2
- package/lib/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/button/button.less +2 -2
- package/src/components/checkbox/checkbox.less +1 -1
- package/src/components/colors/colors.less +1 -1
- package/src/components/insertImage/insertImage.less +3 -3
- package/src/components/insertLink/insertLink.less +3 -3
- package/src/components/insertVideo/insertVideo.less +3 -3
- package/src/components/layer/layer.less +1 -1
- package/src/components/toolbar/toolbar.less +3 -3
- package/src/components/tooltip/tooltip.less +1 -1
- package/src/css/var.less +81 -6
- package/src/editify/editify.less +10 -10
- package/src/index.ts +2 -2
- package/src/plugins/attachment/insertAttachment/insertAttachment.less +4 -4
- package/src/plugins/mathformula/insertMathformula/insertMathformula.less +3 -3
- package/vite.config.ts +1 -2
- package/src/css/root.less +0 -79
package/lib/index.d.ts
CHANGED
@@ -743,7 +743,7 @@ export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuI
|
|
743
743
|
export type { ElementMatchConfigType } from './core/function';
|
744
744
|
export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from './core/function';
|
745
745
|
declare const install: (app: App) => void;
|
746
|
-
declare const version = "0.2.
|
746
|
+
declare const version = "0.2.5";
|
747
747
|
export { AlexElement } from 'alex-editor';
|
748
748
|
export type { AttachmentOptionsType } from './plugins/attachment';
|
749
749
|
export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props';
|
package/package.json
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
align-items: center;
|
5
5
|
position: relative;
|
6
6
|
color: var(--editify-font-color);
|
7
|
-
font-size:
|
7
|
+
font-size: var(--font-size);
|
8
8
|
|
9
9
|
.editify-button-wrap {
|
10
10
|
padding: 2px 4px;
|
@@ -54,7 +54,7 @@
|
|
54
54
|
margin-left: 2px;
|
55
55
|
transform: scale(0.6);
|
56
56
|
transition: transform 300ms;
|
57
|
-
font-size:
|
57
|
+
font-size: var(--font-size);
|
58
58
|
|
59
59
|
&.editify-rotate {
|
60
60
|
transform: scale(0.6) rotate(180deg);
|
@@ -34,7 +34,7 @@
|
|
34
34
|
.editify-image-header-item {
|
35
35
|
display: block;
|
36
36
|
text-align: center;
|
37
|
-
font-size:
|
37
|
+
font-size: var(--font-size);
|
38
38
|
color: var(--editify-font-color);
|
39
39
|
opacity: 0.8;
|
40
40
|
transition: all 300ms;
|
@@ -72,7 +72,7 @@
|
|
72
72
|
margin: 0 0 10px 0;
|
73
73
|
padding: 4px 2px;
|
74
74
|
border: none;
|
75
|
-
font-size:
|
75
|
+
font-size: var(--font-size);
|
76
76
|
color: var(--editify-font-color);
|
77
77
|
border-bottom: 1px solid var(--editify-border-color);
|
78
78
|
line-height: 1.5;
|
@@ -96,7 +96,7 @@
|
|
96
96
|
justify-content: flex-end;
|
97
97
|
align-items: center;
|
98
98
|
width: 100%;
|
99
|
-
font-size:
|
99
|
+
font-size: var(--font-size);
|
100
100
|
opacity: 0.8;
|
101
101
|
transition: all 300ms;
|
102
102
|
|
@@ -7,7 +7,7 @@
|
|
7
7
|
display: block;
|
8
8
|
text-align: left;
|
9
9
|
margin-bottom: 10px;
|
10
|
-
font-size:
|
10
|
+
font-size: var(--font-size);
|
11
11
|
color: var(--editify-font-color);
|
12
12
|
}
|
13
13
|
|
@@ -20,7 +20,7 @@
|
|
20
20
|
margin: 0 0 10px 0;
|
21
21
|
padding: 4px 2px;
|
22
22
|
border: none;
|
23
|
-
font-size:
|
23
|
+
font-size: var(--font-size);
|
24
24
|
color: var(--editify-font-color);
|
25
25
|
border-bottom: 1px solid var(--editify-border-color);
|
26
26
|
line-height: 1.5;
|
@@ -54,7 +54,7 @@
|
|
54
54
|
cursor: pointer;
|
55
55
|
opacity: 0.8;
|
56
56
|
transition: all 300ms;
|
57
|
-
font-size:
|
57
|
+
font-size: var(--font-size);
|
58
58
|
|
59
59
|
&:hover {
|
60
60
|
opacity: 1;
|
@@ -34,7 +34,7 @@
|
|
34
34
|
.editify-video-header-item {
|
35
35
|
display: block;
|
36
36
|
text-align: center;
|
37
|
-
font-size:
|
37
|
+
font-size: var(--font-size);
|
38
38
|
color: var(--editify-font-color);
|
39
39
|
opacity: 0.8;
|
40
40
|
transition: all 300ms;
|
@@ -72,7 +72,7 @@
|
|
72
72
|
margin: 0 0 10px 0;
|
73
73
|
padding: 4px 2px;
|
74
74
|
border: none;
|
75
|
-
font-size:
|
75
|
+
font-size: var(--font-size);
|
76
76
|
color: var(--editify-font-color);
|
77
77
|
border-bottom: 1px solid var(--editify-border-color);
|
78
78
|
line-height: 1.5;
|
@@ -96,7 +96,7 @@
|
|
96
96
|
justify-content: flex-end;
|
97
97
|
align-items: center;
|
98
98
|
width: 100%;
|
99
|
-
font-size:
|
99
|
+
font-size: var(--font-size);
|
100
100
|
opacity: 0.8;
|
101
101
|
transition: all 300ms;
|
102
102
|
|
@@ -18,7 +18,7 @@
|
|
18
18
|
display: block;
|
19
19
|
text-align: left;
|
20
20
|
margin-bottom: 10px;
|
21
|
-
font-size:
|
21
|
+
font-size: var(--font-size);
|
22
22
|
color: var(--editify-font-color);
|
23
23
|
}
|
24
24
|
|
@@ -31,7 +31,7 @@
|
|
31
31
|
margin: 0 0 10px 0;
|
32
32
|
padding: 4px 2px;
|
33
33
|
border: none;
|
34
|
-
font-size:
|
34
|
+
font-size: var(--font-size);
|
35
35
|
color: var(--editify-font-color);
|
36
36
|
border-bottom: 1px solid var(--editify-border-color);
|
37
37
|
line-height: 1.5;
|
@@ -58,7 +58,7 @@
|
|
58
58
|
justify-content: space-between;
|
59
59
|
align-items: center;
|
60
60
|
width: 100%;
|
61
|
-
font-size:
|
61
|
+
font-size: var(--font-size);
|
62
62
|
color: var(--editify-font-color-light);
|
63
63
|
|
64
64
|
.editify-toolbar-link-operations {
|
package/src/css/var.less
CHANGED
@@ -1,6 +1,81 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
1
|
+
:root {
|
2
|
+
//编辑器内的默认字体大小
|
3
|
+
--font-size: 14px;
|
4
|
+
//字体颜色
|
5
|
+
--editify-font-color: #555;
|
6
|
+
//较浅的字体颜色(副文本颜色)
|
7
|
+
--editify-font-color-light: #888;
|
8
|
+
//更浅的字体颜色(placeholder和禁用字体颜色)
|
9
|
+
--editify-font-color-disabled: #bbb;
|
10
|
+
//较深的字体颜色(编辑器内容区域字体颜色)
|
11
|
+
--editify-font-color-dark: #333;
|
12
|
+
//链接字体颜色
|
13
|
+
--editify-font-color-link: #079457;
|
14
|
+
//链接字体悬浮色
|
15
|
+
--editify-font-color-link-dark: #05683d;
|
16
|
+
//边框颜色
|
17
|
+
--editify-border-color: #dfdfdf;
|
18
|
+
//默认背景色
|
19
|
+
--editify-background: #fff;
|
20
|
+
//较深的背景色
|
21
|
+
--editify-background-dark: #f7f8fa;
|
22
|
+
//更深的背景色
|
23
|
+
--editify-background-darker: #ebedf0;
|
24
|
+
//代码块背景色
|
25
|
+
--editify-pre-background: #f2f6fb;
|
26
|
+
//反色调字体颜色
|
27
|
+
--editify-reverse-color: #fff;
|
28
|
+
//反色调背景色
|
29
|
+
--editify-reverse-background: #000;
|
30
|
+
//视频背景色
|
31
|
+
--editify-video-background: #000;
|
32
|
+
//代码高亮样式
|
33
|
+
--editify-hljs-color-1: #54489b;
|
34
|
+
--editify-hljs-color-2: #bbb;
|
35
|
+
--editify-hljs-color-3: #0e9a56;
|
36
|
+
--editify-hljs-color-4: #092d5d;
|
37
|
+
--editify-hljs-color-5: #c45d08;
|
38
|
+
--editify-hljs-color-6: #920606;
|
39
|
+
--editify-hljs-color-7: #c45d08;
|
40
|
+
--editify-hljs-color-8: #0d658d;
|
41
|
+
}
|
42
|
+
|
43
|
+
:root[data-editify-dark] {
|
44
|
+
//字体颜色
|
45
|
+
--editify-font-color: #e8e8e8;
|
46
|
+
//较浅的字体颜色(副文本颜色)
|
47
|
+
--editify-font-color-light: #d8d8d8;
|
48
|
+
//更浅的字体颜色(placeholder和禁用字体颜色)
|
49
|
+
--editify-font-color-disabled: #6d6d6d;
|
50
|
+
//较深的字体颜色(编辑器内容区域字体颜色)
|
51
|
+
--editify-font-color-dark: #fff;
|
52
|
+
//链接字体颜色
|
53
|
+
--editify-font-color-link: #079457;
|
54
|
+
//链接字体悬浮色
|
55
|
+
--editify-font-color-link-dark: #05683d;
|
56
|
+
//边框颜色
|
57
|
+
--editify-border-color: #3e3e3e;
|
58
|
+
//默认背景色
|
59
|
+
--editify-background: #1a1a1a;
|
60
|
+
//较深的背景色
|
61
|
+
--editify-background-dark: #222222;
|
62
|
+
//更深的背景色
|
63
|
+
--editify-background-darker: #2c2c2c;
|
64
|
+
//代码块背景色
|
65
|
+
--editify-pre-background: #242424;
|
66
|
+
//反色调字体颜色
|
67
|
+
--editify-reverse-color: #333;
|
68
|
+
//反色调背景色
|
69
|
+
--editify-reverse-background: #f7f8fa;
|
70
|
+
//视频背景色
|
71
|
+
--editify-video-background: #f5f5f5;
|
72
|
+
//代码高亮样式
|
73
|
+
--editify-hljs-color-1: #7765dd;
|
74
|
+
--editify-hljs-color-2: #6a737d;
|
75
|
+
--editify-hljs-color-3: #05b05e;
|
76
|
+
--editify-hljs-color-4: #3b8af2;
|
77
|
+
--editify-hljs-color-5: #e88331;
|
78
|
+
--editify-hljs-color-6: #db0000;
|
79
|
+
--editify-hljs-color-7: #d37222;
|
80
|
+
--editify-hljs-color-8: #0793d4;
|
81
|
+
}
|
package/src/editify/editify.less
CHANGED
@@ -84,7 +84,7 @@
|
|
84
84
|
padding: 6px 10px;
|
85
85
|
line-height: 1.5;
|
86
86
|
color: var(--editify-font-color-dark);
|
87
|
-
font-size:
|
87
|
+
font-size: var(--font-size);
|
88
88
|
position: relative;
|
89
89
|
line-height: 1.5;
|
90
90
|
|
@@ -167,7 +167,7 @@
|
|
167
167
|
color: var(--editify-font-color);
|
168
168
|
border: 1px solid var(--editify-border-color);
|
169
169
|
text-indent: initial;
|
170
|
-
font-size:
|
170
|
+
font-size: var(--font-size);
|
171
171
|
font-weight: normal;
|
172
172
|
}
|
173
173
|
//链接样式
|
@@ -192,7 +192,7 @@
|
|
192
192
|
margin-bottom: 15px;
|
193
193
|
background-color: var(--editify-background);
|
194
194
|
color: var(--editify-font-color-dark);
|
195
|
-
font-size:
|
195
|
+
font-size: var(--font-size);
|
196
196
|
|
197
197
|
* {
|
198
198
|
margin: 0 !important;
|
@@ -247,7 +247,7 @@
|
|
247
247
|
margin: 0 0 15px;
|
248
248
|
font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
|
249
249
|
line-height: 1.5;
|
250
|
-
font-size:
|
250
|
+
font-size: var(--font-size);
|
251
251
|
color: var(--editify-font-color-dark);
|
252
252
|
background-color: var(--editify-pre-background);
|
253
253
|
border: 1px solid var(--editify-border-color);
|
@@ -288,7 +288,7 @@
|
|
288
288
|
padding: 6px 10px 6px 20px;
|
289
289
|
margin: 0 0 15px;
|
290
290
|
line-height: 1.5;
|
291
|
-
font-size:
|
291
|
+
font-size: var(--font-size);
|
292
292
|
color: var(--editify-font-color-light);
|
293
293
|
border-radius: 0;
|
294
294
|
}
|
@@ -306,7 +306,7 @@
|
|
306
306
|
margin-bottom: 15px;
|
307
307
|
position: relative;
|
308
308
|
padding-left: 26px;
|
309
|
-
font-size:
|
309
|
+
font-size: var(--font-size);
|
310
310
|
color: var(--editify-font-color-dark);
|
311
311
|
transition: all 300ms;
|
312
312
|
|
@@ -423,7 +423,7 @@
|
|
423
423
|
|
424
424
|
& > div {
|
425
425
|
margin: 0 0 10px 0;
|
426
|
-
font-size:
|
426
|
+
font-size: var(--font-size);
|
427
427
|
|
428
428
|
&:first-child {
|
429
429
|
margin: 0 0 15px 0;
|
@@ -442,7 +442,7 @@
|
|
442
442
|
border-radius: 4px;
|
443
443
|
margin-bottom: 15px;
|
444
444
|
padding: 10px 10px 10px 60px;
|
445
|
-
font-size:
|
445
|
+
font-size: var(--font-size);
|
446
446
|
|
447
447
|
&::before {
|
448
448
|
position: absolute;
|
@@ -503,7 +503,7 @@
|
|
503
503
|
padding: 6px 10px;
|
504
504
|
overflow-x: hidden;
|
505
505
|
overflow-y: auto;
|
506
|
-
font-size:
|
506
|
+
font-size: var(--font-size);
|
507
507
|
color: var(--editify-reverse-color);
|
508
508
|
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
509
509
|
resize: none;
|
@@ -522,7 +522,7 @@
|
|
522
522
|
position: relative;
|
523
523
|
|
524
524
|
.editify-footer-words {
|
525
|
-
font-size:
|
525
|
+
font-size: var(--font-size);
|
526
526
|
color: var(--editify-font-color-light);
|
527
527
|
line-height: 1;
|
528
528
|
}
|
package/src/index.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { App } from 'vue'
|
2
2
|
import { withInstall } from '@/core/tool'
|
3
3
|
//引入根节点颜色变量样式
|
4
|
-
import '@/css/
|
4
|
+
import '@/css/var.less'
|
5
5
|
//引入字体图标样式
|
6
6
|
import '@/icon/iconfont.css'
|
7
7
|
//引入组件
|
@@ -24,7 +24,7 @@ const install = (app: App) => {
|
|
24
24
|
app.component(Editify.name!, Editify)
|
25
25
|
}
|
26
26
|
//版本号
|
27
|
-
const version = '0.2.
|
27
|
+
const version = '0.2.5'
|
28
28
|
|
29
29
|
//导出AlexElement元素
|
30
30
|
export { AlexElement } from 'alex-editor'
|
@@ -34,7 +34,7 @@
|
|
34
34
|
.editify-attachment-header-item {
|
35
35
|
display: block;
|
36
36
|
text-align: center;
|
37
|
-
font-size:
|
37
|
+
font-size: var(--font-size);
|
38
38
|
color: var(--editify-font-color);
|
39
39
|
opacity: 0.8;
|
40
40
|
transition: all 300ms;
|
@@ -72,7 +72,7 @@
|
|
72
72
|
margin: 0 0 10px 0;
|
73
73
|
padding: 4px 2px;
|
74
74
|
border: none;
|
75
|
-
font-size:
|
75
|
+
font-size: var(--font-size);
|
76
76
|
color: var(--editify-font-color);
|
77
77
|
border-bottom: 1px solid var(--editify-border-color);
|
78
78
|
line-height: 1.5;
|
@@ -95,7 +95,7 @@
|
|
95
95
|
justify-content: flex-end;
|
96
96
|
align-items: center;
|
97
97
|
width: 100%;
|
98
|
-
font-size:
|
98
|
+
font-size: var(--font-size);
|
99
99
|
opacity: 0.8;
|
100
100
|
transition: all 300ms;
|
101
101
|
|
@@ -122,7 +122,7 @@
|
|
122
122
|
margin: 0;
|
123
123
|
padding: 4px 2px;
|
124
124
|
border: none;
|
125
|
-
font-size:
|
125
|
+
font-size: var(--font-size);
|
126
126
|
color: var(--editify-font-color);
|
127
127
|
border-bottom: 1px solid var(--editify-border-color);
|
128
128
|
line-height: 1.5;
|
@@ -7,7 +7,7 @@
|
|
7
7
|
display: block;
|
8
8
|
text-align: left;
|
9
9
|
margin-bottom: 10px;
|
10
|
-
font-size:
|
10
|
+
font-size: var(--font-size);
|
11
11
|
color: var(--editify-font-color);
|
12
12
|
}
|
13
13
|
|
@@ -24,7 +24,7 @@
|
|
24
24
|
border-radius: 2px;
|
25
25
|
margin: 0;
|
26
26
|
padding: 6px;
|
27
|
-
font-size:
|
27
|
+
font-size: var(--font-size);
|
28
28
|
color: var(--editify-font-color);
|
29
29
|
line-height: 1.5;
|
30
30
|
transition: border-color 300ms;
|
@@ -54,7 +54,7 @@
|
|
54
54
|
cursor: pointer;
|
55
55
|
opacity: 0.8;
|
56
56
|
transition: all 300ms;
|
57
|
-
font-size:
|
57
|
+
font-size: var(--font-size);
|
58
58
|
|
59
59
|
&:hover {
|
60
60
|
opacity: 1;
|
package/vite.config.ts
CHANGED
package/src/css/root.less
DELETED
@@ -1,79 +0,0 @@
|
|
1
|
-
:root {
|
2
|
-
//字体颜色
|
3
|
-
--editify-font-color: #555;
|
4
|
-
//较浅的字体颜色(副文本颜色)
|
5
|
-
--editify-font-color-light: #888;
|
6
|
-
//更浅的字体颜色(placeholder和禁用字体颜色)
|
7
|
-
--editify-font-color-disabled: #bbb;
|
8
|
-
//较深的字体颜色(编辑器内容区域字体颜色)
|
9
|
-
--editify-font-color-dark: #333;
|
10
|
-
//链接字体颜色
|
11
|
-
--editify-font-color-link: #079457;
|
12
|
-
//链接字体悬浮色
|
13
|
-
--editify-font-color-link-dark: #05683d;
|
14
|
-
//边框颜色
|
15
|
-
--editify-border-color: #dfdfdf;
|
16
|
-
//默认背景色
|
17
|
-
--editify-background: #fff;
|
18
|
-
//较深的背景色
|
19
|
-
--editify-background-dark: #f7f8fa;
|
20
|
-
//更深的背景色
|
21
|
-
--editify-background-darker: #ebedf0;
|
22
|
-
//代码块背景色
|
23
|
-
--editify-pre-background: #f2f6fb;
|
24
|
-
//反色调字体颜色
|
25
|
-
--editify-reverse-color: #fff;
|
26
|
-
//反色调背景色
|
27
|
-
--editify-reverse-background: #000;
|
28
|
-
//视频背景色
|
29
|
-
--editify-video-background: #000;
|
30
|
-
//代码高亮样式
|
31
|
-
--editify-hljs-color-1: #54489b;
|
32
|
-
--editify-hljs-color-2: #bbb;
|
33
|
-
--editify-hljs-color-3: #0e9a56;
|
34
|
-
--editify-hljs-color-4: #092d5d;
|
35
|
-
--editify-hljs-color-5: #c45d08;
|
36
|
-
--editify-hljs-color-6: #920606;
|
37
|
-
--editify-hljs-color-7: #c45d08;
|
38
|
-
--editify-hljs-color-8: #0d658d;
|
39
|
-
}
|
40
|
-
|
41
|
-
:root[data-editify-dark] {
|
42
|
-
//字体颜色
|
43
|
-
--editify-font-color: #e8e8e8;
|
44
|
-
//较浅的字体颜色(副文本颜色)
|
45
|
-
--editify-font-color-light: #d8d8d8;
|
46
|
-
//更浅的字体颜色(placeholder和禁用字体颜色)
|
47
|
-
--editify-font-color-disabled: #6d6d6d;
|
48
|
-
//较深的字体颜色(编辑器内容区域字体颜色)
|
49
|
-
--editify-font-color-dark: #fff;
|
50
|
-
//链接字体颜色
|
51
|
-
--editify-font-color-link: #079457;
|
52
|
-
//链接字体悬浮色
|
53
|
-
--editify-font-color-link-dark: #05683d;
|
54
|
-
//边框颜色
|
55
|
-
--editify-border-color: #3e3e3e;
|
56
|
-
//默认背景色
|
57
|
-
--editify-background: #1a1a1a;
|
58
|
-
//较深的背景色
|
59
|
-
--editify-background-dark: #222222;
|
60
|
-
//更深的背景色
|
61
|
-
--editify-background-darker: #2c2c2c;
|
62
|
-
//代码块背景色
|
63
|
-
--editify-pre-background: #242424;
|
64
|
-
//反色调字体颜色
|
65
|
-
--editify-reverse-color: #333;
|
66
|
-
//反色调背景色
|
67
|
-
--editify-reverse-background: #f7f8fa;
|
68
|
-
//视频背景色
|
69
|
-
--editify-video-background: #f5f5f5;
|
70
|
-
//代码高亮样式
|
71
|
-
--editify-hljs-color-1: #7765dd;
|
72
|
-
--editify-hljs-color-2: #6a737d;
|
73
|
-
--editify-hljs-color-3: #05b05e;
|
74
|
-
--editify-hljs-color-4: #3b8af2;
|
75
|
-
--editify-hljs-color-5: #e88331;
|
76
|
-
--editify-hljs-color-6: #db0000;
|
77
|
-
--editify-hljs-color-7: #d37222;
|
78
|
-
--editify-hljs-color-8: #0793d4;
|
79
|
-
}
|