Bug: Phenomic does not render markdown tables

[jfjessup]

Phenomic has an issue rendering markdown tables. Please see the snippet of markdown below:

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| left one     | center one     | right one     |
| left two     | center two     | right two     |

It is rendered as this:

Left-aligned
Center-aligned
Right-aligned
left one
center one
right one
left two
center two
right two

The html generated is this:

<table>
  <thead>
    <tr>
      <div>Left-aligned</div>
      <div>Center-aligned</div>
      <div>Right-aligned</div>
    </tr>
  </thead>
  <tbody>
    <tr>
      <div>left one</div>
      <div>center one</div>
      <div>right one</div>
    </tr>
    <tr>
      <div>left two</div>
      <div>center two</div>
      <div>right two</div>
    </tr>
  </tbody>
</table>

The <th> and <td> tags are missing when the markdown syntax tree is rendered by the BodyRenderer.

I think the issue is in the preprocessed markdown syntax tree that is being passed into the browser at run time. The above markdown is passed to the browser as this:

{
  "c": [
    {
      "c": {
        "c": [
          {
            "c": "Left-aligned",
            "p": {
              "align": "left"
            }
          },
          {
            "c": "Center-aligned",
            "p": {
              "align": "center"
            }
          },
          {
            "c": "Right-aligned",
            "p": {
              "align": "right"
            }
          }
        ],
        "t": "tr"
      },
      "t": "thead"
    },
    {
      "c": [
        {
          "c": [
            {
              "c": "left one",
              "p": {
                "align": "left"
              }
            },
            {
              "c": "center one",
              "p": {
                "align": "center"
              }
            },
            {
              "c": "right one",
              "p": {
                "align": "right"
              }
            }
          ],
          "t": "tr"
        },
        {
          "c": [
            {
              "c": "left two",
              "p": {
                "align": "left"
              }
            },
            {
              "c": "center two",
              "p": {
                "align": "center"
              }
            },
            {
              "c": "right two",
              "p": {
                "align": "right"
              }
            }
          ],
          "t": "tr"
        }
      ],
      "t": "tbody"
    }
  ],
  "t": "table"
}

The attribute "t" on the leaf nodes in the syntax tree are not set.

I'm not sure if this is an issue in phenomic or phenomic's use of remark to preprocess markdown files. I'm happy to dig in more and put together a PR, just let me know. The BodyRenderer is a core part of phenomic and phenomic is in active development so I'm holding off for now.

[MoOx]

Thanks for reporting this. I think we have a (probably) too brutal sanitizer
https://github.com/phenomic/phenomic/blob/3847281d1f2601922476c1f9e47f2693cf49ab65/packages/plugin-transform-markdown/src/remark-plugins.js#L38
Sanitizer source: https://github.com/syntax-tree/hast-util-sanitize/blob/master/lib/github.json

Can you check if your stuff and tell me if the sanitizer is the problem?
I already got an issue with it.

FYI

t: tag
p: props
c: children

[jfjessup]

Thanks @MoOx for getting back to me on this issue.

I don't think the sanitizer is the issue here. Logically, phenomic is using the github schema to sanitize the hast syntax tree, but github supports tables so I would assume phenomic wouldn't have an issue. In addition, I pulled the input and output of remark-react's sanitize call and the correct tagNames are there in the input and the output hast trees.

However, when inspecting remark-react I figured out the issue as it's actually an issue with remark-react, not phenomic. The issue is this line. components[name] is only used for <td> and <th> tags, however components[name] is a function expecting props to be passed because it's set here. The code never passes in props so the result is undefined hence why at runtime phenomic is missing the t attribute set here for <td> and <th> elements.

FWIW: once the remark-react issue is fixed phenomic will have a different issue here. The issue will be the component argument will be a single hast node, not a string representing the html tag name. Here's an example:

{
  "p": {
    "style": {
      "textAlign": "center"
    }
  },
  "t": "th"
}

The logic here could be tricky because the component argument now has props to be merged with the props passed into the createComponent function call.

[MoOx]

Thanks for this explanation.
I will take a look and try to fix this problem with the most elegant and reliable way.

[MoOx]

(I think we can simply override td/th components created in remark-react, and just use a string, even if it's a regression somehow... remarkjs/remark-react@c91d4cd

[jfjessup]

Ok. Mind if I put together a PR for that? It could take a few days because I'm on a short vacation right now.

[MoOx]

Yeah, feel free to take a look ! Thanks!

[owenhoskins]

Hey @jfjessup & @MoOx: I am curious if you've explored this further? I have a seemingly related issue where the table marked-up ala github doesn't make it into the markdown syntax tree in the browser. Running 1.0.0-alpha.8. Any ideas?

[MoOx]

@owenhoskins I am actually working on this while fixing #817. Except a fix soon (I have a wip that is actually ready).
In short, I am removing all sanitisation process (that are responsible for this kind of issues).

[MoOx]

Closed by 1bd1d2f

@jfjessup your use case have been added to unit tests!