@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
53 lines • 2.44 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 var TableSizePicker = function TableSizePicker(_ref) {
var api = _ref.api,
tableSelectorSupported = _ref.tableSelectorSupported;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var tableSizePickerRef = useRef(null);
var _useToolbarUI = useToolbarUI(),
popupsMountPoint = _useToolbarUI.popupsMountPoint,
popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
var tableSelectorPopup = useTableSelectorPopup({
api: api,
buttonRef: tableSizePickerRef
});
if (!(api !== null && api !== void 0 && api.table) || !tableSelectorSupported) {
return null;
}
var onClick = function 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
})));
};