@ebl-vue/editor-render 2.31.25

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 (68) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +9 -0
  3. package/dist/index.d.ts +19 -0
  4. package/dist/index.mjs +129 -0
  5. package/dist/index.mjs.map +1 -0
  6. package/dist/style.css +1 -0
  7. package/dist/styles/alert.css +151 -0
  8. package/dist/styles/block-alignment.css +9 -0
  9. package/dist/styles/code.css +214 -0
  10. package/dist/styles/color.css +27 -0
  11. package/dist/styles/delimiter.css +14 -0
  12. package/dist/styles/header.css +20 -0
  13. package/dist/styles/image.css +156 -0
  14. package/dist/styles/indent.css +86 -0
  15. package/dist/styles/index.css +68 -0
  16. package/dist/styles/inline-code.css +11 -0
  17. package/dist/styles/list.css +202 -0
  18. package/dist/styles/marker.css +4 -0
  19. package/dist/styles/outline.css +52 -0
  20. package/dist/styles/paragraph.css +23 -0
  21. package/dist/styles/quote.css +26 -0
  22. package/dist/styles/table.css +388 -0
  23. package/dist/styles/underline.css +3 -0
  24. package/package.json +54 -0
  25. package/src/EditorRender.vue +43 -0
  26. package/src/components/List.vue +40 -0
  27. package/src/components/alert.vue +21 -0
  28. package/src/components/code.vue +114 -0
  29. package/src/components/delimiter.vue +19 -0
  30. package/src/components/h1.vue +19 -0
  31. package/src/components/h2.vue +19 -0
  32. package/src/components/h3.vue +19 -0
  33. package/src/components/h4.vue +19 -0
  34. package/src/components/h5.vue +19 -0
  35. package/src/components/h6.vue +19 -0
  36. package/src/components/image.vue +31 -0
  37. package/src/components/index.ts +54 -0
  38. package/src/components/paragraph.vue +19 -0
  39. package/src/components/quote.vue +21 -0
  40. package/src/components/table.vue +46 -0
  41. package/src/constants/index.ts +1 -0
  42. package/src/i18n/zh-cn.ts +158 -0
  43. package/src/icons/index.ts +93 -0
  44. package/src/index.ts +12 -0
  45. package/src/installer.ts +21 -0
  46. package/src/styles/alert.css +151 -0
  47. package/src/styles/block-alignment.css +9 -0
  48. package/src/styles/code.css +214 -0
  49. package/src/styles/color.css +27 -0
  50. package/src/styles/delimiter.css +14 -0
  51. package/src/styles/header.css +20 -0
  52. package/src/styles/image.css +156 -0
  53. package/src/styles/indent.css +86 -0
  54. package/src/styles/index.css +68 -0
  55. package/src/styles/inline-code.css +11 -0
  56. package/src/styles/list.css +202 -0
  57. package/src/styles/marker.css +4 -0
  58. package/src/styles/outline.css +52 -0
  59. package/src/styles/paragraph.css +23 -0
  60. package/src/styles/quote.css +26 -0
  61. package/src/styles/table.css +388 -0
  62. package/src/styles/underline.css +3 -0
  63. package/src/types.ts +5 -0
  64. package/src/utils/index.ts +15 -0
  65. package/src/utils/install.ts +19 -0
  66. package/tsconfig.json +37 -0
  67. package/types/index.d.ts +19 -0
  68. package/vite.config.ts +80 -0
@@ -0,0 +1,86 @@
1
+ .ce-popover-indent-item {
2
+ cursor: default !important;
3
+ display: flex;
4
+ align-items: center;
5
+ padding: 3px;
6
+ }
7
+
8
+ .ce-popover-indent-item[version^="2.26"] {
9
+ gap: 10px;
10
+ }
11
+
12
+ .ce-popover-indent-item:hover {
13
+ background-color: transparent !important;
14
+ }
15
+
16
+ .ce-popover-indent-item .ce-popover-item__icon {
17
+ width: 26px;
18
+ height: 26px;
19
+ cursor: pointer;
20
+ will-change: background-color, color;
21
+ transition: 0.3s background-color, 0.3s color;
22
+ padding-block: 0px;
23
+ padding-inline: 0px;
24
+ border-width: 0px;
25
+ color: var(--color-text-primary, black);
26
+ background-color: #fff;
27
+ border-radius: 5px;
28
+ -webkit-border-radius: 5px;
29
+ -moz-border-radius: 5px;
30
+ -ms-border-radius: 5px;
31
+ -o-border-radius: 5px;
32
+ -webkit-transition: 0.3s background-color, 0.3s color;
33
+ -moz-transition: 0.3s background-color, 0.3s color;
34
+ -ms-transition: 0.3s background-color, 0.3s color;
35
+ -o-transition: 0.3s background-color, 0.3s color;
36
+ }
37
+
38
+ .ce-popover-indent-item .ce-popover-item--disabled {
39
+ color: var(--color-text-secondary, #707684);
40
+ opacity: 0.3;
41
+ cursor: default;
42
+ }
43
+
44
+ .ce-popover-indent-item .ce-popover-item__icon:focus {
45
+ outline: none;
46
+ }
47
+
48
+ .ce-popover-indent-item:is([version^="2.26"], [version^="2.27"], [version^="2.28"], [version^="2.29"]):hover .ce-popover-item__icon {
49
+ box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
50
+ -webkit-box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
51
+ }
52
+
53
+ .ce-popover-indent-item:is([version^="2.26"], [version^="2.27"], [version^="2.28"], [version^="2.29"]) .ce-popover-item__icon {
54
+ box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
55
+ -webkit-box-shadow: 0 0 0 1px var(--color-border-icon, rgba(201, 201, 204, 0.48)) !important;
56
+ }
57
+
58
+ .ce-popover-indent-item:is([version^="2.26"], [version^="2.27"], [version^="2.28"], [version^="2.29"]) .ce-popover-item__icon:hover {
59
+ background-color: var(--color-background-item-hover, #eff2f5);
60
+ }
61
+
62
+ [data-block-indent-wrapper] {
63
+ /* will-change: padding-left, padding-right;
64
+ transition: padding-left .4s, padding-right .4s;
65
+ -webkit-transition: padding-left .4s, padding-right .4s;
66
+ -moz-transition: padding-left .4s, padding-right .4s;
67
+ -ms-transition: padding-left .4s, padding-right .4s;
68
+ -o-transition: padding-left .4s, padding-right .4s; */
69
+ }
70
+
71
+ .ce-highlight-indent {
72
+ display: inline-block;
73
+ height: 1.6em;
74
+ top: 50%;
75
+ position: absolute;
76
+ transform: translate(0px, -50%);
77
+ -webkit-transform: translate(0px, -50%);
78
+ -moz-transform: translate(0px, -50%);
79
+ -ms-transform: translate(0px, -50%);
80
+ -o-transform: translate(0px, -50%);
81
+ }
82
+
83
+
84
+ .ce-popover-indent-item[version^="2.3"] .ce-popover-item__title {
85
+ margin-left: 4px;
86
+ }
@@ -0,0 +1,68 @@
1
+ @import './alert.css';
2
+ @import './block-alignment.css';
3
+ @import './code.css';
4
+ @import './delimiter.css';
5
+ @import './header.css';
6
+ @import './image.css';
7
+ @import './indent.css';
8
+ @import './inline-code.css';
9
+ @import './list.css';
10
+ @import './marker.css';
11
+ @import './outline.css';
12
+ @import './paragraph.css';
13
+ @import './quote.css';
14
+ @import './table.css';
15
+ @import './underline.css';
16
+ @import './color.css';
17
+
18
+ .ebl-editor-render{
19
+ cursor:text;
20
+ font-size: 16px;
21
+ font-weight: 400;
22
+ background-color: #fff;
23
+
24
+ height: 100%;
25
+ overflow: hidden;
26
+ position: relative;
27
+ padding-left: 100px;
28
+ padding-right: 100px;
29
+ max-width: 100%;
30
+ padding-right: 280px;
31
+ }
32
+
33
+ @media(max-width:1240px){
34
+ .ebl-outline{
35
+ display: none;
36
+
37
+ }
38
+ .ebl-editor.outline{
39
+ padding-right: 0;
40
+ }
41
+ }
42
+
43
+
44
+
45
+
46
+ /* 滚动条整体部分 */
47
+ .ebl-editor-render ::-webkit-scrollbar {
48
+ width: 6px; /* 滚动条的宽度 */
49
+ height: 6px; /* 滚动条的高度 */
50
+ }
51
+
52
+ /* 滚动条轨道 */
53
+ .ebl-editor-render ::-webkit-scrollbar-track {
54
+ background: #f1f1f1; /* 轨道颜色 */
55
+ border-radius: 1px; /* 轨道圆角 */
56
+ }
57
+
58
+ /* 滚动条滑块 */
59
+ .ebl-editor-render ::-webkit-scrollbar-thumb {
60
+ background: #C0C0C0; /* 滑块颜色 */
61
+ border-radius: 10px; /* 滑块圆角 */
62
+ border: 1px solid #fff; /* 滑块边框 */
63
+ }
64
+
65
+ /* 滑块悬停时 */
66
+ .ebl-editor-render ::-webkit-scrollbar-thumb:hover {
67
+ background: #555; /* 滑块悬停时的颜色 */
68
+ }
@@ -0,0 +1,11 @@
1
+ .inline-code {
2
+ background: rgba(250, 239, 240, 0.78);
3
+ color: #b44437;
4
+ padding: 3px 4px;
5
+ border-radius: 5px;
6
+ margin: 0 1px;
7
+ font-family: inherit;
8
+ font-size: 0.86em;
9
+ font-weight: 500;
10
+ letter-spacing: 0.3px;
11
+ }
@@ -0,0 +1,202 @@
1
+ .cdx-list {
2
+ margin: 0;
3
+ padding: 0;
4
+ outline: none;
5
+ display: grid;
6
+ counter-reset: item;
7
+ gap: var(--spacing-s);
8
+ padding: var(--spacing-xs);
9
+ --spacing-s: 8px;
10
+ --spacing-xs: 6px;
11
+ --list-counter-type: numeric;
12
+ --radius-border: 5px;
13
+ --checkbox-background: #fff;
14
+ --color-border: #C9C9C9;
15
+ --color-bg-checked: #369FFF;
16
+ --line-height: 1.45em;
17
+ --color-bg-checked-hover: #0059AB;
18
+ --color-tick: #fff;
19
+ --size-checkbox: 1.2em;
20
+ }
21
+ .cdx-list ol{
22
+ padding-inline-start:0;
23
+ }
24
+
25
+ .cdx-list__item {
26
+ line-height: var(--line-height);
27
+ display: grid;
28
+ grid-template-columns: auto 1fr;
29
+ grid-template-rows: auto auto;
30
+ grid-template-areas:
31
+ "checkbox content"
32
+ ". child";
33
+ }
34
+
35
+ .cdx-list__item-children {
36
+ display: grid;
37
+ grid-area: child;
38
+ gap: var(--spacing-s);
39
+ padding-top: var(--spacing-s);
40
+ }
41
+
42
+ .cdx-list__item [contenteditable]{
43
+ outline: none;
44
+ }
45
+
46
+ .cdx-list__item-content {
47
+ word-break: break-word;
48
+ white-space: pre-wrap;
49
+ grid-area: content;
50
+ padding-left: var(--spacing-s);
51
+ }
52
+
53
+ .cdx-list__item::before {
54
+ counter-increment: item;
55
+
56
+ white-space: nowrap;
57
+ }
58
+
59
+ .cdx-list-ordered .cdx-list__item::before {
60
+ content: counters(item, ".", var(--list-counter-type)) ".";
61
+ }
62
+
63
+ .cdx-list-ordered {
64
+ counter-reset: item;
65
+ }
66
+ .cdx-list-unordered{
67
+ padding-inline-start:0;
68
+ }
69
+ .cdx-list-unordered .cdx-list__item::before {
70
+ content: "•";
71
+ }
72
+
73
+ .cdx-list-checklist .cdx-list__item::before {
74
+ content: "";
75
+ }
76
+
77
+ .cdx-list__settings .cdx-settings-button {
78
+ width: 50%;
79
+ }
80
+
81
+ .cdx-list__checkbox {
82
+ padding-top: calc((var(--line-height) - var(--size-checkbox)) / 2);
83
+ grid-area: checkbox;
84
+ width: var(--size-checkbox);
85
+ height: var(--size-checkbox);
86
+ display: flex;
87
+ cursor: pointer;
88
+ }
89
+
90
+ .cdx-list__checkbox svg {
91
+ opacity: 0;
92
+ height: var(--size-checkbox);
93
+ width: var(--size-checkbox);
94
+ left: -1px;
95
+ top: -1px;
96
+ position: absolute;
97
+ }
98
+
99
+ @media (hover: hover) {
100
+ .cdx-list__checkbox:not(.cdx-list__checkbox--no-hover):hover .cdx-list__checkbox-check svg {
101
+ opacity: 1;
102
+ }
103
+ }
104
+
105
+ .cdx-list__checkbox--checked {
106
+ line-height: var(--line-height);
107
+ }
108
+
109
+ @media (hover: hover) {
110
+ .cdx-list__checkbox--checked:not(.cdx-list__checkbox--checked--no-hover):hover .cdx-checklist__checkbox-check {
111
+ background: var(--color-bg-checked-hover);
112
+ border-color: var(--color-bg-checked-hover);
113
+ }
114
+ }
115
+
116
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check {
117
+ background: var(--color-bg-checked);
118
+ border-color: var(--color-bg-checked);
119
+ }
120
+
121
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check svg {
122
+ opacity: 1;
123
+ }
124
+
125
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check svg path {
126
+ stroke: var(--color-tick);
127
+ }
128
+
129
+ .cdx-list__checkbox--checked .cdx-list__checkbox-check::before {
130
+ opacity: 0;
131
+ visibility: visible;
132
+ transform: scale(2.5);
133
+ }
134
+
135
+ .cdx-list__checkbox-check {
136
+ cursor: pointer;
137
+ display: inline-block;
138
+ position: relative;
139
+ margin: 0 auto;
140
+ width: var(--size-checkbox);
141
+ height: var(--size-checkbox);
142
+ box-sizing: border-box;
143
+ border-radius: var(--radius-border);
144
+ border: 1px solid var(--color-border);
145
+ background: var(--checkbox-background);
146
+ }
147
+
148
+ .cdx-list__checkbox-check::before {
149
+ content: '';
150
+ position: absolute;
151
+ top: 0;
152
+ right: 0;
153
+ bottom: 0;
154
+ left: 0;
155
+ border-radius: 100%;
156
+ background-color: var(--color-bg-checked);
157
+ visibility: hidden;
158
+ pointer-events: none;
159
+ transform: scale(1);
160
+ transition: transform 400ms ease-out, opacity 400ms;
161
+ }
162
+
163
+ .cdx-list__checkbox-check--disabled {
164
+ pointer-events: none;
165
+ }
166
+
167
+ .cdx-list-start-with-field {
168
+ background: #F8F8F8;
169
+ border: 1px solid rgba(226,226,229,0.20);
170
+ border-radius: 6px;
171
+ padding: 2px;
172
+ display: grid;
173
+ grid-template-columns: auto auto 1fr;
174
+ grid-template-rows: auto;
175
+ }
176
+
177
+ .cdx-list-start-with-field--invalid {
178
+ background: #FFECED;
179
+ border: 1px solid #E13F3F;
180
+ }
181
+
182
+ .cdx-list-start-with-field--invalid .cdx-list-start-with-field__input {
183
+ color: #E13F3F;
184
+ }
185
+
186
+ .cdx-list-start-with-field__input {
187
+ font-size: 14px;
188
+ outline: none;
189
+ font-weight: 500;
190
+ font-family: inherit;
191
+ border: 0;
192
+ background: transparent;
193
+ margin: 0;
194
+ padding: 0;
195
+ line-height: 22px;
196
+ min-width: calc(100% - var(--toolbox-buttons-size) - var(--icon-margin-right));
197
+ }
198
+
199
+ .cdx-list-start-with-field__input::placeholder {
200
+ color: var(--grayText);
201
+ font-weight: 500;
202
+ }
@@ -0,0 +1,4 @@
1
+ .cdx-marker {
2
+ background: rgba(245,235,111,0.29);
3
+ padding: 3px 0;
4
+ }
@@ -0,0 +1,52 @@
1
+ .ebl-outline{
2
+ background-color: #fff;
3
+ box-sizing: border-box;
4
+ position:fixed;
5
+ top:var(--header-height,84px);
6
+
7
+ right:0;
8
+ padding: 15px 12px;
9
+ width:280px;
10
+
11
+ overflow: hidden;
12
+ font-family: "Qihei Lenovo", "Microsoft YaHei", "微软雅黑", "宋体", sans-serif;
13
+ color: #606266;
14
+ font-size: 14px;
15
+ padding-bottom: 50px;
16
+ max-height: calc(100vh - var(--header-height,84px));
17
+ }
18
+ .ebl-outline:hover{
19
+ overflow: auto;
20
+ }
21
+
22
+
23
+
24
+ .ebl-outline__item{
25
+ cursor: pointer;
26
+ height:36px;
27
+ line-height: 36px;
28
+ padding: 0 24px;
29
+ word-break: break-word;
30
+ overflow: hidden;
31
+ text-overflow: ellipsis;
32
+ white-space: nowrap;
33
+ }
34
+
35
+ .ebl-outline .level_1{
36
+ padding-left: 24px;
37
+ }
38
+
39
+ .ebl-outline .level_2{
40
+ padding-left: 42px;
41
+ }
42
+ .ebl-outline .level_3{
43
+ padding-left: 60px;
44
+ }
45
+ .ebl-outline__item.active{
46
+ color:#222222;
47
+ font-weight: bold;
48
+ background-color: #EBEBEB;
49
+ }
50
+ .ebl-outline__item:hover{
51
+ background-color: #EBEBEB;
52
+ }
@@ -0,0 +1,23 @@
1
+ .ce-paragraph {
2
+ line-height: 2!important;
3
+ outline: none;
4
+ }
5
+
6
+ /**
7
+ * Normally paragraph placeholder is shown only for the focused block (thanks to "data-placeholder-active").
8
+ *
9
+ * But there is a special case when the paragraph is the only block in the empty editor.
10
+ * When editor autofocus=false, there will be no focus. We need to show the placeholder anyway.
11
+ */
12
+ .ce-block:only-of-type .ce-paragraph[data-placeholder-active]:empty::before,
13
+ .ce-block:only-of-type .ce-paragraph[data-placeholder-active][data-empty="true"]::before {
14
+ content: attr(data-placeholder-active);
15
+ }
16
+
17
+ .ce-paragraph p:first-of-type{
18
+ margin-top: 0;
19
+ }
20
+
21
+ .ce-paragraph p:last-of-type{
22
+ margin-bottom: 0;
23
+ }
@@ -0,0 +1,26 @@
1
+
2
+ .cdx-quote {
3
+ overflow: hidden;
4
+ overflow-wrap: break-word;
5
+ margin: 0;
6
+ box-sizing: border-box;
7
+ word-wrap: break-word;
8
+ word-break: break-all;
9
+ }
10
+ .cdx-quote blockquote{
11
+ margin: 15px 0;
12
+ }
13
+
14
+
15
+
16
+
17
+ .cdx-block-quote{
18
+ border: solid #acacac;
19
+ border-width: 0 0 0 3px;
20
+ box-shadow: none;
21
+ color: #666;
22
+ line-height: 1.6em;
23
+ padding: 1px 0 0 12px;
24
+ text-align: left;
25
+ }
26
+