Styles and other metadata is lost when converting html to mdast

[mayank1513]

For example:

toMdast(fromHTML(`<table border="1" cellspacing="0" cellpadding="10">
    <tr style="font-weight: bold">
        <th>Name</th>
        <th>Age</th>
        <th>Location</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
        <td>San Francisco</td>
    </tr>
</table>
`, { fragment: true }))

The styles are lost. The result is

{
  "type": "root",
  "value": "<table border=\"1\" cellspacing=\"0\" cellpadding=\"10\">\r\n    <tr style=\"font-weight: bold\">\r\n        <th>Name</th>\r\n        <th>Age</th>\r\n        <th>Location</th>\r\n    </tr>\r\n    <tr>\r\n        <td>John</td>\r\n        <td>25</td>\r\n        <td>New York</td>\r\n    </tr>\r\n    <tr>\r\n        <td>Alice</td>\r\n        <td>30</td>\r\n        <td>San Francisco</td>\r\n    </tr>\r\n</table>",
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 17,
      "column": 9,
      "offset": 370
    }
  },
  "children": [
    {
      "type": "table",
      "align": [
        null,
        null,
        null
      ],
      "children": [
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "Name",
                  "position": {
                    "start": {
                      "line": 3,
                      "column": 13,
                      "offset": 101
                    },
                    "end": {
                      "line": 3,
                      "column": 17,
                      "offset": 105
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 3,
                  "column": 9,
                  "offset": 97
                },
                "end": {
                  "line": 3,
                  "column": 22,
                  "offset": 110
                }
              }
            },
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "Age",
                  "position": {
                    "start": {
                      "line": 4,
                      "column": 13,
                      "offset": 124
                    },
                    "end": {
                      "line": 4,
                      "column": 16,
                      "offset": 127
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 4,
                  "column": 9,
                  "offset": 120
                },
                "end": {
                  "line": 4,
                  "column": 21,
                  "offset": 132
                }
              }
            },
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "Location",
                  "position": {
                    "start": {
                      "line": 5,
                      "column": 13,
                      "offset": 146
                    },
                    "end": {
                      "line": 5,
                      "column": 21,
                      "offset": 154
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 5,
                  "column": 9,
                  "offset": 142
                },
                "end": {
                  "line": 5,
                  "column": 26,
                  "offset": 159
                }
              }
            }
          ],
          "position": {
            "start": {
              "line": 2,
              "column": 5,
              "offset": 57
            },
            "end": {
              "line": 6,
              "column": 10,
              "offset": 170
            }
          }
        },
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "John",
                  "position": {
                    "start": {
                      "line": 8,
                      "column": 13,
                      "offset": 194
                    },
                    "end": {
                      "line": 8,
                      "column": 17,
                      "offset": 198
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 8,
                  "column": 9,
                  "offset": 190
                },
                "end": {
                  "line": 8,
                  "column": 22,
                  "offset": 203
                }
              }
            },
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "25",
                  "position": {
                    "start": {
                      "line": 9,
                      "column": 13,
                      "offset": 217
                    },
                    "end": {
                      "line": 9,
                      "column": 15,
                      "offset": 219
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 9,
                  "column": 9,
                  "offset": 213
                },
                "end": {
                  "line": 9,
                  "column": 20,
                  "offset": 224
                }
              }
            },
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "New York",
                  "position": {
                    "start": {
                      "line": 10,
                      "column": 13,
                      "offset": 238
                    },
                    "end": {
                      "line": 10,
                      "column": 21,
                      "offset": 246
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 10,
                  "column": 9,
                  "offset": 234
                },
                "end": {
                  "line": 10,
                  "column": 26,
                  "offset": 251
                }
              }
            }
          ],
          "position": {
            "start": {
              "line": 7,
              "column": 5,
              "offset": 176
            },
            "end": {
              "line": 11,
              "column": 10,
              "offset": 262
            }
          }
        },
        {
          "type": "tableRow",
          "children": [
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "Alice",
                  "position": {
                    "start": {
                      "line": 13,
                      "column": 13,
                      "offset": 286
                    },
                    "end": {
                      "line": 13,
                      "column": 18,
                      "offset": 291
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 13,
                  "column": 9,
                  "offset": 282
                },
                "end": {
                  "line": 13,
                  "column": 23,
                  "offset": 296
                }
              }
            },
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "30",
                  "position": {
                    "start": {
                      "line": 14,
                      "column": 13,
                      "offset": 310
                    },
                    "end": {
                      "line": 14,
                      "column": 15,
                      "offset": 312
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 14,
                  "column": 9,
                  "offset": 306
                },
                "end": {
                  "line": 14,
                  "column": 20,
                  "offset": 317
                }
              }
            },
            {
              "type": "tableCell",
              "children": [
                {
                  "type": "text",
                  "value": "San Francisco",
                  "position": {
                    "start": {
                      "line": 15,
                      "column": 13,
                      "offset": 331
                    },
                    "end": {
                      "line": 15,
                      "column": 26,
                      "offset": 344
                    }
                  }
                }
              ],
              "position": {
                "start": {
                  "line": 15,
                  "column": 9,
                  "offset": 327
                },
                "end": {
                  "line": 15,
                  "column": 31,
                  "offset": 349
                }
              }
            }
          ],
          "position": {
            "start": {
              "line": 12,
              "column": 5,
              "offset": 268
            },
            "end": {
              "line": 16,
              "column": 10,
              "offset": 360
            }
          }
        }
      ],
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 17,
          "column": 9,
          "offset": 370
        }
      }
    }
  ]
}

should the styles info be passed in data filed?

[ChristianMurphy]

Welcome @mayank1513! 👋
Style attributes don't exist in HTML tables https://github.github.com/gfm/#tables-extension-
Without them having something to be transformed into, it doesn't make sense to have them.
So I'm not sure what you mean or expect by "should the styles info be passed in data filed?"

[mayank1513]

We use html to center image etc. Right. Example

{
  "type": "root",
  "value": "<img src=\"https://via.placeholder.com/150\" alt=\"Sample Image\" width=\"150\" height=\"150\" style=\"border-radius: 10px;\" />",
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 1,
      "column": 119,
      "offset": 118
    }
  },
  "children": [
    {
      "type": "image",
      "url": "https://via.placeholder.com/150",
      "title": null,
      "alt": "Sample Image",
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 119,
          "offset": 118
        }
      }
    }
  ]
}

Width and Height.

I am actually trying to convert markdown to docx. https://github.com/tiny-md/mdast2docx

[ChristianMurphy]

Alignment can be preserved, that is part of markdown.
Height and width are not.

I am actually trying to convert markdown to docx

Based on everything else you've shared you are actually converting html to docx.
If you want it be constrained to only markdown features, then you can move it through mdast/markdown.
But you explicitly don't want those restrictions.

If you want to go from HTML directly to PDF keeping the styles, use a browser.
This can be automated with playwright or puppeteer. https://playwright.dev/docs/api/class-page#page-pdf or https://pptr.dev/guides/pdf-generation

[mayank1513]

I am converting markdown with html to docx -> https://github.com/tiny-md/mdast2docx/blob/main/lib/src/plugins/html.ts

[wooorm]

That doesn’t make sense: you now say you want to turn markdown into docx, but your question here is about HTML to docx. Those are different things. Which is it.

Please spend time on your questions. https://github.com/syntax-tree/.github/blob/main/support.md

[mayank1513]

Markdown does support html. So you can have html embedded in markdown.

[wooorm]

Indeed. And why do people use embedded HTML? Because it allows for different things than plain markdown. So, when you turn embedded HTML with more things than markdown, into plain markdown, you loose things.

[ChristianMurphy]

Markdown can embed HTML, that is different from supporting it though.
Again similar to above, you can convert content to HTML if you want styles.
But it you move to Markdown, styles are not a part of the language.

[wooorm]

Aside, I know people often don’t want to hear it, but this seems like an XY problem 😉
See our support guide. Spend time thinking about your question, framing it. What do you actually need to solve? What is your actual problem?