@principal-ade/industry-themed-mdx-editor 0.1.10 → 0.1.13

package/README.md

@@ -25,6 +25,23 @@ or with bun:
 bun add @principal-ade/industry-themed-mdx-editor @mdxeditor/editor @a24z/industry-theme
 ```
 
+## Tailwind CSS Compatibility
+
+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.
+
+**No additional configuration is required** - the package's CSS automatically handles:
+- Heading sizes and font weights (h1-h6)
+- List styles and indentation (ul/ol)
+- Paragraph spacing
+- Blockquote styling
+- Table borders and padding
+- Code block formatting
+- Link underlines
+- Bold/italic rendering
+- Horizontal rule visibility
+
+The styles are scoped to `.themed-mdx-editor` and won't affect the rest of your application.
+
 ## Usage
 
 ### Basic Usage with Theme Provider

package/dist/index.css

@@ -164,3 +164,136 @@ button[class*=selectTrigger][data-toolbar-item=true] [class*=selectDropdownArrow
   background: var(--mdx-editor-fg);
   opacity: 0.5;
 }
+.themed-mdx-editor h1 {
+  font-size: 2em;
+  font-weight: 700;
+  margin-top: 0.67em;
+  margin-bottom: 0.67em;
+  line-height: 1.2;
+}
+.themed-mdx-editor h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 0.83em;
+  margin-bottom: 0.83em;
+  line-height: 1.3;
+}
+.themed-mdx-editor h3 {
+  font-size: 1.17em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  line-height: 1.4;
+}
+.themed-mdx-editor h4 {
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: 1.33em;
+  margin-bottom: 1.33em;
+  line-height: 1.5;
+}
+.themed-mdx-editor h5 {
+  font-size: 0.83em;
+  font-weight: 600;
+  margin-top: 1.67em;
+  margin-bottom: 1.67em;
+  line-height: 1.5;
+}
+.themed-mdx-editor h6 {
+  font-size: 0.67em;
+  font-weight: 600;
+  margin-top: 2.33em;
+  margin-bottom: 2.33em;
+  line-height: 1.5;
+}
+.themed-mdx-editor p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.themed-mdx-editor ul {
+  list-style-type: disc;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding-left: 2.5em;
+}
+.themed-mdx-editor ul ul {
+  list-style-type: circle;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.themed-mdx-editor ul ul ul {
+  list-style-type: square;
+}
+.themed-mdx-editor ol {
+  list-style-type: decimal;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding-left: 2.5em;
+}
+.themed-mdx-editor ol ol {
+  list-style-type: lower-alpha;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+.themed-mdx-editor ol ol ol {
+  list-style-type: lower-roman;
+}
+.themed-mdx-editor li {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+.themed-mdx-editor blockquote {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  padding-left: 1em;
+  border-left: 4px solid currentColor;
+  opacity: 0.8;
+}
+.themed-mdx-editor code {
+  font-family: monospace;
+  font-size: 0.9em;
+}
+.themed-mdx-editor pre {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 1em;
+  overflow: auto;
+}
+.themed-mdx-editor pre code {
+  font-size: inherit;
+}
+.themed-mdx-editor table {
+  border-collapse: collapse;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  width: 100%;
+}
+.themed-mdx-editor th,
+.themed-mdx-editor td {
+  padding: 0.5em;
+  text-align: left;
+}
+.themed-mdx-editor th {
+  font-weight: 600;
+}
+.themed-mdx-editor strong,
+.themed-mdx-editor b {
+  font-weight: 700;
+}
+.themed-mdx-editor em,
+.themed-mdx-editor i {
+  font-style: italic;
+}
+.themed-mdx-editor a {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.themed-mdx-editor hr {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  border: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.3;
+}

package/dist/index.mjs

@@ -143,10 +143,10 @@ function preprocessMDX(markdown, options = {}) {
     debug = false
   } = options;
   let activeRules = rules;
-  if (enable && enable.length > 0) {
+  if (Array.isArray(enable) && enable.length > 0) {
     activeRules = rules.filter((r) => enable.includes(r.name));
   }
-  if (disable && disable.length > 0) {
+  if (Array.isArray(disable) && disable.length > 0) {
     activeRules = activeRules.filter((r) => !disable.includes(r.name));
   }
   if (debug) {
@@ -452,7 +452,9 @@ var KNOWN_LANGUAGES = /* @__PURE__ */ new Set([
   "matlab",
   "diff",
   "text",
-  "plaintext"
+  "plaintext",
+  "mermaid"
+  // For mermaid diagram syntax
 ]);
 var codeBlockLanguageTransformer = {
   name: "code-block-language",
@@ -535,10 +537,10 @@ var mdxAutoFix = (options = {}) => {
       byTransformer: {}
     };
     let activeTransformers = transformers.filter((t) => t.defaultEnabled);
-    if (enable && enable.length > 0) {
+    if (Array.isArray(enable) && enable.length > 0) {
       activeTransformers = transformers.filter((t) => enable.includes(t.name));
     }
-    if (disable && disable.length > 0) {
+    if (Array.isArray(disable) && disable.length > 0) {
       activeTransformers = activeTransformers.filter((t) => !disable.includes(t.name));
     }
     if (debug) {

package/dist/src/plugins/mdx-auto-fix/transformers/code-block-language.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block-language.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/mdx-auto-fix/transformers/code-block-language.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,UAAU,CAAC;AA8BhE,eAAO,MAAM,4BAA4B,EAAE,WA+D1C,CAAC"}
+{"version":3,"file":"code-block-language.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/mdx-auto-fix/transformers/code-block-language.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAsB,MAAM,UAAU,CAAC;AA+BhE,eAAO,MAAM,4BAA4B,EAAE,WA+D1C,CAAC"}

package/dist/styles.css

@@ -223,3 +223,176 @@ button[class*='selectTrigger'][data-toolbar-item='true'] [class*='selectDropdown
   background: var(--mdx-editor-fg);
   opacity: 0.5;
 }
+
+/*
+ * Tailwind CSS Compatibility Styles
+ * Tailwind's Preflight resets all default HTML styles, but MDXEditor expects them.
+ * These styles restore necessary defaults for proper content rendering.
+ */
+
+/* Restore default heading styles */
+.themed-mdx-editor h1 {
+  font-size: 2em;
+  font-weight: 700;
+  margin-top: 0.67em;
+  margin-bottom: 0.67em;
+  line-height: 1.2;
+}
+
+.themed-mdx-editor h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 0.83em;
+  margin-bottom: 0.83em;
+  line-height: 1.3;
+}
+
+.themed-mdx-editor h3 {
+  font-size: 1.17em;
+  font-weight: 600;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  line-height: 1.4;
+}
+
+.themed-mdx-editor h4 {
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: 1.33em;
+  margin-bottom: 1.33em;
+  line-height: 1.5;
+}
+
+.themed-mdx-editor h5 {
+  font-size: 0.83em;
+  font-weight: 600;
+  margin-top: 1.67em;
+  margin-bottom: 1.67em;
+  line-height: 1.5;
+}
+
+.themed-mdx-editor h6 {
+  font-size: 0.67em;
+  font-weight: 600;
+  margin-top: 2.33em;
+  margin-bottom: 2.33em;
+  line-height: 1.5;
+}
+
+/* Restore default paragraph spacing */
+.themed-mdx-editor p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+/* Restore default list styles */
+.themed-mdx-editor ul {
+  list-style-type: disc;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding-left: 2.5em;
+}
+
+.themed-mdx-editor ul ul {
+  list-style-type: circle;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.themed-mdx-editor ul ul ul {
+  list-style-type: square;
+}
+
+.themed-mdx-editor ol {
+  list-style-type: decimal;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding-left: 2.5em;
+}
+
+.themed-mdx-editor ol ol {
+  list-style-type: lower-alpha;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.themed-mdx-editor ol ol ol {
+  list-style-type: lower-roman;
+}
+
+.themed-mdx-editor li {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+/* Restore default blockquote styles */
+.themed-mdx-editor blockquote {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  padding-left: 1em;
+  border-left: 4px solid currentColor;
+  opacity: 0.8;
+}
+
+/* Restore default code styles */
+.themed-mdx-editor code {
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.themed-mdx-editor pre {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 1em;
+  overflow: auto;
+}
+
+.themed-mdx-editor pre code {
+  font-size: inherit;
+}
+
+/* Restore default table styles */
+.themed-mdx-editor table {
+  border-collapse: collapse;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  width: 100%;
+}
+
+.themed-mdx-editor th,
+.themed-mdx-editor td {
+  padding: 0.5em;
+  text-align: left;
+}
+
+.themed-mdx-editor th {
+  font-weight: 600;
+}
+
+/* Restore default emphasis styles */
+.themed-mdx-editor strong,
+.themed-mdx-editor b {
+  font-weight: 700;
+}
+
+.themed-mdx-editor em,
+.themed-mdx-editor i {
+  font-style: italic;
+}
+
+/* Restore default link styles */
+.themed-mdx-editor a {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* Restore default hr styles */
+.themed-mdx-editor hr {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  border: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.3;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ade/industry-themed-mdx-editor",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "Industry-themed MDX editor wrapper with integrated theming",
   "type": "module",
   "main": "dist/index.mjs",