@atlaskit/editor-plugin-breakout/dist/esm/ui/GuidelineLabel.js

Breakout plugin for @atlaskit/editor-core

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';
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'
};
export var GuidelineLabel = function GuidelineLabel(_ref) {
  var api = _ref.api,
    editorView = _ref.editorView,
    mountPoint = _ref.mountPoint,
    boundariesElement = _ref.boundariesElement,
    scrollableElement = _ref.scrollableElement;
  var breakoutNode = useSharedPluginStateSelector(api, 'breakout.breakoutNode');
  var activeGuidelineKey = useSharedPluginStateSelector(api, 'breakout.activeGuidelineKey');
  if (!breakoutNode || !activeGuidelineKey) {
    return null;
  }
  var 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]
  }));
};