What is the right way to add and display an element?

[reypm]

I have a custom plugin where I am getting a node and I would like to add an html element. Here is a snippet of the function receiving the node:

const processPageInclude = (node: any, productId?: string) => {
    const data = node.data || (node.data = {})
    data.hProperties = node.attributes;

    node.children.unshift({
        type: 'containerDirective',
        children: [{
            type: 'html',
            value: '<div>This is some HTML</div>div>'
        }]
    });

   console.log(node)
}

node will contain the HTML This is some HTML but it never gets rendered to the UI ... what I am missing?

[ChristianMurphy]

Welcome @reypm!

A few thoughts.

1. since you are working with HTML here, you may want to create a rehype (HTML) plugin rather than a remark (Markdown) one.
2. If you do decide to do a markdown plugin anyway, the rest of your pipeline matters, you need to configure remark-rehype to preserve any raw HTML https://github.com/remarkjs/remark-rehype#optionsallowdangeroushtml (the exact details will look different depending on which of the many ways to use remark/mdx/react-markdown you are using)

[reypm]

I must be missing something trivial here ... in the function remarkDirectiveCustomize you added the node.name as a property but for some reason, I cannot access it inside of rehypeRenderDirective which I would need to be able to execute the switch statement (I am open to suggestions on this one since name is not accessible):

switch (node.name) {
  case "my-include":
    myCustomPlugin(node);
    break;
  case "my-include-2":
    myCustomPlugin(node);
    break;
  case "my-include-3":
    myCustomPlugin(node);
    break;
  default:
}

the other thing I still do not get is how can I return the gathered content from inside myCustomPlugin? I have this currently:

const myCustomPlugin = (node: any) => {
  const data = node.data || (node.data = {});
  data.hProperties = node.attributes || {};
  const newNode = node;

  const markdownSource = `
# heading

* list
* items
`;

  newNode.children.unshift({
    type: "containerDirective",
    children: [
      {
        type: "html",
        value: "<div>reynier</div>"
      },
      {
        type: "html",
        value: markdownSource
      }
    ]
  });
};

export default myCustomPlugin;

here is some code you can play with https://codesandbox.io/s/youthful-rosalind-l9zj7d

[ChristianMurphy]

you added the node.name

There is no node.name attribute added.
There is a node.type attribute added

node.data.hProperties = { type: node.name };

I cannot access it inside of rehypeRenderDirective

properties are not accessible because you reset them before logging or switching

node.properties = {};

console.log(node.properties)

the other thing I still do not get is how can I return the gathered content from inside myCustomPlugin?

A few things to consider:

1. plugins still need to be run, you have not run your plugin anywhere in the example you shared
2. don't reset properties if you want to read from them
3. make sure the label/name of the property matches what you set in the remark plugin
4. the plugin that renders is an HTML/HAST plugin, anything you pass to it need to be in hast format, not raw HTML or markdown, for example to go from markdown to hast use a snippet like the following:

   node.children = unified()
        .use(remarkRehype)
        // ⚠️ IMPORTANT! if content is untrusted also sanitize it with `rehype-sanitize`
        .runSync(
          unified()
           .use(remarkParse)
           .parse("# example")
        )
        .children as ElementContent[];

[reypm]

After reading and following your instructions, and if I get it correct, I am still unable to render markdown content processed from within the plugin.

This is what I have done:

• Changed the rehypeRenderDirective as follow:

function rehypeRenderDirective() {
  return (tree: HastRoot) =>
    visit(tree, { type: "element", tagName: "container-directive" }, (node) => {
      node.tagName = "div";

      let data;

      switch (node.properties.type) {
        case "my-include":
          data = myCustomPlugin(node);
          break;
        default:
      }
     
      node.children = unified()
        .use(remarkRehype)
        // ⚠️ IMPORTANT! if content is untrusted also santize it with `rehype-sanitize`
        .runSync(unified()
        .use(remarkParse)
        .parse(data))
        .children as ElementContent[];
    });
}

• Load the plugin

<Markdown
      remarkPlugins={[
        remarkGfm,
        remarkDirective,
        [remarkFrontmatter, ["yaml", "toml"]],
        remarkBreaks,
        remarkDirectiveCustomize,
        myCustomPlugin // here =>>> 
      ]}
      rehypePlugins={[
        rehypeRenderDirective, 
        rehypeExternalLinks, 
        rehypeSlug
      ]}
    > ...

• Rewrite my custom plugin as:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { ElementContent } from "hast";

const myCustomPlugin = (node: any) => {
  const markdownSource = `
# heading

* list
* items
`;

  node.children = unified()
    .use(remarkRehype)
    .runSync(unified().use(remarkParse).parse(markdownSource))
    .children as ElementContent[];
};

export default myCustomPlugin;

but I am getting this error:

Cannot set properties of undefined (setting 'children')

Can you take a look?

[ChristianMurphy]

It looks like both rehypeRenderDirective and myCustomPlugin are trying to convert text into an Abstract Syntax Tree? And both are rewriting the same node?
That is likely the source of the issue.

A pattern I'd recommend, only render or rewrite the node inside rehypeRenderDirective, and have another function contentLoader which retrieves the raw Markdown/HTML from your external system.

Avoid having another myCustomPlugin that isn't really a unified plugin and does conflicting work on the AST node.

[wooorm]

Your code is all over the place. You use data = myCustomPlugin(...), but myCustomPlugin does not return anything? So you might be setting undefined? Perhaps you can clean your code? Or share more about what you actually want to do here?

[reypm]

You use data = myCustomPlugin(...), but myCustomPlugin does not return anything?

Doing as follows makes the example to work:

const myCustomPlugin = (node: any) => {
  const markdownSource = `
# heading

* list
* items
`;

  return markdownSource;
};

export default myCustomPlugin;

Or share more about what you actually want to do here?

Long story short: I have a bunch of custom shortcodes for example: email-card, phone-card, and include among others and all of them behave differently. phone-card renders a component and set some data, same as email-card but include will try to include a page inside another page.

// this will add data to the node and later using `components` it renders some HTML code 
:::::email-card{mailto:some@some.com}Click to email something
:::::

// this will fetch the content from external sources and will return plain text and/or markdown
// is a way to reuse content
:::::
include{id=some-page}
:::::

// this will add data to the node and later using `components` it renders some HTML code
:::::phone-card{phoneNumber:1111111111}Click to make a call
:::::

// this will fetch the content from external sources and will return plain-text and/or markdown
// is a way to reuse content
:::::
include{id=some-page-1}
:::::

the original idea with myCustomPlugin was to switch over the node.name which before all these changes contained something like: email-card|phone-card|include and process those shortcodes individually on it is own file. Is this better now?

[reypm]

Indeed console.log(toHast(fromMarkdown(data.data.genericSection.body))) will log hast content.

How I am using it:

• The plugin gets loaded in the ReactMarkdown component as:

<ReactMarkdown
  remarkPlugins={[
    ...
    [shortcodePlugin, [metaData?.id, metaData?.name]],
  ]}
  rehypePlugins={[
    rehypeExternalLinks,
    rehypeSlug
  ]}
  remarkRehypeOptions={{ allowDangerousHtml: true }}
>
  {data}
</ReactMarkdown>

• shortcodePlugin contains this:

export default  function shortcodePlugin(options: any) {
  return (tree: any) => {
    visit(tree, (node: any) => {
      switch (node.name) {
       // ... more case
        case 'page-include':
          processPageInclude(node, options[0])
          break
        default:
      }
    })
  }
}

• processPageInclude contains:

export default function processPageInclude(node: any, productId: string) {
  const { data } = getNodeInfo(node);
  const [cookies] = useCookies(["locale"]);
  const sharedContentPath = buildUrl(data.hProperties.id, productId);

  getApiData(sharedContentPath, cookies.locale)
    .then((data) => {
      return toHast(fromMarkdown(data.data.genericSection.body))
    })
    .catch((error: any) => {
      console.log(error);
    });
}

[wooorm]

You use promises. Promises are currently not yet supported in react-markdown. If they were, you need to await them, you can’t just randomly change things afterwards.

[reypm]

@wooorm what would be your suggestion? the only way to get the data is by calling an external URL

[wooorm]

Promise support, from components, in React is very much WIP. For something like remarkjs/react-markdown#680 to land, that needs to happen first.

You can do two things:

a) create your own async component. You can use the components here to map custom elements (say my-directive to your fancy async component, and do async work there, not on the AST, but at render.
b) react-markdown is a tiny wrapper around other projects, look at the code, investigate the syntax-tree org, you can use those projects yourself, in your own async wrapper. Control the caches and stuff yourself manually

[reypm]

hey @wooorm / @ChristianMurphy

I am still unable to get this working properly :| so here is all I have done:

  /**
   * Gives directives a tag name, so they will transfer into the HTML AST (hast)
   */
  function remarkDirectiveCustomize(options: any) {
    return (tree: MdastRoot) =>
      visit(tree, "containerDirective", (node) => {
        node.data ??= {};
        node.data.hName = "container-directive";
        node.data.hProperties = {
          type: node.name,
          attributes: node.attributes,
          product: options[0]
        };
      });
  }

  /**
   * Find the directive HTML tags and replace them with markdown content
   */
  function rehypeRenderDirective() {
    return (tree: HastRoot) =>
      visit(
        tree,
        { type: "element", tagName: "container-directive" },
        (node) => {
          node.tagName = "div";

          if (node.properties.type === "my-include") {
            node.children = unified()
              .use(remarkRehype)
              .use(rehypeSanitize)
              .runSync(
                unified().use(remarkParse).parse(processPageInclude(node))
                  .children as ElementContent[]
              );
          }
        }
      );
  }

return (
    <ReactMarkdown
      remarkPlugins={[
        remarkGfm,
        remarkDirective,
        [remarkFrontmatter, ["yaml", "toml"]],
        remarkBreaks,
        [remarkMermaid],
        shortcodePlugin,
        [remarkDirectiveCustomize, [metaData?.id]],
      ]}
      rehypePlugins={[rehypeExternalLinks, rehypeSlug, rehypeRenderDirective]}
      remarkRehypeOptions={{ allowDangerousHtml: true }}
    >
      {data}
    </ReactMarkdown>
  );

But I end up with this error:

TypeError
Expected node, got ``

But let's say the Promise is not returning any data which is not the case then I did manage to create a runnable example showing the same behavior, can you take a look and see what I am doing wrong?

[reypm]

this is a really nice way to see things better, thanks for your help @wooorm one last thing ... should not node.children = elementChildren add the hast transformedTree to the node children? 🤔

  function rehypeRenderDirective() {
    return (tree: HastRoot) =>
      visit(tree, {type: "element", tagName: "container-directive" }, (node) => {
        node.tagName = "div";

        if (node.properties.type === "page-include") {
          // This is a markdown (mdast) tree, a root. It is *not* `ElementContent[]`.
          const parseTree = unified().use(remarkParse).parse(processPageInclude(node))

          // This is a HTML (hast) root. It is *not* `ElementContent[]`.
          const transformedTree = unified().use(remarkRehype).use(rehypeSanitize).runSync(parseTree)

          // @ts-expect-error: This is *almost* equivalent to `ElementContent[]`.
          // It could theoretically include doctypes, but it practically currently does not.
          const elementChildren: ElementContent[] = transformedTree.children

          node.children = elementChildren

          console.log(node)
        }
      });
  }

but the node does not have anything in its children:

{
    "type": "element",
    "tagName": "div",
    "properties": {
        "type": "page-include",
        "attributes": {
            "id": "some-page"
        },
        "product": "commerce-sdk"
    },
    "children": [],
    "position": {
        "start": {
            "line": 1,
            "column": 1,
            "offset": 0
        },
        "end": {
            "line": 2,
            "column": 6,
            "offset": 52
        }
    }
}

why?

runnable example: https://codesandbox.io/s/delicate-monad-n3y45x

[wooorm]

Likely because processPageInclude returns undefined?

[reypm]

the example on codesandbox does not use Promises just plain markdown and I am having the same issue

[wooorm]

Your doing work twice. you should do work once.
processPageInclude already returns a hast root. You don’t need to parse that as markdown and transform that to hast. It is already hast.

function processPageInclude() {
  return toHast(fromMarkdown(md))
}

const transformedTree = processPageInclude();

// @ts-expect-error: This is *almost* equivalent to `ElementContent[]`.
// It could theoretically include doctypes, but it practically currently does not.
const elementChildren: ElementContent[] = transformedTree.children

node.children = elementChildren

[reypm]

thank you sir, that was the problem!