add previous sibling element to h1 while walking the tree?

[deadcoder0904]

i can't use unist-util-visit-parents because the parent elements are html & body. i even saw unist-util-select but don't know how i'd use it inside visit.

is there a way to directly add a div.page-break-before behind every h1?

i tried this:

node.children = [h('.page-break-before'), ...node.children]

but it wraps div inside h1 like:

<h1 class="chapter" id="#chapter-1">
   <div class="page-break-before"></div>chapter 1
</h1>

i want the html to be like:

<div class="page-break-before"></div>
<h1 class="chapter" id="#chapter-1">
   chapter 1
</h1>

weird, because i do siblings just fine below this code with the same thing.

here's my code:

.use(() => (tree) => {
    visit(tree, 'element', (node, i) => {
      const headers = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
      if (headers.includes(node.tagName)) {
        if (node.tagName === 'h1') {
          node.properties.className = ['chapter']
          node.children = [h('.page-break-before'), ...node.children] // this doesn't work
        }
        const title = toString(node.children)
        const depth = headingRank(node)
        const noOfHastags = '#'.repeat(depth)
        lis.push({ title, depth })
        node.properties.id = `#${slug(title)}`
      }
    })
  })

i only want div.page-break-before before a h1.

how do i do it?

[deadcoder0904]

curious if i have to use unist-util-visit-parents instead of unist-util-visit for previous sibling by getting the index? thought there'd be a easier way like dom.

[wooorm]

They different in the 3rd argument. You don’t need more info than given by unist-util-visit. So it is fine.

[deadcoder0904]

this did the trick with unist-util-visit-parents but @wooorm says it's buggy (see comment below):

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

.use(() => (tree) => {
	visitParents(tree, 'element', (node, parents) => {
		const headers = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
		if (headers.includes(node.tagName)) {
			if (node.tagName === 'h1') {
				node.properties.className = ['chapter']
				const parent = parents[parents.length - 1]
				const sibling = parent.children
				const pos = sibling.indexOf(node)
				parent.children = sibling
					.slice(0, pos - 1)
					.concat(h('.page-break-before'), node)
					.concat(sibling.slice(pos + 1))
			}
			const title = toString(node.children)
			const depth = headingRank(node)
			const noOfHastags = '#'.repeat(depth)
			lis.push({ title, depth })
			node.properties.id = `#${slug(title)}`
		}
	})
})

but this one by @wooorm is much better without unist-util-visit-parents:

.use(() => (tree) => {
	visit(tree, 'element', (node, index, parent) => {
		const headers = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
		if (headers.includes(node.tagName)) {
			const title = toString(node.children)
			const depth = headingRank(node)
			const noOfHastags = '#'.repeat(depth)
			lis.push({ title, depth })
			node.properties.id = `#${slug(title)}`

			if (node.tagName === 'h1' && parent) {
				node.properties.className = ['chapter']
				parent.children.splice(index, 0, h('.page-break-before'))
				return index + 2
			}
		}
	})
})

[wooorm]

Your code is more complex than needed. And buggy (you are not allowed to replace parent.children! See https://github.com/syntax-tree/unist-util-visit-parents#next--visitornode-ancestors). Use splice, and use the return value that is supported by visit:

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

visit(tree, 'element', (node, index, parent) => {
	if (node.tagName === 'h1' && parent) {
		// Insert element in `parent` at the place where `node` currently is.
		parent.children.splice(index, 0, h(".page-break-before"));
		// Move to the element *after* this heading next.
		return index + 2
	}
})

[deadcoder0904]

cool, i just changed it to your version & posted the answer above :)