@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
283 lines (282 loc) • 18.5 kB
JavaScript
/* block-controls-right-surfaces.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BlockControlsRightSurfaces = void 0;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _bindEventListener = require("bind-event-listener");
var _browserApis = require("@atlaskit/browser-apis");
var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
var _hooks = require("@atlaskit/editor-common/hooks");
var _styles = require("@atlaskit/editor-common/styles");
var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
var _decorationsCommon = require("../pm-plugins/decorations-common");
var _blockControlsRightSurface = require("./block-controls-right-surface");
var _blockControlsSurfaceContext = require("./block-controls-surface-context");
var _blockControlsSurfaceTargets = require("./block-controls-surface-targets");
var _getNodeContentElement = require("./utils/get-node-content-element");
var _getSurfacePlacement = require("./utils/get-surface-placement");
var _hasSurfaceControls = require("./utils/has-surface-controls");
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); }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var EMPTY_SURFACE_POSITIONS = [];
var EMPTY_SURFACE_ANCHORS = new Map();
var EMPTY_SURFACE_COMPONENTS = [];
var EMPTY_MEASURED_SURFACES = [];
/**
* Registry-backed right surface tree. Mirrors the left surface's single-tree approach, but keeps its
* own components lookup, targets, placements and measurement lifecycle so the right surface never
* depends on the left surface's render pass.
*
* Targets are placed one of two ways. Where the node's anchor name can be relied on, the surface is
* positioned with `anchor()` and the browser keeps it attached with nothing re-rendering. Everything
* else is measured and kept honest by the observers below. See `hasInnerContentContainer`.
*/
var BlockControlsRightSurfaces = exports.BlockControlsRightSurfaces = function BlockControlsRightSurfaces(_ref) {
var _api$uiControlRegistr, _api$uiControlRegistr2;
var api = _ref.api,
editorView = _ref.editorView;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$blockControls4, _states$blockControls5, _states$blockControls6;
return {
activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode,
surfaceActiveNodes: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.surfaceActiveNodes,
surfaceAnchors: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.surfaceAnchors) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : EMPTY_SURFACE_ANCHORS,
surfaceNodePositions: (_states$blockControls5 = (_states$blockControls6 = states.blockControlsState) === null || _states$blockControls6 === void 0 ? void 0 : _states$blockControls6.surfaceNodePositions) !== null && _states$blockControls5 !== void 0 ? _states$blockControls5 : EMPTY_SURFACE_POSITIONS
};
}),
activeNode = _useSharedPluginState.activeNode,
surfaceAnchors = _useSharedPluginState.surfaceAnchors,
surfaceActiveNodes = _useSharedPluginState.surfaceActiveNodes,
surfaceNodePositions = _useSharedPluginState.surfaceNodePositions;
var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
var targets = (0, _react.useMemo)(function () {
var candidates = new Set(surfaceNodePositions);
return (0, _blockControlsSurfaceTargets.getBlockControlsSurfaceTargets)(activeNode, surfaceNodePositions).filter(function (_ref2) {
var position = _ref2.position;
return candidates.has(position);
});
}, [activeNode, surfaceNodePositions]);
var surfaces = (0, _react.useMemo)(function () {
return targets.flatMap(function (target) {
var _surfaceActiveNodes$g;
var context = (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContextForPosition)(editorView.state, target.position, (_surfaceActiveNodes$g = surfaceActiveNodes === null || surfaceActiveNodes === void 0 ? void 0 : surfaceActiveNodes.get(target.position)) !== null && _surfaceActiveNodes$g !== void 0 ? _surfaceActiveNodes$g : activeNode);
if (!context) {
return [];
}
var surfaceContext = (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, context);
if (!(0, _hasSurfaceControls.hasSurfaceControls)(components) || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
return [];
}
// The cache supplies the same anchor names used by ProseMirror decorations.
var anchorName = (0, _styles.isCSSAnchorSupported)() ? surfaceAnchors.get(target.position) : undefined;
return [_objectSpread(_objectSpread({}, target), {}, {
anchorName: anchorName,
blockControlsContext: context,
surfaceContext: surfaceContext
})];
});
}, [activeNode, components, editorView, targets, surfaceAnchors, surfaceActiveNodes]);
/**
* Placements that need no measuring, so they are derived rather than stored: every inset is an
* `anchor()` the browser re-resolves on every layout change.
*/
var anchoredPlacements = (0, _react.useMemo)(function () {
return new Map(surfaces.flatMap(function (_ref3) {
var anchorName = _ref3.anchorName,
blockControlsContext = _ref3.blockControlsContext,
position = _ref3.position;
return anchorName ? [[position, (0, _getSurfacePlacement.getAnchoredSurfacePlacement)({
anchorName: anchorName,
nodeType: blockControlsContext.targetNode.type.name,
nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
layout: blockControlsContext.targetNode.node.attrs.layout,
parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
side: 'right'
})]] : [];
}));
}, [surfaces]);
// Only the surfaces that still need measuring drive the effect below, so a document of anchored
// blocks binds no scroll or resize listeners at all.
//
// The shared empty array matters: `surfaces` gets a new identity on every hover, since
// `activeNode` is one of its dependencies. Returning a fresh `[]` would give the effect a
// changed dependency each time and re-run it for nothing, which is the cost the anchored path
// exists to avoid.
var measuredSurfaces = (0, _react.useMemo)(function () {
var measured = surfaces.filter(function (_ref4) {
var anchorName = _ref4.anchorName;
return !anchorName;
});
return measured.length === 0 ? EMPTY_MEASURED_SURFACES : measured;
}, [surfaces]);
var _useState = (0, _react.useState)(new Map()),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
placements = _useState2[0],
setPlacements = _useState2[1];
var animationFrameRef = (0, _react.useRef)(undefined);
(0, _react.useLayoutEffect)(function () {
var _getDocument;
if (measuredSurfaces.length === 0) {
// Clear only when there is something to clear. Handing React a fresh Map every time would
// fail its identity check and commit a render to replace one empty map with another.
setPlacements(function (previous) {
return previous.size > 0 ? new Map() : previous;
});
return;
}
var measurementTargets = measuredSurfaces.flatMap(function (_ref5) {
var blockControlsContext = _ref5.blockControlsContext,
position = _ref5.position;
var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
if (!targetElementRoot) {
return [];
}
return [{
blockControlsContext: blockControlsContext,
position: position,
targetElement: (0, _getNodeContentElement.getNodeContentElement)(targetElementRoot, blockControlsContext.targetNode.type.name),
targetElementRoot: targetElementRoot
}];
});
var offsetParent = editorView.dom.offsetParent;
var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
var updatePositions = function updatePositions() {
var _scrollingOffsetParen, _scrollingOffsetParen2;
animationFrameRef.current = undefined;
var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
var offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
var nextPlacements = new Map();
var _iterator = _createForOfIteratorHelper(measurementTargets),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _targetElementRoot$ge;
var _step$value = _step.value,
blockControlsContext = _step$value.blockControlsContext,
position = _step$value.position,
targetElement = _step$value.targetElement,
targetElementRoot = _step$value.targetElementRoot;
if (!targetElementRoot.isConnected || !targetElement.isConnected) {
continue;
}
var placement = (0, _getSurfacePlacement.getSurfacePlacement)({
layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
nodeRect: targetElement.getBoundingClientRect(),
nodeType: blockControlsContext.targetNode.type.name,
nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
side: 'right'
});
nextPlacements.set(position, (0, _getSurfacePlacement.toMeasuredSurfaceWrapperPlacement)((0, _getSurfacePlacement.getAbsoluteSurfacePlacement)({
offsetParentRect: offsetParentRect,
offsetParentScrollLeft: offsetParentScrollLeft,
offsetParentScrollTop: offsetParentScrollTop,
placement: placement
})));
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
setPlacements(nextPlacements);
};
var schedulePositionUpdate = function schedulePositionUpdate() {
if (animationFrameRef.current === undefined) {
animationFrameRef.current = requestAnimationFrame(updatePositions);
}
};
updatePositions();
var resizeObserver = new ResizeObserver(schedulePositionUpdate);
var observedElements = new Set([editorView.dom]);
var _iterator2 = _createForOfIteratorHelper(measurementTargets),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var targetElement = _step2.value.targetElement;
observedElements.add(targetElement);
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
if (offsetParent instanceof HTMLElement) {
observedElements.add(offsetParent);
}
observedElements.forEach(function (element) {
return resizeObserver.observe(element);
});
var unbindWindowResize = (0, _bindEventListener.bind)(window, {
type: 'resize',
listener: schedulePositionUpdate
});
var unbindWindowScroll = (0, _bindEventListener.bind)(window, {
type: 'scroll',
listener: schedulePositionUpdate,
options: {
capture: true,
passive: true
}
});
var visualViewport = window.visualViewport;
var unbindVisualViewportResize = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
type: 'resize',
listener: schedulePositionUpdate
}) : undefined;
var unbindVisualViewportScroll = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
type: 'scroll',
listener: schedulePositionUpdate
}) : undefined;
var unbindTransitionEnd = (0, _bindEventListener.bind)(editorView.dom, {
type: 'transitionend',
listener: schedulePositionUpdate,
options: {
capture: true
}
});
return function () {
if (animationFrameRef.current !== undefined) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = undefined;
}
resizeObserver.disconnect();
unbindWindowResize();
unbindWindowScroll();
unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 || unbindVisualViewportResize();
unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 || unbindVisualViewportScroll();
unbindTransitionEnd();
};
}, [editorView, measuredSurfaces]);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, surfaces.map(function (_ref6) {
var _activeNode$handleOpt, _anchoredPlacements$g;
var position = _ref6.position,
source = _ref6.source,
surfaceContext = _ref6.surfaceContext;
return /*#__PURE__*/_react.default.createElement(_blockControlsRightSurface.BlockControlsRightSurface, {
api: api,
components: components,
forceVisibleOnMouseOut: Boolean(activeNode === null || activeNode === void 0 || (_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
key: position,
placement: (_anchoredPlacements$g = anchoredPlacements.get(position)) !== null && _anchoredPlacements$g !== void 0 ? _anchoredPlacements$g : placements.get(position),
source: source,
surfaceContext: surfaceContext
});
}));
};