@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
276 lines (270 loc) • 15.1 kB
JavaScript
/* block-menu.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./block-menu.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _css = require("@atlaskit/css");
var _analytics = require("@atlaskit/editor-common/analytics");
var _blockMenu = require("@atlaskit/editor-common/block-menu");
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
var _hooks = require("@atlaskit/editor-common/hooks");
var _styles = require("@atlaskit/editor-common/styles");
var _ui = require("@atlaskit/editor-common/ui");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _compiled = require("@atlaskit/primitives/compiled");
var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _blockMenuProvider = require("./block-menu-provider");
var _BlockMenuRenderer = require("./block-menu-renderer/BlockMenuRenderer");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
base: "_2rko12b0 _bfhk1bhr _16qs130s",
maxWidthStyles: "_p12fnklw",
emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
};
var DEFAULT_MENU_WIDTH = 230;
var DRAG_HANDLE_OFFSET_PADDING = 5;
var FALLBACK_MENU_HEIGHT = 300;
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
var useConditionalBlockMenuEffect = function useConditionalBlockMenuEffect(_ref) {
var api = _ref.api,
isMenuOpen = _ref.isMenuOpen,
menuTriggerBy = _ref.menuTriggerBy,
selectedByShortcutOrDragHandle = _ref.selectedByShortcutOrDragHandle,
hasFocus = _ref.hasFocus,
openedViaKeyboard = _ref.openedViaKeyboard,
prevIsMenuOpenRef = _ref.prevIsMenuOpenRef;
/**
* NOTE: do not add `currentUserIntent` to dependency array as it causes unnecessary re-renders and messes with the user intent state
*/
(0, _react.useEffect)(function () {
var _api$userIntent;
if (!isMenuOpen || !menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus) {
return;
}
// Fire analytics event when block menu opens (only on first transition from closed to open)
if (!prevIsMenuOpenRef.current && isMenuOpen) {
var _api$analytics;
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
action: _analytics.ACTION.OPENED,
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU,
eventType: _analytics.EVENT_TYPE.UI,
attributes: {
inputMethod: openedViaKeyboard ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE
}
});
}
// Update the previous state
prevIsMenuOpenRef.current = isMenuOpen;
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
}, [api, isMenuOpen, menuTriggerBy, selectedByShortcutOrDragHandle, hasFocus, openedViaKeyboard, prevIsMenuOpenRef]);
};
var isSelectionWithinCodeBlock = function isSelectionWithinCodeBlock(state) {
var _state$selection = state.selection,
$from = _state$selection.$from,
$to = _state$selection.$to;
return $from.sameParent($to) && $from.parent.type === state.schema.nodes.codeBlock;
};
var BlockMenuContent = function BlockMenuContent(_ref2) {
var _api$blockMenu;
var api = _ref2.api,
setRef = _ref2.setRef;
var blockMenuComponents = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.getBlockMenuComponents();
var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
var ref = function ref(el) {
setOutsideClickTargetRef(el);
setRef === null || setRef === void 0 || setRef(el);
};
var shouldDisableArrowKeyNavigation = function shouldDisableArrowKeyNavigation(event) {
if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
return false;
}
var target = event.target;
if (!(target instanceof HTMLElement)) {
return false;
}
return target.closest('[data-toolbar-nested-dropdown-menu]') !== null;
};
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
testId: _blockMenu.BLOCK_MENU_TEST_ID,
role: (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menu' : undefined,
ref: ref,
xcss: (0, _css.cx)(styles.base, styles.maxWidthStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && styles.emptyMenuSectionStyles)
}, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
type: _uiMenu.ArrowKeyNavigationType.MENU
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
handleClose: function handleClose(e) {
return e.preventDefault();
},
disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
}, /*#__PURE__*/_react.default.createElement(_BlockMenuRenderer.BlockMenuRenderer, {
allRegisteredComponents: blockMenuComponents || []
})));
};
var BlockMenu = function BlockMenu(_ref3) {
var _editorView$dom, _ref4, _api$analytics2;
var editorView = _ref3.editorView,
api = _ref3.api,
mountTo = _ref3.mountTo,
boundariesElement = _ref3.boundariesElement,
scrollableElement = _ref3.scrollableElement;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta, _states$blockControls4;
return {
menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
openedViaKeyboard: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 || (_states$blockControls4 = _states$blockControls4.blockMenuOptions) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.openedViaKeyboard
};
}),
menuTriggerBy = _useSharedPluginState.menuTriggerBy,
isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
isMenuOpen = _useSharedPluginState.isMenuOpen,
currentUserIntent = _useSharedPluginState.currentUserIntent,
openedViaKeyboard = _useSharedPluginState.openedViaKeyboard;
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
var prevIsMenuOpenRef = (0, _react.useRef)(false);
var popupRef = (0, _react.useRef)(undefined);
var _React$useState = _react.default.useState(0),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
menuHeight = _React$useState2[0],
setMenuHeight = _React$useState2[1];
var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
_react.default.useLayoutEffect(function () {
var _popupRef$current;
if (!isMenuOpen) {
return;
}
setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
}, [isMenuOpen]);
var hasFocus = (_ref4 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) ||
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
document.activeElement === targetHandleRef || popupRef.current && (
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
popupRef.current.contains(document.activeElement) ||
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
popupRef.current === document.activeElement)) !== null && _ref4 !== void 0 ? _ref4 : false;
var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
// Use conditional hook based on feature flag
useConditionalBlockMenuEffect({
api: api,
isMenuOpen: isMenuOpen,
menuTriggerBy: menuTriggerBy,
selectedByShortcutOrDragHandle: selectedByShortcutOrDragHandle,
hasFocus: hasFocus,
openedViaKeyboard: openedViaKeyboard,
prevIsMenuOpenRef: prevIsMenuOpenRef
});
if (!isMenuOpen) {
return null;
}
var handleKeyDown = function handleKeyDown(event) {
var _api$core, _api$blockControls;
// When the editor view has focus, the keydown will be handled by the
// selection preservation plugin – exit early to avoid double handling
// Also exit if selection is within a code block to avoid double handling when code block got focus when the node after it is deleted
if (!editorView || editorView !== null && editorView !== void 0 && editorView.hasFocus() || isSelectionWithinCodeBlock(editorView.state)) {
return;
}
var key = event.key.toLowerCase();
var isMetaCtrl = event.metaKey || event.ctrlKey;
var isDelete = ['backspace', 'delete'].includes(key);
var isUndo = isMetaCtrl && key === 'z' && !event.shiftKey;
var isRedo = isMetaCtrl && (key === 'y' || key === 'z' && event.shiftKey);
// Necessary to prevent the editor from handling the delete natively
if (isDelete || isUndo || isRedo) {
event.preventDefault();
event.stopPropagation();
}
if (isUndo) {
(0, _prosemirrorHistory.undo)(editorView.state, editorView.dispatch);
} else if (isRedo) {
(0, _prosemirrorHistory.redo)(editorView.state, editorView.dispatch);
}
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.handleKeyDownWithPreservedSelection(event));
};
var handleClickOutside = function handleClickOutside(e) {
// check if the clicked element was another drag handle, if so don't close the menu
if (e.target instanceof HTMLElement && e.target.closest(_styles.DRAG_HANDLE_SELECTOR)) {
return;
}
closeMenu();
};
var closeMenu = function closeMenu() {
api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
var _api$blockControls2, _api$userIntent2;
var tr = _ref5.tr;
api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
closeMenu: true
})({
tr: tr
});
onDropdownOpenChanged(false);
api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(currentUserIntent === 'blockMenuOpen' ? 'default' : currentUserIntent || 'default')({
tr: tr
});
return tr;
});
};
if (!menuTriggerBy || !selectedByShortcutOrDragHandle || !hasFocus || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
closeMenu();
return null;
}
var setRef = function setRef(el) {
if (el) {
popupRef.current = el;
}
};
if (!(targetHandleRef instanceof HTMLElement)) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
component: _analytics.ACTION_SUBJECT.BLOCK_MENU,
dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
fallbackComponent: null
}, /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
alignX: 'right',
alignY: 'start',
handleClickOutside: handleClickOutside,
handleEscapeKeydown: closeMenu,
handleKeyDown: handleKeyDown,
mountTo: mountTo,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
target: targetHandleRef,
zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
fitWidth: DEFAULT_MENU_WIDTH,
fitHeight: menuHeight,
preventOverflow: true,
stick: true
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
focusTrap: openedViaKeyboard ?
// Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
{
initialFocus: undefined
} : undefined
}, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
api: api,
setRef: setRef
})));
};
// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(BlockMenu);
var _default = exports.default = _default_1;