@atlaskit/editor-plugin-breakout 24.0.2 → 24.0.4

package/dist/cjs/ui/LayoutButton.js

@@ -1,176 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _reactIntl = require("react-intl");
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _styles = require("@atlaskit/editor-common/styles");
-var _ui = require("@atlaskit/editor-common/ui");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _utils = require("@atlaskit/editor-common/utils");
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _utils2 = require("@atlaskit/editor-prosemirror/utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
-var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
-var _constants = require("@atlaskit/theme/constants");
-var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
-var _removeBreakout = require("../editor-commands/remove-breakout");
-var _setBreakoutMode = require("../editor-commands/set-breakout-mode");
-var _pluginKey = require("../pm-plugins/plugin-key");
-var _isBreakoutMarkAllowed = require("../pm-plugins/utils/is-breakout-mark-allowed");
-var _isSupportedNode = require("../pm-plugins/utils/is-supported-node");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-atlaskit-theme
-
-var toolbarButtonWrapperStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&& button': {
-    background: "var(--ds-background-neutral, #0515240F)",
-    color: "var(--ds-icon, #292A2E)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':hover': {
-      background: "var(--ds-background-neutral-hovered, #0B120E24)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      color: "var(--ds-icon, #292A2E)".concat(" !important")
-    }
-  }
-});
-var toolbarButtonNarrowScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&& button': {
-    visibility: 'hidden',
-    opacity: 0
-  }
-}));
-function getBreakoutNodeElement(pluginState, selection, editorView) {
-  if (!pluginState.breakoutNode) {
-    return undefined;
-  }
-  if (selection instanceof _state.NodeSelection && (0, _isSupportedNode.isSupportedNodeForBreakout)(selection.node)) {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return (0, _utils2.findDomRefAtPos)(selection.from, editorView.domAtPos.bind(editorView));
-  }
-  // Ignored via go/ees005
-  // eslint-disable-next-line @atlaskit/editor/no-as-casting
-  return (0, _utils2.findParentDomRefOfType)(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
-}
-var LayoutButton = function LayoutButton(_ref) {
-  var _api$analytics3;
-  var formatMessage = _ref.intl.formatMessage,
-    mountPoint = _ref.mountPoint,
-    boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement,
-    editorView = _ref.editorView,
-    isLivePage = _ref.isLivePage,
-    isBreakoutNodePresent = _ref.isBreakoutNodePresent,
-    breakoutModeProp = _ref.breakoutMode,
-    api = _ref.api;
-  var handleClick = (0, _react.useCallback)(function (breakoutMode) {
-    var _getPluginState;
-    if (!editorView) {
-      return;
-    }
-    var state = editorView.state,
-      dispatch = editorView.dispatch;
-    var breakoutNode = (_getPluginState = (0, _pluginKey.getPluginState)(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
-    if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-      var _api$analytics;
-      (0, _setBreakoutMode.setBreakoutMode)(breakoutMode, isLivePage)(state, dispatch);
-      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
-        action: _analytics.ACTION.CHANGED_BREAKOUT_MODE,
-        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
-        eventType: _analytics.EVENT_TYPE.TRACK,
-        attributes: {
-          mode: breakoutMode,
-          nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
-        }
-      });
-    } else {
-      var _api$analytics2;
-      (0, _removeBreakout.removeBreakout)(isLivePage)(state, dispatch);
-      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
-        action: _analytics.ACTION.CHANGED_BREAKOUT_MODE,
-        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
-        eventType: _analytics.EVENT_TYPE.TRACK,
-        attributes: {
-          mode: 'center',
-          nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
-        }
-      });
-    }
-  }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  if (!editorView) {
-    return null;
-  }
-  if (!isBreakoutNodePresent || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(editorView.state)) {
-    return null;
-  }
-  var breakoutMode = breakoutModeProp;
-  var titleMessage = (0, _utils.getTitle)(breakoutMode);
-  var title = formatMessage(titleMessage);
-  var nextBreakoutMode = (0, _utils.getNextBreakoutMode)(breakoutMode);
-  var belowOtherPopupsZIndex = _constants.layers.layer() - 1;
-  var pluginState = (0, _pluginKey.getPluginState)(editorView.state);
-  if (!pluginState) {
-    return null;
-  }
-  var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
-  if (!element) {
-    return null;
-  }
-  var closestEl = element.querySelector(".".concat(_styles.BreakoutCssClassName.BREAKOUT_MARK_DOM));
-  if (closestEl && closestEl.firstChild) {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    element = closestEl.firstChild;
-  }
-  return (0, _react2.jsx)(_ui.Popup, {
-    ariaLabel: title,
-    target: element
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    offset: [5, 0],
-    alignY: "start",
-    alignX: "end",
-    mountTo: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    stick: true,
-    forcePlacement: true,
-    zIndex: belowOtherPopupsZIndex
-  }, (0, _react2.jsx)("div", {
-    css: [toolbarButtonWrapperStyles, (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
-  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
-    title: title,
-    testId: titleMessage.id
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onClick: function onClick() {
-      return handleClick(nextBreakoutMode);
-    },
-    iconBefore: breakoutMode === 'full-width' ? (0, _react2.jsx)(_shrinkHorizontal.default, {
-      label: title,
-      spacing: "spacious"
-    }) : (0, _react2.jsx)(_growHorizontal.default, {
-      label: title,
-      spacing: "spacious"
-    })
-  })));
-};
-LayoutButton.displayName = 'LayoutButton';
-var _default_1 = (0, _reactIntl.injectIntl)(LayoutButton);
-var _default = exports.default = _default_1;

package/dist/es2019/editor-commands/remove-breakout.js

@@ -1,33 +0,0 @@
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findSupportedNodeForBreakout } from '../pm-plugins/utils/find-breakout-node';
-import { updateExpandedState } from '../pm-plugins/utils/single-player-expand';
-export function removeBreakout(isLivePage) {
-  return (state, dispatch) => {
-    const node = findSupportedNodeForBreakout(state.selection);
-    if (!node) {
-      return false;
-    }
-    const marks = node.node.marks.filter(m => m.type.name !== 'breakout');
-    const tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
-    if (node.node.type === state.schema.nodes.expand) {
-      updateExpandedState(tr, node, isLivePage);
-    } else if (node.node.type === state.schema.nodes.codeBlock) {
-      const newNode = tr.doc.nodeAt(node.pos);
-      const oldNode = node.node;
-      if (newNode) {
-        transferCodeBlockWrappedValue(oldNode, newNode);
-      }
-    }
-    tr.setMeta('scrollIntoView', false);
-    if (state.selection instanceof NodeSelection) {
-      if (state.selection.$anchor.pos === node.pos) {
-        tr.setSelection(NodeSelection.create(tr.doc, node.pos));
-      }
-    }
-    if (dispatch) {
-      dispatch(tr);
-    }
-    return true;
-  };
-}

package/dist/es2019/editor-commands/set-breakout-mode.js

@@ -1,43 +0,0 @@
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { findSupportedNodeForBreakout } from '../pm-plugins/utils/find-breakout-node';
-import { updateExpandedState } from '../pm-plugins/utils/single-player-expand';
-export function setBreakoutMode(mode, isLivePage) {
-  return (state, dispatch) => {
-    const node = findSupportedNodeForBreakout(state.selection);
-    if (!node) {
-      return false;
-    }
-    let tr;
-    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
-      const marks = state.schema.marks.breakout.create({
-        mode
-      }).addToSet(node.node.marks);
-      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
-    } else {
-      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
-        mode
-      })]);
-    }
-    if (node.node.type === state.schema.nodes.expand) {
-      updateExpandedState(tr, node, isLivePage);
-    } else if (node.node.type === state.schema.nodes.codeBlock) {
-      const newNode = tr.doc.nodeAt(node.pos);
-      const oldNode = node.node;
-      if (newNode) {
-        transferCodeBlockWrappedValue(oldNode, newNode);
-      }
-    }
-    tr.setMeta('scrollIntoView', false);
-    if (state.selection instanceof NodeSelection) {
-      if (state.selection.$anchor.pos === node.pos) {
-        tr.setSelection(NodeSelection.create(tr.doc, node.pos));
-      }
-    }
-    if (dispatch) {
-      dispatch(tr);
-    }
-    return true;
-  };
-}

package/dist/es2019/pm-plugins/plugin-key.js

@@ -1,3 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const pluginKey = new PluginKey('breakoutPlugin');
-export const getPluginState = state => pluginKey.getState(state) || undefined;

package/dist/es2019/pm-plugins/utils/find-breakout-node.js

@@ -1,37 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
-import { isSupportedNodeForBreakout } from './is-supported-node';
-
-/**
- * Find the nearest parent node to the selection that supports breakout, or if the nearest
- * matching parent node is the doc, return undefined.
- * For depth, if a node is selected and supports breakout, return the depth of the node.
- * @param selection Current editor selection
- */
-export function findSupportedNodeForBreakout(selection) {
-  if (selection instanceof NodeSelection) {
-    const supportsBreakout = isSupportedNodeForBreakout(selection.node);
-    if (supportsBreakout) {
-      return {
-        pos: selection.from,
-        start: selection.from,
-        node: selection.node,
-        // If a selected expand is in a doc, the depth of that expand is 0. Therefore
-        // we don't need to subtract 1 or instantly return false if the depth is 0
-        depth: selection.$anchor.depth
-      };
-    }
-  }
-  const breakoutNode = findParentNode(isSupportedNodeForBreakout)(selection);
-  if (!breakoutNode || breakoutNode.depth === 0) {
-    // If this node doesn't exist or the only supporting node is the document
-    // (with depth 0), then we're not inside a node that supports breakout
-    return undefined;
-  }
-  return {
-    node: breakoutNode.node,
-    start: breakoutNode.start,
-    pos: breakoutNode.pos,
-    depth: breakoutNode.depth - 1
-  };
-}

package/dist/es2019/pm-plugins/utils/get-breakout-mode.js

@@ -1,17 +0,0 @@
-import { findSupportedNodeForBreakout } from './find-breakout-node';
-
-/**
- * Get the current mode of the breakout at the selection
- * @param state Current EditorState
- */
-export function getBreakoutMode(state) {
-  const node = findSupportedNodeForBreakout(state.selection);
-  if (!node) {
-    return;
-  }
-  const breakoutMark = node.node.marks.find(m => m.type.name === 'breakout');
-  if (!breakoutMark) {
-    return;
-  }
-  return breakoutMark.attrs.mode;
-}

package/dist/es2019/pm-plugins/utils/is-breakout-mark-allowed.js

@@ -1,22 +0,0 @@
-import { findSupportedNodeForBreakout } from './find-breakout-node';
-
-/**
- * Check if breakout should be allowed for the current selection. If a node is selected,
- * can this node be broken out, if text, can the enclosing parent node be broken out.
- *
- * Currently breakout of a node is not possible if it's nested in anything but the document, however
- * this logic supports this changing.
- */
-export function isBreakoutMarkAllowed(state) {
-  if (!state.schema.marks.breakout) {
-    return false;
-  }
-  const supportedNodeParent = findSupportedNodeForBreakout(state.selection);
-  if (!supportedNodeParent) {
-    return false;
-  }
-  // At the moment we can only breakout when the depth is 0, ie. doc is the only node
-  // that supports breakout. This *could* change though.
-  const parent = state.selection.$from.node(supportedNodeParent.depth);
-  return parent.type.allowsMarkType(state.schema.marks.breakout);
-}

package/dist/es2019/pm-plugins/utils/is-supported-node.js

@@ -1,14 +0,0 @@
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
-const supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
-const supportedNodesForBreakoutAdvancedLayouts = ['codeBlock', 'expand'];
-
-/**
- * Check if breakout can be applied to a node
- * @param node Node to check
- */
-export function isSupportedNodeForBreakout(node) {
-  if (editorExperiment('advanced_layouts', true)) {
-    return supportedNodesForBreakoutAdvancedLayouts.indexOf(node.type.name) !== -1;
-  }
-  return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
-}

package/dist/es2019/ui/LayoutButton.js

@@ -1,171 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
-import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
-import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-atlaskit-theme
-import { layers } from '@atlaskit/theme/constants';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
-import { removeBreakout } from '../editor-commands/remove-breakout';
-import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
-import { getPluginState } from '../pm-plugins/plugin-key';
-import { isBreakoutMarkAllowed } from '../pm-plugins/utils/is-breakout-mark-allowed';
-import { isSupportedNodeForBreakout } from '../pm-plugins/utils/is-supported-node';
-const toolbarButtonWrapperStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&& button': {
-    background: "var(--ds-background-neutral, #0515240F)",
-    color: "var(--ds-icon, #292A2E)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':hover': {
-      background: "var(--ds-background-neutral-hovered, #0B120E24)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      color: `${"var(--ds-icon, #292A2E)"} !important`
-    }
-  }
-});
-const toolbarButtonNarrowScreenStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values,  @atlaskit/design-system/no-nested-styles,  @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
-    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&& button': {
-      visibility: 'hidden',
-      opacity: 0
-    }
-  }
-});
-function getBreakoutNodeElement(pluginState, selection, editorView) {
-  if (!pluginState.breakoutNode) {
-    return undefined;
-  }
-  if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
-  }
-  // Ignored via go/ees005
-  // eslint-disable-next-line @atlaskit/editor/no-as-casting
-  return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
-}
-const LayoutButton = ({
-  intl: {
-    formatMessage
-  },
-  mountPoint,
-  boundariesElement,
-  scrollableElement,
-  editorView,
-  isLivePage,
-  isBreakoutNodePresent,
-  breakoutMode: breakoutModeProp,
-  api
-}) => {
-  var _api$analytics3;
-  const handleClick = useCallback(breakoutMode => {
-    var _getPluginState;
-    if (!editorView) {
-      return;
-    }
-    const {
-      state,
-      dispatch
-    } = editorView;
-    const breakoutNode = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
-    if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-      var _api$analytics;
-      setBreakoutMode(breakoutMode, isLivePage)(state, dispatch);
-      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
-        action: ACTION.CHANGED_BREAKOUT_MODE,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          mode: breakoutMode,
-          nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
-        }
-      });
-    } else {
-      var _api$analytics2;
-      removeBreakout(isLivePage)(state, dispatch);
-      api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent({
-        action: ACTION.CHANGED_BREAKOUT_MODE,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          mode: 'center',
-          nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
-        }
-      });
-    }
-  }, [api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  if (!editorView) {
-    return null;
-  }
-  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(editorView.state)) {
-    return null;
-  }
-  const breakoutMode = breakoutModeProp;
-  const titleMessage = getTitle(breakoutMode);
-  const title = formatMessage(titleMessage);
-  const nextBreakoutMode = getNextBreakoutMode(breakoutMode);
-  const belowOtherPopupsZIndex = layers.layer() - 1;
-  const pluginState = getPluginState(editorView.state);
-  if (!pluginState) {
-    return null;
-  }
-  let element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
-  if (!element) {
-    return null;
-  }
-  const closestEl = element.querySelector(`.${BreakoutCssClassName.BREAKOUT_MARK_DOM}`);
-  if (closestEl && closestEl.firstChild) {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    element = closestEl.firstChild;
-  }
-  return jsx(Popup, {
-    ariaLabel: title,
-    target: element
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    offset: [5, 0],
-    alignY: "start",
-    alignX: "end",
-    mountTo: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    stick: true,
-    forcePlacement: true,
-    zIndex: belowOtherPopupsZIndex
-  }, jsx("div", {
-    css: [toolbarButtonWrapperStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
-  }, jsx(ToolbarButton, {
-    title: title,
-    testId: titleMessage.id
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onClick: () => handleClick(nextBreakoutMode),
-    iconBefore: breakoutMode === 'full-width' ? jsx(ShrinkHorizontalIcon, {
-      label: title,
-      spacing: "spacious"
-    }) : jsx(GrowHorizontalIcon, {
-      label: title,
-      spacing: "spacious"
-    })
-  })));
-};
-LayoutButton.displayName = 'LayoutButton';
-const _default_1 = injectIntl(LayoutButton);
-export default _default_1;

package/dist/esm/editor-commands/remove-breakout.js

@@ -1,35 +0,0 @@
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findSupportedNodeForBreakout } from '../pm-plugins/utils/find-breakout-node';
-import { updateExpandedState } from '../pm-plugins/utils/single-player-expand';
-export function removeBreakout(isLivePage) {
-  return function (state, dispatch) {
-    var node = findSupportedNodeForBreakout(state.selection);
-    if (!node) {
-      return false;
-    }
-    var marks = node.node.marks.filter(function (m) {
-      return m.type.name !== 'breakout';
-    });
-    var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
-    if (node.node.type === state.schema.nodes.expand) {
-      updateExpandedState(tr, node, isLivePage);
-    } else if (node.node.type === state.schema.nodes.codeBlock) {
-      var newNode = tr.doc.nodeAt(node.pos);
-      var oldNode = node.node;
-      if (newNode) {
-        transferCodeBlockWrappedValue(oldNode, newNode);
-      }
-    }
-    tr.setMeta('scrollIntoView', false);
-    if (state.selection instanceof NodeSelection) {
-      if (state.selection.$anchor.pos === node.pos) {
-        tr.setSelection(NodeSelection.create(tr.doc, node.pos));
-      }
-    }
-    if (dispatch) {
-      dispatch(tr);
-    }
-    return true;
-  };
-}

package/dist/esm/editor-commands/set-breakout-mode.js

@@ -1,43 +0,0 @@
-import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { findSupportedNodeForBreakout } from '../pm-plugins/utils/find-breakout-node';
-import { updateExpandedState } from '../pm-plugins/utils/single-player-expand';
-export function setBreakoutMode(mode, isLivePage) {
-  return function (state, dispatch) {
-    var node = findSupportedNodeForBreakout(state.selection);
-    if (!node) {
-      return false;
-    }
-    var tr;
-    if (isExperimentEnabled('platform_editor_lovability_resize_extensions')) {
-      var marks = state.schema.marks.breakout.create({
-        mode: mode
-      }).addToSet(node.node.marks);
-      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
-    } else {
-      tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
-        mode: mode
-      })]);
-    }
-    if (node.node.type === state.schema.nodes.expand) {
-      updateExpandedState(tr, node, isLivePage);
-    } else if (node.node.type === state.schema.nodes.codeBlock) {
-      var newNode = tr.doc.nodeAt(node.pos);
-      var oldNode = node.node;
-      if (newNode) {
-        transferCodeBlockWrappedValue(oldNode, newNode);
-      }
-    }
-    tr.setMeta('scrollIntoView', false);
-    if (state.selection instanceof NodeSelection) {
-      if (state.selection.$anchor.pos === node.pos) {
-        tr.setSelection(NodeSelection.create(tr.doc, node.pos));
-      }
-    }
-    if (dispatch) {
-      dispatch(tr);
-    }
-    return true;
-  };
-}

package/dist/esm/pm-plugins/plugin-key.js

@@ -1,5 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export var pluginKey = new PluginKey('breakoutPlugin');
-export var getPluginState = function getPluginState(state) {
-  return pluginKey.getState(state) || undefined;
-};

package/dist/esm/pm-plugins/utils/find-breakout-node.js

@@ -1,37 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
-import { isSupportedNodeForBreakout } from './is-supported-node';
-
-/**
- * Find the nearest parent node to the selection that supports breakout, or if the nearest
- * matching parent node is the doc, return undefined.
- * For depth, if a node is selected and supports breakout, return the depth of the node.
- * @param selection Current editor selection
- */
-export function findSupportedNodeForBreakout(selection) {
-  if (selection instanceof NodeSelection) {
-    var supportsBreakout = isSupportedNodeForBreakout(selection.node);
-    if (supportsBreakout) {
-      return {
-        pos: selection.from,
-        start: selection.from,
-        node: selection.node,
-        // If a selected expand is in a doc, the depth of that expand is 0. Therefore
-        // we don't need to subtract 1 or instantly return false if the depth is 0
-        depth: selection.$anchor.depth
-      };
-    }
-  }
-  var breakoutNode = findParentNode(isSupportedNodeForBreakout)(selection);
-  if (!breakoutNode || breakoutNode.depth === 0) {
-    // If this node doesn't exist or the only supporting node is the document
-    // (with depth 0), then we're not inside a node that supports breakout
-    return undefined;
-  }
-  return {
-    node: breakoutNode.node,
-    start: breakoutNode.start,
-    pos: breakoutNode.pos,
-    depth: breakoutNode.depth - 1
-  };
-}

package/dist/esm/pm-plugins/utils/get-breakout-mode.js

@@ -1,19 +0,0 @@
-import { findSupportedNodeForBreakout } from './find-breakout-node';
-
-/**
- * Get the current mode of the breakout at the selection
- * @param state Current EditorState
- */
-export function getBreakoutMode(state) {
-  var node = findSupportedNodeForBreakout(state.selection);
-  if (!node) {
-    return;
-  }
-  var breakoutMark = node.node.marks.find(function (m) {
-    return m.type.name === 'breakout';
-  });
-  if (!breakoutMark) {
-    return;
-  }
-  return breakoutMark.attrs.mode;
-}