@atlaskit/editor-plugin-layout/dist/esm/ui/LayoutColumnMenu/index.js

Layout plugin for @atlaskit/editor-core

import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { bind } from 'bind-event-listener';
import { surfaceDragHandleElementStore } from '@atlaskit/editor-common/block-controls/surface-drag-handle-element';
import Popup from '@atlaskit/editor-common/Popup';
import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles/drag-handle';
import { ArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider';
import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu/ArrowKeyNavigationProvider/types';
import withReactEditorViewOuterListeners from '@atlaskit/editor-common/ui-react/with-react-editor-view-outer-listeners';
import { UserIntentPopupWrapper } from '@atlaskit/editor-common/UserIntentPopupWrapper';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles/constants';
import { ToolbarDropdownMenuProvider } from '@atlaskit/editor-toolbar/toolbar-dropdown-menu-context';
import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model/surface-renderer';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
import { LAYOUT_COLUMN_MENU } from './keys';
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
var LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = [0, 2];

/**
 * Returns the drag handle button for the selected layout column.
 */
var getLayoutColumnMenuTarget = function getLayoutColumnMenuTarget(editorView, selection, anchorPosFromHandle) {
  var _columnDomRef$parentE;
  var anchorPos = selection && getLayoutColumnMenuAnchorPos(selection, anchorPosFromHandle);
  if (anchorPos === undefined) {
    return null;
  }
  var columnDomRef = editorView.nodeDOM(anchorPos);
  if (!(columnDomRef instanceof HTMLElement)) {
    return null;
  }
  var dragHandleContainer = (_columnDomRef$parentE = columnDomRef.parentElement) === null || _columnDomRef$parentE === void 0 ? void 0 : _columnDomRef$parentE.querySelector(':scope > [data-blocks-drag-handle-container]');
  return dragHandleContainer === null || dragHandleContainer === void 0 ? void 0 : dragHandleContainer.querySelector(DRAG_HANDLE_SELECTOR);
};
var focusTrap = {
  initialFocus: undefined
};
export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(_ref) {
  var _api$uiControlRegistr, _api$uiControlRegistr2;
  var api = _ref.api,
    editorView = _ref.editorView,
    mountTo = _ref.mountTo,
    boundariesElement = _ref.boundariesElement,
    scrollableElement = _ref.scrollableElement;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['layout', 'selection'], function (states) {
      var _states$layoutState$i, _states$layoutState, _states$layoutState2, _states$layoutState$l, _states$layoutState3, _states$selectionStat;
      return {
        isLayoutColumnMenuOpen: (_states$layoutState$i = (_states$layoutState = states.layoutState) === null || _states$layoutState === void 0 ? void 0 : _states$layoutState.isLayoutColumnMenuOpen) !== null && _states$layoutState$i !== void 0 ? _states$layoutState$i : false,
        layoutColumnMenuAnchorPos: (_states$layoutState2 = states.layoutState) === null || _states$layoutState2 === void 0 ? void 0 : _states$layoutState2.layoutColumnMenuAnchorPos,
        openedViaKeyboard: (_states$layoutState$l = (_states$layoutState3 = states.layoutState) === null || _states$layoutState3 === void 0 ? void 0 : _states$layoutState3.layoutColumnMenuOpenedViaKeyboard) !== null && _states$layoutState$l !== void 0 ? _states$layoutState$l : false,
        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
      };
    }),
    isLayoutColumnMenuOpen = _useSharedPluginState.isLayoutColumnMenuOpen,
    layoutColumnMenuAnchorPos = _useSharedPluginState.layoutColumnMenuAnchorPos,
    openedViaKeyboard = _useSharedPluginState.openedViaKeyboard,
    selection = _useSharedPluginState.selection;
  var closeLayoutColumnMenu = useCallback(function () {
    var _api$core, _api$layout;
    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$layout = api.layout) === null || _api$layout === void 0 ? void 0 : _api$layout.commands.toggleLayoutColumnMenu({
      isOpen: false
    }));
  }, [api]);
  var handleClickOutside = useCallback(function (event) {
    if (event.target instanceof Element && (event.target.closest(TOOLBAR_MENU_SELECTOR) || event.target.closest(NESTED_DROPDOWN_MENU_SELECTOR))) {
      return;
    }

    // Clicking a drag handle should let the drag handle's own click handler
    // update selection/menu state. Treating it as a generic outside click
    // races that transaction and can immediately close the layout column menu.
    if (event.target instanceof Element && event.target.closest(DRAG_HANDLE_SELECTOR)) {
      return;
    }
    closeLayoutColumnMenu();
  }, [closeLayoutColumnMenu]);
  var handleSetIsOpen = useCallback(function (isOpen) {
    if (!isOpen) {
      closeLayoutColumnMenu();
    }
  }, [closeLayoutColumnMenu]);
  var handleArrowKeyNavigationClose = useCallback(function (event) {
    event.preventDefault();
    closeLayoutColumnMenu();
  }, [closeLayoutColumnMenu]);
  var shouldDisableArrowKeyNavigation = useCallback(function (event) {
    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
      return false;
    }
    var target = event.target;
    if (!(target instanceof HTMLElement)) {
      return false;
    }
    return target.closest(NESTED_DROPDOWN_MENU_SELECTOR) !== null;
  }, []);
  var menuWrapperRef = useRef(null);
  var handleMenuKeyDown = useCallback(function (event) {
    // Keep menu keyboard events scoped to the menu while preserving Escape and
    // ArrowUp/ArrowDown handling from Popup and ArrowKeyNavigationProvider.
    if (event.key !== 'Escape' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
      event.stopPropagation();
    }
  }, []);
  useEffect(function () {
    var menuWrapper = menuWrapperRef.current;
    if (!isLayoutColumnMenuOpen || !menuWrapper) {
      return;
    }
    return bind(menuWrapper, {
      type: 'keydown',
      listener: handleMenuKeyDown
    });
  }, [handleMenuKeyDown, isLayoutColumnMenuOpen]);
  var components = (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
  var hasValidMenuSelection = !isExperimentEnabled('platform_editor_block_control_migration') || selection !== undefined && getLayoutColumnMenuAnchorPos(selection, layoutColumnMenuAnchorPos) !== undefined;
  var legacyTarget = useMemo(function () {
    return isLayoutColumnMenuOpen && !isExperimentEnabled('platform_editor_block_control_migration') ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
  }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
  var surfaceTargetRef = useRef(null);
  var surfaceAnchorPosRef = useRef(undefined);
  if (!isExperimentEnabled('platform_editor_block_control_migration') || !isLayoutColumnMenuOpen) {
    surfaceTargetRef.current = null;
    surfaceAnchorPosRef.current = undefined;
  } else if (!surfaceTargetRef.current || surfaceAnchorPosRef.current !== layoutColumnMenuAnchorPos) {
    var _surfaceDragHandleEle;
    surfaceTargetRef.current = (_surfaceDragHandleEle = surfaceDragHandleElementStore.get(editorView)) !== null && _surfaceDragHandleEle !== void 0 ? _surfaceDragHandleEle : surfaceTargetRef.current;
    surfaceAnchorPosRef.current = layoutColumnMenuAnchorPos;
  }
  var target = isExperimentEnabled('platform_editor_block_control_migration') ? surfaceTargetRef.current : legacyTarget;
  var hasValidTarget = target instanceof HTMLElement;
  useEffect(function () {
    if (isLayoutColumnMenuOpen && (!hasValidMenuSelection || !hasValidTarget || components.length === 0)) {
      closeLayoutColumnMenu();
    }
  }, [closeLayoutColumnMenu, components.length, hasValidMenuSelection, hasValidTarget, isLayoutColumnMenuOpen]);
  if (!isLayoutColumnMenuOpen || !hasValidMenuSelection || components.length === 0 || !hasValidTarget) {
    return null;
  }
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
    target: target,
    mountTo: mountTo,
    boundariesElement: boundariesElement,
    scrollableElement: scrollableElement,
    zIndex: akEditorFloatingOverlapPanelZIndex,
    forcePlacement: true,
    preventOverflow: true,
    stick: true,
    offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW,
    handleClickOutside: handleClickOutside,
    handleEscapeKeydown: closeLayoutColumnMenu,
    focusTrap: openedViaKeyboard ? focusTrap : undefined
  }, /*#__PURE__*/React.createElement("div", {
    ref: menuWrapperRef
  }, /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
    api: api,
    userIntent: "layoutColumnMenuPopupOpen"
  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
    isOpen: isLayoutColumnMenuOpen,
    setIsOpen: handleSetIsOpen
  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
    type: ArrowKeyNavigationType.MENU,
    handleClose: handleArrowKeyNavigationClose,
    disableArrowKeyNavigation: shouldDisableArrowKeyNavigation
  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
    components: components,
    fallbacks: LAYOUT_COLUMN_MENU_FALLBACKS,
    surface: LAYOUT_COLUMN_MENU
  }))))));
});