HTML blocks inside table cells not treated as blocks

[matteson]

HTML inside table cells is not parsed as expected.

In the minimum example below, I expect to have this node:

    {
      type: 'html',
      value: '<div>Test<i>foo</i></div>',
      position: ...
    }

as a child of a tableCell node. Instead, I get:

{
  type: 'tableCell',
  children: [
    { type: 'html', value: '<div>', position: [Object] },
    { type: 'text', value: 'Test', position: [Object] },
    { type: 'html', value: '<i>', position: [Object] },
    { type: 'text', value: 'foo', position: [Object] },
    { type: 'html', value: '</i>', position: [Object] },
    { type: 'html', value: '</div>', position: [Object] }
  ],
  position: ...
}

Minimal example:

var unified = require('unified')
var remarkParse = require('remark-parse')
var remarkGfm = require('remark-gfm')

var processor = unified()
    .use(remarkParse)
    .use(remarkGfm)


const text = '\nParameter | Default \n --------- | ------- \n  <div>Test<i>foo</i></div> | value \n';

const root = processor.parse(text);

function descend(tree) {
    console.log(tree);
    if (tree.children) {
        tree.children.map(item => descend(item));
    }
}

descend(root)

Your environment

• OS: Mac
• Packages:
  "remark-parse": "^9.0.0"
  "remark-gfm": "^1.0.0"
• Env: node 14

[Titus]

This is an https://xyproblem.info. What is your actual Q?

There are no blocks in table cells. Table cells include stuff like emphasis and such, not blocks like blockquotes

[matteson]

I may be using some terminology wrong then. I'm trying to put HTML in a table cell.

The markdown implements a table. One cell contains an html string. I'm expecting it to come back as an html node, with the same structure as if I parsed it outside of a table cell. Instead, it comes back with a different structure, as described in the example.

[Titus]

This is how HTML works in “inline” parsing of HTML. Take this for example: https://spec.commonmark.org/dingus/?text=a%20%3Cdiv%3E*b*%3C%2Fdiv%3E. The markdown between the tags works because the tags are separate.

If you want to work with HTML, there’s rehype for that:

unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype, {allowDangerousHtml: true})
  .use(rehypeRaw)
  .use(/* now you have an HTML AST! */)