@takazudo/mdx-formatter 0.3.0 → 0.4.0

package/dist/hybrid-formatter.d.ts

@@ -29,6 +29,10 @@ export declare class HybridFormatter {
     collectJsxFormatOperations(operations: FormatterOperation[]): void;
     needsJsxFormatting(node: MdxJsxElement, originalText: string): boolean;
     formatJsxElement(node: MdxJsxElement, originalText: string): string;
+    /**
+     * Check if template literal indentation should be preserved based on settings.
+     */
+    shouldPreserveTemplateLiteral(): boolean;
     getAttributeString(attr: MdxJsxAttribute, originalText: string): string;
     extractAttributeExpression(attrName: string, originalText: string): string | null;
     extractExpressionValue(expr: MdxJsxAttributeValueExpression): string;

package/dist/hybrid-formatter.js

@@ -499,15 +499,21 @@ export class HybridFormatter {
             // Add each attribute on its own line with proper indent
             for (const attr of attributes) {
                 const attrStr = this.getAttributeString(attr, originalText);
-                // Handle multi-line expression values (like arrays)
+                // Handle multi-line expression values (like arrays, template literals)
                 if (attrStr.includes('\n')) {
                     const attrLines = attrStr.split('\n');
                     lines.push(`${indent}${attrLines[0]}`);
+                    // Check if this is a template literal expression (backtick string)
+                    // Template literal content has meaningful indentation that must be preserved
+                    const isTemplateLiteral = this.shouldPreserveTemplateLiteral() && attrLines[0].includes('={`');
                     // Add subsequent lines with additional indentation for expression content
                     for (let i = 1; i < attrLines.length; i++) {
-                        // Check if this line is part of the expression or the closing
                         const line = attrLines[i];
-                        if (line.trim().endsWith(']}') || line.trim() === ']}') {
+                        if (isTemplateLiteral) {
+                            // Preserve original indentation inside template literals
+                            lines.push(line);
+                        }
+                        else if (line.trim().endsWith(']}') || line.trim() === ']}') {
                             // Closing of array expression
                             lines.push(`${indent}${line.trim()}`);
                         }
@@ -561,6 +567,12 @@ export class HybridFormatter {
         }
         return lines.join('\n');
     }
+    /**
+     * Check if template literal indentation should be preserved based on settings.
+     */
+    shouldPreserveTemplateLiteral() {
+        return this.settings.formatMultiLineJsx.preserveTemplateLiteralIndent !== false;
+    }
     getAttributeString(attr, originalText) {
         if (!attr || !attr.name)
             return '';
@@ -573,7 +585,20 @@ export class HybridFormatter {
             else if (attr.value && attr.value.type === 'mdxJsxAttributeValueExpression') {
                 // Expression value
                 const exprValue = this.extractExpressionValue(attr.value);
-                if (exprValue) {
+                // For template literals, prefer extracting from original text to preserve
+                // internal indentation (AST normalizes/strips leading whitespace)
+                if (this.shouldPreserveTemplateLiteral() &&
+                    exprValue &&
+                    exprValue.trimStart().startsWith('`')) {
+                    const extracted = this.extractAttributeExpression(attr.name, originalText);
+                    if (extracted) {
+                        result = extracted;
+                    }
+                    else {
+                        result += `={${exprValue}}`;
+                    }
+                }
+                else if (exprValue) {
                     result += `={${exprValue}}`;
                 }
                 else {

package/dist/settings.js

@@ -15,6 +15,8 @@ export const formatterSettings = {
         indentSize: 2,
         // Components to ignore (preserve their formatting completely)
         ignoreComponents: [],
+        // Preserve indentation inside template literal JSX attributes (html={`...`}, css={`...`})
+        preserveTemplateLiteralIndent: true,
     },
     // Rule 3: Format all HTML blocks within MDX using Prettier
     formatHtmlBlocksInMdx: {

package/dist/types.d.ts

@@ -76,6 +76,7 @@ export interface FormatMultiLineJsxSetting {
     indentSize: number;
     indentType?: string;
     ignoreComponents: string[];
+    preserveTemplateLiteralIndent: boolean;
 }
 export interface FormatHtmlBlocksInMdxSetting {
     enabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/mdx-formatter",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "AST-based markdown and MDX formatter with Japanese text support",
   "type": "module",
   "main": "dist/index.js",