remons-markdown-editor 1.0.0-beta.10 → 1.0.0-beta.12
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/dist/index.cjs.map +1 -1
- package/dist/index.css +110 -59
- package/dist/index.js.map +1 -1
- package/package.json +79 -79
- package/readme.md +309 -309
package/dist/index.css
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
padding: 4px;
|
|
3
3
|
display: block;
|
|
4
4
|
min-width: 200px;
|
|
5
|
-
background:
|
|
6
|
-
border: 1px solid
|
|
5
|
+
background: var(--remons-md-editor-bg-picker);
|
|
6
|
+
border: 1px solid var(--remons-md-editor-color-border-light);
|
|
7
7
|
border-radius: 6px;
|
|
8
8
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
9
9
|
}
|
|
@@ -16,19 +16,19 @@
|
|
|
16
16
|
.index-module__grid___tCZ-r .index-module__cell___vTDQz {
|
|
17
17
|
width: 24px;
|
|
18
18
|
height: 24px;
|
|
19
|
-
border: 1px solid
|
|
19
|
+
border: 1px solid var(--remons-md-editor-color-border-light);
|
|
20
20
|
border-radius: 2px;
|
|
21
21
|
background: transparent;
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
transition: all 0.1s ease;
|
|
24
24
|
}
|
|
25
25
|
.index-module__grid___tCZ-r .index-module__cell___vTDQz.index-module__cellActive___0EYvU {
|
|
26
|
-
border-color:
|
|
27
|
-
background:
|
|
26
|
+
border-color: var(--remons-md-editor-color-cell-active);
|
|
27
|
+
background: var(--remons-md-editor-bg-cell-active);
|
|
28
28
|
}
|
|
29
29
|
.index-module__hint___dTObk {
|
|
30
30
|
padding: 12px 16px;
|
|
31
|
-
color:
|
|
31
|
+
color: var(--remons-md-editor-color-hint);
|
|
32
32
|
font-size: 12px;
|
|
33
33
|
text-align: center;
|
|
34
34
|
cursor: pointer;
|
|
@@ -36,47 +36,90 @@
|
|
|
36
36
|
.index-module__label___2CmK1 {
|
|
37
37
|
margin-top: 8px;
|
|
38
38
|
font-size: 13px;
|
|
39
|
-
color:
|
|
39
|
+
color: var(--remons-md-editor-color-label);
|
|
40
40
|
font-weight: 500;
|
|
41
41
|
min-height: 20px;
|
|
42
42
|
text-align: center;
|
|
43
43
|
}
|
|
44
|
-
html,
|
|
45
|
-
body {
|
|
46
|
-
margin: 0;
|
|
47
|
-
padding: 0;
|
|
48
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
49
|
-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
50
|
-
sans-serif;
|
|
51
|
-
-webkit-font-smoothing: antialiased;
|
|
52
|
-
-moz-osx-font-smoothing: grayscale;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
#markdown-editor {
|
|
56
|
-
height: 100vh;
|
|
57
|
-
width: 100vw;
|
|
58
|
-
overflow: hidden;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* ===== CSS 自定义属性（主题变量） ===== */
|
|
62
|
-
/* 浅色主题（默认） */
|
|
63
|
-
:root,
|
|
64
|
-
[data-theme="light"] {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
--
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
--
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
44
|
+
html,
|
|
45
|
+
body {
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: 0;
|
|
48
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
49
|
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
50
|
+
sans-serif;
|
|
51
|
+
-webkit-font-smoothing: antialiased;
|
|
52
|
+
-moz-osx-font-smoothing: grayscale;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
#markdown-editor {
|
|
56
|
+
height: 100vh;
|
|
57
|
+
width: 100vw;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* ===== CSS 自定义属性（主题变量） ===== */
|
|
62
|
+
/* 浅色主题（默认） */
|
|
63
|
+
:root,
|
|
64
|
+
[data-theme="light"] {
|
|
65
|
+
/* 背景色 */
|
|
66
|
+
--remons-md-editor-bg-primary: #f3f3f3;
|
|
67
|
+
--remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
|
|
68
|
+
--remons-md-editor-bg-hover: #e1e4e8;
|
|
69
|
+
--remons-md-editor-bg-active: #d0d7de;
|
|
70
|
+
--remons-md-editor-bg-fullscreen: #fff;
|
|
71
|
+
|
|
72
|
+
/* 文字颜色 */
|
|
73
|
+
--remons-md-editor-color-text: #24292f;
|
|
74
|
+
--remons-md-editor-color-text-hover: #0969da;
|
|
75
|
+
|
|
76
|
+
/* 边框 */
|
|
77
|
+
--remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
|
|
78
|
+
--remons-md-editor-color-border-light: #d0d7de;
|
|
79
|
+
|
|
80
|
+
/* 焦点 */
|
|
81
|
+
--remons-md-editor-color-focus: #0969da;
|
|
82
|
+
--remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
|
|
83
|
+
|
|
84
|
+
/* 工具选择器 */
|
|
85
|
+
--remons-md-editor-bg-picker: #fff;
|
|
86
|
+
--remons-md-editor-bg-cell-active: #ddf4ff;
|
|
87
|
+
--remons-md-editor-color-cell-active: #91caff;
|
|
88
|
+
--remons-md-editor-color-hint: #999;
|
|
89
|
+
--remons-md-editor-color-label: #666;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* ===== 深色主题 ===== */
|
|
93
|
+
[data-theme="dark"] {
|
|
94
|
+
/* 背景色 */
|
|
95
|
+
--remons-md-editor-bg-primary: #1a1d23;
|
|
96
|
+
--remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
|
|
97
|
+
--remons-md-editor-bg-hover: #4a5163;
|
|
98
|
+
--remons-md-editor-bg-active: #5a6278;
|
|
99
|
+
--remons-md-editor-bg-fullscreen: #1a1d23;
|
|
100
|
+
|
|
101
|
+
/* 文字颜色 */
|
|
102
|
+
--remons-md-editor-color-text: #c9d1d9;
|
|
103
|
+
--remons-md-editor-color-text-hover: #58a6ff;
|
|
104
|
+
|
|
105
|
+
/* 边框 */
|
|
106
|
+
--remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
|
|
107
|
+
--remons-md-editor-color-border-light: #3a3f4b;
|
|
108
|
+
|
|
109
|
+
/* 焦点 */
|
|
110
|
+
--remons-md-editor-color-focus: #58a6ff;
|
|
111
|
+
--remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
|
|
112
|
+
|
|
113
|
+
/* 工具选择器 */
|
|
114
|
+
--remons-md-editor-bg-picker: #2e3350;
|
|
115
|
+
--remons-md-editor-bg-cell-active: #1a3a5c;
|
|
116
|
+
--remons-md-editor-color-cell-active: #58a6ff;
|
|
117
|
+
--remons-md-editor-color-hint: #8b949e;
|
|
118
|
+
--remons-md-editor-color-label: #8b949e;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.ant-anchor-link-title {
|
|
122
|
+
white-space: inherit !important;
|
|
80
123
|
}@font-face {
|
|
81
124
|
font-family: 'Inter';
|
|
82
125
|
font-style: normal;
|
|
@@ -137,8 +180,14 @@ body {
|
|
|
137
180
|
height: 100%;
|
|
138
181
|
display: flex;
|
|
139
182
|
flex-direction: column;
|
|
140
|
-
background: #f3f3f3;
|
|
141
183
|
border: 1px solid var(--markdown-editor-color-border);
|
|
184
|
+
border-radius: 12px;
|
|
185
|
+
background: var(--remons-md-editor-bg-primary);
|
|
186
|
+
}
|
|
187
|
+
.markdown-editor-app .ant-btn:hover {
|
|
188
|
+
border: none !important;
|
|
189
|
+
background-color: var(--remons-md-editor-bg-hover) !important;
|
|
190
|
+
color: var(--remons-md-editor-color-text-hover) !important;
|
|
142
191
|
}
|
|
143
192
|
.markdown-editor-app.fullscreen {
|
|
144
193
|
position: fixed;
|
|
@@ -147,7 +196,7 @@ body {
|
|
|
147
196
|
right: 0;
|
|
148
197
|
bottom: 0;
|
|
149
198
|
z-index: 9999;
|
|
150
|
-
background:
|
|
199
|
+
background: var(--remons-md-editor-bg-fullscreen);
|
|
151
200
|
width: 100vw;
|
|
152
201
|
height: 100vh;
|
|
153
202
|
}
|
|
@@ -156,8 +205,8 @@ body {
|
|
|
156
205
|
display: flex;
|
|
157
206
|
align-items: center;
|
|
158
207
|
padding: 4px 8px;
|
|
159
|
-
background: var(--
|
|
160
|
-
border-bottom: 1px solid
|
|
208
|
+
background: var(--remons-md-editor-bg-white);
|
|
209
|
+
border-bottom: 1px solid var(--remons-md-editor-color-border-light);
|
|
161
210
|
gap: 4px;
|
|
162
211
|
overflow-x: auto;
|
|
163
212
|
}
|
|
@@ -179,7 +228,7 @@ body {
|
|
|
179
228
|
cursor: pointer;
|
|
180
229
|
font-size: 16px;
|
|
181
230
|
font-weight: 500;
|
|
182
|
-
color:
|
|
231
|
+
color: var(--remons-md-editor-color-text);
|
|
183
232
|
transition: background-color 0.15s, color 0.15s;
|
|
184
233
|
white-space: nowrap;
|
|
185
234
|
}
|
|
@@ -188,11 +237,11 @@ body {
|
|
|
188
237
|
height: 16px;
|
|
189
238
|
}
|
|
190
239
|
.toolbar-button:hover {
|
|
191
|
-
background:
|
|
192
|
-
color:
|
|
240
|
+
background: var(--remons-md-editor-bg-hover);
|
|
241
|
+
color: var(--remons-md-editor-color-text-hover);
|
|
193
242
|
}
|
|
194
243
|
.toolbar-button:active {
|
|
195
|
-
background:
|
|
244
|
+
background: var(--remons-md-editor-bg-active);
|
|
196
245
|
}
|
|
197
246
|
.toolbar-button.ant-btn {
|
|
198
247
|
min-width: 32px;
|
|
@@ -202,8 +251,8 @@ body {
|
|
|
202
251
|
box-shadow: none !important;
|
|
203
252
|
}
|
|
204
253
|
.toolbar-button.ant-btn:hover {
|
|
205
|
-
background:
|
|
206
|
-
color:
|
|
254
|
+
background: var(--remons-md-editor-bg-hover);
|
|
255
|
+
color: var(--remons-md-editor-color-text-hover);
|
|
207
256
|
border-color: transparent !important;
|
|
208
257
|
box-shadow: none !important;
|
|
209
258
|
}
|
|
@@ -213,11 +262,13 @@ body {
|
|
|
213
262
|
}
|
|
214
263
|
:where(.css-dev-only-do-not-override-u6izyw).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
|
|
215
264
|
border: none !important;
|
|
265
|
+
background-color: var(--remons-md-editor-bg-hover) !important;
|
|
266
|
+
color: var(--remons-md-editor-color-text-hover) !important;
|
|
216
267
|
}
|
|
217
268
|
.toolbar-separator {
|
|
218
269
|
width: 1px;
|
|
219
270
|
height: 24px;
|
|
220
|
-
background:
|
|
271
|
+
background: var(--remons-md-editor-color-border-light);
|
|
221
272
|
margin: 0 4px;
|
|
222
273
|
}
|
|
223
274
|
.split-panels {
|
|
@@ -248,7 +299,7 @@ body {
|
|
|
248
299
|
.md-container {
|
|
249
300
|
margin: 16px 0;
|
|
250
301
|
border-radius: 6px;
|
|
251
|
-
border: 1px solid
|
|
302
|
+
border: 1px solid var(--remons-md-editor-color-border-light);
|
|
252
303
|
overflow: hidden;
|
|
253
304
|
}
|
|
254
305
|
/* 编辑弹窗样式 */
|
|
@@ -263,20 +314,20 @@ body {
|
|
|
263
314
|
margin-bottom: 6px;
|
|
264
315
|
font-size: 14px;
|
|
265
316
|
font-weight: 500;
|
|
266
|
-
color:
|
|
317
|
+
color: var(--remons-md-editor-color-text);
|
|
267
318
|
}
|
|
268
319
|
.edit-dialog-input {
|
|
269
320
|
width: 100%;
|
|
270
321
|
padding: 6px 10px;
|
|
271
322
|
font-size: 14px;
|
|
272
|
-
border: 1px solid
|
|
323
|
+
border: 1px solid var(--remons-md-editor-color-border-light);
|
|
273
324
|
border-radius: 6px;
|
|
274
325
|
outline: none;
|
|
275
326
|
transition: border-color 0.15s;
|
|
276
327
|
}
|
|
277
328
|
.edit-dialog-input:focus {
|
|
278
|
-
border-color:
|
|
279
|
-
box-shadow: 0 0 0 3px
|
|
329
|
+
border-color: var(--remons-md-editor-color-focus);
|
|
330
|
+
box-shadow: 0 0 0 3px var(--remons-md-editor-color-focus-shadow);
|
|
280
331
|
}
|
|
281
332
|
.edit-dialog-textarea {
|
|
282
333
|
resize: vertical;
|