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.
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
- }