@atlaskit/editor-plugin-breakout 2.2.3 → 2.2.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-breakout
 
+## 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
+
+- Updated dependencies
+
 ## 2.2.3
 
 ### 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; }
@@ -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)();
+          }
+        }];
+      }
       return [{
         name: 'breakout',
         plugin: function plugin(props) {

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

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizingMarkView = 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 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
+   * @example
+   * ```ts
+   * ```
+   */
+  function ResizingMarkView(mark, view) {
+    (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(localResizeProperty, ", ").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))))");
+      }
+      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))))");
+      }
+    }
+    dom.appendChild(contentDOM);
+    var _createPragmaticResiz = createPragmaticResizer({
+        onDragStart: function onDragStart() {},
+        onDrag: function onDrag() {},
+        onDrop: function onDrop() {}
+      }),
+      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() {
+  return new _safePlugin.SafePlugin({
+    key: resizingPluginKey,
+    props: {
+      markViews: {
+        breakout: function breakout(mark, view) {
+          return new _resizingMarkView.ResizingMarkView(mark, view);
+        }
+      }
+    }
+  });
+};

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 {
@@ -167,6 +168,12 @@ export const breakoutPlugin = ({
 }) => ({
   name: 'breakout',
   pmPlugins() {
+    if (editorExperiment('platform_editor_breakout_resizing', true)) {
+      return [{
+        name: 'breakout-resizing',
+        plugin: () => createResizingPlugin()
+      }];
+    }
     return [{
       name: 'breakout',
       plugin: props => createPlugin(api, props)

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

@@ -0,0 +1,131 @@
+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';
+
+/**
+ *
+ */
+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
+   * @example
+   * ```ts
+   * ```
+   */
+  constructor(mark, view) {
+    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(${localResizeProperty}, ${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))))`;
+      }
+      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))))`;
+      }
+    }
+    dom.appendChild(contentDOM);
+    const {
+      leftHandle,
+      rightHandle,
+      destroy
+    } = createPragmaticResizer({
+      onDragStart: () => {},
+      onDrag: () => {},
+      onDrop: () => {}
+    });
+    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 = () => {
+  return new SafePlugin({
+    key: resizingPluginKey,
+    props: {
+      markViews: {
+        breakout: (mark, view) => {
+          return new ResizingMarkView(mark, view);
+        }
+      }
+    }
+  });
+};

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(
@@ -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();
+          }
+        }];
+      }
       return [{
         name: 'breakout',
         plugin: function plugin(props) {

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

@@ -0,0 +1,136 @@
+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';
+var localResizeProperty = '--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
+   * @example
+   * ```ts
+   * ```
+   */
+  function ResizingMarkView(mark, view) {
+    _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(localResizeProperty, ", ").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))))");
+      }
+      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))))");
+      }
+    }
+    dom.appendChild(contentDOM);
+    var _createPragmaticResiz = createPragmaticResizer({
+        onDragStart: function onDragStart() {},
+        onDrag: function onDrag() {},
+        onDrop: function onDrop() {}
+      }),
+      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() {
+  return new SafePlugin({
+    key: resizingPluginKey,
+    props: {
+      markViews: {
+        breakout: function breakout(mark, view) {
+          return new ResizingMarkView(mark, view);
+        }
+      }
+    }
+  });
+};

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

@@ -0,0 +1,31 @@
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+/**
+ *
+ */
+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
+     * @example
+     * ```ts
+     * ```
+     */
+    constructor(mark: Mark, view: EditorView);
+    /**
+     *
+     * @example
+     */
+    ignoreMutation(): boolean;
+    /**
+     *
+     * @example
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,4 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const resizingPluginKey: PluginKey<any>;
+export declare const createResizingPlugin: () => SafePlugin<any>;

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

@@ -0,0 +1,31 @@
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+/**
+ *
+ */
+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
+     * @example
+     * ```ts
+     * ```
+     */
+    constructor(mark: Mark, view: EditorView);
+    /**
+     *
+     * @example
+     */
+    ignoreMutation(): boolean;
+    /**
+     *
+     * @example
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,4 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const resizingPluginKey: PluginKey<any>;
+export declare const createResizingPlugin: () => SafePlugin<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.2.3",
+	"version": "2.2.5",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,18 +34,19 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^104.1.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-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.23.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},