insert img inside of h2?

[deadcoder0904]

i have a html block that looks like:

<h2>...</h2>
<img>...</img>

i want the img to be inside of h2 like:

<h2>
  <img>...</img>
</h2>

the h2 & img is inside mdx like:

## this is headline

<Image pos="right" src="/gold-coins.png" alt="gold coins" />

i tried using:

import { visit } from 'unist-util-visit'
import { matches, select, selectAll } from 'unist-util-select'

import type { Node } from 'unist'
import type { Root, Parent, Heading, HTML } from 'mdast'

export const rehypeHeadingImage = (options = {}) => {
	console.log('rehypeHeadingImage')
	return (tree: Root) => {
		console.log(tree)
		const x = (node: any) => node.type === 'element' || node.type === 'mdxJsxFlowElement' // the `img` above is `next/image` which has the type `mdxJsxFlowElement`
		const s = selectAll('heading', tree)
		console.log({ s, x: select('div', tree) })
		visit(tree, x, visitor)
	}
...

but for some reason, i'm unable to read selectors from select & selectAll... they both come empty []. my actual selector is h2 > img but i can't get it to work.

so i gave that up after trying 2 days every which way.

then now i've recently downloaded rehype-rewrite but unable to figure out, how to put the node inside:

[
					rehypeRewrite,
					{
						rewrite(node: any, index: number, parent: any) {
							if (node.tagName === 'h2' || node.tagName === 'h3' || node.tagName === 'h4') {
								console.log(node.children[0].value)
								console.log(node)
								// node.children = [...node.children]
                                // idk how to get sibling selector from here so i can remove it & put it inside h2
							}
						},
					},
				],

no matter how many times i work with unified & rehype, it still confuses me.

i did read the explore & learn again but no luck.

edit: i found a solution but definitely don't prefer it. insert img from inside rehype-rewrite by calculating h2's so every image is in array [img1, img2] & they get inserted but this requires some calculation as i don't add image after every h2 but only some of them... which can be calculated too but still not preferred if i can do it in an easy way.

[wooorm]

You can remove most lines of your code, they are not needed. For example, you are not dealing with mdast, so you don‘t have to import those types. And, you don’t need all those tools. You especially don’t need rehype-rewrite.

You also use TypeScript but cast things to any: if you don‘t want types, don’t use TypeScript. If you do, actually use it.

Instead, I recommend using the visitor pattern to traverse the tree: https://unifiedjs.com/learn/recipe/tree-traversal/. It can do everything you need, is fast, and is simple. To illustrate:

import {visit} from 'unist-util-visit'

/** @type {import('hast').Root} */
const tree = {}

visit(tree, function (node, index, parent) {
  if (
    node.type === 'element' &&
    node.tagName === 'h2' &&
    typeof index === 'number' &&
    parent
  ) {
    const next = parent.children[index + 1]

    if (next && next.type === 'element' && next.tagName === 'img') {
      node.children.push(next)
      parent.children.splice(index + 1, 1)
    }
  }
})

[wooorm]

you literally asked for if its used before or after mdx so i showed exactly that file.

I didn’t expent an entire file being dumped. I expected a “yes, I pass plugins in mdxOptions to mdx-bundler”.

@next/mdx

That project is a) a thin wrapper around @mdx-js/mdx, and b) an alternative to mdx-bundler.
Why do you use both mdx-bundler and an alternative to it?

my entire goal is to place img inside h2. its technically a next/image but the component looks like div > next/image bcz of styling.

OK, good to hear your practical goal on the frontend side (an img in an h2).
It is unrelated that those are next/images with divs.
What is related is what your MDX files look like.

[deadcoder0904]

I didn’t expent an entire file being dumped. I expected a “yes, I pass plugins in mdxOptions to mdx-bundler”.

yeah i did it bcz half the time i don't understand unified stuff & your questions so i dumped it bcz it was only like <100 locs so its very easy to read bcz u understand that stuff.

anyways, thank you so much. idk what would happen to unified ecosystem tho bcz only 1 guy has all the knowledge. and majority of it cant be googled.

i'll probably do this manually if this doesn't work. just plain ol' html.

thanks again & dont worry you aint that bad. otoh, you are too patient 😊

[deadcoder0904]

it didn't work so i'll drop that idea. it was stupid anyways. going back to html :))

[wooorm]

idk what would happen to unified ecosystem tho bcz only 1 guy has all the knowledge. and majority of it cant be googled.

Have you ever written a babel plugin? PostCSS? SWC? It‘s complex programming, it isn’t super easy. But the entire frontend/JS stack is build on ASTs and plugins.

Again: it is not easy, but a bunch of folks have the knowledge; you can get there too, with a bit more patience, focussing on cleaner code and understanding what things do, and a couple more years of experience.

[deadcoder0904]

nope. i haven't even coded in a long while either so my skills have gotten rusty too.

my focus is on being an entrepreneur rather than a programmer so when i make enough money to hire best programmers in the world like you, i'll prolly quit.

this stuff is definitely a different domain than my usual stuff but its basically data structures sprinkled with dom manipulation. did some ast back in 2016-17 for college.

anyways, thanks for your help again. i started with html. i just didnt wanna do that bcz huge html. then i saw tailwindcss landing page & its huge as well so i did that & its much easier to css that.