@atlaskit/editor-plugin-toolbar
Version:
Toolbar plugin for @atlaskit/editor-core
64 lines (63 loc) • 2.77 kB
JavaScript
import { getDocument } from '@atlaskit/browser-apis';
import { fullPageMessages } from '@atlaskit/editor-common/messages';
import { logException } from '@atlaskit/editor-common/monitoring';
import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
import { getFocusableElements, isShortcutToFocusToolbar } from '../utils/toolbar';
export const getKeyboardNavigationConfig = (editorView, intl, api) => {
if (!(editorView.dom instanceof HTMLElement)) {
return;
}
const toolbarSelector = "[data-testid='editor-floating-toolbar']";
return {
childComponentSelector: toolbarSelector,
dom: editorView.dom,
isShortcutToFocusToolbar: isShortcutToFocusToolbar,
handleFocus: event => {
try {
var _getDocument, _filteredFocusableEle, _filteredFocusableEle2, _filteredFocusableEle3;
const toolbar = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector(toolbarSelector);
if (!(toolbar instanceof HTMLElement)) {
return;
}
const filteredFocusableElements = getFocusableElements(toolbar);
(_filteredFocusableEle = filteredFocusableElements[0]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
// the button element removes the focus ring so this class adds it back
if (((_filteredFocusableEle2 = filteredFocusableElements[0]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.tagName) === 'BUTTON') {
filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
}
(_filteredFocusableEle3 = filteredFocusableElements[0]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
});
event.preventDefault();
event.stopPropagation();
} catch (error) {
if (error instanceof Error) {
logException(error, {
location: 'editor-plugin-toolbar/selectionToolbar'
});
}
}
},
handleEscape: event => {
try {
const isDropdownOpen = !!document.querySelector('[data-toolbar-component="menu-section"]');
if (isDropdownOpen) {
return;
}
api === null || api === void 0 ? void 0 : api.core.actions.focus();
event.preventDefault();
event.stopPropagation();
} catch (error) {
if (error instanceof Error) {
logException(error, {
location: 'editor-plugin-toolbar/selectionToolbar'
});
}
}
},
ariaControls: EDIT_AREA_ID,
ariaLabel: intl.formatMessage(fullPageMessages.toolbarLabel)
};
};