vue-editify 0.2.3 → 0.2.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. package/examples/App.vue +35 -10
  2. package/lib/editify/editify.vue.d.ts +9 -0
  3. package/lib/editify/props.d.ts +4 -0
  4. package/lib/editify.es.js +29 -8
  5. package/lib/editify.umd.js +2 -2
  6. package/lib/index.d.ts +10 -1
  7. package/package.json +1 -1
  8. package/src/components/button/button.less +16 -16
  9. package/src/components/checkbox/checkbox.less +14 -14
  10. package/src/components/colors/colors.less +9 -9
  11. package/src/components/insertImage/insertImage.less +13 -13
  12. package/src/components/insertLink/insertLink.less +9 -9
  13. package/src/components/insertTable/insertTable.less +4 -4
  14. package/src/components/insertVideo/insertVideo.less +13 -13
  15. package/src/components/layer/layer.less +6 -6
  16. package/src/components/menu/menu.less +7 -7
  17. package/src/components/toolbar/toolbar.less +10 -10
  18. package/src/components/tooltip/tooltip.less +1 -1
  19. package/src/components/tooltip/tooltip.vue +4 -2
  20. package/src/components/triangle/triangle.less +11 -8
  21. package/src/css/hljs.less +8 -8
  22. package/src/css/var.less +81 -0
  23. package/src/editify/editify.less +56 -55
  24. package/src/editify/editify.vue +17 -0
  25. package/src/editify/props.ts +5 -0
  26. package/src/index.ts +3 -1
  27. package/src/plugins/attachment/insertAttachment/insertAttachment.less +19 -19
  28. package/src/plugins/mathformula/insertMathformula/insertMathformula.less +9 -9
  29. package/vite.config.ts +1 -2
  30. package/src/css/base.less +0 -32
package/src/components/tooltip/tooltip.vue CHANGED
@@ -3,13 +3,13 @@
3
3
  <div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
4
4
  <slot></slot>
5
5
  </div>
6
- <Layer v-model="show" :node="targetRef" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade" :z-index="10">
6
+ <Layer v-model="show" :node="targetRef" border :border-color="isDark ? '#e8e8e8' : '#1a1a1a'" :background="isDark ? '#e8e8e8' : '#1a1a1a'" show-triangle :color="isDark ? '#1a1a1a' : '#e8e8e8'" placement="bottom" animation="fade" :z-index="10">
7
7
  <div class="editify-tooltip-content">{{ content }}</div>
8
8
  </Layer>
9
9
  </div>
10
10
  </template>
11
11
  <script setup lang="ts">
12
- import { ref } from 'vue'
12
+ import { ComputedRef, inject, ref } from 'vue'
13
13
  import Layer from '@/components/layer/layer.vue'
14
14
  import { TooltipProps } from './props'
15
15
 
@@ -18,6 +18,8 @@ defineOptions({
18
18
  })
19
19
  const props = defineProps(TooltipProps)
20
20
 
21
+ const isDark = inject<ComputedRef<boolean>>('isDark')
22
+
21
23
  const show = ref<boolean>(false)
22
24
  const targetRef = ref<HTMLElement | null>(null)
23
25
 
package/src/components/triangle/triangle.less CHANGED
@@ -1,3 +1,6 @@
1
+ //三角图标大小
2
+ @triangle-size: 6px;
3
+
1
4
  .editify-triangle {
2
5
  position: relative;
3
6
  display: inline-block;
@@ -19,11 +22,11 @@
19
22
 
20
23
  &[data-editify-placement='top'] {
21
24
  border-top: none;
22
- border-bottom-color: @border-color;
25
+ border-bottom-color: var(--editify-border-color);
23
26
 
24
27
  .editify-triangle-el {
25
28
  border-top: none;
26
- border-bottom-color: @background;
29
+ border-bottom-color: var(--editify-background);
27
30
  left: 1px;
28
31
  top: 1.5px;
29
32
  right: auto;
@@ -34,11 +37,11 @@
34
37
 
35
38
  &[data-editify-placement='bottom'] {
36
39
  border-bottom: none;
37
- border-top-color: @border-color;
40
+ border-top-color: var(--editify-border-color);
38
41
 
39
42
  .editify-triangle-el {
40
43
  border-bottom: none;
41
- border-top-color: @background;
44
+ border-top-color: var(--editify-background);
42
45
  left: 1px;
43
46
  bottom: 1.5px;
44
47
  top: auto;
@@ -49,11 +52,11 @@
49
52
 
50
53
  &[data-editify-placement='left'] {
51
54
  border-left: none;
52
- border-right-color: @border-color;
55
+ border-right-color: var(--editify-border-color);
53
56
 
54
57
  .editify-triangle-el {
55
58
  border-left: none;
56
- border-right-color: @background;
59
+ border-right-color: var(--editify-background);
57
60
  left: 1.5px;
58
61
  top: 1px;
59
62
  right: auto;
@@ -64,11 +67,11 @@
64
67
 
65
68
  &[data-editify-placement='right'] {
66
69
  border-right: none;
67
- border-left-color: @border-color;
70
+ border-left-color: var(--editify-border-color);
68
71
 
69
72
  .editify-triangle-el {
70
73
  border-right: none;
71
- border-left-color: @background;
74
+ border-left-color: var(--editify-background);
72
75
  right: 1.5px;
73
76
  top: 1px;
74
77
  bottom: auto;
package/src/css/hljs.less CHANGED
@@ -10,11 +10,11 @@
10
10
  .editify-hljs-template-variable,
11
11
  .editify-hljs-deletion,
12
12
  .editify-hljs-variable {
13
- color: #54489b;
13
+ color: var(--editify-hljs-color-1);
14
14
  }
15
15
  .editify-hljs-comment,
16
16
  .editify-hljs-quote {
17
- color: #bbb;
17
+ color: var(--editify-hljs-color-2);
18
18
  }
19
19
  .editify-hljs-bullet,
20
20
  .editify-hljs-link,
@@ -22,7 +22,7 @@
22
22
  .editify-hljs-regexp,
23
23
  .editify-hljs-attr,
24
24
  .editify-hljs-attribute {
25
- color: #0e9a56;
25
+ color: var(--editify-hljs-color-3);
26
26
  }
27
27
 
28
28
  .editify-hljs-built_in,
@@ -34,21 +34,21 @@
34
34
  .editify-hljs-tag,
35
35
  .editify-hljs-literal,
36
36
  .editify-hljs-type {
37
- color: #092d5d;
37
+ color: var(--editify-hljs-color-4);
38
38
  }
39
39
 
40
40
  .editify-hljs-title {
41
- color: #c45d08;
41
+ color: var(--editify-hljs-color-5);
42
42
  }
43
43
 
44
44
  .editify-hljs-selector-tag {
45
- color: #920606;
45
+ color: var(--editify-hljs-color-6);
46
46
  }
47
47
 
48
48
  .editify-hljs-selector-class {
49
- color: #c45d08;
49
+ color: var(--editify-hljs-color-7);
50
50
  }
51
51
 
52
52
  .editify-hljs-selector-id {
53
- color: #0d658d;
53
+ color: var(--editify-hljs-color-8);
54
54
  }
package/src/css/var.less ADDED
@@ -0,0 +1,81 @@
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
@@ -26,7 +26,7 @@
26
26
  top: 0;
27
27
  width: 100vw !important;
28
28
  height: 100vh !important;
29
- background: @background;
29
+ background: var(--editify-background);
30
30
 
31
31
  .editify-body {
32
32
  border-radius: 0;
@@ -49,13 +49,13 @@
49
49
  height: 0;
50
50
  flex: 1;
51
51
  position: relative;
52
- background-color: @background;
52
+ background-color: var(--editify-background);
53
53
  padding: 1px;
54
54
  border-radius: 4px;
55
55
 
56
56
  &.editify-border {
57
- border: 1px solid @border-color;
58
- transition: all 500ms;
57
+ border: 1px solid var(--editify-border-color);
58
+ transition: all 300ms;
59
59
 
60
60
  &.editify-menu_inner {
61
61
  border-top: none;
@@ -83,8 +83,8 @@
83
83
  border-radius: inherit;
84
84
  padding: 6px 10px;
85
85
  line-height: 1.5;
86
- color: @font-color-dark;
87
- font-size: @font-size;
86
+ color: var(--editify-font-color-dark);
87
+ font-size: var(--font-size);
88
88
  position: relative;
89
89
  line-height: 1.5;
90
90
 
@@ -98,7 +98,7 @@
98
98
  content: attr(data-editify-placeholder);
99
99
  font-size: inherit;
100
100
  font-family: inherit;
101
- color: @font-color-disabled;
101
+ color: var(--editify-font-color-disabled);
102
102
  line-height: inherit;
103
103
  padding: 6px 10px;
104
104
  cursor: text;
@@ -163,36 +163,36 @@
163
163
  border-radius: 4px;
164
164
  line-height: 1;
165
165
  font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
166
- background-color: @pre-background;
167
- color: @font-color;
168
- border: 1px solid @border-color;
166
+ background-color: var(--editify-pre-background);
167
+ color: var(--editify-font-color);
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
  //链接样式
174
174
  :deep(a) {
175
- color: @font-color-link;
176
- transition: all 200ms;
175
+ color: var(--editify-font-color-link);
176
+ transition: all 300ms;
177
177
  text-decoration: none;
178
178
  cursor: text;
179
179
 
180
180
  &:hover {
181
- color: @font-color-link-dark;
181
+ color: var(--editify-font-color-link-dark);
182
182
  text-decoration: underline;
183
183
  }
184
184
  }
185
185
  //表格样式
186
186
  :deep(table) {
187
187
  width: 100%;
188
- border: 1px solid @border-color;
188
+ border: 1px solid var(--editify-border-color);
189
189
  margin: 0;
190
190
  padding: 0;
191
191
  border-collapse: collapse;
192
192
  margin-bottom: 15px;
193
- background-color: @background;
194
- color: @font-color-dark;
195
- font-size: @font-size;
193
+ background-color: var(--editify-background);
194
+ color: var(--editify-font-color-dark);
195
+ font-size: var(--font-size);
196
196
 
197
197
  * {
198
198
  margin: 0 !important;
@@ -207,7 +207,7 @@
207
207
  padding: 0;
208
208
 
209
209
  &:first-child {
210
- background-color: @background-darker;
210
+ background-color: var(--editify-background-darker);
211
211
 
212
212
  td {
213
213
  font-weight: bold;
@@ -217,7 +217,7 @@
217
217
 
218
218
  td {
219
219
  margin: 0;
220
- border: 1px solid @border-color;
220
+ border: 1px solid var(--editify-border-color);
221
221
  padding: 6px 10px;
222
222
  position: relative;
223
223
 
@@ -247,13 +247,14 @@
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;
251
- color: @font-color-dark;
252
- background-color: @pre-background;
253
- border: 1px solid @border-color;
250
+ font-size: var(--font-size);
251
+ color: var(--editify-font-color-dark);
252
+ background-color: var(--editify-pre-background);
253
+ border: 1px solid var(--editify-border-color);
254
254
  border-radius: 4px;
255
255
  overflow: auto;
256
256
  position: relative;
257
+ transition: all 300ms;
257
258
  }
258
259
  //图片样式
259
260
  :deep(img) {
@@ -274,7 +275,7 @@
274
275
  width: 30%;
275
276
  border-radius: 2px;
276
277
  vertical-align: text-bottom;
277
- background-color: #000;
278
+ background-color: var(--editify-video-background);
278
279
  object-fit: contain;
279
280
  margin: 0;
280
281
  max-width: 100%;
@@ -283,12 +284,12 @@
283
284
  //引用样式
284
285
  :deep(blockquote) {
285
286
  display: block;
286
- border-left: 8px solid @background-darker;
287
+ border-left: 8px solid var(--editify-background-darker);
287
288
  padding: 6px 10px 6px 20px;
288
289
  margin: 0 0 15px;
289
290
  line-height: 1.5;
290
- font-size: @font-size;
291
- color: @font-color-light;
291
+ font-size: var(--font-size);
292
+ color: var(--editify-font-color-light);
292
293
  border-radius: 0;
293
294
  }
294
295
  //分隔线样式
@@ -296,7 +297,7 @@
296
297
  display: block;
297
298
  width: 100%;
298
299
  height: 1px;
299
- background-color: @font-color-disabled;
300
+ background-color: var(--editify-font-color-disabled);
300
301
  border: none;
301
302
  margin: 10px 0;
302
303
  }
@@ -305,17 +306,17 @@
305
306
  margin-bottom: 15px;
306
307
  position: relative;
307
308
  padding-left: 26px;
308
- font-size: @font-size;
309
- color: @font-color-dark;
310
- transition: all 200ms;
309
+ font-size: var(--font-size);
310
+ color: var(--editify-font-color-dark);
311
+ transition: all 300ms;
311
312
 
312
313
  &::before {
313
314
  display: block;
314
315
  width: 16px;
315
316
  height: 16px;
316
317
  border-radius: 2px;
317
- border: 1px solid @font-color-light;
318
- transition: all 200ms;
318
+ border: 1px solid var(--editify-font-color-light);
319
+ transition: all 300ms;
319
320
  box-sizing: border-box;
320
321
  user-select: none;
321
322
  content: '';
@@ -336,7 +337,7 @@
336
337
  left: 3px;
337
338
  top: 50%;
338
339
  margin-top: -2px;
339
- border: 1px solid @font-color-light;
340
+ border: 1px solid var(--editify-font-color-light);
340
341
  border-top: none;
341
342
  border-right: none;
342
343
  transform: translateY(-50%) rotate(-45deg);
@@ -345,12 +346,12 @@
345
346
  z-index: 2;
346
347
  cursor: pointer;
347
348
  opacity: 0;
348
- transition: all 200ms;
349
+ transition: all 300ms;
349
350
  }
350
351
 
351
352
  &[data-editify-task='checked'] {
352
353
  text-decoration: line-through;
353
- color: @font-color-light;
354
+ color: var(--editify-font-color-light);
354
355
  &::after {
355
356
  opacity: 1;
356
357
  }
@@ -360,8 +361,8 @@
360
361
  //附件样式
361
362
  :deep(span[data-editify-attachment]) {
362
363
  display: inline;
363
- color: @font-color-link;
364
- transition: all 200ms;
364
+ color: var(--editify-font-color-link);
365
+ transition: all 300ms;
365
366
  position: relative;
366
367
  margin: 0 10px;
367
368
  font-size: 14px;
@@ -381,7 +382,7 @@
381
382
  }
382
383
 
383
384
  &:hover {
384
- color: @font-color-link-dark;
385
+ color: var(--editify-font-color-link-dark);
385
386
  cursor: pointer;
386
387
  }
387
388
  }
@@ -389,11 +390,11 @@
389
390
  //数学公式样式
390
391
  :deep(span[data-editify-mathformula]) {
391
392
  display: inline-block;
392
- border: 1px dashed @border-color;
393
+ border: 1px dashed var(--editify-border-color);
393
394
  padding: 6px 10px;
394
395
  border-radius: 4px;
395
396
  margin: 0 4px;
396
- transition: all 200ms;
397
+ transition: all 300ms;
397
398
  max-width: 100%;
398
399
 
399
400
  .katex,
@@ -404,7 +405,7 @@
404
405
 
405
406
  &:hover {
406
407
  cursor: pointer;
407
- background: @background-darker;
408
+ background: var(--editify-background-darker);
408
409
  }
409
410
  }
410
411
 
@@ -413,21 +414,21 @@
413
414
  display: block;
414
415
  position: relative;
415
416
  width: 100%;
416
- background-color: @background-dark;
417
- color: @font-color;
417
+ background-color: var(--editify-background-dark);
418
+ color: var(--editify-font-color);
418
419
  border-radius: 4px;
419
420
  margin-bottom: 15px;
420
421
  padding: 10px 10px 1px 10px;
421
- border: 1px solid @border-color;
422
+ border: 1px solid var(--editify-border-color);
422
423
 
423
424
  & > div {
424
425
  margin: 0 0 10px 0;
425
- font-size: @font-size;
426
+ font-size: var(--font-size);
426
427
 
427
428
  &:first-child {
428
429
  margin: 0 0 15px 0;
429
430
  font-size: 18px;
430
- border-bottom: 1px solid @border-color;
431
+ border-bottom: 1px solid var(--editify-border-color);
431
432
  padding-bottom: 8px;
432
433
  }
433
434
  }
@@ -441,7 +442,7 @@
441
442
  border-radius: 4px;
442
443
  margin-bottom: 15px;
443
444
  padding: 10px 10px 10px 60px;
444
- font-size: @font-size;
445
+ font-size: var(--font-size);
445
446
 
446
447
  &::before {
447
448
  position: absolute;
@@ -497,13 +498,13 @@
497
498
  position: absolute;
498
499
  left: 0;
499
500
  top: 0;
500
- background-color: @reverse-background;
501
+ background-color: var(--editify-reverse-background);
501
502
  margin: 0;
502
503
  padding: 6px 10px;
503
504
  overflow-x: hidden;
504
505
  overflow-y: auto;
505
- font-size: @font-size;
506
- color: @reverse-color;
506
+ font-size: var(--font-size);
507
+ color: var(--editify-reverse-color);
507
508
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
508
509
  resize: none;
509
510
  border: none;
@@ -521,13 +522,13 @@
521
522
  position: relative;
522
523
 
523
524
  .editify-footer-words {
524
- font-size: @font-size;
525
- color: @font-color-light;
525
+ font-size: var(--font-size);
526
+ color: var(--editify-font-color-light);
526
527
  line-height: 1;
527
528
  }
528
529
 
529
530
  //全屏模式下并且不是代码视图下，显示一个上边框
530
531
  &.editify-fullscreen {
531
- border-top: 1px solid @border-color;
532
+ border-top: 1px solid var(--editify-border-color);
532
533
  }
533
534
  }
package/src/editify/editify.vue CHANGED
@@ -135,6 +135,8 @@ const pluginResultList = computed<PluginResultType[]>(() => {
135
135
  const menuConfig = computed<MenuConfigType>(() => {
136
136
  return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), props.menu || {})
137
137
  })
138
+ //是否深色模式
139
+ const isDark = computed<boolean>(() => props.dark)
138
140
 
139
141
  //编辑器内部修改值的方法
140
142
  const internalModify = (val: string) => {
@@ -988,6 +990,20 @@ watch(
988
990
  }
989
991
  }
990
992
  )
993
+ //监听深色模式切换
994
+ watch(
995
+ () => isDark.value,
996
+ newVal => {
997
+ if (newVal) {
998
+ document.documentElement.setAttribute('data-editify-dark', 'true')
999
+ } else {
1000
+ document.documentElement.removeAttribute('data-editify-dark')
1001
+ }
1002
+ },
1003
+ {
1004
+ immediate: true
1005
+ }
1006
+ )
991
1007
 
992
1008
  onMounted(() => {
993
1009
  //创建编辑器
@@ -1026,6 +1042,7 @@ provide('editor', editor)
1026
1042
  provide('dataRangeCaches', dataRangeCaches)
1027
1043
  provide('showBorder', showBorder)
1028
1044
  provide('pluginResultList', pluginResultList)
1045
+ provide('isDark', isDark)
1029
1046
 
1030
1047
  defineExpose({
1031
1048
  editor,
package/src/editify/props.ts CHANGED
@@ -164,6 +164,11 @@ export const EditifyProps = {
164
164
  default: function () {
165
165
  return []
166
166
  }
167
+ },
168
+ //是否使用深色模式
169
+ dark: {
170
+ type: Boolean,
171
+ default: false
167
172
  }
168
173
  }
169
174
 
package/src/index.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { App } from 'vue'
2
2
  import { withInstall } from '@/core/tool'
3
+ //引入根节点颜色变量样式
4
+ import '@/css/var.less'
3
5
  //引入字体图标样式
4
6
  import '@/icon/iconfont.css'
5
7
  //引入组件
@@ -22,7 +24,7 @@ const install = (app: App) => {
22
24
  app.component(Editify.name!, Editify)
23
25
  }
24
26
  //版本号
25
- const version = '0.2.3'
27
+ const version = '0.2.5'
26
28
 
27
29
  //导出AlexElement元素
28
30
  export { AlexElement } from 'alex-editor'