@uiw/react-md-editor 3.22.0 → 3.23.1

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 (25) hide show
  1. package/dist/mdeditor.css +30 -25
  2. package/dist/mdeditor.js +174 -174
  3. package/dist/mdeditor.min.css +1 -1
  4. package/dist/mdeditor.min.js +1 -1
  5. package/esm/commands/index.js +0 -1
  6. package/esm/components/TextArea/index.css +8 -12
  7. package/esm/components/TextArea/index.less +8 -10
  8. package/esm/components/Toolbar/Child.css +2 -2
  9. package/esm/components/Toolbar/Child.less +3 -3
  10. package/esm/components/Toolbar/index.css +6 -6
  11. package/esm/components/Toolbar/index.less +6 -6
  12. package/esm/index.css +8 -5
  13. package/esm/index.less +9 -6
  14. package/lib/commands/index.js +0 -1
  15. package/lib/components/TextArea/index.less +8 -10
  16. package/lib/components/Toolbar/Child.less +3 -3
  17. package/lib/components/Toolbar/index.less +6 -6
  18. package/lib/index.less +9 -6
  19. package/markdown-editor.css +24 -25
  20. package/package.json +1 -1
  21. package/src/commands/index.ts +0 -1
  22. package/src/components/TextArea/index.less +8 -10
  23. package/src/components/Toolbar/Child.less +3 -3
  24. package/src/components/Toolbar/index.less +6 -6
  25. package/src/index.less +9 -6
package/dist/mdeditor.css CHANGED
@@ -1041,6 +1041,7 @@ body[data-color-mode*='light'] {
1041
1041
  box-sizing: inherit;
1042
1042
  display: inherit;
1043
1043
  font-family: inherit;
1044
+ font-family: var(--md-editor-font-family) !important;
1044
1045
  font-size: inherit;
1045
1046
  font-style: inherit;
1046
1047
  font-feature-settings: inherit;
@@ -1060,11 +1061,6 @@ body[data-color-mode*='light'] {
1060
1061
  word-break: normal;
1061
1062
  padding: 0;
1062
1063
  }
1063
- .w-md-editor-text-pre > code,
1064
- .w-md-editor-text-input > code,
1065
- .w-md-editor-text > .w-md-editor-text-pre > code {
1066
- font-family: inherit;
1067
- }
1068
1064
  .w-md-editor-text-pre {
1069
1065
  position: relative;
1070
1066
  margin: 0px !important;
@@ -1073,7 +1069,7 @@ body[data-color-mode*='light'] {
1073
1069
  }
1074
1070
  .w-md-editor-text-pre > code {
1075
1071
  padding: 0 !important;
1076
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
1072
+ font-family: var(--md-editor-font-family) !important;
1077
1073
  font-size: 14px !important;
1078
1074
  line-height: 18px !important;
1079
1075
  }
@@ -1122,17 +1118,21 @@ body[data-color-mode*='light'] {
1122
1118
  }
1123
1119
  }
1124
1120
  .w-md-editor-text-pre .punctuation {
1125
- color: var(--color-prettylights-syntax-comment) !important;
1121
+ color: #8b949e !important;
1122
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
1126
1123
  }
1127
1124
  .w-md-editor-text-pre .token.url,
1128
1125
  .w-md-editor-text-pre .token.content {
1129
- color: var(--color-prettylights-syntax-constant) !important;
1126
+ color: #0550ae !important;
1127
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
1130
1128
  }
1131
1129
  .w-md-editor-text-pre .token.title.important {
1132
- color: var(--color-prettylights-syntax-markup-bold);
1130
+ color: #24292f;
1131
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
1133
1132
  }
1134
1133
  .w-md-editor-text-pre .token.code-block .function {
1135
- color: var(--color-prettylights-syntax-entity);
1134
+ color: #8250df;
1135
+ color: var(--color-prettylights-syntax-entity, #8250df);
1136
1136
  }
1137
1137
  .w-md-editor-text-pre .token.bold {
1138
1138
  font-weight: inherit !important;
@@ -1143,18 +1143,20 @@ body[data-color-mode*='light'] {
1143
1143
  font-weight: inherit !important;
1144
1144
  }
1145
1145
  .w-md-editor-text-pre .token.code.keyword {
1146
- color: var(--color-prettylights-syntax-constant) !important;
1146
+ color: #0550ae !important;
1147
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
1147
1148
  }
1148
1149
  .w-md-editor-text-pre .token.strike,
1149
1150
  .w-md-editor-text-pre .token.strike .content {
1150
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
1151
+ color: #82071e !important;
1152
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
1151
1153
  }
1152
1154
 
1153
1155
  .w-md-editor-toolbar-child {
1154
1156
  position: absolute;
1155
1157
  border-radius: 3px;
1156
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
1157
- background-color: var(--color-canvas-default);
1158
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
1159
+ background-color: var(--md-editor-background-color);
1158
1160
  z-index: 1;
1159
1161
  display: none;
1160
1162
  }
@@ -1179,8 +1181,8 @@ body[data-color-mode*='light'] {
1179
1181
  }
1180
1182
 
1181
1183
  .w-md-editor-toolbar {
1182
- border-bottom: 1px solid var(--color-border-default);
1183
- background-color: var(--color-canvas-default);
1184
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
1185
+ background-color: var(--md-editor-background-color);
1184
1186
  padding: 5px 5px;
1185
1187
  display: flex;
1186
1188
  justify-content: space-between;
@@ -1193,7 +1195,7 @@ body[data-color-mode*='light'] {
1193
1195
  }
1194
1196
  .w-md-editor-toolbar.bottom {
1195
1197
  border-bottom: 0px;
1196
- border-top: 1px solid var(--color-border-default);
1198
+ border-top: 1px solid var(--md-editor-box-shadow-color);
1197
1199
  border-radius: 0 0 3px 3px;
1198
1200
  }
1199
1201
  .w-md-editor-toolbar ul,
@@ -1238,12 +1240,12 @@ body[data-color-mode*='light'] {
1238
1240
  color: var(--color-danger-fg);
1239
1241
  }
1240
1242
  .w-md-editor-toolbar li > button:disabled {
1241
- color: var(--color-border-default);
1243
+ color: var(--md-editor-box-shadow-color);
1242
1244
  cursor: not-allowed;
1243
1245
  }
1244
1246
  .w-md-editor-toolbar li > button:disabled:hover {
1245
1247
  background-color: transparent;
1246
- color: var(--color-border-default);
1248
+ color: var(--md-editor-box-shadow-color);
1247
1249
  }
1248
1250
  .w-md-editor-toolbar li.active > button {
1249
1251
  color: var(--color-accent-fg);
@@ -1254,7 +1256,7 @@ body[data-color-mode*='light'] {
1254
1256
  width: 1px;
1255
1257
  margin: -3px 3px 0 3px !important;
1256
1258
  vertical-align: middle;
1257
- background-color: var(--color-border-default);
1259
+ background-color: var(--md-editor-box-shadow-color);
1258
1260
  }
1259
1261
 
1260
1262
  .w-md-editor-bar {
@@ -1283,8 +1285,11 @@ body[data-color-mode*='light'] {
1283
1285
  padding-bottom: 1px;
1284
1286
  position: relative;
1285
1287
  color: var(--color-fg-default);
1286
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
1287
- background-color: var(--color-canvas-default);
1288
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1289
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
1290
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
1291
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
1292
+ background-color: var(--md-editor-background-color);
1288
1293
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1289
1294
  display: flex;
1290
1295
  flex-direction: column;
@@ -1298,7 +1303,7 @@ body[data-color-mode*='light'] {
1298
1303
  right: initial !important;
1299
1304
  left: 0;
1300
1305
  text-align: right !important;
1301
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
1306
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
1302
1307
  }
1303
1308
  .w-md-editor.w-md-editor-rtl .w-md-editor-text {
1304
1309
  text-align: right !important;
@@ -1327,7 +1332,7 @@ body[data-color-mode*='light'] {
1327
1332
  .w-md-editor-preview {
1328
1333
  width: 50%;
1329
1334
  box-sizing: border-box;
1330
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
1335
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
1331
1336
  position: absolute;
1332
1337
  padding: 10px 20px;
1333
1338
  overflow: auto;
@@ -1347,7 +1352,7 @@ body[data-color-mode*='light'] {
1347
1352
  .w-md-editor-show-preview .w-md-editor-input {
1348
1353
  width: 0%;
1349
1354
  overflow: hidden;
1350
- background-color: var(--color-canvas-default);
1355
+ background-color: var(--md-editor-background-color);
1351
1356
  }
1352
1357
  .w-md-editor-show-preview .w-md-editor-preview {
1353
1358
  width: 100%;