@atlaskit/editor-plugin-breakout 2.3.3 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.4.1
+
+### Patch Changes
+
+- [#163125](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163125)
+  [`d0ae2ab52765d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0ae2ab52765d) -
+  [ux] ED-28034 fix block controls positioning for new resizing experience behind
+  platform_editor_breakout_resizing
+- Updated dependencies
+
+## 2.4.0
+
+### Minor Changes
+
+- [#159900](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159900)
+  [`d70a10b069ade`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d70a10b069ade) -
+  [ux] [ED-28027] add guidelines while resizing under the new experience behind the
+  platform_editor_breakout_resizing experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/get-guidelines.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGuidelines = void 0;
+var _styles = require("@atlaskit/editor-common/styles");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _resizerCallbacks = require("./resizer-callbacks");
+var GUIDELINE_KEYS = {
+  lineLength: 'grid',
+  wide: 'wide',
+  fullWidth: 'full_width'
+};
+var roundToNearest = function roundToNearest(value) {
+  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+  return Math.round(value / interval) * interval;
+};
+var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
+  var guidelines = [];
+  if (!isResizing) {
+    return guidelines;
+  }
+  var innerPaddingOffset = 0;
+  if (nodeType && nodeType.name === 'expand') {
+    innerPaddingOffset = _styles.resizerHandleThumbWidth;
+  }
+  var _ref = getEditorWidth() || {},
+    width = _ref.width,
+    lineLength = _ref.lineLength;
+  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
+  var wide = _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
+  var fullWidth = width ? Math.min(_resizerCallbacks.WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
+  if (lineLength) {
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+      position: {
+        x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+      },
+      active: newWidth === lineLength
+    });
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+      position: {
+        x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+      },
+      active: newWidth === lineLength
+    });
+  }
+  guidelines.push({
+    key: "".concat(GUIDELINE_KEYS.wide, "_left"),
+    position: {
+      x: -roundToNearest(wide / 2 + innerPaddingOffset)
+    },
+    active: newWidth === wide
+  });
+  guidelines.push({
+    key: "".concat(GUIDELINE_KEYS.wide, "_right"),
+    position: {
+      x: roundToNearest(wide / 2 + innerPaddingOffset)
+    },
+    active: newWidth === wide
+  });
+  if (fullWidth) {
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.fullWidth, "_left"),
+      position: {
+        x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === fullWidth
+    });
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.fullWidth, "_right"),
+      position: {
+        x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === fullWidth
+    });
+  }
+  return guidelines;
+};

package/dist/cjs/pm-plugins/resizer-callbacks.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.WIDTHS = void 0;
 exports.createResizerCallbacks = createResizerCallbacks;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
 var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
+var _getGuidelines = require("./get-guidelines");
 var _resizingMarkView = require("./resizing-mark-view");
 var RESIZE_RATIO = 2;
-var WIDTHS = {
+var WIDTHS = exports.WIDTHS = {
   MIN: 760,
   MAX: 1800
 };
@@ -32,16 +33,21 @@ function createResizerCallbacks(_ref2) {
     view = _ref2.view,
     mark = _ref2.mark,
     api = _ref2.api;
+  var node = null;
+  var getEditorWidth = function getEditorWidth() {
+    var _api$width;
+    return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+  };
   return {
     onDragStart: function onDragStart() {
-      requestAnimationFrame(function () {
-        var _api$userIntent;
-        // TODO: ED-28027 - add guidelines
-        api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
-      });
+      var _api$userIntent;
+      api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
       view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+      var pos = view.posAtDOM(dom, 0);
+      node = view.state.doc.nodeAt(pos);
     },
     onDrag: function onDrag(_ref3) {
+      var _node, _api$guideline;
       var location = _ref3.location;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
@@ -49,17 +55,20 @@ function createResizerCallbacks(_ref2) {
         location: location,
         api: api
       });
+      var guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
+      api === null || api === void 0 || (_api$guideline = api.guideline) === null || _api$guideline === void 0 || (_api$guideline = _api$guideline.actions) === null || _api$guideline === void 0 || _api$guideline.displayGuideline(view)({
+        guidelines: guidelines
+      });
       contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
     },
     onDrop: function onDrop(_ref4) {
-      var _api$userIntent2;
+      var _api$guideline2, _api$userIntent2;
       var location = _ref4.location;
-      // TODO: ED-28027 - remove guidelines
-      _preventUnhandled.preventUnhandled.stop();
+      var guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
+      api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
+        guidelines: guidelines
+      });
       var pos = view.posAtDOM(dom, 0);
-      if (pos === undefined) {
-        return;
-      }
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({

package/dist/cjs/pm-plugins/resizing-mark-view.js

@@ -40,7 +40,6 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     dom.style.transform = 'none';
     dom.style.display = 'grid';
     dom.style.justifyContent = 'center';
-    dom.style.position = 'relative';
 
     // contentDOM - styles
     contentDOM.style.gridRow = '1';

package/dist/es2019/pm-plugins/get-guidelines.js

@@ -0,0 +1,73 @@
+import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { WIDTHS } from './resizer-callbacks';
+const GUIDELINE_KEYS = {
+  lineLength: 'grid',
+  wide: 'wide',
+  fullWidth: 'full_width'
+};
+const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
+export const getGuidelines = (isResizing, newWidth, getEditorWidth, nodeType) => {
+  const guidelines = [];
+  if (!isResizing) {
+    return guidelines;
+  }
+  let innerPaddingOffset = 0;
+  if (nodeType && nodeType.name === 'expand') {
+    innerPaddingOffset = resizerHandleThumbWidth;
+  }
+  const {
+    width,
+    lineLength
+  } = getEditorWidth() || {};
+  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
+  const wide = akEditorCalculatedWideLayoutWidth;
+  const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
+  if (lineLength) {
+    guidelines.push({
+      key: `${GUIDELINE_KEYS.lineLength}_left`,
+      position: {
+        x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+      },
+      active: newWidth === lineLength
+    });
+    guidelines.push({
+      key: `${GUIDELINE_KEYS.lineLength}_right`,
+      position: {
+        x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+      },
+      active: newWidth === lineLength
+    });
+  }
+  guidelines.push({
+    key: `${GUIDELINE_KEYS.wide}_left`,
+    position: {
+      x: -roundToNearest(wide / 2 + innerPaddingOffset)
+    },
+    active: newWidth === wide
+  });
+  guidelines.push({
+    key: `${GUIDELINE_KEYS.wide}_right`,
+    position: {
+      x: roundToNearest(wide / 2 + innerPaddingOffset)
+    },
+    active: newWidth === wide
+  });
+  if (fullWidth) {
+    guidelines.push({
+      key: `${GUIDELINE_KEYS.fullWidth}_left`,
+      position: {
+        x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === fullWidth
+    });
+    guidelines.push({
+      key: `${GUIDELINE_KEYS.fullWidth}_right`,
+      position: {
+        x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === fullWidth
+    });
+  }
+  return guidelines;
+};

package/dist/es2019/pm-plugins/resizer-callbacks.js

@@ -1,9 +1,9 @@
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 const RESIZE_RATIO = 2;
-const WIDTHS = {
+export const WIDTHS = {
   MIN: 760,
   MAX: 1800
 };
@@ -28,36 +28,44 @@ export function createResizerCallbacks({
   mark,
   api
 }) {
+  let node = null;
+  const getEditorWidth = () => {
+    var _api$width;
+    return api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+  };
   return {
     onDragStart: () => {
-      requestAnimationFrame(() => {
-        var _api$userIntent;
-        // TODO: ED-28027 - add guidelines
-        api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
-      });
+      var _api$userIntent;
+      api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
       view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+      const pos = view.posAtDOM(dom, 0);
+      node = view.state.doc.nodeAt(pos);
     },
     onDrag: ({
       location
     }) => {
+      var _node, _api$guideline, _api$guideline$action;
       const initialWidth = mark.attrs.width;
       const newWidth = getProposedWidth({
         initialWidth,
         location,
         api
       });
+      const guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
+      api === null || api === void 0 ? void 0 : (_api$guideline = api.guideline) === null || _api$guideline === void 0 ? void 0 : (_api$guideline$action = _api$guideline.actions) === null || _api$guideline$action === void 0 ? void 0 : _api$guideline$action.displayGuideline(view)({
+        guidelines
+      });
       contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
     },
     onDrop({
       location
     }) {
-      var _api$userIntent2;
-      // TODO: ED-28027 - remove guidelines
-      preventUnhandled.stop();
+      var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
+      const guidelines = getGuidelines(false, 0, getEditorWidth);
+      api === null || api === void 0 ? void 0 : (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 ? void 0 : (_api$guideline2$actio = _api$guideline2.actions) === null || _api$guideline2$actio === void 0 ? void 0 : _api$guideline2$actio.displayGuideline(view)({
+        guidelines
+      });
       const pos = view.posAtDOM(dom, 0);
-      if (pos === undefined) {
-        return;
-      }
       const mode = mark.attrs.mode;
       const initialWidth = mark.attrs.width;
       const newWidth = getProposedWidth({

package/dist/es2019/pm-plugins/resizing-mark-view.js

@@ -30,7 +30,6 @@ export class ResizingMarkView {
     dom.style.transform = 'none';
     dom.style.display = 'grid';
     dom.style.justifyContent = 'center';
-    dom.style.position = 'relative';
 
     // contentDOM - styles
     contentDOM.style.gridRow = '1';

package/dist/esm/pm-plugins/get-guidelines.js

@@ -0,0 +1,75 @@
+import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { WIDTHS } from './resizer-callbacks';
+var GUIDELINE_KEYS = {
+  lineLength: 'grid',
+  wide: 'wide',
+  fullWidth: 'full_width'
+};
+var roundToNearest = function roundToNearest(value) {
+  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+  return Math.round(value / interval) * interval;
+};
+export var getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
+  var guidelines = [];
+  if (!isResizing) {
+    return guidelines;
+  }
+  var innerPaddingOffset = 0;
+  if (nodeType && nodeType.name === 'expand') {
+    innerPaddingOffset = resizerHandleThumbWidth;
+  }
+  var _ref = getEditorWidth() || {},
+    width = _ref.width,
+    lineLength = _ref.lineLength;
+  // TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
+  var wide = akEditorCalculatedWideLayoutWidth;
+  var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
+  if (lineLength) {
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
+      position: {
+        x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
+      },
+      active: newWidth === lineLength
+    });
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
+      position: {
+        x: roundToNearest(lineLength / 2 + innerPaddingOffset)
+      },
+      active: newWidth === lineLength
+    });
+  }
+  guidelines.push({
+    key: "".concat(GUIDELINE_KEYS.wide, "_left"),
+    position: {
+      x: -roundToNearest(wide / 2 + innerPaddingOffset)
+    },
+    active: newWidth === wide
+  });
+  guidelines.push({
+    key: "".concat(GUIDELINE_KEYS.wide, "_right"),
+    position: {
+      x: roundToNearest(wide / 2 + innerPaddingOffset)
+    },
+    active: newWidth === wide
+  });
+  if (fullWidth) {
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.fullWidth, "_left"),
+      position: {
+        x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === fullWidth
+    });
+    guidelines.push({
+      key: "".concat(GUIDELINE_KEYS.fullWidth, "_right"),
+      position: {
+        x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
+      },
+      active: newWidth === fullWidth
+    });
+  }
+  return guidelines;
+};

package/dist/esm/pm-plugins/resizer-callbacks.js

@@ -1,9 +1,9 @@
 import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+import { getGuidelines } from './get-guidelines';
 import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 var RESIZE_RATIO = 2;
-var WIDTHS = {
+export var WIDTHS = {
   MIN: 760,
   MAX: 1800
 };
@@ -26,16 +26,21 @@ export function createResizerCallbacks(_ref2) {
     view = _ref2.view,
     mark = _ref2.mark,
     api = _ref2.api;
+  var node = null;
+  var getEditorWidth = function getEditorWidth() {
+    var _api$width;
+    return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+  };
   return {
     onDragStart: function onDragStart() {
-      requestAnimationFrame(function () {
-        var _api$userIntent;
-        // TODO: ED-28027 - add guidelines
-        api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
-      });
+      var _api$userIntent;
+      api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
       view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+      var pos = view.posAtDOM(dom, 0);
+      node = view.state.doc.nodeAt(pos);
     },
     onDrag: function onDrag(_ref3) {
+      var _node, _api$guideline;
       var location = _ref3.location;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({
@@ -43,17 +48,20 @@ export function createResizerCallbacks(_ref2) {
         location: location,
         api: api
       });
+      var guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
+      api === null || api === void 0 || (_api$guideline = api.guideline) === null || _api$guideline === void 0 || (_api$guideline = _api$guideline.actions) === null || _api$guideline === void 0 || _api$guideline.displayGuideline(view)({
+        guidelines: guidelines
+      });
       contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
     },
     onDrop: function onDrop(_ref4) {
-      var _api$userIntent2;
+      var _api$guideline2, _api$userIntent2;
       var location = _ref4.location;
-      // TODO: ED-28027 - remove guidelines
-      preventUnhandled.stop();
+      var guidelines = getGuidelines(false, 0, getEditorWidth);
+      api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
+        guidelines: guidelines
+      });
       var pos = view.posAtDOM(dom, 0);
-      if (pos === undefined) {
-        return;
-      }
       var mode = mark.attrs.mode;
       var initialWidth = mark.attrs.width;
       var newWidth = getProposedWidth({

package/dist/esm/pm-plugins/resizing-mark-view.js

@@ -33,7 +33,6 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     dom.style.transform = 'none';
     dom.style.display = 'grid';
     dom.style.justifyContent = 'center';
-    dom.style.position = 'relative';
 
     // contentDOM - styles
     contentDOM.style.gridRow = '1';

package/dist/types/breakoutPluginType.d.ts

@@ -2,6 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -18,7 +19,8 @@ export type BreakoutPluginDependencies = [
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<BlockControlsPlugin>,
     OptionalPlugin<InteractionPlugin>,
-    OptionalPlugin<UserIntentPlugin>
+    OptionalPlugin<UserIntentPlugin>,
+    OptionalPlugin<GuidelinePlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;

package/dist/types/pm-plugins/get-guidelines.d.ts

@@ -0,0 +1,4 @@
+import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import { NodeType } from '@atlaskit/editor-prosemirror/model';
+export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];

package/dist/types/pm-plugins/resizer-callbacks.d.ts

@@ -3,6 +3,10 @@ import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { BreakoutPlugin } from '../breakoutPluginType';
+export declare const WIDTHS: {
+    MIN: number;
+    MAX: number;
+};
 export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;
     contentDOM: HTMLElement;

package/dist/types-ts4.5/breakoutPluginType.d.ts

@@ -2,6 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
+import { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -18,7 +19,8 @@ export type BreakoutPluginDependencies = [
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<BlockControlsPlugin>,
     OptionalPlugin<InteractionPlugin>,
-    OptionalPlugin<UserIntentPlugin>
+    OptionalPlugin<UserIntentPlugin>,
+    OptionalPlugin<GuidelinePlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;

package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts

@@ -0,0 +1,4 @@
+import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import { NodeType } from '@atlaskit/editor-prosemirror/model';
+export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];

package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts

@@ -3,6 +3,10 @@ import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { BreakoutPlugin } from '../breakoutPluginType';
+export declare const WIDTHS: {
+    MIN: number;
+    MAX: number;
+};
 export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;
     contentDOM: HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.3.3",
+	"version": "2.4.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,10 +34,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.0.0",
+		"@atlaskit/editor-common": "^106.1.0",
 		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
+		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-interaction": "^1.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -47,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.2.0",
+		"@atlaskit/tmp-editor-statsig": "^5.6.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"