@mdaemon/html-editor 1.0.7 → 1.0.9
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/README.md +20 -3
- package/dist/index.d.ts +47 -1
- package/dist/index.js +594 -71
- package/dist/index.mjs +594 -71
- package/dist/styles.css +207 -45
- package/package.json +12 -3
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
package/dist/styles.css
CHANGED
|
@@ -26,8 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
.md-toolbar {
|
|
28
28
|
display: flex;
|
|
29
|
-
|
|
30
|
-
align-items: center;
|
|
29
|
+
align-items: flex-start;
|
|
31
30
|
padding: 4px;
|
|
32
31
|
background: #f0f0f0;
|
|
33
32
|
border-bottom: 1px solid #ccc;
|
|
@@ -39,9 +38,6 @@
|
|
|
39
38
|
top: 0;
|
|
40
39
|
z-index: 10;
|
|
41
40
|
}
|
|
42
|
-
.md-toolbar.md-toolbar-sliding {
|
|
43
|
-
flex-wrap: wrap;
|
|
44
|
-
}
|
|
45
41
|
|
|
46
42
|
.md-toolbar-group {
|
|
47
43
|
display: flex;
|
|
@@ -56,28 +52,24 @@
|
|
|
56
52
|
margin: 0 4px;
|
|
57
53
|
}
|
|
58
54
|
|
|
59
|
-
.md-toolbar-
|
|
55
|
+
.md-toolbar-buttons {
|
|
60
56
|
display: flex;
|
|
61
57
|
flex-wrap: wrap;
|
|
62
58
|
align-items: center;
|
|
63
59
|
gap: 2px;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
flex-wrap: wrap;
|
|
70
|
-
align-items: center;
|
|
71
|
-
gap: 2px;
|
|
72
|
-
width: 100%;
|
|
60
|
+
flex: 1;
|
|
61
|
+
min-width: 0;
|
|
62
|
+
max-height: 31px;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
transition: max-height 0.2s ease;
|
|
73
65
|
}
|
|
74
|
-
.md-toolbar-
|
|
75
|
-
|
|
66
|
+
.md-toolbar-buttons.md-toolbar-expanded {
|
|
67
|
+
max-height: none;
|
|
76
68
|
}
|
|
77
69
|
|
|
78
70
|
.md-toolbar-toggle-btn {
|
|
79
|
-
margin-left: auto;
|
|
80
71
|
flex-shrink: 0;
|
|
72
|
+
align-self: flex-start;
|
|
81
73
|
}
|
|
82
74
|
|
|
83
75
|
.md-toolbar-btn {
|
|
@@ -102,7 +94,7 @@
|
|
|
102
94
|
background: #d0d0d0;
|
|
103
95
|
}
|
|
104
96
|
.md-toolbar-btn.md-toolbar-btn-active {
|
|
105
|
-
background: #
|
|
97
|
+
background: #2271b2;
|
|
106
98
|
color: #fff;
|
|
107
99
|
}
|
|
108
100
|
.md-toolbar-btn:disabled {
|
|
@@ -197,7 +189,7 @@
|
|
|
197
189
|
background: #f0f0f0;
|
|
198
190
|
}
|
|
199
191
|
.md-toolbar-dropdown-item.md-toolbar-dropdown-item-selected {
|
|
200
|
-
background: #
|
|
192
|
+
background: #2271b2;
|
|
201
193
|
color: #fff;
|
|
202
194
|
}
|
|
203
195
|
|
|
@@ -286,13 +278,13 @@
|
|
|
286
278
|
padding: 4px 12px;
|
|
287
279
|
border: none;
|
|
288
280
|
border-radius: 3px;
|
|
289
|
-
background: #
|
|
281
|
+
background: #2271b2;
|
|
290
282
|
color: #fff;
|
|
291
283
|
cursor: pointer;
|
|
292
284
|
font-size: 12px;
|
|
293
285
|
}
|
|
294
286
|
.md-toolbar-colorpicker-apply:hover {
|
|
295
|
-
background: #
|
|
287
|
+
background: #2761c4;
|
|
296
288
|
}
|
|
297
289
|
|
|
298
290
|
.md-editor-content {
|
|
@@ -340,7 +332,7 @@
|
|
|
340
332
|
font-size: 13px;
|
|
341
333
|
}
|
|
342
334
|
.md-editor-body a {
|
|
343
|
-
color: #
|
|
335
|
+
color: #2271b2;
|
|
344
336
|
text-decoration: underline;
|
|
345
337
|
}
|
|
346
338
|
.md-editor-body img {
|
|
@@ -452,9 +444,9 @@
|
|
|
452
444
|
background: #f0f0f0;
|
|
453
445
|
}
|
|
454
446
|
.md-charmap-tab.md-charmap-tab-active {
|
|
455
|
-
background: #
|
|
447
|
+
background: #2271b2;
|
|
456
448
|
color: #fff;
|
|
457
|
-
border-color: #
|
|
449
|
+
border-color: #2271b2;
|
|
458
450
|
}
|
|
459
451
|
|
|
460
452
|
.md-charmap-grid {
|
|
@@ -477,7 +469,7 @@
|
|
|
477
469
|
}
|
|
478
470
|
.md-charmap-char:hover {
|
|
479
471
|
background: #f0f0f0;
|
|
480
|
-
border-color: #
|
|
472
|
+
border-color: #2271b2;
|
|
481
473
|
}
|
|
482
474
|
|
|
483
475
|
.md-charmap-preview {
|
|
@@ -527,8 +519,8 @@
|
|
|
527
519
|
background: #f0f0f0;
|
|
528
520
|
}
|
|
529
521
|
.md-emoji-tab.md-emoji-tab-active {
|
|
530
|
-
border-color: #
|
|
531
|
-
background: rgba(
|
|
522
|
+
border-color: #2271b2;
|
|
523
|
+
background: rgba(34, 113, 178, 0.1);
|
|
532
524
|
}
|
|
533
525
|
|
|
534
526
|
.md-emoji-search {
|
|
@@ -544,7 +536,7 @@
|
|
|
544
536
|
}
|
|
545
537
|
.md-emoji-search-input:focus {
|
|
546
538
|
outline: none;
|
|
547
|
-
border-color: #
|
|
539
|
+
border-color: #2271b2;
|
|
548
540
|
}
|
|
549
541
|
|
|
550
542
|
.md-emoji-grid {
|
|
@@ -599,7 +591,7 @@
|
|
|
599
591
|
}
|
|
600
592
|
.md-searchreplace-input:focus {
|
|
601
593
|
outline: none;
|
|
602
|
-
border-color: #
|
|
594
|
+
border-color: #2271b2;
|
|
603
595
|
}
|
|
604
596
|
|
|
605
597
|
.md-searchreplace-count {
|
|
@@ -643,12 +635,12 @@
|
|
|
643
635
|
background: #f0f0f0;
|
|
644
636
|
}
|
|
645
637
|
.md-btn.md-btn-primary {
|
|
646
|
-
background: #
|
|
647
|
-
border-color: #
|
|
638
|
+
background: #2271b2;
|
|
639
|
+
border-color: #2271b2;
|
|
648
640
|
color: #fff;
|
|
649
641
|
}
|
|
650
642
|
.md-btn.md-btn-primary:hover {
|
|
651
|
-
background: #
|
|
643
|
+
background: #2761c4;
|
|
652
644
|
}
|
|
653
645
|
|
|
654
646
|
.md-image-upload-dialog {
|
|
@@ -675,9 +667,9 @@
|
|
|
675
667
|
background: #f0f0f0;
|
|
676
668
|
}
|
|
677
669
|
.md-image-upload-tab.md-image-upload-tab-active {
|
|
678
|
-
background: #
|
|
670
|
+
background: #2271b2;
|
|
679
671
|
color: #fff;
|
|
680
|
-
border-color: #
|
|
672
|
+
border-color: #2271b2;
|
|
681
673
|
}
|
|
682
674
|
|
|
683
675
|
.md-image-upload-dropzone {
|
|
@@ -694,12 +686,12 @@
|
|
|
694
686
|
text-align: center;
|
|
695
687
|
}
|
|
696
688
|
.md-image-upload-dropzone:hover {
|
|
697
|
-
border-color: #
|
|
698
|
-
background: rgba(
|
|
689
|
+
border-color: #2271b2;
|
|
690
|
+
background: rgba(34, 113, 178, 0.03);
|
|
699
691
|
}
|
|
700
692
|
.md-image-upload-dropzone.md-image-upload-dropzone-active {
|
|
701
|
-
border-color: #
|
|
702
|
-
background: rgba(
|
|
693
|
+
border-color: #2271b2;
|
|
694
|
+
background: rgba(34, 113, 178, 0.08);
|
|
703
695
|
}
|
|
704
696
|
|
|
705
697
|
.md-image-upload-dropzone-icon {
|
|
@@ -736,7 +728,7 @@
|
|
|
736
728
|
}
|
|
737
729
|
.md-image-upload-row input:focus {
|
|
738
730
|
outline: none;
|
|
739
|
-
border-color: #
|
|
731
|
+
border-color: #2271b2;
|
|
740
732
|
}
|
|
741
733
|
|
|
742
734
|
.md-image-upload-preview {
|
|
@@ -781,7 +773,7 @@
|
|
|
781
773
|
.md-image-upload-progress-fill {
|
|
782
774
|
height: 100%;
|
|
783
775
|
width: 0%;
|
|
784
|
-
background: #
|
|
776
|
+
background: #2271b2;
|
|
785
777
|
border-radius: 4px;
|
|
786
778
|
transition: width 0.2s;
|
|
787
779
|
}
|
|
@@ -799,8 +791,82 @@
|
|
|
799
791
|
margin-top: 16px;
|
|
800
792
|
}
|
|
801
793
|
|
|
794
|
+
.md-source-editor-dialog {
|
|
795
|
+
width: 700px;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
.md-source-editor-textarea {
|
|
799
|
+
width: 100%;
|
|
800
|
+
height: 400px;
|
|
801
|
+
padding: 10px;
|
|
802
|
+
border: 1px solid #ccc;
|
|
803
|
+
border-radius: 3px;
|
|
804
|
+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
805
|
+
font-size: 13px;
|
|
806
|
+
line-height: 1.5;
|
|
807
|
+
resize: vertical;
|
|
808
|
+
white-space: pre-wrap;
|
|
809
|
+
tab-size: 2;
|
|
810
|
+
box-sizing: border-box;
|
|
811
|
+
color: #222;
|
|
812
|
+
background: #fff;
|
|
813
|
+
}
|
|
814
|
+
.md-source-editor-textarea:focus {
|
|
815
|
+
outline: none;
|
|
816
|
+
border-color: #2271b2;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
.md-source-editor-footer {
|
|
820
|
+
display: flex;
|
|
821
|
+
justify-content: flex-end;
|
|
822
|
+
gap: 8px;
|
|
823
|
+
margin-top: 16px;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.md-link-editor-dialog {
|
|
827
|
+
width: 480px;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
.md-link-editor-row {
|
|
831
|
+
margin-bottom: 12px;
|
|
832
|
+
}
|
|
833
|
+
.md-link-editor-row label {
|
|
834
|
+
display: block;
|
|
835
|
+
font-size: 13px;
|
|
836
|
+
margin-bottom: 4px;
|
|
837
|
+
color: #555;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
.md-link-editor-input,
|
|
841
|
+
.md-link-editor-select {
|
|
842
|
+
width: 100%;
|
|
843
|
+
padding: 8px 10px;
|
|
844
|
+
border: 1px solid #ccc;
|
|
845
|
+
border-radius: 3px;
|
|
846
|
+
font-size: 13px;
|
|
847
|
+
box-sizing: border-box;
|
|
848
|
+
color: #222;
|
|
849
|
+
background: #fff;
|
|
850
|
+
}
|
|
851
|
+
.md-link-editor-input:focus,
|
|
852
|
+
.md-link-editor-select:focus {
|
|
853
|
+
outline: none;
|
|
854
|
+
border-color: #2271b2;
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
.md-link-editor-select {
|
|
858
|
+
appearance: auto;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
.md-link-editor-footer {
|
|
862
|
+
display: flex;
|
|
863
|
+
justify-content: flex-end;
|
|
864
|
+
gap: 8px;
|
|
865
|
+
margin-top: 16px;
|
|
866
|
+
}
|
|
867
|
+
|
|
802
868
|
.md-editor-dragover .md-editor-content {
|
|
803
|
-
box-shadow: 0 0 10px 1px rgba(
|
|
869
|
+
box-shadow: 0 0 10px 1px rgba(34, 113, 178, 0.5) inset;
|
|
804
870
|
}
|
|
805
871
|
|
|
806
872
|
.md-editor-oxide-dark {
|
|
@@ -818,7 +884,7 @@
|
|
|
818
884
|
background: #2d3e50;
|
|
819
885
|
}
|
|
820
886
|
.md-editor-oxide-dark .md-toolbar-btn.md-toolbar-btn-active {
|
|
821
|
-
background: #
|
|
887
|
+
background: #2271b2;
|
|
822
888
|
}
|
|
823
889
|
.md-editor-oxide-dark .md-toolbar-dropdown-btn {
|
|
824
890
|
color: #fff;
|
|
@@ -872,8 +938,8 @@
|
|
|
872
938
|
border-color: #364049;
|
|
873
939
|
}
|
|
874
940
|
.md-editor-oxide-dark .md-image-upload-dropzone:hover, .md-editor-oxide-dark .md-image-upload-dropzone.md-image-upload-dropzone-active {
|
|
875
|
-
border-color: #
|
|
876
|
-
background: rgba(
|
|
941
|
+
border-color: #2271b2;
|
|
942
|
+
background: rgba(34, 113, 178, 0.1);
|
|
877
943
|
}
|
|
878
944
|
.md-editor-oxide-dark .md-image-upload-dropzone-icon {
|
|
879
945
|
color: #666;
|
|
@@ -893,6 +959,59 @@
|
|
|
893
959
|
.md-editor-oxide-dark .md-image-upload-progress-bar {
|
|
894
960
|
background: #364049;
|
|
895
961
|
}
|
|
962
|
+
.md-editor-oxide-dark .md-dialog {
|
|
963
|
+
background: #222f3e;
|
|
964
|
+
border-color: #364049;
|
|
965
|
+
color: #fff;
|
|
966
|
+
}
|
|
967
|
+
.md-editor-oxide-dark .md-dialog-header {
|
|
968
|
+
background: #1a252f;
|
|
969
|
+
border-color: #364049;
|
|
970
|
+
color: #fff;
|
|
971
|
+
}
|
|
972
|
+
.md-editor-oxide-dark .md-dialog-close {
|
|
973
|
+
color: #fff;
|
|
974
|
+
}
|
|
975
|
+
.md-editor-oxide-dark .md-dialog-close:hover {
|
|
976
|
+
background: #2d3e50;
|
|
977
|
+
}
|
|
978
|
+
.md-editor-oxide-dark .md-btn {
|
|
979
|
+
background: #1a252f;
|
|
980
|
+
border-color: #364049;
|
|
981
|
+
color: #fff;
|
|
982
|
+
}
|
|
983
|
+
.md-editor-oxide-dark .md-btn:hover {
|
|
984
|
+
background: #2d3e50;
|
|
985
|
+
}
|
|
986
|
+
.md-editor-oxide-dark .md-btn.md-btn-primary {
|
|
987
|
+
background: #2271b2;
|
|
988
|
+
border-color: #2271b2;
|
|
989
|
+
color: #fff;
|
|
990
|
+
}
|
|
991
|
+
.md-editor-oxide-dark .md-btn.md-btn-primary:hover {
|
|
992
|
+
background: #2761c4;
|
|
993
|
+
}
|
|
994
|
+
.md-editor-oxide-dark .md-source-editor-textarea {
|
|
995
|
+
background: #1a252f;
|
|
996
|
+
border-color: #364049;
|
|
997
|
+
color: #fff;
|
|
998
|
+
}
|
|
999
|
+
.md-editor-oxide-dark .md-source-editor-textarea:focus {
|
|
1000
|
+
border-color: #2271b2;
|
|
1001
|
+
}
|
|
1002
|
+
.md-editor-oxide-dark .md-link-editor-input,
|
|
1003
|
+
.md-editor-oxide-dark .md-link-editor-select {
|
|
1004
|
+
background: #1a252f;
|
|
1005
|
+
border-color: #364049;
|
|
1006
|
+
color: #fff;
|
|
1007
|
+
}
|
|
1008
|
+
.md-editor-oxide-dark .md-link-editor-input:focus,
|
|
1009
|
+
.md-editor-oxide-dark .md-link-editor-select:focus {
|
|
1010
|
+
border-color: #2271b2;
|
|
1011
|
+
}
|
|
1012
|
+
.md-editor-oxide-dark .md-link-editor-row label {
|
|
1013
|
+
color: #aaa;
|
|
1014
|
+
}
|
|
896
1015
|
|
|
897
1016
|
.md-editor-confab {
|
|
898
1017
|
background: #fff;
|
|
@@ -1038,6 +1157,24 @@
|
|
|
1038
1157
|
border-radius: 6px;
|
|
1039
1158
|
background: var(--color-confab-gray-50, #f9fafb);
|
|
1040
1159
|
}
|
|
1160
|
+
.md-editor-confab .md-source-editor-textarea {
|
|
1161
|
+
border-color: var(--color-confab-gray-300, #d1d5db);
|
|
1162
|
+
border-radius: 6px;
|
|
1163
|
+
}
|
|
1164
|
+
.md-editor-confab .md-source-editor-textarea:focus {
|
|
1165
|
+
border-color: var(--theme-primary, #0066cc);
|
|
1166
|
+
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
|
1167
|
+
}
|
|
1168
|
+
.md-editor-confab .md-link-editor-input,
|
|
1169
|
+
.md-editor-confab .md-link-editor-select {
|
|
1170
|
+
border-color: var(--color-confab-gray-300, #d1d5db);
|
|
1171
|
+
border-radius: 6px;
|
|
1172
|
+
}
|
|
1173
|
+
.md-editor-confab .md-link-editor-input:focus,
|
|
1174
|
+
.md-editor-confab .md-link-editor-select:focus {
|
|
1175
|
+
border-color: var(--theme-primary, #0066cc);
|
|
1176
|
+
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
|
|
1177
|
+
}
|
|
1041
1178
|
|
|
1042
1179
|
.md-editor-confab-dark {
|
|
1043
1180
|
background: var(--color-dark-bg-primary, #1a1a2e);
|
|
@@ -1217,4 +1354,29 @@
|
|
|
1217
1354
|
.md-editor-confab-dark .md-charmap-preview {
|
|
1218
1355
|
background: var(--color-dark-bg-tertiary, #2a2a2a);
|
|
1219
1356
|
color: var(--color-dark-text-primary, #fff);
|
|
1357
|
+
}
|
|
1358
|
+
.md-editor-confab-dark .md-source-editor-textarea {
|
|
1359
|
+
background: var(--color-dark-bg-tertiary, #2a2a2a);
|
|
1360
|
+
border-color: var(--color-dark-border, #333);
|
|
1361
|
+
color: var(--color-dark-text-primary, #fff);
|
|
1362
|
+
border-radius: 6px;
|
|
1363
|
+
}
|
|
1364
|
+
.md-editor-confab-dark .md-source-editor-textarea:focus {
|
|
1365
|
+
border-color: var(--theme-primary, #0066cc);
|
|
1366
|
+
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
|
|
1367
|
+
}
|
|
1368
|
+
.md-editor-confab-dark .md-link-editor-input,
|
|
1369
|
+
.md-editor-confab-dark .md-link-editor-select {
|
|
1370
|
+
background: var(--color-dark-bg-tertiary, #2a2a2a);
|
|
1371
|
+
border-color: var(--color-dark-border, #333);
|
|
1372
|
+
color: var(--color-dark-text-primary, #fff);
|
|
1373
|
+
border-radius: 6px;
|
|
1374
|
+
}
|
|
1375
|
+
.md-editor-confab-dark .md-link-editor-input:focus,
|
|
1376
|
+
.md-editor-confab-dark .md-link-editor-select:focus {
|
|
1377
|
+
border-color: var(--theme-primary, #0066cc);
|
|
1378
|
+
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
|
|
1379
|
+
}
|
|
1380
|
+
.md-editor-confab-dark .md-link-editor-row label {
|
|
1381
|
+
color: var(--color-dark-text-muted, #888);
|
|
1220
1382
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mdaemon/html-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "A TinyMCE-compatible HTML editor built on TipTap",
|
|
5
|
+
"homepage": "https://github.com/mdaemon-technologies/MDHTMLEditor",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/mdaemon-technologies/MDHTMLEditor.git"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/mdaemon-technologies/MDHTMLEditor/issues"
|
|
12
|
+
},
|
|
5
13
|
"main": "dist/index.js",
|
|
6
14
|
"module": "dist/index.mjs",
|
|
7
15
|
"types": "dist/index.d.ts",
|
|
@@ -29,8 +37,9 @@
|
|
|
29
37
|
"dist"
|
|
30
38
|
],
|
|
31
39
|
"scripts": {
|
|
32
|
-
"build": "vite build",
|
|
33
|
-
"dev": "vite build --
|
|
40
|
+
"build": "vite build --mode production",
|
|
41
|
+
"build:dev": "vite build --mode development",
|
|
42
|
+
"dev": "vite build --watch --mode development",
|
|
34
43
|
"test": "jest",
|
|
35
44
|
"test:coverage": "jest --coverage",
|
|
36
45
|
"lint": "eslint src --ext .ts",
|