@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
99 lines • 3.24 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import memoizeOne from 'memoize-one';
import { getAnchorAttrName } from '../../ui/utils/dom-attr-name';
export const isAnchorSupported = memoizeOne(() => {
// directly use CSS would cause failed SSR tests.
if (window.CSS && window.CSS.supports) {
return window.CSS.supports('anchor-name: --a');
}
return false;
});
export class AnchorRectCache {
constructor() {
_defineProperty(this, "anchorRectMap", {});
_defineProperty(this, "isAnchorSupported", isAnchorSupported());
_defineProperty(this, "isDirty", true);
_defineProperty(this, "view", null);
}
clear() {
this.isDirty = true;
this.anchorRectMap = {};
}
getRects() {
if (this.isDirty) {
var _this$view;
const anchorElements = ((_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.dom.querySelectorAll(`[${getAnchorAttrName()}]`)) || [];
this.anchorRectMap = Array.from(anchorElements).reduce((prev, curr) => {
const anchorName = curr.getAttribute(getAnchorAttrName());
if (anchorName) {
return {
...prev,
[anchorName]: {
height: curr.clientHeight,
top: curr.offsetTop,
left: curr.offsetLeft,
right: curr.offsetLeft + curr.clientWidth,
width: curr.clientWidth,
bottom: curr.offsetTop + curr.clientHeight
}
};
}
return prev;
}, {});
this.isDirty = false;
}
return this.anchorRectMap;
}
setEditorView(view) {
if (this.view !== view) {
this.view = view;
}
}
getHeight(anchorName) {
var _rects$anchorName;
if (this.isAnchorSupported) {
return null;
}
const rects = this.getRects();
return (_rects$anchorName = rects[anchorName]) === null || _rects$anchorName === void 0 ? void 0 : _rects$anchorName.height;
}
getWidth(anchorName) {
var _rects$anchorName2;
if (this.isAnchorSupported) {
return null;
}
const rects = this.getRects();
return (_rects$anchorName2 = rects[anchorName]) === null || _rects$anchorName2 === void 0 ? void 0 : _rects$anchorName2.width;
}
getLeft(anchorName) {
var _rects$anchorName3;
if (this.isAnchorSupported) {
return null;
}
const rects = this.getRects();
return (_rects$anchorName3 = rects[anchorName]) === null || _rects$anchorName3 === void 0 ? void 0 : _rects$anchorName3.left;
}
getTop(anchorName) {
var _rects$anchorName4;
if (this.isAnchorSupported) {
return null;
}
const rects = this.getRects();
return (_rects$anchorName4 = rects[anchorName]) === null || _rects$anchorName4 === void 0 ? void 0 : _rects$anchorName4.top;
}
getRight(anchorName) {
var _rects$anchorName5;
if (this.isAnchorSupported) {
return null;
}
const rects = this.getRects();
return (_rects$anchorName5 = rects[anchorName]) === null || _rects$anchorName5 === void 0 ? void 0 : _rects$anchorName5.right;
}
getRect(anchorName) {
if (this.isAnchorSupported) {
return null;
}
const rects = this.getRects();
return rects[anchorName];
}
}