Method toDOM

packages/app-core/src/lib/cm-table.ts:224–310

(view: EditorView)

  }

  toDOM(view: EditorView): HTMLElement {
    this.view = view
    const root = document.createElement('div')
    root.className = 'cm-table-widget'
    root.setAttribute('contenteditable', 'false')
    this.dom = root

    const wrapper = document.createElement('div')
    wrapper.className = 'cm-table-wrapper'

    const table = document.createElement('table')

    // Colgroup carries persisted column widths and is what the resize handles
    // drive. Built for every table so a drag can populate it. (#294)
    const colgroup = document.createElement('colgroup')
    const colWidths = this.model.colWidths ?? []
    this.cols = []
    let anyWidth = false
    for (let c = 0; c < this.model.headers.length; c++) {
      const colEl = document.createElement('col')
      const w = colWidths[c]
      if (typeof w === 'number' && w > 0) {
        colEl.style.width = `${w}px`
        anyWidth = true
      }
      colgroup.append(colEl)
      this.cols.push(colEl)
    }
    table.append(colgroup)
    if (anyWidth) table.classList.add('cm-table-fixed')

    const thead = document.createElement('thead')
    const headRow = document.createElement('tr')
    this.model.headers.forEach((text, col) => {
      const th = this.buildCell('th', -1, col, text)
      this.attachColResizeHandle(th, col)
      headRow.append(th)
    })
    thead.append(headRow)
    table.append(thead)

    const tbody = document.createElement('tbody')
    this.model.rows.forEach((row, r) => {
      const tr = document.createElement('tr')
      row.forEach((text, col) => tr.append(this.buildCell('td', r, col, text)))
      tbody.append(tr)
    })
    table.append(tbody)
    wrapper.append(table)

    // Add-row / add-column buttons (appear on hover via CSS).
    const addCol = document.createElement('button')
    addCol.type = 'button'
    addCol.className = 'cm-table-add cm-table-add-col'
    addCol.textContent = '+'
    addCol.title = 'Add column'
    addCol.addEventListener('mousedown', (e) => e.preventDefault())
    addCol.addEventListener('click', (e) => {