vue-editify 0.2.4 → 0.2.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. package/lib/editify.es.js +2 -2
  2. package/lib/editify.umd.js +2 -2
  3. package/lib/index.d.ts +1 -1
  4. package/package.json +1 -1
  5. package/src/components/button/button.less +2 -2
  6. package/src/components/checkbox/checkbox.less +1 -1
  7. package/src/components/colors/colors.less +1 -1
  8. package/src/components/insertImage/insertImage.less +3 -3
  9. package/src/components/insertLink/insertLink.less +3 -3
  10. package/src/components/insertVideo/insertVideo.less +3 -3
  11. package/src/components/layer/layer.less +1 -1
  12. package/src/components/toolbar/toolbar.less +3 -3
  13. package/src/components/tooltip/tooltip.less +1 -1
  14. package/src/css/var.less +81 -6
  15. package/src/editify/editify.less +10 -10
  16. package/src/index.ts +2 -2
  17. package/src/plugins/attachment/insertAttachment/insertAttachment.less +4 -4
  18. package/src/plugins/mathformula/insertMathformula/insertMathformula.less +3 -3
  19. package/vite.config.ts +1 -2
  20. 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.4";
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-editify",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "private": false,
5
5
  "sideEffects": [
6
6
  "*.css"
package/src/components/button/button.less CHANGED
@@ -4,7 +4,7 @@
4
4
  align-items: center;
5
5
  position: relative;
6
6
  color: var(--editify-font-color);
7
- font-size: @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: 14px;
57
+ font-size: var(--font-size);
58
58
 
59
59
  &.editify-rotate {
60
60
  transform: scale(0.6) rotate(180deg);
package/src/components/checkbox/checkbox.less CHANGED
@@ -8,7 +8,7 @@
8
8
  align-items: center;
9
9
  cursor: pointer;
10
10
  user-select: none;
11
- font-size: @font-size;
11
+ font-size: var(--font-size);
12
12
 
13
13
  input[type='checkbox'] {
14
14
  width: 0;
package/src/components/colors/colors.less CHANGED
@@ -1,7 +1,7 @@
1
1
  .editify-colors {
2
2
  display: block;
3
3
  color: var(--editify-font-color);
4
- font-size: @font-size;
4
+ font-size: var(--font-size);
5
5
  padding: 6px 10px;
6
6
  box-sizing: border-box;
7
7
  width: 244px;
package/src/components/insertImage/insertImage.less CHANGED
@@ -34,7 +34,7 @@
34
34
  .editify-image-header-item {
35
35
  display: block;
36
36
  text-align: center;
37
- font-size: @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: @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: @font-size;
99
+ font-size: var(--font-size);
100
100
  opacity: 0.8;
101
101
  transition: all 300ms;
102
102
 
package/src/components/insertLink/insertLink.less CHANGED
@@ -7,7 +7,7 @@
7
7
  display: block;
8
8
  text-align: left;
9
9
  margin-bottom: 10px;
10
- font-size: @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: @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: @font-size;
57
+ font-size: var(--font-size);
58
58
 
59
59
  &:hover {
60
60
  opacity: 1;
package/src/components/insertVideo/insertVideo.less CHANGED
@@ -34,7 +34,7 @@
34
34
  .editify-video-header-item {
35
35
  display: block;
36
36
  text-align: center;
37
- font-size: @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: @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: @font-size;
99
+ font-size: var(--font-size);
100
100
  opacity: 0.8;
101
101
  transition: all 300ms;
102
102
 
package/src/components/layer/layer.less CHANGED
@@ -22,7 +22,7 @@
22
22
  display: block;
23
23
  position: absolute;
24
24
  padding: 0 0 10px 0;
25
- font-size: @font-size;
25
+ font-size: var(--font-size);
26
26
  color: var(--editify-font-color);
27
27
 
28
28
  &[data-editify-placement='bottom'],
package/src/components/toolbar/toolbar.less CHANGED
@@ -18,7 +18,7 @@
18
18
  display: block;
19
19
  text-align: left;
20
20
  margin-bottom: 10px;
21
- font-size: @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: @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: @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/components/tooltip/tooltip.less CHANGED
@@ -9,7 +9,7 @@
9
9
  .editify-tooltip-content {
10
10
  display: block;
11
11
  padding: 4px 6px;
12
- font-size: @font-size-small;
12
+ font-size: 12px;
13
13
  white-space: nowrap;
14
14
  }
15
15
 
package/src/css/var.less CHANGED
@@ -1,6 +1,81 @@
1
- //三角图标大小
2
- @triangle-size: 6px;
3
- //编辑器内的默认字体大小
4
- @font-size: 14px;
5
- //较小的字体（工具提示等）
6
- @font-size-small: 12px;
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: @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: @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: @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: @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: @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: @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: @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: @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: @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: @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/root.less'
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.4'
27
+ const version = '0.2.5'
28
28
 
29
29
  //导出AlexElement元素
30
30
  export { AlexElement } from 'alex-editor'
package/src/plugins/attachment/insertAttachment/insertAttachment.less CHANGED
@@ -34,7 +34,7 @@
34
34
  .editify-attachment-header-item {
35
35
  display: block;
36
36
  text-align: center;
37
- font-size: @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: @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: @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: @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;
package/src/plugins/mathformula/insertMathformula/insertMathformula.less CHANGED
@@ -7,7 +7,7 @@
7
7
  display: block;
8
8
  text-align: left;
9
9
  margin-bottom: 10px;
10
- font-size: @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: @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: @font-size;
57
+ font-size: var(--font-size);
58
58
 
59
59
  &:hover {
60
60
  opacity: 1;
package/vite.config.ts CHANGED
@@ -37,8 +37,7 @@ export default defineConfig({
37
37
  preprocessorOptions: {
38
38
  less: {
39
39
  // 使用 less 编写样式的 UI 库（如 antd）时建议加入这个设置
40
- javascriptEnabled: true,
41
- additionalData: `@import "src/css/var.less";`
40
+ javascriptEnabled: true
42
41
  }
43
42
  }
44
43
  },
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
- }