@atlaskit/editor-plugin-breakout 2.2.5 → 2.2.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.2.6
+
+### Patch Changes
+
+- [#157540](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157540)
+  [`16b7448512972`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/16b7448512972) -
+  [ux] [ED-28038] this change adds the drag callbacks to the new resizing experience behind the
+  platform_editor_breakout_resizing experiment.
+- Updated dependencies
+
 ## 2.2.5
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -74,7 +74,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(pluginInjectionApi, _ref) {
+function createPlugin(api, _ref) {
   var dispatch = _ref.dispatch;
   return new _safePlugin.SafePlugin({
     state: {
@@ -178,7 +178,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
         return [{
           name: 'breakout-resizing',
           plugin: function plugin() {
-            return (0, _resizingPlugin.createResizingPlugin)();
+            return (0, _resizingPlugin.createResizingPlugin)(api);
           }
         }];
       }

package/dist/cjs/editor-commands/set-breakout-width.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setBreakoutWidth = setBreakoutWidth;
+// TODO: ED-28029 - add fixes for expands and codeblocks
+function setBreakoutWidth(width, pos, isLivePage) {
+  return function (state, dispatch) {
+    var node = state.doc.nodeAt(pos);
+    if (!node) {
+      return false;
+    }
+    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
+      width: width
+    })]);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _resizingMarkView = require("./resizing-mark-view");
+var RESIZE_RATIO = 2;
+var WIDTHS = {
+  MIN: 760,
+  MAX: 1800
+};
+function getProposedWidth(_ref) {
+  var _api$width$sharedStat;
+  var initialWidth = _ref.initialWidth,
+    location = _ref.location,
+    api = _ref.api;
+  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
+  var proposedWidth = initialWidth + diffX;
+
+  // TODO: ED-28024 - add snapping logic
+
+  var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding;
+  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
+}
+;
+function createResizerCallbacks(_ref2) {
+  var dom = _ref2.dom,
+    contentDOM = _ref2.contentDOM,
+    view = _ref2.view,
+    mark = _ref2.mark,
+    api = _ref2.api;
+  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'));
+      });
+      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+    },
+    onDrag: function onDrag(_ref3) {
+      var location = _ref3.location;
+      var initialWidth = mark.attrs.width;
+      var newWidth = getProposedWidth({
+        initialWidth: initialWidth,
+        location: location,
+        api: api
+      });
+      contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
+    },
+    onDrop: function onDrop(_ref4) {
+      var _api$userIntent2;
+      var location = _ref4.location;
+      // TODO: ED-28027 - remove guidelines
+      _preventUnhandled.preventUnhandled.stop();
+      var pos = view.posAtDOM(dom, 0);
+      if (pos === undefined) {
+        return;
+      }
+      var initialWidth = mark.attrs.width;
+      var newWidth = getProposedWidth({
+        initialWidth: initialWidth,
+        location: location,
+        api: api
+      });
+      (0, _setBreakoutWidth.setBreakoutWidth)(newWidth, pos)(view.state, view.dispatch);
+      contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
+      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
+      api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+    }
+  };
+}

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

@@ -4,14 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResizingMarkView = void 0;
+exports.ResizingMarkView = exports.LOCAL_RESIZE_PROPERTY = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
-var localResizeProperty = '--local-resizing-width';
+var _resizerCallbacks = require("./resizer-callbacks");
+var LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
 
 /**
  *
@@ -21,11 +22,12 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
    * Wrap node view in a resizing mark view
    * @param {Mark} mark - The breakout mark to resize
    * @param {EditorView} view - The editor view
+   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
    * @example
    * ```ts
    * ```
    */
-  function ResizingMarkView(mark, view) {
+  function ResizingMarkView(mark, view, api) {
     (0, _classCallCheck2.default)(this, ResizingMarkView);
     var dom = document.createElement('div');
     var contentDOM = document.createElement('div');
@@ -44,21 +46,24 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
     contentDOM.style.gridRow = '1';
     contentDOM.style.gridColumn = '1';
     if (mark.attrs.width) {
-      contentDOM.style.minWidth = "min(var(".concat(localResizeProperty, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
+      contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
     } else {
       if (mark.attrs.mode === 'wide') {
-        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(localResizeProperty, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
       }
       if (mark.attrs.mode === 'full-width') {
-        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(localResizeProperty, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
       }
     }
     dom.appendChild(contentDOM);
-    var _createPragmaticResiz = createPragmaticResizer({
-        onDragStart: function onDragStart() {},
-        onDrag: function onDrag() {},
-        onDrop: function onDrop() {}
-      }),
+    var callbacks = (0, _resizerCallbacks.createResizerCallbacks)({
+      dom: dom,
+      contentDOM: contentDOM,
+      view: view,
+      mark: mark,
+      api: api
+    });
+    var _createPragmaticResiz = createPragmaticResizer(callbacks),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;

package/dist/cjs/pm-plugins/resizing-plugin.js

@@ -8,13 +8,13 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _resizingMarkView = require("./resizing-mark-view");
 var resizingPluginKey = exports.resizingPluginKey = new _state.PluginKey('breakout-resizing');
-var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin() {
+var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api) {
   return new _safePlugin.SafePlugin({
     key: resizingPluginKey,
     props: {
       markViews: {
         breakout: function breakout(mark, view) {
-          return new _resizingMarkView.ResizingMarkView(mark, view);
+          return new _resizingMarkView.ResizingMarkView(mark, view, api);
         }
       }
     }

package/dist/es2019/breakoutPlugin.js

@@ -63,7 +63,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(pluginInjectionApi, {
+function createPlugin(api, {
   dispatch
 }) {
   return new SafePlugin({
@@ -171,7 +171,7 @@ export const breakoutPlugin = ({
     if (editorExperiment('platform_editor_breakout_resizing', true)) {
       return [{
         name: 'breakout-resizing',
-        plugin: () => createResizingPlugin()
+        plugin: () => createResizingPlugin(api)
       }];
     }
     return [{

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

@@ -0,0 +1,16 @@
+// TODO: ED-28029 - add fixes for expands and codeblocks
+export function setBreakoutWidth(width, pos, isLivePage) {
+  return (state, dispatch) => {
+    const node = state.doc.nodeAt(pos);
+    if (!node) {
+      return false;
+    }
+    const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
+      width
+    })]);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}

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

@@ -0,0 +1,74 @@
+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 { LOCAL_RESIZE_PROPERTY } from "./resizing-mark-view";
+const RESIZE_RATIO = 2;
+const WIDTHS = {
+  MIN: 760,
+  MAX: 1800
+};
+function getProposedWidth({
+  initialWidth,
+  location,
+  api
+}) {
+  var _api$width$sharedStat, _api$width$sharedStat2;
+  const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
+  const proposedWidth = initialWidth + diffX;
+
+  // TODO: ED-28024 - add snapping logic
+
+  const containerWidth = ((api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
+  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
+}
+;
+export function createResizerCallbacks({
+  dom,
+  contentDOM,
+  view,
+  mark,
+  api
+}) {
+  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'));
+      });
+      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+    },
+    onDrag: ({
+      location
+    }) => {
+      const initialWidth = mark.attrs.width;
+      const newWidth = getProposedWidth({
+        initialWidth,
+        location,
+        api
+      });
+      contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
+    },
+    onDrop({
+      location
+    }) {
+      var _api$userIntent2;
+      // TODO: ED-28027 - remove guidelines
+      preventUnhandled.stop();
+      const pos = view.posAtDOM(dom, 0);
+      if (pos === undefined) {
+        return;
+      }
+      const initialWidth = mark.attrs.width;
+      const newWidth = getProposedWidth({
+        initialWidth,
+        location,
+        api
+      });
+      setBreakoutWidth(newWidth, pos)(view.state, view.dispatch);
+      contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
+      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
+      api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+    }
+  };
+}

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

@@ -2,7 +2,8 @@ import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-const localResizeProperty = '--local-resizing-width';
+import { createResizerCallbacks } from './resizer-callbacks';
+export const LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
 
 /**
  *
@@ -12,11 +13,12 @@ export class ResizingMarkView {
    * Wrap node view in a resizing mark view
    * @param {Mark} mark - The breakout mark to resize
    * @param {EditorView} view - The editor view
+   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
    * @example
    * ```ts
    * ```
    */
-  constructor(mark, view) {
+  constructor(mark, view, api) {
     const dom = document.createElement('div');
     const contentDOM = document.createElement('div');
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -34,25 +36,28 @@ export class ResizingMarkView {
     contentDOM.style.gridRow = '1';
     contentDOM.style.gridColumn = '1';
     if (mark.attrs.width) {
-      contentDOM.style.minWidth = `min(var(${localResizeProperty}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
+      contentDOM.style.minWidth = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
     } else {
       if (mark.attrs.mode === 'wide') {
-        contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${localResizeProperty}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+        contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
       }
       if (mark.attrs.mode === 'full-width') {
-        contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${localResizeProperty}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+        contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
       }
     }
     dom.appendChild(contentDOM);
+    const callbacks = createResizerCallbacks({
+      dom,
+      contentDOM,
+      view,
+      mark,
+      api
+    });
     const {
       leftHandle,
       rightHandle,
       destroy
-    } = createPragmaticResizer({
-      onDragStart: () => {},
-      onDrag: () => {},
-      onDrop: () => {}
-    });
+    } = createPragmaticResizer(callbacks);
     dom.prepend(leftHandle);
     dom.appendChild(rightHandle);
     this.dom = dom;

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

@@ -2,13 +2,13 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ResizingMarkView } from './resizing-mark-view';
 export const resizingPluginKey = new PluginKey('breakout-resizing');
-export const createResizingPlugin = () => {
+export const createResizingPlugin = api => {
   return new SafePlugin({
     key: resizingPluginKey,
     props: {
       markViews: {
         breakout: (mark, view) => {
-          return new ResizingMarkView(mark, view);
+          return new ResizingMarkView(mark, view, api);
         }
       }
     }

package/dist/esm/breakoutPlugin.js

@@ -67,7 +67,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(pluginInjectionApi, _ref) {
+function createPlugin(api, _ref) {
   var dispatch = _ref.dispatch;
   return new SafePlugin({
     state: {
@@ -171,7 +171,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref3) {
         return [{
           name: 'breakout-resizing',
           plugin: function plugin() {
-            return createResizingPlugin();
+            return createResizingPlugin(api);
           }
         }];
       }

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

@@ -0,0 +1,16 @@
+// TODO: ED-28029 - add fixes for expands and codeblocks
+export function setBreakoutWidth(width, pos, isLivePage) {
+  return function (state, dispatch) {
+    var node = state.doc.nodeAt(pos);
+    if (!node) {
+      return false;
+    }
+    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
+      width: width
+    })]);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}

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

@@ -0,0 +1,70 @@
+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 { LOCAL_RESIZE_PROPERTY } from "./resizing-mark-view";
+var RESIZE_RATIO = 2;
+var WIDTHS = {
+  MIN: 760,
+  MAX: 1800
+};
+function getProposedWidth(_ref) {
+  var _api$width$sharedStat;
+  var initialWidth = _ref.initialWidth,
+    location = _ref.location,
+    api = _ref.api;
+  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO;
+  var proposedWidth = initialWidth + diffX;
+
+  // TODO: ED-28024 - add snapping logic
+
+  var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
+  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
+}
+;
+export function createResizerCallbacks(_ref2) {
+  var dom = _ref2.dom,
+    contentDOM = _ref2.contentDOM,
+    view = _ref2.view,
+    mark = _ref2.mark,
+    api = _ref2.api;
+  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'));
+      });
+      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
+    },
+    onDrag: function onDrag(_ref3) {
+      var location = _ref3.location;
+      var initialWidth = mark.attrs.width;
+      var newWidth = getProposedWidth({
+        initialWidth: initialWidth,
+        location: location,
+        api: api
+      });
+      contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
+    },
+    onDrop: function onDrop(_ref4) {
+      var _api$userIntent2;
+      var location = _ref4.location;
+      // TODO: ED-28027 - remove guidelines
+      preventUnhandled.stop();
+      var pos = view.posAtDOM(dom, 0);
+      if (pos === undefined) {
+        return;
+      }
+      var initialWidth = mark.attrs.width;
+      var newWidth = getProposedWidth({
+        initialWidth: initialWidth,
+        location: location,
+        api: api
+      });
+      setBreakoutWidth(newWidth, pos)(view.state, view.dispatch);
+      contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
+      view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
+      api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
+    }
+  };
+}

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

@@ -4,7 +4,8 @@ import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-var localResizeProperty = '--local-resizing-width';
+import { createResizerCallbacks } from './resizer-callbacks';
+export var LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
 
 /**
  *
@@ -14,11 +15,12 @@ export var ResizingMarkView = /*#__PURE__*/function () {
    * Wrap node view in a resizing mark view
    * @param {Mark} mark - The breakout mark to resize
    * @param {EditorView} view - The editor view
+   * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
    * @example
    * ```ts
    * ```
    */
-  function ResizingMarkView(mark, view) {
+  function ResizingMarkView(mark, view, api) {
     _classCallCheck(this, ResizingMarkView);
     var dom = document.createElement('div');
     var contentDOM = document.createElement('div');
@@ -37,21 +39,24 @@ export var ResizingMarkView = /*#__PURE__*/function () {
     contentDOM.style.gridRow = '1';
     contentDOM.style.gridColumn = '1';
     if (mark.attrs.width) {
-      contentDOM.style.minWidth = "min(var(".concat(localResizeProperty, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
+      contentDOM.style.minWidth = "min(var(".concat(LOCAL_RESIZE_PROPERTY, ", ").concat(mark.attrs.width, "px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))");
     } else {
       if (mark.attrs.mode === 'wide') {
-        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(localResizeProperty, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
       }
       if (mark.attrs.mode === 'full-width') {
-        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(localResizeProperty, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
+        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(".concat(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
       }
     }
     dom.appendChild(contentDOM);
-    var _createPragmaticResiz = createPragmaticResizer({
-        onDragStart: function onDragStart() {},
-        onDrag: function onDrag() {},
-        onDrop: function onDrop() {}
-      }),
+    var callbacks = createResizerCallbacks({
+      dom: dom,
+      contentDOM: contentDOM,
+      view: view,
+      mark: mark,
+      api: api
+    });
+    var _createPragmaticResiz = createPragmaticResizer(callbacks),
       leftHandle = _createPragmaticResiz.leftHandle,
       rightHandle = _createPragmaticResiz.rightHandle,
       destroy = _createPragmaticResiz.destroy;

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

@@ -2,13 +2,13 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ResizingMarkView } from './resizing-mark-view';
 export var resizingPluginKey = new PluginKey('breakout-resizing');
-export var createResizingPlugin = function createResizingPlugin() {
+export var createResizingPlugin = function createResizingPlugin(api) {
   return new SafePlugin({
     key: resizingPluginKey,
     props: {
       markViews: {
         breakout: function breakout(mark, view) {
-          return new ResizingMarkView(mark, view);
+          return new ResizingMarkView(mark, view, api);
         }
       }
     }

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 { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export interface BreakoutPluginState {
@@ -14,7 +15,8 @@ export type BreakoutPluginDependencies = [
     WidthPlugin,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
-    OptionalPlugin<BlockControlsPlugin>
+    OptionalPlugin<BlockControlsPlugin>,
+    OptionalPlugin<UserIntentPlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;

package/dist/types/editor-commands/set-breakout-width.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from '@atlaskit/editor-common/types';
+export declare function setBreakoutWidth(width: number, pos: number, isLivePage?: boolean): Command;

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

@@ -0,0 +1,16 @@
+import { ExtractInjectionAPI } from "@atlaskit/editor-common/types";
+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 function createResizerCallbacks({ dom, contentDOM, view, mark, api }: {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    view: EditorView;
+    mark: Mark;
+    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
+}): {
+    onDragStart: () => void;
+    onDrag: (args: BaseEventPayload<ElementDragType>) => void;
+    onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+};

package/dist/types/pm-plugins/resizing-mark-view.d.ts

@@ -1,5 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { BreakoutPlugin } from '../breakoutPluginType';
+export declare const LOCAL_RESIZE_PROPERTY = "--local-resizing-width";
 /**
  *
  */
@@ -13,11 +16,12 @@ export declare class ResizingMarkView implements NodeView {
      * Wrap node view in a resizing mark view
      * @param {Mark} mark - The breakout mark to resize
      * @param {EditorView} view - The editor view
+     * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
      * @example
      * ```ts
      * ```
      */
-    constructor(mark: Mark, view: EditorView);
+    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
     /**
      *
      * @example

package/dist/types/pm-plugins/resizing-plugin.d.ts

@@ -1,4 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { BreakoutPlugin } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: () => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;

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 { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export interface BreakoutPluginState {
@@ -14,7 +15,8 @@ export type BreakoutPluginDependencies = [
     WidthPlugin,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
-    OptionalPlugin<BlockControlsPlugin>
+    OptionalPlugin<BlockControlsPlugin>,
+    OptionalPlugin<UserIntentPlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {
     pluginConfiguration: BreakoutPluginOptions | undefined;

package/dist/types-ts4.5/editor-commands/set-breakout-width.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from '@atlaskit/editor-common/types';
+export declare function setBreakoutWidth(width: number, pos: number, isLivePage?: boolean): Command;

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

@@ -0,0 +1,16 @@
+import { ExtractInjectionAPI } from "@atlaskit/editor-common/types";
+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 function createResizerCallbacks({ dom, contentDOM, view, mark, api }: {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    view: EditorView;
+    mark: Mark;
+    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
+}): {
+    onDragStart: () => void;
+    onDrag: (args: BaseEventPayload<ElementDragType>) => void;
+    onDrop: (args: BaseEventPayload<ElementDragType>) => void;
+};

package/dist/types-ts4.5/pm-plugins/resizing-mark-view.d.ts

@@ -1,5 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { BreakoutPlugin } from '../breakoutPluginType';
+export declare const LOCAL_RESIZE_PROPERTY = "--local-resizing-width";
 /**
  *
  */
@@ -13,11 +16,12 @@ export declare class ResizingMarkView implements NodeView {
      * Wrap node view in a resizing mark view
      * @param {Mark} mark - The breakout mark to resize
      * @param {EditorView} view - The editor view
+     * @param {ExtractInjectionAPI<BreakoutPlugin> | undefined} api - the pluginInjectionAPI
      * @example
      * ```ts
      * ```
      */
-    constructor(mark: Mark, view: EditorView);
+    constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
     /**
      *
      * @example

package/dist/types-ts4.5/pm-plugins/resizing-plugin.d.ts

@@ -1,4 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { BreakoutPlugin } from '../breakoutPluginType';
 export declare const resizingPluginKey: PluginKey<any>;
-export declare const createResizingPlugin: () => SafePlugin<any>;
+export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.2.5",
+	"version": "2.2.6",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,6 +38,7 @@
 		"@atlaskit/editor-plugin-block-controls": "^3.14.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
+		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
@@ -45,7 +46,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": "^4.23.0",
+		"@atlaskit/tmp-editor-statsig": "^4.24.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"