How to wrap a range in an element

v6
1

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

  syntaxTree(state).iterate({
    enter: ({ type, from, to }) => {
      if (type.name === 'Frontmatter') {
        widgets.push(
          Decoration.mark({ class: 'frontmatter-wrapper' }).range(
            from,
            to,
          ),
        );
      }
    },
  });

result:

<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>
2

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.