Why my serializeHtml result is pure text,no any html tag?

[mazhan465]

This is my jsx code:

value = value.filter((obj: any) => Object.keys(obj).length > 0);
return (
  <Typography>
    <div
      dangerouslySetInnerHTML={{
        __html: serializeHtml<MyValue>(editor, {
          nodes: value,
          convertNewLinesToHtmlBr: true
        }),
      }}
    />
  </Typography>
);

And finally I get result just text, no HTML, alse not <H1>

^{Edited by @12joan to improve code formatting}

[chandreshpatidar]

Hi @mazhan465 can you provide the code link to debug it?

[12joan]

It's quite difficult to tell what's going on here without more context.

Since you're calling filter on value, it's clear that value is an array, presumably of Slate nodes. I don't know why you're filtering on presence of keys, though, since I've never seen an empty object in a Slate value before.

From the output you're getting, it looks to me like your value array contains a single text fragment (about a new medicine to treat stomache disorders, if I'm reading it correctly?) containing no inline or block formatting. I'm not sure why the JSON for this text fragment is being rendered from serializeHtml, unless the JSON was part of the original text.

If you want serializeHtml to output HTML for block elements like headings, you need to pass it an array of Slate values containing a heading node. You might want to be passing editor.children, to nodes, for example, which is the most common use case.