@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
127 lines • 8.72 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 { BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
import { resolveSurface } from '@atlaskit/editor-ui-control-model/surface-renderer';
import { createSurfaceAnchorDecorations } from '../decorations-surface-anchor';
import { key as blockControlsKey } from '../main';
import { reconcileSparseSurfaceCandidates } from './sparse-surface-candidates';
import { observeSurfaceViewport } from './surface-viewport';
var haveAnchorPositionsChanged = function haveAnchorPositionsChanged(positions, anchors) {
return positions.length !== anchors.size || positions.some(function (position) {
return !anchors.has(position);
});
};
export var createSparseSurfacesView = function createSparseSurfacesView(_ref) {
var _api$uiControlRegistr3, _api$editorDisabled, _api$editorViewMode, _api$limitedMode2, _api$showDiff, _api$userIntent;
var api = _ref.api,
pluginKey = _ref.pluginKey,
view = _ref.view;
var win = view.dom.ownerDocument.defaultView;
var frame;
var visiblePositions = [];
var registryChanged = true;
var reconcile = function reconcile() {
var _api$limitedMode;
frame = undefined;
var previous = pluginKey.getState(view.state);
if (!previous || api !== null && api !== void 0 && (_api$limitedMode = api.limitedMode) !== null && _api$limitedMode !== void 0 && (_api$limitedMode = _api$limitedMode.sharedState.currentState()) !== null && _api$limitedMode !== void 0 && _api$limitedMode.enabled) {
return;
}
var controls = blockControlsKey.getState(view.state);
var activeNode = controls === null || controls === void 0 ? void 0 : controls.activeNode;
var activeNodesByPosition = new Map();
var menu = controls !== null && controls !== void 0 && controls.isMenuOpen ? controls.menuTriggerByNode : undefined;
if (menu && controls !== null && controls !== void 0 && controls.menuTriggerBy && view.state.doc.nodeAt(menu.pos)) {
var _menu$rootPos;
var menuNode = _objectSpread(_objectSpread({}, menu), {}, {
anchorName: controls.menuTriggerBy
});
activeNodesByPosition.set(menu.pos, menuNode);
activeNodesByPosition.set((_menu$rootPos = menu.rootPos) !== null && _menu$rootPos !== void 0 ? _menu$rootPos : menu.pos, menuNode);
}
var resolvedSurfaces = [BLOCK_CONTROLS_LEFT_SURFACE, BLOCK_CONTROLS_RIGHT_SURFACE].map(function (surface) {
var _api$uiControlRegistr, _api$uiControlRegistr2;
return resolveSurface((_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [], surface);
});
var candidates = reconcileSparseSurfaceCandidates({
activeNode: activeNode,
activeNodesByPosition: activeNodesByPosition,
newState: view.state,
state: previous.candidates,
visiblePositions: visiblePositions,
protectedPositions: _toConsumableArray(activeNodesByPosition.keys()),
resolvedSurfaces: resolvedSurfaces,
documentChanged: previous.documentChanged,
invalidation: _objectSpread(_objectSpread({}, previous.invalidation), {}, {
all: registryChanged
})
});
var visibilityChanged = registryChanged;
registryChanged = false;
var anchorPositions = candidates.positions;
if (!visibilityChanged && !haveAnchorPositionsChanged(anchorPositions, previous.anchors) && candidates === previous.candidates && !previous.documentChanged && !previous.invalidation) {
return;
}
var nodeIdProvider = getNodeIdProvider(view);
var _createSurfaceAnchorD = createSurfaceAnchorDecorations(view.state, anchorPositions, function (node, position, previousAnchorName) {
if (previousAnchorName) {
nodeIdProvider.setIdForNode(node, previousAnchorName);
return previousAnchorName;
}
return nodeIdProvider.getOrGenerateId(node, position);
}, previous.anchors),
anchors = _createSurfaceAnchorD.anchors,
decorations = _createSurfaceAnchorD.decorations;
view.dispatch(view.state.tr.setMeta(pluginKey, {
reconciliation: {
activeNodesByPosition: activeNodesByPosition,
anchors: anchors,
candidates: candidates,
decorations: decorations
},
type: 'commitReconciliation'
}));
};
var schedule = function schedule() {
if (frame === undefined && win) {
frame = win.requestAnimationFrame(reconcile);
}
};
var observer = observeSurfaceViewport(view, function (positions) {
visiblePositions = positions;
schedule();
});
var invalidate = function invalidate() {
registryChanged = true;
schedule();
};
var unsubscribe = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe(invalidate);
var unsubscribers = [api === null || api === void 0 || (_api$editorDisabled = api.editorDisabled) === null || _api$editorDisabled === void 0 ? void 0 : _api$editorDisabled.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$limitedMode2 = api.limitedMode) === null || _api$limitedMode2 === void 0 ? void 0 : _api$limitedMode2.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.sharedState.onChange(invalidate), api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.sharedState.onChange(invalidate)];
return {
update: function update(currentView, previousState) {
observer.update();
var sparse = pluginKey.getState(currentView.state);
var controls = blockControlsKey.getState(currentView.state);
var previousControls = blockControlsKey.getState(previousState);
if ((controls === null || controls === void 0 ? void 0 : controls.isDragging) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.isDragging) || (controls === null || controls === void 0 ? void 0 : controls.isResizerResizing) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.isResizerResizing)) {
invalidate();
}
if (sparse !== null && sparse !== void 0 && sparse.documentChanged || sparse !== null && sparse !== void 0 && sparse.invalidation || (controls === null || controls === void 0 ? void 0 : controls.activeNode) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.activeNode) || (controls === null || controls === void 0 ? void 0 : controls.isMenuOpen) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.isMenuOpen) || (controls === null || controls === void 0 ? void 0 : controls.menuTriggerByNode) !== (previousControls === null || previousControls === void 0 ? void 0 : previousControls.menuTriggerByNode)) {
schedule();
}
},
destroy: function destroy() {
if (frame !== undefined) {
win === null || win === void 0 || win.cancelAnimationFrame(frame);
}
observer.destroy();
unsubscribe === null || unsubscribe === void 0 || unsubscribe();
unsubscribers.forEach(function (unsubscribe) {
return unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
});
}
};
};