@guestbell/react-page-plugins
Version:
Plugins we use in GuestBell for working with amazing react-page package
37 lines • 1.42 kB
JavaScript
import * as React from 'react';
import Paper from '@mui/material/Paper';
import Portal from '@mui/material/Portal';
import { ReactEditor, useSlate } from 'slate-react';
import { Editor, Range } from 'slate';
export var HoveringToolbar = function HoveringToolbar(props) {
var ref = React.useRef();
var editor = useSlate();
React.useEffect(function () {
var el = ref.current;
var selection = editor.selection;
if (!el) {
return;
}
if (!selection || !ReactEditor.isFocused(editor) || Range.isCollapsed(selection) || Editor.string(editor, selection) === '') {
el.style.opacity = '0';
el.style.pointerEvents = 'none';
return;
}
var domSelection = window.getSelection();
var domRange = domSelection.getRangeAt(0);
var rect = domRange.getBoundingClientRect();
el.style.opacity = '1';
el.style.pointerEvents = 'auto';
el.style.top = "".concat(rect.top + window.pageYOffset - el.offsetHeight, "px");
el.style.left = "".concat(Math.floor(rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2), "px");
});
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: 'ory-plugins-content-slate-inline-toolbar'
}, /*#__PURE__*/React.createElement(Paper, {
style: {
padding: 0
}
}, props.children)));
};
//# sourceMappingURL=HoveringToolbar.js.map