@atlaskit/editor-plugin-breakout 2.2.4 → 2.2.6

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
+
+- [#156743](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156743)
+  [`170609348890d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/170609348890d) -
+  Add new breakout resizing experience under experiment platform_editor_breakout_resizing
+- Updated dependencies
+
 ## 2.2.4
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -17,6 +17,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _resizingPlugin = require("./pm-plugins/resizing-plugin");
 var _findBreakoutNode = require("./pm-plugins/utils/find-breakout-node");
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 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; }
@@ -73,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: {
@@ -173,6 +174,14 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
+      if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true)) {
+        return [{
+          name: 'breakout-resizing',
+          plugin: function plugin() {
+            return (0, _resizingPlugin.createResizingPlugin)(api);
+          }
+        }];
+      }
       return [{
         name: 'breakout',
         plugin: function plugin(props) {

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

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _resizerCallbacks = require("./resizer-callbacks");
+var LOCAL_RESIZE_PROPERTY = exports.LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
+
+/**
+ *
+ */
+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, api) {
+    (0, _classCallCheck2.default)(this, ResizingMarkView);
+    var dom = document.createElement('div');
+    var contentDOM = document.createElement('div');
+    contentDOM.className = _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM;
+    contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
+    dom.className = _styles.BreakoutCssClassName.BREAKOUT_MARK;
+    dom.setAttribute('data-layout', mark.attrs.mode);
+    dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
+    // dom - styles
+    dom.style.transform = 'none';
+    dom.style.display = 'grid';
+    dom.style.justifyContent = 'center';
+    dom.style.position = 'relative';
+
+    // contentDOM - styles
+    contentDOM.style.gridRow = '1';
+    contentDOM.style.gridColumn = '1';
+    if (mark.attrs.width) {
+      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(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(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
+      }
+    }
+    dom.appendChild(contentDOM);
+    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;
+    dom.prepend(leftHandle);
+    dom.appendChild(rightHandle);
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.view = view;
+    this.mark = mark;
+    this.destroyFn = destroy;
+  }
+
+  /**
+   *
+   * @example
+   */
+  return (0, _createClass2.default)(ResizingMarkView, [{
+    key: "ignoreMutation",
+    value: function ignoreMutation() {
+      return true;
+    }
+
+    /**
+     *
+     * @example
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.destroyFn();
+    }
+  }]);
+}();
+var createPragmaticResizer = function createPragmaticResizer(_ref) {
+  var onDragStart = _ref.onDragStart,
+    onDrag = _ref.onDrag,
+    _onDrop = _ref.onDrop;
+  var registerHandle = function registerHandle(handleElement) {
+    return (0, _adapter.draggable)({
+      element: handleElement,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        (0, _disableNativeDragPreview.disableNativeDragPreview)({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        _preventUnhandled.preventUnhandled.start();
+      },
+      onDragStart: onDragStart,
+      onDrag: onDrag,
+      onDrop: function onDrop(args) {
+        _preventUnhandled.preventUnhandled.stop();
+        _onDrop(args);
+      }
+    });
+  };
+  var createHandle = function createHandle(side) {
+    var handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-right');
+    }
+    var handleInner = document.createElement('div');
+    handleInner.classList.add('pm-breakout-resize-handle-inner');
+    handle.appendChild(handleInner);
+    return handle;
+  };
+  var rightHandle = createHandle('right');
+  var leftHandle = createHandle('left');
+  var rightHandleCleanup = registerHandle(rightHandle);
+  var leftHandleCleanup = registerHandle(leftHandle);
+  return {
+    rightHandle: rightHandle,
+    leftHandle: leftHandle,
+    destroy: function destroy() {
+      rightHandleCleanup();
+      leftHandleCleanup();
+    }
+  };
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizingPluginKey = exports.createResizingPlugin = void 0;
+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(api) {
+  return new _safePlugin.SafePlugin({
+    key: resizingPluginKey,
+    props: {
+      markViews: {
+        breakout: function breakout(mark, view) {
+          return new _resizingMarkView.ResizingMarkView(mark, view, api);
+        }
+      }
+    }
+  });
+};

package/dist/es2019/breakoutPlugin.js

@@ -7,6 +7,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { createResizingPlugin } from './pm-plugins/resizing-plugin';
 import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
 import LayoutButton from './ui/LayoutButton';
 class BreakoutView {
@@ -62,7 +63,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(pluginInjectionApi, {
+function createPlugin(api, {
   dispatch
 }) {
   return new SafePlugin({
@@ -167,6 +168,12 @@ export const breakoutPlugin = ({
 }) => ({
   name: 'breakout',
   pmPlugins() {
+    if (editorExperiment('platform_editor_breakout_resizing', true)) {
+      return [{
+        name: 'breakout-resizing',
+        plugin: () => createResizingPlugin(api)
+      }];
+    }
     return [{
       name: 'breakout',
       plugin: props => createPlugin(api, props)

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

@@ -0,0 +1,136 @@
+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';
+import { createResizerCallbacks } from './resizer-callbacks';
+export const LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
+
+/**
+ *
+ */
+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, api) {
+    const dom = document.createElement('div');
+    const contentDOM = document.createElement('div');
+    contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
+    contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
+    dom.className = BreakoutCssClassName.BREAKOUT_MARK;
+    dom.setAttribute('data-layout', mark.attrs.mode);
+    dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
+    // dom - styles
+    dom.style.transform = 'none';
+    dom.style.display = 'grid';
+    dom.style.justifyContent = 'center';
+    dom.style.position = 'relative';
+
+    // contentDOM - styles
+    contentDOM.style.gridRow = '1';
+    contentDOM.style.gridColumn = '1';
+    if (mark.attrs.width) {
+      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(${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(${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(callbacks);
+    dom.prepend(leftHandle);
+    dom.appendChild(rightHandle);
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.view = view;
+    this.mark = mark;
+    this.destroyFn = destroy;
+  }
+
+  /**
+   *
+   * @example
+   */
+  ignoreMutation() {
+    return true;
+  }
+
+  /**
+   *
+   * @example
+   */
+  destroy() {
+    this.destroyFn();
+  }
+}
+const createPragmaticResizer = ({
+  onDragStart,
+  onDrag,
+  onDrop
+}) => {
+  const registerHandle = handleElement => {
+    return draggable({
+      element: handleElement,
+      onGenerateDragPreview: ({
+        nativeSetDragImage
+      }) => {
+        disableNativeDragPreview({
+          nativeSetDragImage
+        });
+        preventUnhandled.start();
+      },
+      onDragStart,
+      onDrag,
+      onDrop(args) {
+        preventUnhandled.stop();
+        onDrop(args);
+      }
+    });
+  };
+  const createHandle = side => {
+    const handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-right');
+    }
+    const handleInner = document.createElement('div');
+    handleInner.classList.add('pm-breakout-resize-handle-inner');
+    handle.appendChild(handleInner);
+    return handle;
+  };
+  const rightHandle = createHandle('right');
+  const leftHandle = createHandle('left');
+  const rightHandleCleanup = registerHandle(rightHandle);
+  const leftHandleCleanup = registerHandle(leftHandle);
+  return {
+    rightHandle,
+    leftHandle,
+    destroy: () => {
+      rightHandleCleanup();
+      leftHandleCleanup();
+    }
+  };
+};

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

@@ -0,0 +1,16 @@
+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 = api => {
+  return new SafePlugin({
+    key: resizingPluginKey,
+    props: {
+      markViews: {
+        breakout: (mark, view) => {
+          return new ResizingMarkView(mark, view, api);
+        }
+      }
+    }
+  });
+};

package/dist/esm/breakoutPlugin.js

@@ -12,6 +12,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { createResizingPlugin } from './pm-plugins/resizing-plugin';
 import { findSupportedNodeForBreakout } from './pm-plugins/utils/find-breakout-node';
 import LayoutButton from './ui/LayoutButton';
 var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
@@ -66,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: {
@@ -166,6 +167,14 @@ export var breakoutPlugin = function breakoutPlugin(_ref3) {
   return {
     name: 'breakout',
     pmPlugins: function pmPlugins() {
+      if (editorExperiment('platform_editor_breakout_resizing', true)) {
+        return [{
+          name: 'breakout-resizing',
+          plugin: function plugin() {
+            return createResizingPlugin(api);
+          }
+        }];
+      }
       return [{
         name: 'breakout',
         plugin: function plugin(props) {

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

@@ -0,0 +1,141 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+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';
+import { createResizerCallbacks } from './resizer-callbacks';
+export var LOCAL_RESIZE_PROPERTY = '--local-resizing-width';
+
+/**
+ *
+ */
+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, api) {
+    _classCallCheck(this, ResizingMarkView);
+    var dom = document.createElement('div');
+    var contentDOM = document.createElement('div');
+    contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
+    contentDOM.setAttribute('data-testid', 'ak-editor-breakout-mark-dom');
+    dom.className = BreakoutCssClassName.BREAKOUT_MARK;
+    dom.setAttribute('data-layout', mark.attrs.mode);
+    dom.setAttribute('data-testid', 'ak-editor-breakout-mark');
+    // dom - styles
+    dom.style.transform = 'none';
+    dom.style.display = 'grid';
+    dom.style.justifyContent = 'center';
+    dom.style.position = 'relative';
+
+    // contentDOM - styles
+    contentDOM.style.gridRow = '1';
+    contentDOM.style.gridColumn = '1';
+    if (mark.attrs.width) {
+      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(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(LOCAL_RESIZE_PROPERTY, ", var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))");
+      }
+    }
+    dom.appendChild(contentDOM);
+    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;
+    dom.prepend(leftHandle);
+    dom.appendChild(rightHandle);
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.view = view;
+    this.mark = mark;
+    this.destroyFn = destroy;
+  }
+
+  /**
+   *
+   * @example
+   */
+  return _createClass(ResizingMarkView, [{
+    key: "ignoreMutation",
+    value: function ignoreMutation() {
+      return true;
+    }
+
+    /**
+     *
+     * @example
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.destroyFn();
+    }
+  }]);
+}();
+var createPragmaticResizer = function createPragmaticResizer(_ref) {
+  var onDragStart = _ref.onDragStart,
+    onDrag = _ref.onDrag,
+    _onDrop = _ref.onDrop;
+  var registerHandle = function registerHandle(handleElement) {
+    return draggable({
+      element: handleElement,
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        disableNativeDragPreview({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        preventUnhandled.start();
+      },
+      onDragStart: onDragStart,
+      onDrag: onDrag,
+      onDrop: function onDrop(args) {
+        preventUnhandled.stop();
+        _onDrop(args);
+      }
+    });
+  };
+  var createHandle = function createHandle(side) {
+    var handle = document.createElement('div');
+    handle.contentEditable = 'false';
+    handle.classList.add('pm-breakout-resize-handle');
+    if (side === 'left') {
+      handle.classList.add('pm-breakout-resize-handle-left');
+    } else {
+      handle.classList.add('pm-breakout-resize-handle-right');
+    }
+    var handleInner = document.createElement('div');
+    handleInner.classList.add('pm-breakout-resize-handle-inner');
+    handle.appendChild(handleInner);
+    return handle;
+  };
+  var rightHandle = createHandle('right');
+  var leftHandle = createHandle('left');
+  var rightHandleCleanup = registerHandle(rightHandle);
+  var leftHandleCleanup = registerHandle(leftHandle);
+  return {
+    rightHandle: rightHandle,
+    leftHandle: leftHandle,
+    destroy: function destroy() {
+      rightHandleCleanup();
+      leftHandleCleanup();
+    }
+  };
+};

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

@@ -0,0 +1,16 @@
+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(api) {
+  return new SafePlugin({
+    key: resizingPluginKey,
+    props: {
+      markViews: {
+        breakout: function breakout(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

@@ -0,0 +1,35 @@
+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";
+/**
+ *
+ */
+export declare class ResizingMarkView implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    view: EditorView;
+    mark: Mark;
+    destroyFn: () => void;
+    /**
+     * 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, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
+    /**
+     *
+     * @example
+     */
+    ignoreMutation(): boolean;
+    /**
+     *
+     * @example
+     */
+    destroy(): void;
+}

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

@@ -0,0 +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: (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

@@ -0,0 +1,35 @@
+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";
+/**
+ *
+ */
+export declare class ResizingMarkView implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    view: EditorView;
+    mark: Mark;
+    destroyFn: () => void;
+    /**
+     * 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, api: ExtractInjectionAPI<BreakoutPlugin> | undefined);
+    /**
+     *
+     * @example
+     */
+    ignoreMutation(): boolean;
+    /**
+     *
+     * @example
+     */
+    destroy(): void;
+}

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

@@ -0,0 +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: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.2.4",
+	"version": "2.2.6",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,18 +34,20 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.13.0",
+		"@atlaskit/editor-common": "^105.8.0",
+		"@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",
-		"@atlaskit/icon": "^26.0.0",
+		"@atlaskit/icon": "^26.1.0",
 		"@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.19.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tmp-editor-statsig": "^4.24.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},