@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
105 lines • 4.25 kB
JavaScript
import React, { useMemo } from 'react';
import classnames from 'classnames';
import { injectIntl } from 'react-intl-next';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { clearHoverSelection } from '../../../pm-plugins/commands';
import { TableCssClassName as ClassName } from '../../../types';
var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
var editorView = _ref.editorView,
isInDanger = _ref.isInDanger,
isResizing = _ref.isResizing,
formatMessage = _ref.intl.formatMessage;
var handleOnClick = function handleOnClick() {
var state = editorView.state,
dispatch = editorView.dispatch;
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
};
var handleMouseOut = function handleMouseOut() {
var state = editorView.state,
dispatch = editorView.dispatch;
clearHoverSelection()(state, dispatch);
};
var isActive = useMemo(function () {
var selection = editorView.state.selection;
var table = findTable(selection);
if (!table) {
return false;
}
return isTableSelected(selection);
}, [editorView.state]);
if (isResizing) {
return null;
}
return /*#__PURE__*/React.createElement("button", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
active: isActive,
danger: isActive && isInDanger
}),
"aria-label": formatMessage(messages.cornerControl),
type: "button",
onClick: handleOnClick,
onMouseOut: handleMouseOut,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
contentEditable: false
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.DRAG_CORNER_BUTTON_INNER
}));
};
var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
var editorView = _ref2.editorView,
isInDanger = _ref2.isInDanger,
isResizing = _ref2.isResizing,
formatMessage = _ref2.intl.formatMessage,
api = _ref2.api;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
var _states$selectionStat;
return {
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
};
}),
selection = _useSharedPluginState.selection;
var handleOnClick = function handleOnClick() {
var state = editorView.state,
dispatch = editorView.dispatch;
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
};
var handleMouseOut = function handleMouseOut() {
var state = editorView.state,
dispatch = editorView.dispatch;
clearHoverSelection()(state, dispatch);
};
var isActive = useMemo(function () {
if (!selection) {
return;
}
var table = findTable(selection);
if (!table) {
return false;
}
return isTableSelected(selection);
}, [selection]);
if (isResizing) {
return null;
}
return /*#__PURE__*/React.createElement("button", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
active: isActive,
danger: isActive && isInDanger
}),
"aria-label": formatMessage(messages.cornerControl),
type: "button",
onClick: handleOnClick,
onMouseOut: handleMouseOut,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? handleMouseOut : undefined,
contentEditable: false
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.DRAG_CORNER_BUTTON_INNER
}));
};
export var DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
export var DragCornerControls = injectIntl(DragCornerControlsComponent);