@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
56 lines • 2.21 kB
JavaScript
import React, { useRef } from 'react';
import { useIntl } from 'react-intl';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
import { MoreItemsIcon, ToolbarButton, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
import { useTableSelectorPopup } from './hooks/useTableSelectorPopup';
import { TableSelectorPopupWrapper } from './popups/TableSelectorPopupWrapper';
export const TableSizePicker = ({
api,
tableSelectorSupported
}) => {
const {
formatMessage
} = useIntl();
const tableSizePickerRef = useRef(null);
const {
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement
} = useToolbarUI();
const tableSelectorPopup = useTableSelectorPopup({
api,
buttonRef: tableSizePickerRef
});
if (!(api !== null && api !== void 0 && api.table) || !tableSelectorSupported) {
return null;
}
const onClick = event => {
if (event.detail === 0) {
tableSelectorPopup.handleKeyboardOpen(event);
}
tableSelectorPopup.toggle();
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableSelectorPopupWrapper, {
isOpen: tableSelectorPopup.isOpen,
targetRef: tableSizePickerRef,
isOpenedByKeyboard: tableSelectorPopup.isOpenedByKeyboard,
onSelection: tableSelectorPopup.handleSelectedTableSize,
onClickOutside: tableSelectorPopup.handleClickOutside,
onEscapeKeydown: tableSelectorPopup.handleEscapeKeydown,
onUnmount: tableSelectorPopup.onPopupUnmount,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement
}), /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: formatMessage(messages.tableSelector)
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: /*#__PURE__*/React.createElement(MoreItemsIcon, {
label: formatMessage(messages.tableSelector)
}),
onClick: onClick,
isSelected: tableSelectorPopup.isOpen,
ref: tableSizePickerRef,
testId: TOOLBAR_BUTTON_TEST_ID.TABLE_SELECTOR
})));
};