@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
122 lines • 3.82 kB
JavaScript
import React, { useMemo } from 'react';
import classnames from 'classnames';
import { injectIntl } from 'react-intl';
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';
const DragCornerControlsComponent = ({
editorView,
isInDanger,
isResizing,
intl: {
formatMessage
}
}) => {
const handleOnClick = () => {
const {
state,
dispatch
} = editorView;
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
};
const handleMouseOut = () => {
const {
state,
dispatch
} = editorView;
clearHoverSelection()(state, dispatch);
};
const isActive = useMemo(() => {
const {
selection
} = editorView.state;
const 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
}));
};
const DragCornerControlsComponentWithSelection = ({
editorView,
isInDanger,
isResizing,
intl: {
formatMessage
},
api
}) => {
const {
selection
} = useSharedPluginStateWithSelector(api, ['selection'], states => {
var _states$selectionStat;
return {
selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
};
});
const handleOnClick = () => {
const {
state,
dispatch
} = editorView;
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
};
const handleMouseOut = () => {
const {
state,
dispatch
} = editorView;
clearHoverSelection()(state, dispatch);
};
const isActive = useMemo(() => {
if (!selection) {
return;
}
const 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 const DragCornerControlsWithSelection = injectIntl(DragCornerControlsComponentWithSelection);
export const DragCornerControls = injectIntl(DragCornerControlsComponent);