@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
265 lines • 16.4 kB
JavaScript
/* block-controls-left-surfaces.tsx generated by @compiled/babel-plugin v3.0.2 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { ax, ix } from "@compiled/react/runtime";
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) { _defineProperty(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; }
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
import { bind } from 'bind-event-listener';
import { getDocument } from '@atlaskit/browser-apis';
import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { isCSSAnchorSupported } from '@atlaskit/editor-common/styles';
import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
import { willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
import { BlockControlsLeftSurface } from './block-controls-left-surface';
import { createBlockControlsSurfaceContextForPosition } from './block-controls-surface-context';
import { getBlockControlsSurfaceTargets } from './block-controls-surface-targets';
import { getNodeContentElement } from './utils/get-node-content-element';
import { getAbsoluteSurfacePlacement, getAnchoredSurfacePlacement, getSurfacePlacement, toMeasuredSurfaceWrapperPlacement } from './utils/get-surface-placement';
import { hasSurfaceControls } from './utils/has-surface-controls';
var EMPTY_SURFACE_POSITIONS = [];
var EMPTY_SURFACE_ANCHORS = new Map();
var EMPTY_SURFACE_COMPONENTS = [];
var EMPTY_MEASURED_SURFACES = [];
export var BlockControlsLeftSurfaces = function BlockControlsLeftSurfaces(_ref) {
var _api$uiControlRegistr, _api$uiControlRegistr2;
var api = _ref.api,
editorView = _ref.editorView;
var _useSharedPluginState = 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(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : EMPTY_SURFACE_COMPONENTS;
var targets = useMemo(function () {
var candidates = new Set(surfaceNodePositions);
return getBlockControlsSurfaceTargets(activeNode, surfaceNodePositions).filter(function (_ref2) {
var position = _ref2.position;
return candidates.has(position);
});
}, [activeNode, surfaceNodePositions]);
var surfaces = useMemo(function () {
return targets.flatMap(function (target) {
var _surfaceActiveNodes$g;
var context = 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 = createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, context);
if (!hasSurfaceControls(components) || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
return [];
}
// The cache supplies the same anchor names used by ProseMirror decorations.
var anchorName = 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 = useMemo(function () {
return new Map(surfaces.flatMap(function (_ref3) {
var anchorName = _ref3.anchorName,
blockControlsContext = _ref3.blockControlsContext,
position = _ref3.position;
return anchorName ? [[position, getAnchoredSurfacePlacement({
anchorName: anchorName,
nodeType: blockControlsContext.targetNode.type.name,
nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
layout: blockControlsContext.targetNode.node.attrs.layout,
parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
side: 'left'
})]] : [];
}));
}, [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 = 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 = useState(new Map()),
_useState2 = _slicedToArray(_useState, 2),
placements = _useState2[0],
setPlacements = _useState2[1];
var animationFrameRef = useRef(undefined);
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: getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name),
targetElementRoot: targetElementRoot
}];
});
var offsetParent = editorView.dom.offsetParent;
var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = 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 = getSurfacePlacement({
layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
nodeRect: targetElement.getBoundingClientRect(),
nodeType: blockControlsContext.targetNode.type.name,
nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType,
side: 'left'
});
nextPlacements.set(position, toMeasuredSurfaceWrapperPlacement(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 = bind(window, {
type: 'resize',
listener: schedulePositionUpdate
});
var unbindWindowScroll = bind(window, {
type: 'scroll',
listener: schedulePositionUpdate,
options: {
capture: true,
passive: true
}
});
var visualViewport = window.visualViewport;
var unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
type: 'resize',
listener: schedulePositionUpdate
}) : undefined;
var unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
type: 'scroll',
listener: schedulePositionUpdate
}) : undefined;
var unbindTransitionEnd = 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.createElement(React.Fragment, null, surfaces.map(function (_ref6) {
var _activeNode$handleOpt, _anchoredPlacements$g;
var position = _ref6.position,
source = _ref6.source,
surfaceContext = _ref6.surfaceContext;
return /*#__PURE__*/React.createElement(BlockControlsLeftSurface, {
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
});
}));
};