@atlaskit/editor-plugin-breakout 2.7.3 → 2.7.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.7.5
+
+### Patch Changes
+
+- [#170955](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170955)
+  [`de48855e17dbe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/de48855e17dbe) -
+  [ux] ED-28260 disable resize handles in live page view mode
+- Updated dependencies
+
+## 2.7.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.7.3
 
 ### Patch Changes

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

@@ -171,13 +171,18 @@ var createPragmaticResizer = exports.createPragmaticResizer = function createPra
   return {
     rightHandle: rightHandle.handle,
     leftHandle: leftHandle.handle,
-    destroy: function destroy() {
+    destroy: function destroy(isChangeToViewMode) {
       destroyFns.forEach(function (destroyFn) {
         return destroyFn();
       });
       unbindFns.forEach(function (unbindFn) {
         return unbindFn();
       });
+      if (isChangeToViewMode && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var _rightHandle$handle$p, _leftHandle$handle$pa;
+        (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 || _rightHandle$handle$p.removeChild(rightHandle.handle);
+        (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
+      }
     }
   };
 };

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizingMarkView = exports.LOCAL_RESIZE_PROPERTY = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pragmaticResizer = require("./pragmatic-resizer");
@@ -28,7 +28,9 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
    * ```
    */
   function ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
+    var _this = this;
     (0, _classCallCheck2.default)(this, ResizingMarkView);
+    (0, _defineProperty2.default)(this, "isResizingInitialised", false);
     var dom = document.createElement('div');
     var contentDOM = document.createElement('div');
     contentDOM.className = _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -69,33 +71,87 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
       }
     }
     dom.appendChild(contentDOM);
-    var callbacks = (0, _resizerCallbacks.createResizerCallbacks)({
-      dom: dom,
-      contentDOM: contentDOM,
-      view: view,
-      mark: mark,
-      api: api
-    });
-    this.intl = getIntl();
-    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
-    var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
-        target: contentDOM
-      }, callbacks), {}, {
-        intl: this.intl,
-        nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
-      })),
-      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;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+      var _api$editorViewMode;
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.view = view;
+      this.mark = mark;
+      this.intl = getIntl();
+      this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+      var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+      if (!isLiveViewMode) {
+        this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      }
+    } else {
+      var callbacks = (0, _resizerCallbacks.createResizerCallbacks)({
+        dom: dom,
+        contentDOM: contentDOM,
+        view: view,
+        mark: mark,
+        api: api
+      });
+      this.intl = getIntl();
+      this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+      var _createPragmaticResiz = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
+          target: contentDOM
+        }, callbacks), {}, {
+          intl: this.intl,
+          nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+        })),
+        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;
+    }
+    if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+      var _api$editorViewMode2;
+      this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
+        var _sharedState$nextShar, _sharedState$prevShar;
+        if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
+          var _sharedState$nextShar2, _sharedState$nextShar3;
+          if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && _this.isResizingInitialised) {
+            var _this$destroyFn;
+            (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
+            _this.isResizingInitialised = false;
+          } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
+            _this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+          }
+        }
+      });
+    }
   }
   return (0, _createClass2.default)(ResizingMarkView, [{
+    key: "setupResizerCallbacks",
+    value: function setupResizerCallbacks(dom, contentDOM, view, mark, api) {
+      var callbacks = (0, _resizerCallbacks.createResizerCallbacks)({
+        dom: dom,
+        contentDOM: contentDOM,
+        view: view,
+        mark: mark,
+        api: api
+      });
+      var _createPragmaticResiz2 = (0, _pragmaticResizer.createPragmaticResizer)(_objectSpread(_objectSpread({
+          target: contentDOM
+        }, callbacks), {}, {
+          intl: this.intl,
+          nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+        })),
+        leftHandle = _createPragmaticResiz2.leftHandle,
+        rightHandle = _createPragmaticResiz2.rightHandle,
+        destroy = _createPragmaticResiz2.destroy;
+      this.dom.prepend(leftHandle);
+      this.dom.appendChild(rightHandle);
+      this.destroyFn = destroy;
+      this.isResizingInitialised = true;
+    }
+  }, {
     key: "ignoreMutation",
     value: function ignoreMutation() {
       return true;
@@ -103,7 +159,12 @@ var ResizingMarkView = exports.ResizingMarkView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      this.destroyFn();
+      var _this$destroyFn2;
+      (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(this);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+        var _this$unsubscribeToVi;
+        (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
+      }
     }
   }]);
 }();

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

@@ -154,9 +154,14 @@ export const createPragmaticResizer = ({
   return {
     rightHandle: rightHandle.handle,
     leftHandle: leftHandle.handle,
-    destroy: () => {
+    destroy: isChangeToViewMode => {
       destroyFns.forEach(destroyFn => destroyFn());
       unbindFns.forEach(unbindFn => unbindFn());
+      if (isChangeToViewMode && fg('platform_editor_breakout_resizing_hello_release')) {
+        var _rightHandle$handle$p, _leftHandle$handle$pa;
+        (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 ? void 0 : _rightHandle$handle$p.removeChild(rightHandle.handle);
+        (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 ? void 0 : _leftHandle$handle$pa.removeChild(leftHandle.handle);
+      }
     }
   };
 };

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createPragmaticResizer } from './pragmatic-resizer';
@@ -16,6 +17,7 @@ export class ResizingMarkView {
    * ```
    */
   constructor(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
+    _defineProperty(this, "isResizingInitialised", false);
     const dom = document.createElement('div');
     const contentDOM = document.createElement('div');
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -56,6 +58,64 @@ export class ResizingMarkView {
       }
     }
     dom.appendChild(contentDOM);
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var _api$editorViewMode, _api$editorViewMode$s;
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.view = view;
+      this.mark = mark;
+      this.intl = getIntl();
+      this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+      const isLiveViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
+      if (!isLiveViewMode) {
+        this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      }
+    } else {
+      const callbacks = createResizerCallbacks({
+        dom,
+        contentDOM,
+        view,
+        mark,
+        api
+      });
+      this.intl = getIntl();
+      this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+      const {
+        leftHandle,
+        rightHandle,
+        destroy
+      } = createPragmaticResizer({
+        target: contentDOM,
+        ...callbacks,
+        intl: this.intl,
+        nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+      });
+      dom.prepend(leftHandle);
+      dom.appendChild(rightHandle);
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.view = view;
+      this.mark = mark;
+      this.destroyFn = destroy;
+    }
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var _api$editorViewMode2;
+      this.unsubscribeToViewModeChange = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(sharedState => {
+        var _sharedState$nextShar, _sharedState$prevShar;
+        if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
+          var _sharedState$nextShar2, _sharedState$nextShar3;
+          if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && this.isResizingInitialised) {
+            var _this$destroyFn;
+            (_this$destroyFn = this.destroyFn) === null || _this$destroyFn === void 0 ? void 0 : _this$destroyFn.call(this, true);
+            this.isResizingInitialised = false;
+          } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !this.isResizingInitialised) {
+            this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+          }
+        }
+      });
+    }
+  }
+  setupResizerCallbacks(dom, contentDOM, view, mark, api) {
     const callbacks = createResizerCallbacks({
       dom,
       contentDOM,
@@ -63,8 +123,6 @@ export class ResizingMarkView {
       mark,
       api
     });
-    this.intl = getIntl();
-    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
     const {
       leftHandle,
       rightHandle,
@@ -75,18 +133,20 @@ export class ResizingMarkView {
       intl: this.intl,
       nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
     });
-    dom.prepend(leftHandle);
-    dom.appendChild(rightHandle);
-    this.dom = dom;
-    this.contentDOM = contentDOM;
-    this.view = view;
-    this.mark = mark;
+    this.dom.prepend(leftHandle);
+    this.dom.appendChild(rightHandle);
     this.destroyFn = destroy;
+    this.isResizingInitialised = true;
   }
   ignoreMutation() {
     return true;
   }
   destroy() {
-    this.destroyFn();
+    var _this$destroyFn2;
+    (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 ? void 0 : _this$destroyFn2.call(this);
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var _this$unsubscribeToVi;
+      (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 ? void 0 : _this$unsubscribeToVi.call(this);
+    }
   }
 }

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

@@ -162,13 +162,18 @@ export var createPragmaticResizer = function createPragmaticResizer(_ref2) {
   return {
     rightHandle: rightHandle.handle,
     leftHandle: leftHandle.handle,
-    destroy: function destroy() {
+    destroy: function destroy(isChangeToViewMode) {
       destroyFns.forEach(function (destroyFn) {
         return destroyFn();
       });
       unbindFns.forEach(function (unbindFn) {
         return unbindFn();
       });
+      if (isChangeToViewMode && fg('platform_editor_breakout_resizing_hello_release')) {
+        var _rightHandle$handle$p, _leftHandle$handle$pa;
+        (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 || _rightHandle$handle$p.removeChild(rightHandle.handle);
+        (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
+      }
     }
   };
 };

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

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
@@ -21,7 +21,9 @@ export var ResizingMarkView = /*#__PURE__*/function () {
    * ```
    */
   function ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
+    var _this = this;
     _classCallCheck(this, ResizingMarkView);
+    _defineProperty(this, "isResizingInitialised", false);
     var dom = document.createElement('div');
     var contentDOM = document.createElement('div');
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -62,33 +64,87 @@ export var ResizingMarkView = /*#__PURE__*/function () {
       }
     }
     dom.appendChild(contentDOM);
-    var callbacks = createResizerCallbacks({
-      dom: dom,
-      contentDOM: contentDOM,
-      view: view,
-      mark: mark,
-      api: api
-    });
-    this.intl = getIntl();
-    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
-    var _createPragmaticResiz = createPragmaticResizer(_objectSpread(_objectSpread({
-        target: contentDOM
-      }, callbacks), {}, {
-        intl: this.intl,
-        nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
-      })),
-      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;
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var _api$editorViewMode;
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.view = view;
+      this.mark = mark;
+      this.intl = getIntl();
+      this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+      var isLiveViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+      if (!isLiveViewMode) {
+        this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+      }
+    } else {
+      var callbacks = createResizerCallbacks({
+        dom: dom,
+        contentDOM: contentDOM,
+        view: view,
+        mark: mark,
+        api: api
+      });
+      this.intl = getIntl();
+      this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+      var _createPragmaticResiz = createPragmaticResizer(_objectSpread(_objectSpread({
+          target: contentDOM
+        }, callbacks), {}, {
+          intl: this.intl,
+          nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+        })),
+        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;
+    }
+    if (fg('platform_editor_breakout_resizing_hello_release')) {
+      var _api$editorViewMode2;
+      this.unsubscribeToViewModeChange = api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(function (sharedState) {
+        var _sharedState$nextShar, _sharedState$prevShar;
+        if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
+          var _sharedState$nextShar2, _sharedState$nextShar3;
+          if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && _this.isResizingInitialised) {
+            var _this$destroyFn;
+            (_this$destroyFn = _this.destroyFn) === null || _this$destroyFn === void 0 || _this$destroyFn.call(_this, true);
+            _this.isResizingInitialised = false;
+          } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !_this.isResizingInitialised) {
+            _this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
+          }
+        }
+      });
+    }
   }
   return _createClass(ResizingMarkView, [{
+    key: "setupResizerCallbacks",
+    value: function setupResizerCallbacks(dom, contentDOM, view, mark, api) {
+      var callbacks = createResizerCallbacks({
+        dom: dom,
+        contentDOM: contentDOM,
+        view: view,
+        mark: mark,
+        api: api
+      });
+      var _createPragmaticResiz2 = createPragmaticResizer(_objectSpread(_objectSpread({
+          target: contentDOM
+        }, callbacks), {}, {
+          intl: this.intl,
+          nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
+        })),
+        leftHandle = _createPragmaticResiz2.leftHandle,
+        rightHandle = _createPragmaticResiz2.rightHandle,
+        destroy = _createPragmaticResiz2.destroy;
+      this.dom.prepend(leftHandle);
+      this.dom.appendChild(rightHandle);
+      this.destroyFn = destroy;
+      this.isResizingInitialised = true;
+    }
+  }, {
     key: "ignoreMutation",
     value: function ignoreMutation() {
       return true;
@@ -96,7 +152,12 @@ export var ResizingMarkView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      this.destroyFn();
+      var _this$destroyFn2;
+      (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 || _this$destroyFn2.call(this);
+      if (fg('platform_editor_breakout_resizing_hello_release')) {
+        var _this$unsubscribeToVi;
+        (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 || _this$unsubscribeToVi.call(this);
+      }
     }
   }]);
 }();

package/dist/types/breakoutPluginType.d.ts

@@ -1,14 +1,14 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
-import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+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 { 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';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { ActiveGuidelineKey } from './pm-plugins/resizing-plugin';
+import type { ActiveGuidelineKey } from './pm-plugins/resizing-plugin';
 export interface BreakoutPluginState {
     breakoutNode: ContentNodeWithPos | undefined;
     activeGuidelineKey: ActiveGuidelineKey | undefined;

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

@@ -1,5 +1,5 @@
-import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { NodeType } from '@atlaskit/editor-prosemirror/model';
 export declare const GUIDELINE_KEYS: {
     readonly lineLengthLeft: "grid_left";

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

@@ -12,5 +12,5 @@ export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onD
 }) => {
     rightHandle: HTMLDivElement;
     leftHandle: HTMLDivElement;
-    destroy: () => void;
+    destroy: (isChangeToViewMode?: boolean) => void;
 };

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

@@ -1,9 +1,9 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { BreakoutPlugin } from '../breakoutPluginType';
+import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import type { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { BreakoutPlugin } from '../breakoutPluginType';
 export declare function getProposedWidth({ initialWidth, location, api, source, }: {
     initialWidth: number;
     location: DragLocationHistory;

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

@@ -3,16 +3,18 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 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';
+import type { 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;
+    destroyFn: ((isChangeToViewMode?: boolean) => void) | undefined;
     intl: IntlShape;
     nodeViewPortalProviderAPI: PortalProviderAPI;
+    unsubscribeToViewModeChange: (() => void) | undefined;
+    isResizingInitialised: boolean;
     /**
      * Wrap node view in a resizing mark view
      * @param {Mark} mark - The breakout mark to resize
@@ -25,6 +27,7 @@ export declare class ResizingMarkView implements NodeView {
      * ```
      */
     constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
+    setupResizerCallbacks(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
     ignoreMutation(): boolean;
     destroy(): void;
 }

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

@@ -1,10 +1,9 @@
 import type { IntlShape } from 'react-intl-next';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { BreakoutPlugin } from '../breakoutPluginType';
-import type { BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
+import type { BreakoutPlugin, BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
 import { GUIDELINE_KEYS } from './get-guidelines';
 export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
 export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;

package/dist/types/ui/GuidelineLabel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { BreakoutPlugin } from '../breakoutPluginType';
+import type { BreakoutPlugin } from '../breakoutPluginType';
 type GuidelineLabelProps = {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
     editorView: EditorView;

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

@@ -1,14 +1,14 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
-import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
+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 { 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';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { ActiveGuidelineKey } from './pm-plugins/resizing-plugin';
+import type { ActiveGuidelineKey } from './pm-plugins/resizing-plugin';
 export interface BreakoutPluginState {
     breakoutNode: ContentNodeWithPos | undefined;
     activeGuidelineKey: ActiveGuidelineKey | undefined;

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

@@ -1,5 +1,5 @@
-import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { NodeType } from '@atlaskit/editor-prosemirror/model';
 export declare const GUIDELINE_KEYS: {
     readonly lineLengthLeft: "grid_left";

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

@@ -12,5 +12,5 @@ export declare const createPragmaticResizer: ({ target, onDragStart, onDrag, onD
 }) => {
     rightHandle: HTMLDivElement;
     leftHandle: HTMLDivElement;
-    destroy: () => void;
+    destroy: (isChangeToViewMode?: boolean) => void;
 };

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

@@ -1,9 +1,9 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { BreakoutPlugin } from '../breakoutPluginType';
+import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import type { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { BreakoutPlugin } from '../breakoutPluginType';
 export declare function getProposedWidth({ initialWidth, location, api, source, }: {
     initialWidth: number;
     location: DragLocationHistory;

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

@@ -3,16 +3,18 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 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';
+import type { 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;
+    destroyFn: ((isChangeToViewMode?: boolean) => void) | undefined;
     intl: IntlShape;
     nodeViewPortalProviderAPI: PortalProviderAPI;
+    unsubscribeToViewModeChange: (() => void) | undefined;
+    isResizingInitialised: boolean;
     /**
      * Wrap node view in a resizing mark view
      * @param {Mark} mark - The breakout mark to resize
@@ -25,6 +27,7 @@ export declare class ResizingMarkView implements NodeView {
      * ```
      */
     constructor(mark: Mark, view: EditorView, api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI);
+    setupResizerCallbacks(dom: HTMLElement, contentDOM: HTMLElement, view: EditorView, mark: Mark, api?: ExtractInjectionAPI<BreakoutPlugin>): void;
     ignoreMutation(): boolean;
     destroy(): void;
 }

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

@@ -1,10 +1,9 @@
 import type { IntlShape } from 'react-intl-next';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { BreakoutPlugin } from '../breakoutPluginType';
-import type { BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
+import type { BreakoutPlugin, BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
 import { GUIDELINE_KEYS } from './get-guidelines';
 export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
 export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;

package/dist/types-ts4.5/ui/GuidelineLabel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { BreakoutPlugin } from '../breakoutPluginType';
+import type { BreakoutPlugin } from '../breakoutPluginType';
 type GuidelineLabelProps = {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
     editorView: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.7.3",
+	"version": "2.7.5",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^106.6.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.17.0",
+		"@atlaskit/editor-common": "^106.9.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.19.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
@@ -48,8 +48,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^6.2.0",
-		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tmp-editor-statsig": "^7.0.0",
+		"@atlaskit/tokens": "^5.2.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",