@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
144 lines (138 loc) • 6.25 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
import TableNodeView from './TableNodeViewBase';
var DEFAULT_COL_SPAN = 1;
var DEFAULT_ROW_SPAN = 1;
/**
* For performance reasons we do this in the background - it shouldn't block the main thread
*/
function delayUntilIdle(cb) {
if (typeof window === 'undefined') {
return;
}
// eslint-disable-next-line compat/compat
if (window.requestIdleCallback !== undefined) {
// eslint-disable-next-line compat/compat
return window.requestIdleCallback(function () {
return cb();
}, {
timeout: 500
});
}
return window.requestAnimationFrame(function () {
return cb();
});
}
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
var cssVariablePattern = /^VAR\(--.*\)$/;
var TableCell = /*#__PURE__*/function (_TableNodeView) {
function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
var _this;
_classCallCheck(this, TableCell);
_this = _callSuper(this, TableCell, [node, view, getPos, eventDispatcher]);
// CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
// Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
// which is not a valid CSS variable.
//
// We should follow-up and remove this in TODO-xx in 6 months once we're confident
// that this has fixed most of the cases in the wild.
//
// This is a workaround to fix those cases on the fly. Note it is super specific on purpose
// so that it just fixes the heading token (other tokens should be unaffected)
// At some point in the future
_defineProperty(_this, "destroy", function () {
if (_this.delayHandle && typeof window !== 'undefined') {
var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
// eslint-disable-next-line compat/compat
(_window = window) === null || _window === void 0 || (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 || _window$cancelIdleCal.call(_window, _this.delayHandle);
(_window2 = window) === null || _window2 === void 0 || (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 || _window2$cancelAnimat.call(_window2, _this.delayHandle);
}
});
if (cssVariablePattern.test(node.attrs.background)) {
_this.delayHandle = delayUntilIdle(function () {
var pos = getPos();
if (pos) {
var tr = view.state.tr;
tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
// Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
.setMeta('addToHistory', false);
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
actionSubject: ACTION_SUBJECT.TABLE,
actionSubjectId: null,
eventType: EVENT_TYPE.TRACK
})(tr);
view.dispatch(tr);
}
});
}
return _this;
}
_inherits(TableCell, _TableNodeView);
return _createClass(TableCell, [{
key: "update",
value: function update(node) {
var didUpdate = this.updateNodeView(node);
if (didUpdate) {
this.node = node;
}
return didUpdate;
}
}, {
key: "updateNodeView",
value: function updateNodeView(node) {
var _this2 = this;
if (this.node.type !== node.type) {
return false;
}
var attrs = getCellDomAttrs(this.node);
var nextAttrs = getCellDomAttrs(node);
var _getCellAttrs = getCellAttrs(this.dom),
colspan = _getCellAttrs.colspan,
rowspan = _getCellAttrs.rowspan;
// need to rerender when colspan/rowspan in dom are different from the node attrs
// this can happen when undoing merge cells
if (colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) || rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)) {
return false;
}
// added + changed attributes
var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
return attrs[key] !== value;
});
var removedAttrs = Object.keys(attrs).filter(function (key) {
return !nextAttrs.hasOwnProperty(key);
});
if (addedAttrs.length || removedAttrs.length) {
addedAttrs.forEach(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
key = _ref4[0],
value = _ref4[1];
return _this2.dom.setAttribute(key, value || '');
});
removedAttrs.forEach(function (key) {
return _this2.dom.removeAttribute(key);
});
return true;
}
// Return true to not re-render this node view
if (this.node.sameMarkup(node)) {
return true;
}
return false;
}
}]);
}(TableNodeView);
export { TableCell as default };