@principal-ade/industry-themed-mdx-editor 0.1.10 → 0.1.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/README.md +17 -0
- package/dist/index.css +133 -0
- package/dist/index.mjs +4 -4
- package/dist/styles.css +173 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,6 +25,23 @@ or with bun:
|
|
|
25
25
|
bun add @principal-ade/industry-themed-mdx-editor @mdxeditor/editor @a24z/industry-theme
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
## Tailwind CSS Compatibility
|
|
29
|
+
|
|
30
|
+
This package is fully compatible with Tailwind CSS. The library includes built-in styles that restore default HTML rendering for editor content, which Tailwind's Preflight CSS reset normally removes.
|
|
31
|
+
|
|
32
|
+
**No additional configuration is required** - the package's CSS automatically handles:
|
|
33
|
+
- Heading sizes and font weights (h1-h6)
|
|
34
|
+
- List styles and indentation (ul/ol)
|
|
35
|
+
- Paragraph spacing
|
|
36
|
+
- Blockquote styling
|
|
37
|
+
- Table borders and padding
|
|
38
|
+
- Code block formatting
|
|
39
|
+
- Link underlines
|
|
40
|
+
- Bold/italic rendering
|
|
41
|
+
- Horizontal rule visibility
|
|
42
|
+
|
|
43
|
+
The styles are scoped to `.themed-mdx-editor` and won't affect the rest of your application.
|
|
44
|
+
|
|
28
45
|
## Usage
|
|
29
46
|
|
|
30
47
|
### Basic Usage with Theme Provider
|
package/dist/index.css
CHANGED
|
@@ -164,3 +164,136 @@ button[class*=selectTrigger][data-toolbar-item=true] [class*=selectDropdownArrow
|
|
|
164
164
|
background: var(--mdx-editor-fg);
|
|
165
165
|
opacity: 0.5;
|
|
166
166
|
}
|
|
167
|
+
.themed-mdx-editor h1 {
|
|
168
|
+
font-size: 2em;
|
|
169
|
+
font-weight: 700;
|
|
170
|
+
margin-top: 0.67em;
|
|
171
|
+
margin-bottom: 0.67em;
|
|
172
|
+
line-height: 1.2;
|
|
173
|
+
}
|
|
174
|
+
.themed-mdx-editor h2 {
|
|
175
|
+
font-size: 1.5em;
|
|
176
|
+
font-weight: 600;
|
|
177
|
+
margin-top: 0.83em;
|
|
178
|
+
margin-bottom: 0.83em;
|
|
179
|
+
line-height: 1.3;
|
|
180
|
+
}
|
|
181
|
+
.themed-mdx-editor h3 {
|
|
182
|
+
font-size: 1.17em;
|
|
183
|
+
font-weight: 600;
|
|
184
|
+
margin-top: 1em;
|
|
185
|
+
margin-bottom: 1em;
|
|
186
|
+
line-height: 1.4;
|
|
187
|
+
}
|
|
188
|
+
.themed-mdx-editor h4 {
|
|
189
|
+
font-size: 1em;
|
|
190
|
+
font-weight: 600;
|
|
191
|
+
margin-top: 1.33em;
|
|
192
|
+
margin-bottom: 1.33em;
|
|
193
|
+
line-height: 1.5;
|
|
194
|
+
}
|
|
195
|
+
.themed-mdx-editor h5 {
|
|
196
|
+
font-size: 0.83em;
|
|
197
|
+
font-weight: 600;
|
|
198
|
+
margin-top: 1.67em;
|
|
199
|
+
margin-bottom: 1.67em;
|
|
200
|
+
line-height: 1.5;
|
|
201
|
+
}
|
|
202
|
+
.themed-mdx-editor h6 {
|
|
203
|
+
font-size: 0.67em;
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
margin-top: 2.33em;
|
|
206
|
+
margin-bottom: 2.33em;
|
|
207
|
+
line-height: 1.5;
|
|
208
|
+
}
|
|
209
|
+
.themed-mdx-editor p {
|
|
210
|
+
margin-top: 1em;
|
|
211
|
+
margin-bottom: 1em;
|
|
212
|
+
}
|
|
213
|
+
.themed-mdx-editor ul {
|
|
214
|
+
list-style-type: disc;
|
|
215
|
+
margin-top: 1em;
|
|
216
|
+
margin-bottom: 1em;
|
|
217
|
+
padding-left: 2.5em;
|
|
218
|
+
}
|
|
219
|
+
.themed-mdx-editor ul ul {
|
|
220
|
+
list-style-type: circle;
|
|
221
|
+
margin-top: 0.5em;
|
|
222
|
+
margin-bottom: 0.5em;
|
|
223
|
+
}
|
|
224
|
+
.themed-mdx-editor ul ul ul {
|
|
225
|
+
list-style-type: square;
|
|
226
|
+
}
|
|
227
|
+
.themed-mdx-editor ol {
|
|
228
|
+
list-style-type: decimal;
|
|
229
|
+
margin-top: 1em;
|
|
230
|
+
margin-bottom: 1em;
|
|
231
|
+
padding-left: 2.5em;
|
|
232
|
+
}
|
|
233
|
+
.themed-mdx-editor ol ol {
|
|
234
|
+
list-style-type: lower-alpha;
|
|
235
|
+
margin-top: 0.5em;
|
|
236
|
+
margin-bottom: 0.5em;
|
|
237
|
+
}
|
|
238
|
+
.themed-mdx-editor ol ol ol {
|
|
239
|
+
list-style-type: lower-roman;
|
|
240
|
+
}
|
|
241
|
+
.themed-mdx-editor li {
|
|
242
|
+
margin-top: 0.25em;
|
|
243
|
+
margin-bottom: 0.25em;
|
|
244
|
+
}
|
|
245
|
+
.themed-mdx-editor blockquote {
|
|
246
|
+
margin-top: 1em;
|
|
247
|
+
margin-bottom: 1em;
|
|
248
|
+
margin-left: 2.5em;
|
|
249
|
+
margin-right: 2.5em;
|
|
250
|
+
padding-left: 1em;
|
|
251
|
+
border-left: 4px solid currentColor;
|
|
252
|
+
opacity: 0.8;
|
|
253
|
+
}
|
|
254
|
+
.themed-mdx-editor code {
|
|
255
|
+
font-family: monospace;
|
|
256
|
+
font-size: 0.9em;
|
|
257
|
+
}
|
|
258
|
+
.themed-mdx-editor pre {
|
|
259
|
+
margin-top: 1em;
|
|
260
|
+
margin-bottom: 1em;
|
|
261
|
+
padding: 1em;
|
|
262
|
+
overflow: auto;
|
|
263
|
+
}
|
|
264
|
+
.themed-mdx-editor pre code {
|
|
265
|
+
font-size: inherit;
|
|
266
|
+
}
|
|
267
|
+
.themed-mdx-editor table {
|
|
268
|
+
border-collapse: collapse;
|
|
269
|
+
margin-top: 1em;
|
|
270
|
+
margin-bottom: 1em;
|
|
271
|
+
width: 100%;
|
|
272
|
+
}
|
|
273
|
+
.themed-mdx-editor th,
|
|
274
|
+
.themed-mdx-editor td {
|
|
275
|
+
padding: 0.5em;
|
|
276
|
+
text-align: left;
|
|
277
|
+
}
|
|
278
|
+
.themed-mdx-editor th {
|
|
279
|
+
font-weight: 600;
|
|
280
|
+
}
|
|
281
|
+
.themed-mdx-editor strong,
|
|
282
|
+
.themed-mdx-editor b {
|
|
283
|
+
font-weight: 700;
|
|
284
|
+
}
|
|
285
|
+
.themed-mdx-editor em,
|
|
286
|
+
.themed-mdx-editor i {
|
|
287
|
+
font-style: italic;
|
|
288
|
+
}
|
|
289
|
+
.themed-mdx-editor a {
|
|
290
|
+
text-decoration: underline;
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
}
|
|
293
|
+
.themed-mdx-editor hr {
|
|
294
|
+
margin-top: 1.5em;
|
|
295
|
+
margin-bottom: 1.5em;
|
|
296
|
+
border: 0;
|
|
297
|
+
border-top: 1px solid currentColor;
|
|
298
|
+
opacity: 0.3;
|
|
299
|
+
}
|
package/dist/index.mjs
CHANGED
|
@@ -143,10 +143,10 @@ function preprocessMDX(markdown, options = {}) {
|
|
|
143
143
|
debug = false
|
|
144
144
|
} = options;
|
|
145
145
|
let activeRules = rules;
|
|
146
|
-
if (enable && enable.length > 0) {
|
|
146
|
+
if (Array.isArray(enable) && enable.length > 0) {
|
|
147
147
|
activeRules = rules.filter((r) => enable.includes(r.name));
|
|
148
148
|
}
|
|
149
|
-
if (disable && disable.length > 0) {
|
|
149
|
+
if (Array.isArray(disable) && disable.length > 0) {
|
|
150
150
|
activeRules = activeRules.filter((r) => !disable.includes(r.name));
|
|
151
151
|
}
|
|
152
152
|
if (debug) {
|
|
@@ -535,10 +535,10 @@ var mdxAutoFix = (options = {}) => {
|
|
|
535
535
|
byTransformer: {}
|
|
536
536
|
};
|
|
537
537
|
let activeTransformers = transformers.filter((t) => t.defaultEnabled);
|
|
538
|
-
if (enable && enable.length > 0) {
|
|
538
|
+
if (Array.isArray(enable) && enable.length > 0) {
|
|
539
539
|
activeTransformers = transformers.filter((t) => enable.includes(t.name));
|
|
540
540
|
}
|
|
541
|
-
if (disable && disable.length > 0) {
|
|
541
|
+
if (Array.isArray(disable) && disable.length > 0) {
|
|
542
542
|
activeTransformers = activeTransformers.filter((t) => !disable.includes(t.name));
|
|
543
543
|
}
|
|
544
544
|
if (debug) {
|
package/dist/styles.css
CHANGED
|
@@ -223,3 +223,176 @@ button[class*='selectTrigger'][data-toolbar-item='true'] [class*='selectDropdown
|
|
|
223
223
|
background: var(--mdx-editor-fg);
|
|
224
224
|
opacity: 0.5;
|
|
225
225
|
}
|
|
226
|
+
|
|
227
|
+
/*
|
|
228
|
+
* Tailwind CSS Compatibility Styles
|
|
229
|
+
* Tailwind's Preflight resets all default HTML styles, but MDXEditor expects them.
|
|
230
|
+
* These styles restore necessary defaults for proper content rendering.
|
|
231
|
+
*/
|
|
232
|
+
|
|
233
|
+
/* Restore default heading styles */
|
|
234
|
+
.themed-mdx-editor h1 {
|
|
235
|
+
font-size: 2em;
|
|
236
|
+
font-weight: 700;
|
|
237
|
+
margin-top: 0.67em;
|
|
238
|
+
margin-bottom: 0.67em;
|
|
239
|
+
line-height: 1.2;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.themed-mdx-editor h2 {
|
|
243
|
+
font-size: 1.5em;
|
|
244
|
+
font-weight: 600;
|
|
245
|
+
margin-top: 0.83em;
|
|
246
|
+
margin-bottom: 0.83em;
|
|
247
|
+
line-height: 1.3;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.themed-mdx-editor h3 {
|
|
251
|
+
font-size: 1.17em;
|
|
252
|
+
font-weight: 600;
|
|
253
|
+
margin-top: 1em;
|
|
254
|
+
margin-bottom: 1em;
|
|
255
|
+
line-height: 1.4;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.themed-mdx-editor h4 {
|
|
259
|
+
font-size: 1em;
|
|
260
|
+
font-weight: 600;
|
|
261
|
+
margin-top: 1.33em;
|
|
262
|
+
margin-bottom: 1.33em;
|
|
263
|
+
line-height: 1.5;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.themed-mdx-editor h5 {
|
|
267
|
+
font-size: 0.83em;
|
|
268
|
+
font-weight: 600;
|
|
269
|
+
margin-top: 1.67em;
|
|
270
|
+
margin-bottom: 1.67em;
|
|
271
|
+
line-height: 1.5;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.themed-mdx-editor h6 {
|
|
275
|
+
font-size: 0.67em;
|
|
276
|
+
font-weight: 600;
|
|
277
|
+
margin-top: 2.33em;
|
|
278
|
+
margin-bottom: 2.33em;
|
|
279
|
+
line-height: 1.5;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Restore default paragraph spacing */
|
|
283
|
+
.themed-mdx-editor p {
|
|
284
|
+
margin-top: 1em;
|
|
285
|
+
margin-bottom: 1em;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* Restore default list styles */
|
|
289
|
+
.themed-mdx-editor ul {
|
|
290
|
+
list-style-type: disc;
|
|
291
|
+
margin-top: 1em;
|
|
292
|
+
margin-bottom: 1em;
|
|
293
|
+
padding-left: 2.5em;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.themed-mdx-editor ul ul {
|
|
297
|
+
list-style-type: circle;
|
|
298
|
+
margin-top: 0.5em;
|
|
299
|
+
margin-bottom: 0.5em;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.themed-mdx-editor ul ul ul {
|
|
303
|
+
list-style-type: square;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.themed-mdx-editor ol {
|
|
307
|
+
list-style-type: decimal;
|
|
308
|
+
margin-top: 1em;
|
|
309
|
+
margin-bottom: 1em;
|
|
310
|
+
padding-left: 2.5em;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.themed-mdx-editor ol ol {
|
|
314
|
+
list-style-type: lower-alpha;
|
|
315
|
+
margin-top: 0.5em;
|
|
316
|
+
margin-bottom: 0.5em;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.themed-mdx-editor ol ol ol {
|
|
320
|
+
list-style-type: lower-roman;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.themed-mdx-editor li {
|
|
324
|
+
margin-top: 0.25em;
|
|
325
|
+
margin-bottom: 0.25em;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Restore default blockquote styles */
|
|
329
|
+
.themed-mdx-editor blockquote {
|
|
330
|
+
margin-top: 1em;
|
|
331
|
+
margin-bottom: 1em;
|
|
332
|
+
margin-left: 2.5em;
|
|
333
|
+
margin-right: 2.5em;
|
|
334
|
+
padding-left: 1em;
|
|
335
|
+
border-left: 4px solid currentColor;
|
|
336
|
+
opacity: 0.8;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* Restore default code styles */
|
|
340
|
+
.themed-mdx-editor code {
|
|
341
|
+
font-family: monospace;
|
|
342
|
+
font-size: 0.9em;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.themed-mdx-editor pre {
|
|
346
|
+
margin-top: 1em;
|
|
347
|
+
margin-bottom: 1em;
|
|
348
|
+
padding: 1em;
|
|
349
|
+
overflow: auto;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.themed-mdx-editor pre code {
|
|
353
|
+
font-size: inherit;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
/* Restore default table styles */
|
|
357
|
+
.themed-mdx-editor table {
|
|
358
|
+
border-collapse: collapse;
|
|
359
|
+
margin-top: 1em;
|
|
360
|
+
margin-bottom: 1em;
|
|
361
|
+
width: 100%;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.themed-mdx-editor th,
|
|
365
|
+
.themed-mdx-editor td {
|
|
366
|
+
padding: 0.5em;
|
|
367
|
+
text-align: left;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.themed-mdx-editor th {
|
|
371
|
+
font-weight: 600;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Restore default emphasis styles */
|
|
375
|
+
.themed-mdx-editor strong,
|
|
376
|
+
.themed-mdx-editor b {
|
|
377
|
+
font-weight: 700;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.themed-mdx-editor em,
|
|
381
|
+
.themed-mdx-editor i {
|
|
382
|
+
font-style: italic;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/* Restore default link styles */
|
|
386
|
+
.themed-mdx-editor a {
|
|
387
|
+
text-decoration: underline;
|
|
388
|
+
cursor: pointer;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
/* Restore default hr styles */
|
|
392
|
+
.themed-mdx-editor hr {
|
|
393
|
+
margin-top: 1.5em;
|
|
394
|
+
margin-bottom: 1.5em;
|
|
395
|
+
border: 0;
|
|
396
|
+
border-top: 1px solid currentColor;
|
|
397
|
+
opacity: 0.3;
|
|
398
|
+
}
|