@atlaskit/editor-core 190.1.15 → 190.1.18

package/dist/es2019/plugins/breakout/index.js

@@ -1,208 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
-import LayoutButton from './ui/LayoutButton';
-import { pluginKey } from './plugin-key';
-import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
-import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
-import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-class BreakoutView {
-  constructor(
-  /**
-   * Note: this is actually a PMMark -- however our version
-   * of the prosemirror and prosemirror types mean using PMNode
-   * is not problematic.
-   */
-  mark, view, pluginInjectionApi) {
-    _defineProperty(this, "updateWidth", widthState => {
-      // we skip updating the width of breakout nodes if the editorView dom
-      // element was hidden (to avoid breakout width and button thrashing
-      // when an editor is hidden, re-rendered and unhidden).
-      if (widthState === undefined || widthState.width === 0) {
-        return;
-      }
-      let containerStyle = ``;
-      let contentStyle = ``;
-      let breakoutWidthPx = calcBreakoutWidthPx(this.mark.attrs.mode, widthState.width);
-      if (widthState.lineLength) {
-        if (breakoutWidthPx < widthState.lineLength) {
-          breakoutWidthPx = widthState.lineLength;
-        }
-        containerStyle += `
-        transform: none;
-        display: flex;
-        justify-content: center;
-        `;
-
-        // There is a delay in the animation because widthState is delayed.
-        // When the editor goes full width the animation for the editor
-        // begins and finishes before widthState can update the new dimensions.
-        contentStyle += `
-        min-width: ${breakoutWidthPx}px;
-        transition: min-width 0.5s ${akEditorSwoopCubicBezier};
-      `;
-      } else {
-        // fallback method
-        // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
-        //
-        // this approach doesn't work well with position: fixed, so
-        // it breaks things like sticky headers
-        containerStyle += `width: ${breakoutWidthPx}px; transform: translateX(-50%); margin-left: 50%;`;
-      }
-
-      // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
-      // `ignoreMutation` life-cycle event. @see ED-9947
-      const viewDomObserver = this.view.domObserver;
-      if (viewDomObserver && this.view.dom) {
-        viewDomObserver.stop();
-        setTimeout(() => {
-          viewDomObserver.start();
-        }, 0);
-      }
-      if (typeof this.dom.style.cssText !== 'undefined') {
-        this.dom.style.cssText = containerStyle;
-        this.contentDOM.style.cssText = contentStyle;
-      } else {
-        this.dom.setAttribute('style', containerStyle);
-        this.contentDOM.setAttribute('style', contentStyle);
-      }
-    });
-    const contentDOM = document.createElement('div');
-    contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
-    const dom = document.createElement('div');
-    dom.className = BreakoutCssClassName.BREAKOUT_MARK;
-    dom.setAttribute('data-layout', mark.attrs.mode);
-    dom.appendChild(contentDOM);
-    this.dom = dom;
-    this.mark = mark;
-    this.view = view;
-    this.contentDOM = contentDOM;
-    this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.onChange(({
-      nextSharedState
-    }) => this.updateWidth(nextSharedState));
-    this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState());
-  }
-  // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
-  // @see https://github.com/ProseMirror/prosemirror/issues/1082
-  destroy() {
-    var _this$unsubscribe;
-    (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
-  }
-}
-function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
-  if (newBreakoutNode && currentBreakoutNode) {
-    return newBreakoutNode !== currentBreakoutNode;
-  }
-  return newBreakoutNode || currentBreakoutNode ? true : false;
-}
-function createPlugin(pluginInjectionApi, {
-  dispatch
-}) {
-  return new SafePlugin({
-    state: {
-      init() {
-        return {
-          breakoutNode: undefined
-        };
-      },
-      apply(tr, pluginState) {
-        const breakoutNode = findSupportedNodeForBreakout(tr.selection);
-        if (shouldPluginStateUpdate(breakoutNode, pluginState.breakoutNode)) {
-          const nextPluginState = {
-            ...pluginState,
-            breakoutNode
-          };
-          dispatch(pluginKey, nextPluginState);
-          return nextPluginState;
-        }
-        return pluginState;
-      }
-    },
-    key: pluginKey,
-    props: {
-      nodeViews: {
-        // Note: When we upgrade to prosemirror 1.27.2 -- we should
-        // move this to markViews.
-        // See the following link for more details:
-        // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
-        breakout: (mark, view) => {
-          return new BreakoutView(mark, view, pluginInjectionApi);
-        }
-      }
-    }
-  });
-}
-const LayoutButtonWrapper = ({
-  api,
-  editorView,
-  boundariesElement,
-  scrollableElement,
-  mountPoint
-}) => {
-  var _breakoutState$breako, _breakoutState$breako2;
-  // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
-  const {
-    breakoutState
-  } = useSharedPluginState(api, ['width', 'breakout']);
-  return /*#__PURE__*/React.createElement(LayoutButton, {
-    editorView: editorView,
-    mountPoint: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
-  });
-};
-const breakoutPlugin = ({
-  config: options,
-  api
-}) => ({
-  name: 'breakout',
-  pmPlugins() {
-    return [{
-      name: 'breakout',
-      plugin: props => createPlugin(api, props)
-    }];
-  },
-  marks() {
-    return [{
-      name: 'breakout',
-      mark: breakout
-    }];
-  },
-  getSharedState(editorState) {
-    if (!editorState) {
-      return {
-        breakoutNode: undefined
-      };
-    }
-    const pluginState = pluginKey.getState(editorState);
-    if (!pluginState) {
-      return {
-        breakoutNode: undefined
-      };
-    }
-    return pluginState;
-  },
-  contentComponent({
-    editorView,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement
-  }) {
-    // This is a bit crappy, but should be resolved once we move to a static schema.
-    if (options && !options.allowBreakoutButton) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
-      api: api,
-      mountPoint: popupsMountPoint,
-      editorView: editorView,
-      boundariesElement: popupsBoundariesElement,
-      scrollableElement: popupsScrollableElement
-    });
-  }
-});
-export default breakoutPlugin;

package/dist/es2019/plugins/breakout/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/plugins/breakout/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -1,117 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { B300, N300, N20A } from '@atlaskit/theme/colors';
-import { injectIntl } from 'react-intl-next';
-import { findParentDomRefOfType, findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { Popup } from '@atlaskit/editor-common/ui';
-import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
-import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
-import ToolbarButton from '../../../ui/ToolbarButton';
-import { getBreakoutMode } from '../utils/get-breakout-mode';
-import { setBreakoutMode } from '../commands/set-breakout-mode';
-import { removeBreakout } from '../commands/remove-breakout';
-import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
-import { getPluginState } from '../plugin-key';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-import { layers } from '@atlaskit/theme/constants';
-import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
-const toolbarButtonWrapper = css`
-  && button {
-    background: ${`var(--ds-background-neutral, ${N20A})`};
-    color: ${`var(--ds-icon, ${N300})`};
-    :hover {
-      background: ${`var(--ds-background-neutral-hovered, ${B300})`};
-      color: ${"var(--ds-icon, white)"} !important;
-    }
-  }
-`;
-function getBreakoutNodeElement(pluginState, selection, editorView) {
-  if (!pluginState.breakoutNode) {
-    return undefined;
-  }
-  if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
-    return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
-  }
-  return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
-}
-class LayoutButton extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "handleClick", breakoutMode => () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-        setBreakoutMode(breakoutMode)(state, dispatch);
-      } else {
-        removeBreakout()(state, dispatch);
-      }
-    });
-  }
-  render() {
-    const {
-      intl: {
-        formatMessage
-      },
-      mountPoint,
-      boundariesElement,
-      scrollableElement,
-      editorView,
-      node
-    } = this.props;
-    const {
-      state
-    } = editorView;
-    if (!node || !isBreakoutMarkAllowed(state)) {
-      return null;
-    }
-    const breakoutMode = getBreakoutMode(editorView.state);
-    const titleMessage = getTitle(breakoutMode);
-    const title = formatMessage(titleMessage);
-    const nextBreakoutMode = getNextBreakoutMode(breakoutMode);
-    const belowOtherPopupsZIndex = layers.layer() - 1;
-    let pluginState = getPluginState(state);
-    if (!pluginState) {
-      return null;
-    }
-    let element = getBreakoutNodeElement(pluginState, state.selection, editorView);
-    if (!element) {
-      return null;
-    }
-    const closestEl = element.querySelector(`.${BreakoutCssClassName.BREAKOUT_MARK_DOM}`);
-    if (closestEl && closestEl.firstChild) {
-      element = closestEl.firstChild;
-    }
-    return jsx(Popup, {
-      ariaLabel: title,
-      target: element,
-      offset: [5, 0],
-      alignY: "start",
-      alignX: "end",
-      mountTo: mountPoint,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      stick: true,
-      forcePlacement: true,
-      zIndex: belowOtherPopupsZIndex
-    }, jsx("div", {
-      css: toolbarButtonWrapper
-    }, jsx(ToolbarButton, {
-      title: title,
-      testId: titleMessage.id,
-      onClick: this.handleClick(nextBreakoutMode),
-      iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
-        label: title
-      }) : jsx(ExpandIcon, {
-        label: title
-      })
-    })));
-  }
-}
-_defineProperty(LayoutButton, "displayName", 'LayoutButton');
-export default injectIntl(LayoutButton);

package/dist/es2019/plugins/breakout/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/plugins/breakout/utils/get-breakout-mode.js

@@ -1,16 +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/plugins/breakout/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/plugins/breakout/utils/is-supported-node.js

@@ -1,9 +0,0 @@
-const supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
-
-/**
- * Check if breakout can be applied to a node
- * @param node Node to check
- */
-export function isSupportedNodeForBreakout(node) {
-  return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
-}

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

@@ -1,24 +0,0 @@
-import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export function removeBreakout() {
-  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);
-    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/plugins/breakout/commands/set-breakout-mode.js

@@ -1,23 +0,0 @@
-import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export function setBreakoutMode(mode) {
-  return function (state, dispatch) {
-    var node = findSupportedNodeForBreakout(state.selection);
-    if (!node) {
-      return false;
-    }
-    var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
-      mode: mode
-    })]);
-    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/plugins/breakout/index.js

@@ -1,211 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
-import LayoutButton from './ui/LayoutButton';
-import { pluginKey } from './plugin-key';
-import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
-import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
-import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-var BreakoutView = /*#__PURE__*/function () {
-  function BreakoutView(
-  /**
-   * Note: this is actually a PMMark -- however our version
-   * of the prosemirror and prosemirror types mean using PMNode
-   * is not problematic.
-   */
-  mark, view, pluginInjectionApi) {
-    var _this = this;
-    _classCallCheck(this, BreakoutView);
-    _defineProperty(this, "updateWidth", function (widthState) {
-      // we skip updating the width of breakout nodes if the editorView dom
-      // element was hidden (to avoid breakout width and button thrashing
-      // when an editor is hidden, re-rendered and unhidden).
-      if (widthState === undefined || widthState.width === 0) {
-        return;
-      }
-      var containerStyle = "";
-      var contentStyle = "";
-      var breakoutWidthPx = calcBreakoutWidthPx(_this.mark.attrs.mode, widthState.width);
-      if (widthState.lineLength) {
-        if (breakoutWidthPx < widthState.lineLength) {
-          breakoutWidthPx = widthState.lineLength;
-        }
-        containerStyle += "\n        transform: none;\n        display: flex;\n        justify-content: center;\n        ";
-
-        // There is a delay in the animation because widthState is delayed.
-        // When the editor goes full width the animation for the editor
-        // begins and finishes before widthState can update the new dimensions.
-        contentStyle += "\n        min-width: ".concat(breakoutWidthPx, "px;\n        transition: min-width 0.5s ").concat(akEditorSwoopCubicBezier, ";\n      ");
-      } else {
-        // fallback method
-        // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
-        //
-        // this approach doesn't work well with position: fixed, so
-        // it breaks things like sticky headers
-        containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
-      }
-
-      // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
-      // `ignoreMutation` life-cycle event. @see ED-9947
-      var viewDomObserver = _this.view.domObserver;
-      if (viewDomObserver && _this.view.dom) {
-        viewDomObserver.stop();
-        setTimeout(function () {
-          viewDomObserver.start();
-        }, 0);
-      }
-      if (typeof _this.dom.style.cssText !== 'undefined') {
-        _this.dom.style.cssText = containerStyle;
-        _this.contentDOM.style.cssText = contentStyle;
-      } else {
-        _this.dom.setAttribute('style', containerStyle);
-        _this.contentDOM.setAttribute('style', contentStyle);
-      }
-    });
-    var contentDOM = document.createElement('div');
-    contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
-    var dom = document.createElement('div');
-    dom.className = BreakoutCssClassName.BREAKOUT_MARK;
-    dom.setAttribute('data-layout', mark.attrs.mode);
-    dom.appendChild(contentDOM);
-    this.dom = dom;
-    this.mark = mark;
-    this.view = view;
-    this.contentDOM = contentDOM;
-    this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.onChange(function (_ref) {
-      var nextSharedState = _ref.nextSharedState;
-      return _this.updateWidth(nextSharedState);
-    });
-    this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState());
-  }
-  _createClass(BreakoutView, [{
-    key: "destroy",
-    value:
-    // NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
-    // @see https://github.com/ProseMirror/prosemirror/issues/1082
-    function destroy() {
-      var _this$unsubscribe;
-      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
-    }
-  }]);
-  return BreakoutView;
-}();
-function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
-  if (newBreakoutNode && currentBreakoutNode) {
-    return newBreakoutNode !== currentBreakoutNode;
-  }
-  return newBreakoutNode || currentBreakoutNode ? true : false;
-}
-function createPlugin(pluginInjectionApi, _ref2) {
-  var dispatch = _ref2.dispatch;
-  return new SafePlugin({
-    state: {
-      init: function init() {
-        return {
-          breakoutNode: undefined
-        };
-      },
-      apply: function apply(tr, pluginState) {
-        var breakoutNode = findSupportedNodeForBreakout(tr.selection);
-        if (shouldPluginStateUpdate(breakoutNode, pluginState.breakoutNode)) {
-          var nextPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
-            breakoutNode: breakoutNode
-          });
-          dispatch(pluginKey, nextPluginState);
-          return nextPluginState;
-        }
-        return pluginState;
-      }
-    },
-    key: pluginKey,
-    props: {
-      nodeViews: {
-        // Note: When we upgrade to prosemirror 1.27.2 -- we should
-        // move this to markViews.
-        // See the following link for more details:
-        // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
-        breakout: function breakout(mark, view) {
-          return new BreakoutView(mark, view, pluginInjectionApi);
-        }
-      }
-    }
-  });
-}
-var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
-  var _breakoutState$breako, _breakoutState$breako2;
-  var api = _ref3.api,
-    editorView = _ref3.editorView,
-    boundariesElement = _ref3.boundariesElement,
-    scrollableElement = _ref3.scrollableElement,
-    mountPoint = _ref3.mountPoint;
-  // Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout']),
-    breakoutState = _useSharedPluginState.breakoutState;
-  return /*#__PURE__*/React.createElement(LayoutButton, {
-    editorView: editorView,
-    mountPoint: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
-  });
-};
-var breakoutPlugin = function breakoutPlugin(_ref4) {
-  var options = _ref4.config,
-    api = _ref4.api;
-  return {
-    name: 'breakout',
-    pmPlugins: function pmPlugins() {
-      return [{
-        name: 'breakout',
-        plugin: function plugin(props) {
-          return createPlugin(api, props);
-        }
-      }];
-    },
-    marks: function marks() {
-      return [{
-        name: 'breakout',
-        mark: breakout
-      }];
-    },
-    getSharedState: function getSharedState(editorState) {
-      if (!editorState) {
-        return {
-          breakoutNode: undefined
-        };
-      }
-      var pluginState = pluginKey.getState(editorState);
-      if (!pluginState) {
-        return {
-          breakoutNode: undefined
-        };
-      }
-      return pluginState;
-    },
-    contentComponent: function contentComponent(_ref5) {
-      var editorView = _ref5.editorView,
-        popupsMountPoint = _ref5.popupsMountPoint,
-        popupsBoundariesElement = _ref5.popupsBoundariesElement,
-        popupsScrollableElement = _ref5.popupsScrollableElement;
-      // This is a bit crappy, but should be resolved once we move to a static schema.
-      if (options && !options.allowBreakoutButton) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
-        api: api,
-        mountPoint: popupsMountPoint,
-        editorView: editorView,
-        boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement
-      });
-    }
-  };
-};
-export default breakoutPlugin;