@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
122 lines (119 loc) • 5.55 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { Popup } from '@atlaskit/editor-common/ui';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getPluginState } from '../../pm-plugins/plugin-factory';
import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import ContextualMenu from './ContextualMenu';
import { tablePopupStyles } from './styles';
var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
var mountPoint = _ref.mountPoint,
boundariesElement = _ref.boundariesElement,
scrollableElement = _ref.scrollableElement,
editorView = _ref.editorView,
isOpen = _ref.isOpen,
pluginConfig = _ref.pluginConfig,
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
getEditorContainerWidth = _ref.getEditorContainerWidth,
getEditorFeatureFlags = _ref.getEditorFeatureFlags,
isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
isCommentEditor = _ref.isCommentEditor,
api = _ref.api,
isDragMenuOpen = _ref.isDragMenuOpen;
if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
return null;
}
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var _getPluginState = getPluginState(editorView.state),
targetCellPosition = _getPluginState.targetCellPosition,
isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
return null;
}
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var selection = editorView.state.selection;
var selectionRect = isSelectionType(selection, 'cell') ?
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
if (!selectionRect) {
return null;
}
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var domAtPos = editorView.domAtPos.bind(editorView);
var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
if (!targetCellRef) {
return null;
}
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
return jsx(Popup, {
alignX: "right",
alignY: "top"
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
,
target: targetCellRef,
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
fitHeight: tablePopupMenuFitHeight,
fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
// z-index value below is to ensure that this menu is above other floating menu
// in table, but below floating dialogs like typeaheads, pickers, etc.
,
zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
forcePlacement: true
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [-7, 0],
stick: true
}, jsx("div", {
css: tablePopupStyles(isDragAndDropEnabled)
}, jsx(ContextualMenu
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
, {
editorView: editorView
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
isOpen: isOpen,
targetCellPosition: targetCellPosition,
allowColumnSorting: pluginConfig && pluginConfig.allowColumnSorting
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
allowMergeCells: pluginConfig.allowMergeCells
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
allowBackgroundColor: pluginConfig.allowBackgroundColor,
selectionRect: selectionRect,
mountPoint: mountPoint,
boundariesElement: boundariesElement,
editorAnalyticsAPI: editorAnalyticsAPI,
getEditorContainerWidth: getEditorContainerWidth,
getEditorFeatureFlags: getEditorFeatureFlags,
isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
isCommentEditor: isCommentEditor,
api: api,
isDragMenuOpen: isDragMenuOpen
})));
};
FloatingContextualMenu.displayName = 'FloatingContextualMenu';
export default FloatingContextualMenu;