как разместить и разместить только 3 пролета в 1 теге заголовка? Между тем диапазон может поддерживать переключение определенного значения

Question

Я пытаюсь получить некоторый опыт вроде

1. поместите 3 промежутка в 1 тег заголовка,
2. и каждый диапазон может переключать некоторые заданные значения при нажатии какой-либо кнопки для запуска команды,
3. также можно использовать бесплатный тип

HTML-код результата выглядит так

<header class="holder">
<span class="location">var1</span>
<span class="when">var2</span>
<span class="where">var3</span></header>

то, что я думал, решение - создать holder node и оберните 3 дочерних метки

вот моя ссылка на коды и ящик, но сообщите о некоторых ошибках, я уже потратил на это несколько дней, не знаю, как этого добиться, может ли кто-нибудь помочь мне одной подсказкой? Спасибо!

export default class Header extends Node {
  get name() {
    return 'header'
  }
  get schema() {
    return {
      content: 'location when where',
       group: 'block',
      draggable: false,
      parseDOM: [
       {   tag: `header`}
      ],
      toDOM: node => [`header`,0],
    }
  }

  commands({ type, schema }) {
    return attrs => addListNodes(type,schema.time,attrs)
  }
}

затем определите простые дочерние метки

export class When extends Mark  {

  get name() {
    return 'when'
  }

  get defaultOptions() {
    return {
      index:0,
      levels: ['Time','day','night','dawn'],
    }
  }


  get schema() {
    return {
      attrs: {
        index: {
          default: 0,
        },
        
      },
      content: 'inline*',
      // group:"block", 
      // draggable: false,
      parseDOM: 
      [
        {
          tag:`span.when`,      
    }],

      toDOM: node => 
      {
        return [`span`,{class:"when","data-index":node.attrs.index}, this.options.levels[node.attrs.index]]},
    }
  }

  commands({ type, schema }) {

//i try to use one button to loop switch the mark's value. 
//however, the attrs here is a mouse event,since i call this command via a button click action, 
//can not  get the attrs.index value correctly
    var self=this;
    return attrs => {

      attrs.index++;
      if(attrs.index>=self.options.levels.length)
      attrs.index=1;
      
      return setBlockType(type, attrs)}
  }
}