text: /*
      menu - header
  */
  import $ from '../../util/dom-core.js'
  import DropList from '../droplist.js'
  
  // 构造函数
  function Head (editor) {
      this.editor = editor
      this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-header"></i></div>')
      this.type = 'droplist'
  
    // 当前是否 active 状态
      this._active = false
  
    // 初始化 droplist
      this.droplist = new DropList(this, {
          width: 60,
      // $title: $('<p>设置标题</p>'),
          $title: '',
          type: 'list', // droplist 以列表形式展示
          list: [
        { $elem: $('<span>H1</span>'), value: '<h1>' },
        { $elem: $('<span>H2</span>'), value: '<h2>' },
        { $elem: $('<span>H3</span>'), value: '<h3>' },
        { $elem: $('<span>H4</span>'), value: '<h4>' },
        { $elem: $('<span>H5</span>'), value: '<h5>' },
        { $elem: $('<span>正文</span>'), value: '<p>' }
          ],
          onClick: (value) => {
        // 注意 this 是指向当前的 Head 对象
              this._command(value)
          }
      })
  }
  
  // 原型
  Head.prototype = {
      constructor: Head,
  
    // 执行命令
      _command (value) {
          const editor = this.editor
  
          const $selectionElem = editor.selection.getSelectionContainerElem()
          if (editor.$textElem.equal($selectionElem)) {
        // 不能选中多行来设置标题，否则会出现问题
        // 例如选中的是 <p>xxx</p><p>yyy</p> 来设置标题，设置之后会成为 <h1>xxx<br>yyy</h1> 不符合预期
              return
          }
  
          editor.cmd.do('formatBlock', value)
      },
  
    // 试图改变 active 状态
      tryChangeActive (e) {
          const editor = this.editor
          const $elem = this.$elem
          const reg = /^h/i
          const cmdValue = editor.cmd.queryCommandValue('formatBlock')
          if (reg.test(cmdValue)) {
              this._active = true
              $elem.addClass('w-e-active')
          } else {
              this._active = false
              $elem.removeClass('w-e-active')
          }
      }
  }
  
  export default Head
  