@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
150 lines (143 loc) • 6.82 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
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 = exports.default = /*#__PURE__*/function (_TableNodeView) {
function TableCell(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
var _this;
(0, _classCallCheck2.default)(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
(0, _defineProperty2.default)(_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: _analytics.TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
eventType: _analytics.EVENT_TYPE.TRACK
})(tr);
view.dispatch(tr);
}
});
}
return _this;
}
(0, _inherits2.default)(TableCell, _TableNodeView);
return (0, _createClass2.default)(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 = (0, _adfSchema.getCellDomAttrs)(this.node);
var nextAttrs = (0, _adfSchema.getCellDomAttrs)(node);
var _getCellAttrs = (0, _adfSchema.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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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;
}
}]);
}(_TableNodeViewBase.default);