@atlaskit/editor-plugin-block-menu
Version:
BlockMenu plugin for @atlaskit/editor-core
120 lines (118 loc) • 6.85 kB
JavaScript
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useBlockMenu = exports.BlockMenuProvider = void 0;
var _react = _interopRequireWildcard(require("react"));
var _fixBlockMenuPositionAndScroll = require("./utils/fixBlockMenuPositionAndScroll");
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 BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
onDropdownOpenChanged: function onDropdownOpenChanged() {},
moveDownRef: /*#__PURE__*/_react.default.createRef(),
moveUpRef: /*#__PURE__*/_react.default.createRef(),
getFirstSelectedDomNode: function getFirstSelectedDomNode() {
return undefined;
},
getMovedBlockDomNode: function getMovedBlockDomNode() {
return undefined;
},
getSelectedBlockDomNode: function getSelectedBlockDomNode() {
return undefined;
},
anchorMetricsRef: {
current: undefined
}
});
var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
var context = (0, _react.useContext)(BlockMenuContext);
if (!context) {
throw new Error('useBlockMenu must be used within BlockMenuProvider');
}
return context;
};
var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_ref) {
var children = _ref.children,
api = _ref.api,
editorView = _ref.editorView;
var moveUpRef = (0, _react.useRef)(null);
var moveDownRef = (0, _react.useRef)(null);
var anchorMetricsRef = (0, _react.useRef)(undefined);
var getFirstSelectedDomNode = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _fixBlockMenuPositionAndScroll.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.default.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);
};