@atlaskit/editor-plugin-breakout 0.1.0

package/dist/es2019/plugin.js

@@ -0,0 +1,208 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { breakout } from '@atlaskit/adf-schema';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { pluginKey } from './plugin-key';
+import LayoutButton from './ui/LayoutButton';
+import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
+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
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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
+  });
+};
+export 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
+    });
+  }
+});

package/dist/es2019/types.js

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

package/dist/es2019/ui/LayoutButton.js

@@ -0,0 +1,111 @@
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+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 CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import { B300, N20A, N300 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+import { removeBreakout } from '../commands/remove-breakout';
+import { setBreakoutMode } from '../commands/set-breakout-mode';
+import { getPluginState } from '../plugin-key';
+import { getBreakoutMode } from '../utils/get-breakout-mode';
+import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
+import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
+const toolbarButtonWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '&& 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);
+}
+const LayoutButton = ({
+  intl: {
+    formatMessage
+  },
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  editorView,
+  node
+}) => {
+  const handleClick = useCallback(breakoutMode => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
+      setBreakoutMode(breakoutMode)(state, dispatch);
+    } else {
+      removeBreakout()(state, dispatch);
+    }
+  }, [editorView]);
+  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: toolbarButtonWrapperStyles
+  }, jsx(ToolbarButton, {
+    title: title,
+    testId: titleMessage.id,
+    onClick: () => handleClick(nextBreakoutMode),
+    iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
+      label: title
+    }) : jsx(ExpandIcon, {
+      label: title
+    })
+  })));
+};
+LayoutButton.displayName = 'LayoutButton';
+export default injectIntl(LayoutButton);

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

@@ -0,0 +1,37 @@
+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/utils/get-breakout-mode.js

@@ -0,0 +1,17 @@
+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/utils/is-breakout-mark-allowed.js

@@ -0,0 +1,22 @@
+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/utils/is-supported-node.js

@@ -0,0 +1,9 @@
+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/commands/remove-breakout.js

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

@@ -0,0 +1,23 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
+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/index.js

@@ -0,0 +1 @@
+export { breakoutPlugin } from './plugin';

package/dist/esm/plugin-key.js

@@ -0,0 +1,5 @@
+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/plugin.js

@@ -0,0 +1,211 @@
+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 { breakout } from '@atlaskit/adf-schema';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { pluginKey } from './plugin-key';
+import LayoutButton from './ui/LayoutButton';
+import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
+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
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      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
+  });
+};
+export 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
+      });
+    }
+  };
+};

package/dist/esm/types.js

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