How to wrap a range in an element

hello. I’m currently using CM6 to create a Frontmatter plugin.

When I traverse the snytax tree and come across Frontmatter, I would like to wrap the entire Frontmatter range in a div. is this possible?

I tried the following, but the wrapper was applied to each line rather than the whole of Frontmatter

    enter: ({ type, from, to }) => {
      if ( === 'Frontmatter') {
          Decoration.mark({ class: 'frontmatter-wrapper' }).range(


<div class="cm-line"><span class="frontmatter-wrapper">title<span>: </span>asdas</span></div>
<div class="cm-line"><span class="frontmatter-wrapper">foo<span>: </span>bar</span></div>

No, it’s not possible to wrap a bunch of lines in a DOM element. You can style the lines with line decorations, but you cannot create any structure bigger than a line, except if you replace the entire set of lines with an (uneditable) block widget decoration.