A plugin to wrap 2 siblings

[ManasMadrecha]

Currently, https://github.com/florentb/rehype-wrap-all is able to wrap individual elements, i.e. each selected element will have one wrapper of its own.

But, what I want is to be able to wrap 2 sibling elements into one parent wrapper.

I am using Nuxt + its Content module for markdown.

Example:
florentb/rehype-wrap-all#3 (comment)

What is expected?

This should be converted

<blockquote>I am a blockquote</blockquote>
<figcaption></figcaption>

<!-- OR -->

> I am a blockquote
<figcaption></figcaption>

to this

<figure>
<blockquote>I am a blockquote</blockquote>
<figcaption></figcaption>
</figure>

Is there any already existing plugin to do so? If not, how to proceed with the following code of rehype plugin to be registered in nuxtconfig.js?

const visit = require("unist-util-visit");

module.exports = function nuxtContentBlockquotes() {
  return function transformer(tree, { data }) {
    visit(tree, "element", visitor);

    function visitor(node, i, parent) {
      if (node.tagName === "blockquote") {
     // What code here?
      }
    }
  };
};

[ChristianMurphy]

Currently, https://github.com/florentb/rehype-wrap-all

this repository is remark which generally relates to markdown, you may have intended to post this to rehype the HTML related repository?

Is there any already existing plugin to do so?

You can most of the known rehype plugins here: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#readme
I'm not aware of one that has the exact behavior you are looking for.

how to proceed with the following code of rehype plugin to be registered in nuxtconfig.js?

Reading the nuxt content documentation is a good starting point: https://content.nuxtjs.org/configuration#markdownrehypeplugins
My assumption is this would also support relative paths, like ./my-custom-rehype-plugin.js but the nuxt content team would be able to confirm.

[ManasMadrecha]

you may have intended to post this to rehype the HTML related repository?

I am writing in markdown, so this

> I am a blockquote
<figcaption></figcaption>

should be able to convert to this

<figure>
> I am a blockquote
<figcaption></figcaption>
</figure>

via some remark plugin itself.

---

Reading the nuxt content documentation is a good starting point:

Yes, the above code I mentioned has to be written inside a custom remark/rehype plugin and to be registered in nuxtconfig.js. This is know. But I want to know how to access the parent of some node? Like, how to create a new figure node and then add it to both the children (blockquote and figcaption)?

On the example given in https://github.com/syntax-tree/hast#element, I can write node.children which gives access to that node's children. Then, I can easily edit the children by pushing into them new elements. So, similarly, how do I access the node's parent? That way, I can add the figure parent to both the children.

[ChristianMurphy]

I am writing in markdown

Right, but you aren't manipulating markdown.
Take this example in markdown https://astexplorer.net/#/gist/5f3d2c8046132c92310eae2a9442ebfd/f1b9ecc1820d382a08c2e8e23a49b2f3b0c978b1
Note that the HTML is represented as a single block rather than two, and that tag information isn't parsed out.
You want to work with the HTML/HAST, as processed by https://github.com/remarkjs/remark-rehype and https://github.com/rehypejs/rehype-raw so you can modify the HTML more directly.

This is know. But I want to know how to access the parent of some node?

Using https://github.com/syntax-tree/unist-util-visit-parents is a common approach.

[wooorm]

See https://unifiedjs.com/learn/recipe/tree-traversal/, https://unifiedjs.com/learn/recipe/find-node/, and https://unifiedjs.com/learn/recipe/remove-node/

[wooorm]

To add to Christian, I think unist-util-visit-parents might be more info than needed, unist-util-visit also gives access to the one parent you need!