tulih-editor 0.1.0

package/src/plugins/table.ts

@@ -0,0 +1,166 @@
+import type { Plugin, PluginContext } from '../types';
+
+var MAX_COLS = 10;
+var MAX_ROWS = 10;
+
+const table: Plugin = {
+  name: 'table',
+  order: 54,
+  css: '' +
+    '.te-table-grid {' +
+    '  position: absolute; z-index: 3000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .75rem;' +
+    '}' +
+    '.te-table-grid .te-tg-label {' +
+    '  font-size: .8rem; color: #6c757d; text-align: center;' +
+    '  margin-bottom: .5rem;' +
+    '}' +
+    '.te-table-grid .te-tg-cells {' +
+    '  display: grid; gap: 2px;' +
+    '}' +
+    '.te-table-grid .te-tg-cell {' +
+    '  width: 18px; height: 18px;' +
+    '  background: #f0f0f0; border: 1px solid #dee2e6;' +
+    '  border-radius: 2px; cursor: pointer;' +
+    '}' +
+    '.te-table-grid .te-tg-cell.active {' +
+    '  background: #86b7fe; border-color: #0d6efd;' +
+    '}' +
+    '.te-tg-header {' +
+    '  display: flex; justify-content: space-between; align-items: center;' +
+    '  margin-bottom: .5rem;' +
+    '}' +
+    '.te-toolbar [data-cmd="insertTable"] svg { pointer-events: none; }',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Table" data-cmd="insertTable"><i class="ti ti-table-plus"></i></button>',
+  modalHTML: '' +
+    '<div class="te-table-props-modal te-modal" aria-hidden="true">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog">' +
+    '    <div class="te-modal-header">' +
+    '      <h5 class="te-modal-title m-0">Table Properties</h5>' +
+    '      <button type="button" class="btn-close" data-te-close aria-label="Close"></button>' +
+    '    </div>' +
+    '    <form class="te-table-props-form">' +
+    '      <div class="te-modal-body">' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Width (e.g. 100% or 800px)</label>' +
+    '          <input type="text" class="te-table-props-width form-control" placeholder="100%">' +
+    '        </div>' +
+    '        <div class="mb-3">' +
+    '          <label class="form-label">Caption</label>' +
+    '          <input type="text" class="te-table-props-caption form-control" placeholder="Optional caption">' +
+    '        </div>' +
+    '      </div>' +
+    '      <div class="te-modal-footer">' +
+    '        <button type="button" class="btn btn-outline-secondary" data-te-close>Cancel</button>' +
+    '        <button type="submit" class="btn btn-primary">Apply</button>' +
+    '      </div>' +
+    '    </form>' +
+    '  </div>' +
+    '</div>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.table) return;
+
+    var popup = document.createElement('div');
+    popup.className = 'te-table-grid';
+    popup.style.display = 'none';
+    popup.innerHTML = '' +
+      '<div class="te-tg-header">' +
+        '<span class="te-tg-label">0 &times; 0</span>' +
+        '<button type="button" class="btn-close te-tg-close" aria-label="Close"></button>' +
+      '</div>' +
+      '<div class="te-tg-cells" style="grid-template-columns: repeat(' + MAX_COLS + ', 18px);"></div>';
+    var cellsContainer = popup.querySelector('.te-tg-cells') as HTMLElement;
+    var label = popup.querySelector('.te-tg-label') as HTMLElement;
+
+    for(var r = 0; r < MAX_ROWS; r++){
+      for(var c = 0; c < MAX_COLS; c++){
+        var cell = document.createElement('div');
+        cell.className = 'te-tg-cell';
+        cell.setAttribute('data-r', r.toString());
+        cell.setAttribute('data-c', c.toString());
+        cellsContainer.appendChild(cell);
+      }
+    }
+
+    function clearActive(){
+      popup.querySelectorAll('.te-tg-cell.active').forEach(function(el){ el.classList.remove('active'); });
+    }
+
+    function highlight(r: number, c: number){
+      clearActive();
+      popup.querySelectorAll('.te-tg-cell').forEach(function(el){
+        var er = parseInt(el.getAttribute('data-r')!, 10);
+        var ec = parseInt(el.getAttribute('data-c')!, 10);
+        if(er <= r && ec <= c) el.classList.add('active');
+      });
+      label.textContent = (c + 1) + ' × ' + (r + 1);
+    }
+
+    cellsContainer.addEventListener('mouseover', function(e: MouseEvent){
+      var cell = (e.target as HTMLElement).closest('.te-tg-cell');
+      if(!cell) return;
+      var r = parseInt(cell.getAttribute('data-r')!, 10);
+      var c = parseInt(cell.getAttribute('data-c')!, 10);
+      highlight(r, c);
+    });
+
+    cellsContainer.addEventListener('mouseleave', function(){
+      clearActive();
+      label.textContent = '0 × 0';
+    });
+
+    function insertTable(cols: number, rows: number){
+      ctx.restoreSel();
+      var html = '<table class="te-table"><tbody>';
+      for(var rr = 0; rr < rows; rr++){
+        html += '<tr>';
+        for(var cc = 0; cc < cols; cc++){
+          html += '<td><br></td>';
+        }
+        html += '</tr>';
+      }
+      html += '</tbody></table>';
+      document.execCommand('insertHTML', false, html);
+    }
+
+    cellsContainer.addEventListener('click', function(e: MouseEvent){
+      var cell = (e.target as HTMLElement).closest('.te-tg-cell');
+      if(!cell) return;
+      var cols = parseInt(cell.getAttribute('data-c')!, 10) + 1;
+      var rows = parseInt(cell.getAttribute('data-r')!, 10) + 1;
+      popup.style.display = 'none';
+      insertTable(cols, rows);
+      ctx.editor.focus();
+    });
+
+    document.body.appendChild(popup);
+
+    (popup.querySelector('.te-tg-close') as HTMLElement).addEventListener('click', function(){
+      popup.style.display = 'none';
+    });
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="insertTable"]') as HTMLElement | null;
+    if(btn){
+      btn.addEventListener('click', function(e: MouseEvent){
+        e.stopPropagation();
+        ctx.saveSel();
+        var rect = btn!.getBoundingClientRect();
+        popup.style.left = (window.scrollX + rect.left) + 'px';
+        popup.style.top = (window.scrollY + rect.bottom + 4) + 'px';
+        popup.style.display = popup.style.display === 'none' ? 'block' : 'none';
+      });
+    }
+
+    document.addEventListener('click', function(e: MouseEvent){
+      if(popup.style.display === 'none') return;
+      if(!popup.contains(e.target as Node) && e.target !== btn){
+        popup.style.display = 'none';
+      }
+    });
+  }
+};
+
+export default table;

package/src/plugins/tableBg.ts

@@ -0,0 +1,11 @@
+import type { Plugin, PluginContext } from '../types';
+
+const tableBg: Plugin = {
+  name: 'tableBg',
+  order: 56,
+  init(ctx: PluginContext): void {
+    // tableBg moved to tableTools floating bar
+  },
+};
+
+export default tableBg;

package/src/plugins/tableTools.ts

@@ -0,0 +1,475 @@
+import type { Plugin, PluginContext, TeEditorElement } from '../types';
+
+const tableTools: Plugin = {
+  name: 'tableTools',
+  order: 55,
+  deps: ['table'],
+  css: '' +
+    '.te-table-tools {' +
+    '  position: absolute; display: none; z-index: 2000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .2rem .3rem; gap: .1rem; align-items: center;' +
+    '  white-space: nowrap;' +
+    '}' +
+    '.te-table-tools .btn {' +
+    '  padding: .15rem .35rem !important; font-size: .7rem !important; line-height: 1 !important;' +
+    '}' +
+    '.te-table-tools .btn svg {' +
+    '  width: 12px !important; height: 12px !important;' +
+    '  margin-right: 2px; vertical-align: middle;' +
+    '}' +
+    '.te-table-tools .te-divider-v {' +
+    '  display: inline-block; width: 1px; height: 16px;' +
+    '  background: #dee2e6; margin: 0 .2rem;' +
+    '}' +
+    '.te-table-tools .tt-label {' +
+    '  font-size: .6rem; color: #6c757d; text-transform: uppercase;' +
+    '  letter-spacing: .5px; margin: 0 .15rem;' +
+    '}' +
+    '.te-table-tools .te-bg-input {' +
+    '  width: 26px !important; height: 20px !important;' +
+    '  padding: 1px !important; border: 1px solid #dee2e6;' +
+    '  border-radius: 3px; cursor: pointer;' +
+    '}' +
+    '.te-cell-selected {' +
+    '  outline: 2px solid #0d6efd !important;' +
+    '  outline-offset: -1px;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.table || !ctx.features.tableTools) return;
+
+    var wrapper = ctx.wrapper;
+    var editor = ctx.editor;
+    var ed = ctx.editor as TeEditorElement;
+    var tools = document.createElement('div');
+    tools.className = 'te-table-tools';
+    tools.style.display = 'none';
+    tools.innerHTML = '' +
+      '<span class="tt-label">Add</span>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="row-before" title="Row above"><i class="ti ti-chevron-up"></i> Row</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="row-after" title="Row below"><i class="ti ti-chevron-down"></i> Row</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="col-before" title="Column before"><i class="ti ti-chevron-left"></i> Col</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="col-after" title="Column after"><i class="ti ti-chevron-right"></i> Col</button>' +
+      '<span class="te-divider-v"></span>' +
+      '<span class="tt-label">Del</span>' +
+      '<button type="button" class="btn btn-sm btn-outline-danger" data-te-table="del-row" title="Delete row"><i class="ti ti-x"></i> Row</button>' +
+      '<button type="button" class="btn btn-sm btn-outline-danger" data-te-table="del-col" title="Delete column"><i class="ti ti-x"></i> Col</button>' +
+      '<button type="button" class="btn btn-sm btn-outline-danger" data-te-table="del-table" title="Delete table"><i class="ti ti-trash"></i> Tbl</button>' +
+      '<span class="te-divider-v"></span>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="merge" title="Merge selected cells"><i class="ti ti-maximize"></i> Merge</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="unmerge" title="Unmerge cells" style="display:none"><i class="ti ti-minimize"></i> Unmerge</button>' +
+      '<span class="te-divider-v"></span>' +
+      '<button type="button" class="btn btn-sm btn-outline-secondary" data-te-table="toggle-header" title="Toggle header"><i class="ti ti-typography"></i> Hdr</button>' +
+      '<button type="button" class="btn btn-sm btn-outline-secondary" data-te-table="toggle-caption" title="Toggle caption"><i class="ti ti-align-left"></i> Cap</button>' +
+      '<span class="te-divider-v"></span>' +
+      '<span class="tt-label">BG</span>' +
+      '<input type="color" class="te-bg-input form-control form-control-color" value="#ffffff" title="Cell background color" />' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="bg-apply" title="Apply background color">Apply</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="bg-clear" title="Remove background color">Clear</button>' +
+      '<span class="te-divider-v"></span>' +
+      '<span class="tt-label">V</span>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="valign-top" title="Align top">Top</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="valign-middle" title="Align middle">Mid</button>' +
+      '<button type="button" class="btn btn-sm btn-light" data-te-table="valign-bottom" title="Align bottom">Bot</button>';
+    document.body.appendChild(tools);
+
+    var currentCell: HTMLElement | null = null, currentTable: HTMLElement | null = null;
+    var lastCell: HTMLElement | null = null, lastTable: HTMLElement | null = null;
+    var selectedCells: HTMLElement[] = [];
+
+    function saveHist(){
+      if(!ed._tableHist) ed._tableHist = {undo:[], redo:[]};
+      ed._tableHist.undo.push(editor.innerHTML);
+      ed._tableHist.redo = [];
+      if(ed._tableHist.undo.length > 50) ed._tableHist.undo.shift();
+    }
+
+    function updateMergeBtn(){
+      var btn = tools.querySelector('[data-te-table="merge"]') as HTMLElement | null;
+      if(!btn) return;
+      btn.style.display = (selectedCells.length >= 2) ? '' : 'none';
+    }
+
+    function clearHighlights(){
+      selectedCells.forEach(function(c){ c.classList.remove('te-cell-selected'); });
+      selectedCells = [];
+      updateMergeBtn();
+    }
+
+    function toggleHighlight(cell: HTMLElement){
+      var idx = selectedCells.indexOf(cell);
+      if(idx !== -1){
+        selectedCells.splice(idx, 1);
+        cell.classList.remove('te-cell-selected');
+      } else {
+        selectedCells.push(cell);
+        cell.classList.add('te-cell-selected');
+      }
+      updateMergeBtn();
+    }
+
+    editor.addEventListener('click', function(e: MouseEvent){
+      var cell = (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('td,th') as HTMLElement | null;
+      if(!cell || !editor.contains(cell)) return;
+      if(e.ctrlKey || e.metaKey){
+        e.preventDefault();
+        toggleHighlight(cell);
+      } else if(!e.shiftKey){
+        clearHighlights();
+      }
+    });
+
+    function updateUnmergeBtn(cell: HTMLElement){
+      var btn = tools.querySelector('[data-te-table="unmerge"]') as HTMLElement | null;
+      if(!btn) return;
+      var cs = parseInt(cell.getAttribute('colspan')!, 10) || 1;
+      var rs = parseInt(cell.getAttribute('rowspan')!, 10) || 1;
+      btn.style.display = (cs > 1 || rs > 1) ? '' : 'none';
+    }
+
+    function updateValignBtns(cell: HTMLElement){
+      tools.querySelectorAll('[data-te-table^="valign-"]').forEach(function(b){
+        var align = b.getAttribute('data-te-table')!.replace('valign-', '');
+        var cellAlign = ((cell as HTMLElement).style.verticalAlign || '').toLowerCase();
+        b.classList.toggle('active', cellAlign === align);
+      });
+    }
+
+    function posTools(cell: HTMLElement){
+      var rect = cell.getBoundingClientRect();
+      tools.style.display = 'flex';
+      tools.style.visibility = 'hidden';
+      var toolsW = tools.offsetWidth;
+      var toolsH = tools.offsetHeight;
+      var editorRect = editor.getBoundingClientRect();
+      var sx = window.scrollX, sy = window.scrollY;
+
+      var leftPos = rect.left + sx;
+      var minLeft = editorRect.left + sx + 2;
+      var maxLeft = editorRect.right + sx - toolsW - 2;
+      if(leftPos < minLeft) leftPos = minLeft;
+      if(leftPos > maxLeft) leftPos = maxLeft;
+      tools.style.left = leftPos + 'px';
+
+      var spaceBelow = editorRect.bottom - (rect.bottom + 6);
+      var spaceAbove = rect.top - 6 - editorRect.top;
+      var topPos;
+      if(spaceBelow >= toolsH || spaceBelow >= spaceAbove){
+        topPos = rect.bottom + 6 + sy;
+      } else {
+        topPos = rect.top - 6 - toolsH + sy;
+      }
+      var minTop = editorRect.top + sy + 2;
+      var maxTop = editorRect.bottom + sy - toolsH - 2;
+      if(topPos < minTop) topPos = minTop;
+      if(topPos > maxTop) topPos = maxTop;
+      tools.style.top = topPos + 'px';
+
+      tools.style.visibility = '';
+      updateMergeBtn();
+      updateUnmergeBtn(cell);
+      updateValignBtns(cell);
+      var capBtn = tools.querySelector('[data-te-table="toggle-caption"]') as HTMLElement | null;
+      if(capBtn && currentTable) capBtn.classList.toggle('active', !!currentTable.querySelector('caption'));
+    }
+    function hideTools(){
+      tools.style.display = 'none';
+      currentCell = null;
+      currentTable = null;
+    }
+    function updateFromSelection(){
+      var sel = window.getSelection();
+      if(!sel || sel.rangeCount === 0){ hideTools(); return; }
+      var n: Node | null = sel.anchorNode;
+      if(n && n.nodeType === 3) n = n.parentNode;
+      if(!n || !wrapper.contains(n)){ hideTools(); return; }
+      var cell = (n as HTMLElement).closest && (n as HTMLElement).closest('td,th') as HTMLElement | null;
+      if(cell && editor.contains(cell)){
+        currentCell = cell;
+        currentTable = cell.closest('table') as HTMLElement | null;
+        lastCell = currentCell;
+        lastTable = currentTable;
+        posTools(cell);
+      } else {
+        hideTools();
+      }
+    }
+
+    function getSelectedCellsForTools(): HTMLElement[] | null {
+      var h = tools.querySelectorAll('.te-cell-selected');
+      if(h.length) return Array.prototype.slice.call(h);
+      var s = window.getSelection();
+      if(!s || s.rangeCount === 0) return null;
+      var r = s.getRangeAt(0);
+      var tbl = currentTable || lastTable;
+      if(!tbl) return null;
+      var cells: HTMLElement[] = [];
+      tbl.querySelectorAll('td,th').forEach(function(c){
+        if(r.intersectsNode(c)) cells.push(c as HTMLElement);
+      });
+      return cells.length ? cells : null;
+    }
+
+    function applyBgColor(value: string){
+      var cells = getSelectedCellsForTools();
+      if(!cells) return;
+      for(var i = 0; i < cells.length; i++){
+        cells[i].style.backgroundColor = value;
+      }
+    }
+
+    function clearBgColor(){
+      var cells = getSelectedCellsForTools();
+      if(!cells) return;
+      for(var i = 0; i < cells.length; i++){
+        cells[i].style.backgroundColor = '';
+      }
+    }
+
+    var bgInput = tools.querySelector('.te-bg-input') as HTMLInputElement | null;
+    if(bgInput){
+      bgInput.addEventListener('change', function(){
+        if(currentCell || lastCell) applyBgColor(bgInput!.value);
+      });
+    }
+
+    document.addEventListener('selectionchange', updateFromSelection);
+    window.addEventListener('scroll', function(){ if(currentCell) posTools(currentCell!); });
+    window.addEventListener('resize', function(){ if(currentCell) posTools(currentCell!); });
+
+    function getCellIndex(cell: HTMLElement){
+      var idx = 0, node: HTMLElement | null = cell;
+      while(node && node.previousElementSibling){ idx++; node = node.previousElementSibling as HTMLElement; }
+      return idx;
+    }
+    function forEachRow(table: HTMLElement, cb: (row: HTMLTableRowElement, sec: string) => void){
+      ['thead','tbody'].forEach(function(sec){
+        var s = table.querySelector(sec);
+        if(s){
+          Array.prototype.forEach.call((s as HTMLTableSectionElement).rows, function(row){ cb(row, sec); });
+        }
+      });
+    }
+
+    var refocus: ReturnType<typeof setTimeout> | null;
+
+    function scheduleRefocus(){
+      if(refocus) clearTimeout(refocus);
+      refocus = setTimeout(function(){
+        ctx.editor.focus();
+        updateFromSelection();
+        refocus = null;
+      }, 0);
+    }
+
+    function mergeCells(){
+      var table = currentTable || lastTable;
+      if(!table) return;
+      var rows = Array.prototype.slice.call(table.querySelectorAll('tr')) as HTMLTableRowElement[];
+      if(!rows.length) return;
+
+      var cells: HTMLElement[];
+      if(selectedCells.length > 1){
+        cells = selectedCells.slice();
+      } else {
+        var sel = window.getSelection();
+        if(!sel || sel.rangeCount === 0) return;
+        var range = sel.getRangeAt(0);
+        cells = [];
+        table.querySelectorAll('td,th').forEach(function(cell){
+          if(range.intersectsNode(cell)) cells.push(cell as HTMLElement);
+        });
+      }
+      if(cells.length < 2) return;
+      saveHist();
+
+      var positions = cells.map(function(cell){
+        return {
+          cell: cell,
+          row: rows.indexOf(cell.parentElement as HTMLTableRowElement),
+          col: getCellIndex(cell)
+        };
+      });
+
+      var minRow = Math.min.apply(null, positions.map(function(p){ return p.row; }));
+      var maxRow = Math.max.apply(null, positions.map(function(p){ return p.row; }));
+      var minCol = Math.min.apply(null, positions.map(function(p){ return p.col; }));
+      var maxCol = Math.max.apply(null, positions.map(function(p){ return p.col; }));
+
+      if(minRow !== maxRow && minCol !== maxCol){
+        var mergeBtn = tools.querySelector('[data-te-table="merge"]') as HTMLElement | null;
+        if(mergeBtn){
+          mergeBtn.style.outline = '2px solid #dc3545';
+          mergeBtn.style.outlineOffset = '1px';
+          setTimeout(function(){ mergeBtn!.style.outline = ''; mergeBtn!.style.outlineOffset = ''; }, 600);
+        }
+        return;
+      }
+
+      var contents = cells.map(function(c){ return c.innerHTML; });
+      var kept = positions.filter(function(p){ return p.row === minRow && p.col === minCol; })[0];
+      if(!kept) kept = positions[0];
+
+      cells.forEach(function(cell){
+        if(cell !== kept.cell) cell.parentNode!.removeChild(cell);
+      });
+
+      kept.cell.setAttribute('colspan', String(maxCol - minCol + 1));
+      kept.cell.setAttribute('rowspan', String(maxRow - minRow + 1));
+      kept.cell.innerHTML = contents.join('');
+      clearHighlights();
+    }
+
+    function unmergeCell(cell: HTMLElement){
+      var colspan = parseInt(cell.getAttribute('colspan')!, 10) || 1;
+      var rowspan = parseInt(cell.getAttribute('rowspan')!, 10) || 1;
+      if(colspan === 1 && rowspan === 1) return;
+
+      var tag = cell.tagName;
+      var table = cell.closest('table') as HTMLElement;
+      var rows = Array.prototype.slice.call(table.querySelectorAll('tr')) as HTMLTableRowElement[];
+      var row = cell.parentElement as HTMLTableRowElement;
+      var rowIdx = rows.indexOf(row);
+      var colIdx = getCellIndex(cell);
+
+      cell.removeAttribute('colspan');
+      cell.removeAttribute('rowspan');
+      cell.innerHTML = '<br>';
+
+      var ref = cell.nextSibling;
+      for(var c = 1; c < colspan; c++){
+        var nc = document.createElement(tag);
+        nc.innerHTML = '<br>';
+        row.insertBefore(nc, ref);
+      }
+
+      for(var r = 1; r < rowspan; r++){
+        var tr = rows[rowIdx + r];
+        if(!tr) break;
+        var insBefore = tr.cells[colIdx] || null;
+        for(var c = 0; c < colspan; c++){
+          var nc = document.createElement(tag);
+          nc.innerHTML = '<br>';
+          tr.insertBefore(nc, insBefore);
+        }
+      }
+    }
+
+    tools.addEventListener('mousedown', function(e: MouseEvent){
+      var actionBtn = e.target && (e.target as HTMLElement).closest('[data-te-table]');
+      var action = actionBtn && (actionBtn as HTMLElement).getAttribute('data-te-table');
+      if(!action) return;
+      e.preventDefault();
+      var cell = currentCell || lastCell;
+      var table = currentTable || lastTable;
+      if(!cell || !table) return;
+      saveHist();
+      var row = cell.parentElement as HTMLTableRowElement;
+      var colIdx = getCellIndex(cell);
+
+      if(action === 'row-before' || action === 'row-after'){
+        var newRow = row.cloneNode(true) as HTMLTableRowElement;
+        Array.prototype.forEach.call(newRow.cells, function(td: HTMLTableCellElement){
+          td.innerHTML = '<br>';
+          td.removeAttribute('colspan');
+          td.removeAttribute('rowspan');
+        });
+        if(action === 'row-before'){ row.parentNode!.insertBefore(newRow, row); }
+        else { row.parentNode!.insertBefore(newRow, row.nextSibling); }
+        scheduleRefocus();
+      }
+      else if(action === 'col-before' || action === 'col-after'){
+        var after = (action === 'col-after');
+        forEachRow(table, function(r, sec){
+          var ref = r.cells[colIdx];
+          var newCell = document.createElement((sec === 'thead') ? 'th' : 'td');
+          newCell.innerHTML = '<br>';
+          if(after && ref && ref.nextSibling){ r.insertBefore(newCell, ref.nextSibling); }
+          else if(ref){ r.insertBefore(newCell, ref); }
+          else { r.appendChild(newCell); }
+        });
+        scheduleRefocus();
+      }
+      else if(action === 'del-row'){
+        row.parentNode!.removeChild(row);
+        if(!table.querySelector('tr')){ table.parentNode!.removeChild(table); hideTools(); }
+        else { scheduleRefocus(); }
+      }
+      else if(action === 'del-col'){
+        forEachRow(table, function(r){ if(r.cells[colIdx]) r.deleteCell(colIdx); });
+        var any = table.querySelector('tr') as HTMLTableRowElement | null;
+        if(any && any.cells.length === 0){ table.parentNode!.removeChild(table); hideTools(); }
+        else { scheduleRefocus(); }
+      }
+      else if(action === 'del-table'){ table.parentNode!.removeChild(table); hideTools(); }
+      else if(action === 'bg-apply'){ applyBgColor(bgInput ? bgInput.value : '#ffffff'); scheduleRefocus(); }
+      else if(action === 'bg-clear'){ clearBgColor(); scheduleRefocus(); }
+      else if(action === 'valign-top' || action === 'valign-middle' || action === 'valign-bottom'){
+        var cells = getSelectedCellsForTools();
+        if(!cells || !cells.length) cells = [cell];
+        var vAlign = action.replace('valign-', '');
+        for(var vi = 0; vi < cells.length; vi++){ cells[vi].style.verticalAlign = vAlign; }
+        scheduleRefocus();
+      }
+      else if(action === 'merge'){ mergeCells(); scheduleRefocus(); }
+      else if(action === 'unmerge'){ unmergeCell(cell); scheduleRefocus(); }
+      else if(action === 'toggle-header'){
+        var thead = table.querySelector('thead') as HTMLTableSectionElement | null;
+        if(thead){
+          var tbody = table.querySelector('tbody') as HTMLTableSectionElement | null || (function(){
+            var tb = document.createElement('tbody');
+            table.appendChild(tb);
+            return tb;
+          })();
+          Array.prototype.slice.call(thead.rows).forEach(function(hr: HTMLTableRowElement){
+            var tr = document.createElement('tr');
+            Array.prototype.forEach.call(hr.cells, function(hc: HTMLTableCellElement){
+              var td = document.createElement('td');
+              td.innerHTML = hc.innerHTML || '<br>';
+              tr.appendChild(td);
+            });
+            tbody.insertBefore(tr, tbody.firstChild);
+          });
+          thead.parentNode!.removeChild(thead);
+        } else {
+          var tb = table.querySelector('tbody') as HTMLTableSectionElement | null;
+          if(tb && tb.rows.length){
+            var first = tb.rows[0];
+            var newHead = document.createElement('thead');
+            var trh = document.createElement('tr');
+            Array.prototype.forEach.call(first.cells, function(td: HTMLTableCellElement){
+              var th = document.createElement('th');
+              th.innerHTML = td.innerHTML || '<br>';
+              trh.appendChild(th);
+            });
+            newHead.appendChild(trh);
+            table.insertBefore(newHead, tb);
+            tb.removeChild(first);
+          }
+        }
+        scheduleRefocus();
+      }
+      else if(action === 'toggle-caption'){
+        var cap = table.querySelector('caption');
+        if(cap){
+          cap.parentNode!.removeChild(cap);
+        } else {
+          var caption = document.createElement('caption');
+          caption.innerHTML = '<br>';
+          caption.contentEditable = 'true';
+          caption.style.captionSide = 'bottom';
+          caption.style.textAlign = 'left';
+          caption.style.padding = '4px 6px';
+          caption.style.fontStyle = 'italic';
+          caption.style.color = '#6c757d';
+          table.insertBefore(caption, table.firstChild);
+          setTimeout(function(){ caption.focus(); }, 0);
+        }
+        scheduleRefocus();
+      }
+    });
+  },
+};
+
+export default tableTools;

package/src/plugins/toolbarCollapse.ts

@@ -0,0 +1,14 @@
+import type { Plugin, PluginContext } from '../types';
+
+const toolbarCollapse: Plugin = {
+  name: 'toolbarCollapse',
+  order: 1000,
+  css: '' +
+    '.te-toolbar .btn svg, .te-toolbar .btn i {' +
+    '  width: 14px !important; height: 14px !important;' +
+    '  vertical-align: middle;' +
+    '}',
+  init(ctx: PluginContext): void {}
+};
+
+export default toolbarCollapse;