@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
229 lines (224 loc) • 11.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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 React from 'react';
import { injectIntl } from 'react-intl-next';
import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { Popup } from '@atlaskit/editor-common/ui';
import { closestElement } from '@atlaskit/editor-common/utils';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
import { TableMap } from '@atlaskit/editor-tables/table-map';
import { findTable } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
import { checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
import { TableCssClassName as ClassName } from '../../types';
import getPopupOptions from './getPopupOptions';
import InsertButton, { DragAndDropInsertButton } from './InsertButton';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
function FloatingInsertButton(props) {
var _this;
_classCallCheck(this, FloatingInsertButton);
_this = _callSuper(this, FloatingInsertButton, [props]);
_this.insertColumn = _this.insertColumn.bind(_this);
_this.insertRow = _this.insertRow.bind(_this);
return _this;
}
_inherits(FloatingInsertButton, _React$Component);
return _createClass(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 && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
return null;
}
var tablePos = 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 = findDomRefAtPos(pos, domAtPos);
} catch (error) {
// eslint-disable-next-line no-console
console.warn(error);
if (dispatchAnalyticsEvent) {
var payload = {
action: ACTION.ERRORED,
actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
eventType: EVENT_TYPE.OPERATIONAL,
attributes: {
component: 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' ? closestElement(target, 'tr') : closestElement(target, 'td, th');
if (!targetCellRef) {
return null;
}
var tableContainerWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_CONTAINER));
var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.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 = 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 = expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
return /*#__PURE__*/React.createElement(Popup, _extends({
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
}, getPopupOptions(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
zIndex: zIndex
}), isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
type: type,
tableRef: tableRef,
onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
hasStickyHeaders: this.props.hasStickyHeaders || false,
isChromelessEditor: isChromelessEditor
}) : /*#__PURE__*/React.createElement(InsertButton, {
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;
var tableMap = TableMap.get(tableNode);
if (type === 'column') {
// This condition is to make typescript happy.
// Previously insertColumnButtonIndex - 1 would produce NaN and return null anyway.
if (insertColumnButtonIndex === undefined) {
return null;
}
var columnIndex = insertColumnButtonIndex === 0 ? 0 : insertColumnButtonIndex - 1;
if (columnIndex > tableMap.width - 1) {
return null;
}
return tableMap.positionAt(0, columnIndex, tableNode);
} else {
// This condition is to make typescript happy.
// Previously insertRowButtonIndex - 1 would produce NaN and return null anyway.
if (insertRowButtonIndex === undefined) {
return null;
}
var rowIndex = insertRowButtonIndex === 0 ? 0 : insertRowButtonIndex - 1;
if (rowIndex > tableMap.height - 1) {
return null;
}
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;
insertRowWithAnalytics(editorAnalyticsAPI)(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;
insertColumnWithAnalytics(this.props.api, editorAnalyticsAPI, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
}
}
}]);
}(React.Component);
_defineProperty(FloatingInsertButton, "displayName", 'FloatingInsertButton');
export default injectIntl(FloatingInsertButton);