@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
101 lines (100 loc) • 3.89 kB
JavaScript
import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
import { TableCssClassName as ClassName } from '../../../types';
import { getPluginState as getMainPluginState } from '../../plugin-factory';
import { colWidthsForRow } from '../../utils/column-controls';
import { getRowHeights } from '../../utils/row-controls';
export var updateControls = function updateControls() {
return function (state) {
var _getMainPluginState = getMainPluginState(state),
tableRef = _getMainPluginState.tableRef;
if (!tableRef) {
return;
}
var tr = tableRef.querySelector('tr');
if (!tr) {
return;
}
var wrapper = tableRef.parentElement;
if (!(wrapper && wrapper.parentElement)) {
return;
}
var rowControls = wrapper.parentElement.querySelectorAll(".".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP));
var numberedRows = wrapper.parentElement.querySelectorAll(ClassName.NUMBERED_COLUMN_BUTTON);
syncStickyRowToTable(tableRef);
var rowHeights = getRowHeights(tableRef);
// update rows controls height on resize
for (var i = 0, count = rowControls.length; i < count; i++) {
var height = rowHeights[i];
if (height) {
rowControls[i].style.height = "".concat(height, "px");
if (numberedRows.length) {
numberedRows[i].style.height = "".concat(height, "px");
}
}
}
};
};
export var isClickNear = function isClickNear(event, click) {
var dx = click.x - event.clientX,
dy = click.y - event.clientY;
return dx * dx + dy * dy < 100;
};
export var getResizeCellPos = function getResizeCellPos(view, event) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = event.target;
if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
return null;
}
var tableCell = closestElement(target, 'td, th');
if (!tableCell) {
return null;
}
var cellStartPosition = view.posAtDOM(tableCell, 0);
return cellStartPosition - 1;
};
export var updateStickyMargins = function updateStickyMargins(table) {
var row = table.querySelector('tr.sticky');
if (!row) {
table.style.marginTop = '';
return;
}
var paddingTop = parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
var firstRowHeight = row.getBoundingClientRect().height - paddingTop - tableCellBorderWidth;
table.style.marginTop = "".concat(tableMarginTop + firstRowHeight, "px");
};
var applyColWidthsToStickyRow = function applyColWidthsToStickyRow(colGroup, headerRow) {
// sync column widths for the sticky row
var newCols = colWidthsForRow(headerRow);
if (newCols) {
headerRow.style.gridTemplateColumns = newCols;
}
};
export var syncStickyRowToTable = function syncStickyRowToTable(tableRef) {
if (!tableRef) {
return;
}
var headerRow = tableRef.querySelector('tr[data-header-row]');
if (!headerRow) {
return;
}
applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
applyTableWidthToStickyRow(tableRef, headerRow);
};
var applyTableWidthToStickyRow = function applyTableWidthToStickyRow(tableRef, headerRow) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var tbody = tableRef.querySelector('tbody');
var wrapper = tableRef.parentElement;
if (tbody && wrapper) {
// when resizing in Chrome, clientWidth will give us 759px
// but toggling the sticky class will reset it to 760px.
//
// both elements in the dom + inspector will
// be the same width but at layout will be different..
var newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
headerRow.style.width = "".concat(newWidth, "px");
headerRow.scrollLeft = wrapper.scrollLeft;
}
};