In my project, I am integrating Vue 2 with Sanity.io and I am looking for a solution to wrap all elements that come after a specific element with an HTML tag, and then wrap this element along with the following elements with another HTML tag.
For instance, if there are multiple paragraphs following each <h1> tag, I want to separate them using summary and details HTML tags.
Here is an example scenario where data is fetched from Sanity:
<h1>text</h1>
<p>text</p>
<p>text</p>
<p>text</p>
<h1>text</h1>
<p>text</p>
<p>text</p>
<p>text</p>
I am seeking a way to manipulate the DOM in order to structure the data as follows:
<details>
<summary><h1>text</h1></summary>
<p>text</p>
<p>text</p>
<p>text</p>
</details>
<details>
<summary><h1>text</h1></summary>
<p>text</p>
<p>text</p>
<p>text</p>
</details>
To provide more context, I am utilizing the protable-text-to-vue package which returns the data as Vue component blocks. The data structure from Sanity resembles the example described above.