@principal-ade/industry-themed-mdx-editor 0.1.9 → 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.
Files changed (6) hide show
  1. package/README.md +17 -0
  2. package/dist/index.css +133 -0
  3. package/dist/index.mjs +6 -16
  4. package/dist/src/components/ThemedMDXEditor.d.ts.map +1 -1
  5. package/dist/styles.css +173 -0
  6. 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) {
@@ -679,19 +679,11 @@ var ThemedMDXEditor = forwardRef((props, ref) => {
679
679
  const currentValue = isControlled ? controlledMarkdown ?? "" : internalValue;
680
680
  const processedMarkdown = useMemo(() => {
681
681
  if (!autoFixMDX) {
682
- console.log("[ThemedMDXEditor] autoFixMDX is disabled");
683
682
  return currentValue;
684
683
  }
685
- console.log("[ThemedMDXEditor] Preprocessing markdown, length:", currentValue.length);
686
- const processed = preprocessMDX(currentValue, {
687
- preserveCodeBlocks: true,
688
- debug: true,
689
- onStats: (stats) => {
690
- console.log("[ThemedMDXEditor] Preprocessing stats:", stats);
691
- }
684
+ return preprocessMDX(currentValue, {
685
+ preserveCodeBlocks: true
692
686
  });
693
- console.log("[ThemedMDXEditor] Preprocessing complete, processed length:", processed.length);
694
- return processed;
695
687
  }, [currentValue, autoFixMDX]);
696
688
  useEffect(() => {
697
689
  setIsMounted(true);
@@ -897,8 +889,6 @@ var ThemedMDXEditor = forwardRef((props, ref) => {
897
889
  );
898
890
  return /* @__PURE__ */ jsx("div", { style: { height: "100%", ...containerStyle }, children: loading });
899
891
  }
900
- console.log("[ThemedMDXEditor] About to render MDXEditor with markdown length:", processedMarkdown.length);
901
- console.log("[ThemedMDXEditor] First 200 chars of markdown being passed:", processedMarkdown.substring(0, 200));
902
892
  return /* @__PURE__ */ jsxs(
903
893
  "div",
904
894
  {
package/dist/src/components/ThemedMDXEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemedMDXEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedMDXEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AAExC,OAAO,KAQN,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,MAAM,GACN;IACE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,GACD,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,MAAM,CAAC;AAEX,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,0BAA0B,CAAC;IAI1G,KAAK,EAAE,KAAK,CAAC;IAIb,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAInC,YAAY,CAAC,EAAE,MAAM,CAAC;IAItB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAIjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAIlB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAI7B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAK3C,aAAa,CAAC,EAAE,OAAO,CAAC;IAIxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAI5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAIrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAoB3B,eAAe,CAAC,EAAE,eAAe,CAAC;IAelC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAuFD,eAAO,MAAM,eAAe,+FA0X1B,CAAC"}
1
+ {"version":3,"file":"ThemedMDXEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedMDXEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AAExC,OAAO,KAQN,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,MAAM,GACN;IACE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,GACD,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,MAAM,CAAC;AAEX,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,0BAA0B,CAAC;IAI1G,KAAK,EAAE,KAAK,CAAC;IAIb,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAInC,YAAY,CAAC,EAAE,MAAM,CAAC;IAItB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAIjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAIlB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAI7B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAK3C,aAAa,CAAC,EAAE,OAAO,CAAC;IAIxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAI5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAIrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAoB3B,eAAe,CAAC,EAAE,eAAe,CAAC;IAelC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAuFD,eAAO,MAAM,eAAe,+FA6W1B,CAAC"}
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ade/industry-themed-mdx-editor",
3
- "version": "0.1.9",
3
+ "version": "0.1.12",
4
4
  "description": "Industry-themed MDX editor wrapper with integrated theming",
5
5
  "type": "module",
6
6
  "main": "dist/index.mjs",