@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
42 lines • 1.58 kB
JavaScript
import React from 'react';
import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
import { Popup } from '@atlaskit/editor-common/ui';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
const 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'
};
export const GuidelineLabel = ({
api,
editorView,
mountPoint,
boundariesElement,
scrollableElement
}) => {
const breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
const activeGuidelineKey = useSharedPluginStateSelector(api, 'breakout.activeGuidelineKey');
if (!breakoutNode || !activeGuidelineKey) {
return null;
}
const element = findDomRefAtPos(breakoutNode.pos, editorView.domAtPos.bind(editorView));
return /*#__PURE__*/React.createElement(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.createElement(ResizerBreakoutModeLabel, {
layout: GUIDELINE_KEY_TO_LAYOUT[activeGuidelineKey]
}));
};