@atlaskit/editor-plugin-block-menu/dist/esm/ui/block-menu-provider.js

BlockMenu plugin for @atlaskit/editor-core

import React, { useCallback, createContext, useContext, useRef } from 'react';
import { getBlockMenuAnchorMetrics } from './utils/fixBlockMenuPositionAndScroll';
var BlockMenuContext = /*#__PURE__*/createContext({
  onDropdownOpenChanged: function onDropdownOpenChanged() {},
  moveDownRef: /*#__PURE__*/React.createRef(),
  moveUpRef: /*#__PURE__*/React.createRef(),
  getFirstSelectedDomNode: function getFirstSelectedDomNode() {
    return undefined;
  },
  getMovedBlockDomNode: function getMovedBlockDomNode() {
    return undefined;
  },
  getSelectedBlockDomNode: function getSelectedBlockDomNode() {
    return undefined;
  },
  anchorMetricsRef: {
    current: undefined
  }
});
export var useBlockMenu = function useBlockMenu() {
  var context = useContext(BlockMenuContext);
  if (!context) {
    throw new Error('useBlockMenu must be used within BlockMenuProvider');
  }
  return context;
};
export var BlockMenuProvider = function BlockMenuProvider(_ref) {
  var children = _ref.children,
    api = _ref.api,
    editorView = _ref.editorView;
  var moveUpRef = useRef(null);
  var moveDownRef = useRef(null);
  var anchorMetricsRef = useRef(undefined);
  var getFirstSelectedDomNode = useCallback(function () {
    var _api$selection;
    var from = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState.currentState()) === null || _api$selection === void 0 || (_api$selection = _api$selection.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.from;
    if (from !== undefined) {
      var nodeDOM = editorView === null || editorView === void 0 ? void 0 : editorView.nodeDOM(from);
      if (nodeDOM instanceof Element) {
        return nodeDOM;
      }
    }
  }, [api, editorView]);
  var getTopLevelBlockDomNodeAt = useCallback(function (from) {
    if (!editorView) {
      return;
    }
    var nodeDOM = editorView.nodeDOM(from);
    var domAtPos = nodeDOM instanceof Element ? nodeDOM : editorView.domAtPos(from).node;
    var element = domAtPos instanceof Element ? domAtPos : domAtPos.parentElement;
    if (!element || !editorView.dom.contains(element)) {
      return;
    }
    var block = element;
    while (block.parentElement && block.parentElement !== editorView.dom) {
      block = block.parentElement;
    }
    return block;
  }, [editorView]);
  var getSelectedBlockDomNode = useCallback(function () {
    var _api$blockControls, _ref2, _blockControlsState$a, _blockControlsState$a2, _blockControlsState$m, _blockControlsState$p;
    var blockControlsState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
    // The editor selection is not necessarily in the block the menu was opened for.
    var from = (_ref2 = (_blockControlsState$a = blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$a2 = blockControlsState.activeNode) === null || _blockControlsState$a2 === void 0 ? void 0 : _blockControlsState$a2.pos) !== null && _blockControlsState$a !== void 0 ? _blockControlsState$a : blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$m = blockControlsState.menuTriggerByNode) === null || _blockControlsState$m === void 0 ? void 0 : _blockControlsState$m.pos) !== null && _ref2 !== void 0 ? _ref2 : blockControlsState === null || blockControlsState === void 0 || (_blockControlsState$p = blockControlsState.preservedSelection) === null || _blockControlsState$p === void 0 ? void 0 : _blockControlsState$p.from;
    return from === undefined ? undefined : getTopLevelBlockDomNodeAt(from);
  }, [api, getTopLevelBlockDomNodeAt]);
  var getMovedBlockDomNode = useCallback(function () {
    // A move transaction maps its preserved selection onto the node it just moved, so this is
    // where that node ended up - unlike the block menu state, which keeps stale positions.
    var from = editorView === null || editorView === void 0 ? void 0 : editorView.state.selection.from;
    return from === undefined ? undefined : getTopLevelBlockDomNodeAt(from);
  }, [editorView, getTopLevelBlockDomNodeAt]);
  var onDropdownOpenChanged = useCallback(function (isOpen) {
    anchorMetricsRef.current = undefined;
    if (isOpen) {
      // The popup lays itself out next to the drag handle over the next frame or two.
      var remainingFrames = 3;
      var _captureAnchorMetrics = function captureAnchorMetrics() {
        requestAnimationFrame(function () {
          anchorMetricsRef.current = getBlockMenuAnchorMetrics(getSelectedBlockDomNode());
          remainingFrames -= 1;
          if (!anchorMetricsRef.current && remainingFrames > 0) {
            _captureAnchorMetrics();
          }
        });
      };
      _captureAnchorMetrics();
      return;
    }

    // On Dropdown closed, return focus to editor
    setTimeout(function () {
      return requestAnimationFrame(function () {
        api === null || api === void 0 || api.core.actions.focus({
          scrollIntoView: false
        });
      });
    }, 1);
  }, [api, getSelectedBlockDomNode]);
  return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
    // eslint-disable-next-line @atlassian/perf-linting/no-inline-context-value, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    value: {
      onDropdownOpenChanged: onDropdownOpenChanged,
      moveDownRef: moveDownRef,
      moveUpRef: moveUpRef,
      getFirstSelectedDomNode: getFirstSelectedDomNode,
      getMovedBlockDomNode: getMovedBlockDomNode,
      getSelectedBlockDomNode: getSelectedBlockDomNode,
      anchorMetricsRef: anchorMetricsRef
    }
  }, children);
};