@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
48 lines (47 loc) • 2.03 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GuidelineLabel = void 0;
var _react = _interopRequireDefault(require("react"));
var _resizer = require("@atlaskit/editor-common/resizer");
var _ui = require("@atlaskit/editor-common/ui");
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var GUIDELINE_KEY_TO_LAYOUT = {
wide_left: 'wide',
wide_right: 'wide',
full_width_left: 'full-width',
full_width_right: 'full-width',
max_width_left: 'max',
max_width_right: 'max'
};
var GuidelineLabel = exports.GuidelineLabel = function GuidelineLabel(_ref) {
var api = _ref.api,
editorView = _ref.editorView,
mountPoint = _ref.mountPoint,
boundariesElement = _ref.boundariesElement,
scrollableElement = _ref.scrollableElement;
var breakoutNode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.breakoutNode');
var activeGuidelineKey = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'breakout.activeGuidelineKey');
if (!breakoutNode || !activeGuidelineKey) {
return null;
}
var element = (0, _utils.findDomRefAtPos)(breakoutNode.pos, editorView.domAtPos.bind(editorView));
return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
target: element && element instanceof HTMLElement ? element : undefined
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [0, 10],
alignY: "bottom",
alignX: "center",
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
stick: true,
forcePlacement: true
}, /*#__PURE__*/_react.default.createElement(_resizer.ResizerBreakoutModeLabel, {
layout: GUIDELINE_KEY_TO_LAYOUT[activeGuidelineKey]
}));
};