@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
239 lines (231 loc) • 13.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.FloatingInsertButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _react = _interopRequireDefault(require("react"));
var _reactIntlNext = require("react-intl-next");
var _analytics = require("@atlaskit/editor-common/analytics");
var _ui = require("@atlaskit/editor-common/ui");
var _utils = require("@atlaskit/editor-common/utils");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
var _tableMap = require("@atlaskit/editor-tables/table-map");
var _utils3 = require("@atlaskit/editor-tables/utils");
var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
var _nodes = require("../../pm-plugins/utils/nodes");
var _types = require("../../types");
var _getPopupOptions = _interopRequireDefault(require("./getPopupOptions"));
var _InsertButton = _interopRequireWildcard(require("./InsertButton"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; })(); }
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
function FloatingInsertButton(props) {
var _this;
(0, _classCallCheck2.default)(this, FloatingInsertButton);
_this = _callSuper(this, FloatingInsertButton, [props]);
_this.insertColumn = _this.insertColumn.bind(_this);
_this.insertRow = _this.insertRow.bind(_this);
return _this;
}
(0, _inherits2.default)(FloatingInsertButton, _React$Component);
return (0, _createClass2.default)(FloatingInsertButton, [{
key: "render",
value: function render() {
var _this$props = this.props,
tableNode = _this$props.tableNode,
editorView = _this$props.editorView,
insertColumnButtonIndex = _this$props.insertColumnButtonIndex,
insertRowButtonIndex = _this$props.insertRowButtonIndex,
tableRef = _this$props.tableRef,
mountPoint = _this$props.mountPoint,
boundariesElement = _this$props.boundariesElement,
isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
isChromelessEditor = _this$props.isChromelessEditor;
// TODO: ED-26961 - temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
return null;
}
var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
if (!tableNode || !tableRef || !type) {
return null;
}
// We can’t display the insert button for row|colum index 0
// when the header row|colum is enabled, this feature will be change on the future
if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
return null;
}
var tr = editorView.state.tr;
if (tr.selection instanceof _cellSelection.CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
return null;
}
var tablePos = (0, _utils3.findTable)(tr.selection);
if (!tablePos) {
return null;
}
// the tableNode props is not always latest (when you type some text in a cell, it's not updated yet)
// we need to get the latest one by calling findTable(tr.selection)
var cellPosition = this.getCellPosition(type, tablePos === null || tablePos === void 0 ? void 0 : tablePos.node);
if (!cellPosition) {
return null;
}
var domAtPos = editorView.domAtPos.bind(editorView);
var pos = cellPosition + tablePos.start + 1;
var target;
try {
target = (0, _utils2.findDomRefAtPos)(pos, domAtPos);
} catch (error) {
// eslint-disable-next-line no-console
console.warn(error);
if (dispatchAnalyticsEvent) {
var payload = {
action: _analytics.ACTION.ERRORED,
actionSubject: _analytics.ACTION_SUBJECT.CONTENT_COMPONENT,
eventType: _analytics.EVENT_TYPE.OPERATIONAL,
attributes: {
component: _analytics.CONTENT_COMPONENT.FLOATING_INSERT_BUTTON,
selection: editorView.state.selection.toJSON(),
position: pos,
docSize: editorView.state.doc.nodeSize,
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
error: error === null || error === void 0 ? void 0 : error.toString()
}
};
dispatchAnalyticsEvent(payload);
}
}
if (!target || !(target instanceof HTMLElement)) {
return null;
}
var targetCellRef = type === 'row' ? (0, _utils.closestElement)(target, 'tr') : (0, _utils.closestElement)(target, 'td, th');
if (!targetCellRef) {
return null;
}
var tableContainerWrapper = (0, _utils.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
var tableWrapper = (0, _utils.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
var hasNumberedColumns = (0, _nodes.checkIfNumberColumnEnabled)(editorView.state.selection);
// Fixed the 'add column button' not visible issue when sticky header is enabled
// By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
// Only when inserting a column, otherwise set to undefined
// Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
var zIndex = type === 'column' ? _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex : undefined;
return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
target: targetCellRef,
mountTo: tableContainerWrapper || mountPoint,
boundariesElement: tableContainerWrapper || boundariesElement
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
scrollableElement: tableWrapper,
forcePlacement: true,
allowOutOfBounds: true
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
zIndex: zIndex
}), isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_InsertButton.DragAndDropInsertButton, {
type: type,
tableRef: tableRef,
onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
hasStickyHeaders: this.props.hasStickyHeaders || false,
isChromelessEditor: isChromelessEditor
}) : /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
type: type,
tableRef: tableRef,
onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
hasStickyHeaders: this.props.hasStickyHeaders || false
}));
}
}, {
key: "getCellPosition",
value: function getCellPosition(type, tableNode) {
var _this$props2 = this.props,
insertColumnButtonIndex = _this$props2.insertColumnButtonIndex,
insertRowButtonIndex = _this$props2.insertRowButtonIndex;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var tableMap = _tableMap.TableMap.get(tableNode);
if (type === 'column') {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var columnIndex = insertColumnButtonIndex === 0 ? 0 : insertColumnButtonIndex - 1;
if (columnIndex > tableMap.width - 1) {
return null;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return tableMap.positionAt(0, columnIndex, tableNode);
} else {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var rowIndex = insertRowButtonIndex === 0 ? 0 : insertRowButtonIndex - 1;
if (rowIndex > tableMap.height - 1) {
return null;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return tableMap.positionAt(rowIndex, 0, tableNode);
}
}
}, {
key: "insertRow",
value: function insertRow(event) {
var _this$props3 = this.props,
editorView = _this$props3.editorView,
insertRowButtonIndex = _this$props3.insertRowButtonIndex,
editorAnalyticsAPI = _this$props3.editorAnalyticsAPI;
if (typeof insertRowButtonIndex !== 'undefined') {
event.preventDefault();
var state = editorView.state,
dispatch = editorView.dispatch;
(0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.BUTTON, {
index: insertRowButtonIndex,
moveCursorToInsertedRow: true
})(state, dispatch);
}
}
}, {
key: "insertColumn",
value: function insertColumn(event) {
var _this$props4 = this.props,
editorView = _this$props4.editorView,
insertColumnButtonIndex = _this$props4.insertColumnButtonIndex,
editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
getEditorFeatureFlags = _this$props4.getEditorFeatureFlags,
isTableScalingEnabled = _this$props4.isTableScalingEnabled,
isCommentEditor = _this$props4.isCommentEditor;
if (typeof insertColumnButtonIndex !== 'undefined') {
event.preventDefault();
var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
_ref$tableWithFixedCo = _ref.tableWithFixedColumnWidthsOption,
tableWithFixedColumnWidthsOption = _ref$tableWithFixedCo === void 0 ? false : _ref$tableWithFixedCo;
var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
var state = editorView.state,
dispatch = editorView.dispatch;
(0, _commandsWithAnalytics.insertColumnWithAnalytics)(this.props.api, editorAnalyticsAPI, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
}
}
}]);
}(_react.default.Component);
(0, _defineProperty2.default)(FloatingInsertButton, "displayName", 'FloatingInsertButton');
var _default = exports.default = (0, _reactIntlNext.injectIntl)(FloatingInsertButton);