@atlaskit/editor-common 96.7.1 → 96.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 96.8.1
+
+### Patch Changes
+
+- [#181266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/181266)
+  [`4b4994d4a2620`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b4994d4a2620) -
+  ED-25613: Keyboard shortcuts to resize layout
+- Updated dependencies
+
+## 96.8.0
+
+### Minor Changes
+
+- [#180960](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/180960)
+  [`3ee72a54bc1bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ee72a54bc1bb) -
+  ED-26040 fix editor layout padding issue
+
 ## 96.7.1
 
 ### Patch Changes

package/dist/cjs/messages/layout.js

@@ -80,5 +80,10 @@ var toolbarMessages = exports.toolbarMessages = (0, _reactIntlNext.defineMessage
     id: 'fabric.editor.layout.columnOption',
     defaultMessage: '{count, plural, one { Column} other {{count} Columns}}',
     description: 'column option text for layout'
+  },
+  resizeLayout: {
+    id: 'fabric.editor.layout.resizeLayout',
+    defaultMessage: 'Resize layout',
+    description: 'resize layout'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.7.1";
+var packageVersion = "96.8.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/resizer/BreakoutResizer.js

@@ -8,16 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.ignoreResizerMutations = exports.BreakoutResizer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _analytics = require("../analytics");
 var _styles = require("../styles");
+var _browser = require("../utils/browser");
 var _Resizer = _interopRequireDefault(require("./Resizer"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 var getHandleStyle = function getHandleStyle(node) {
+  var layoutMarginOffset = (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_2') ? 12 : 8;
   switch (node) {
     case 'codeBlock':
       return {
@@ -30,7 +33,7 @@ var getHandleStyle = function getHandleStyle(node) {
       };
     // expand and layout section elements have a negative margin applied
     default:
-      var handleOffset = (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.LAYOUT_SECTION_MARGIN * 2 + 8 : _styles.LAYOUT_COLUMN_PADDING * 2;
+      var handleOffset = (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.LAYOUT_SECTION_MARGIN * 2 + layoutMarginOffset : _styles.LAYOUT_COLUMN_PADDING * 2;
       return {
         left: {
           left: "-".concat(handleOffset, "px"),
@@ -70,6 +73,7 @@ var resizingStyles = {
 var defaultStyles = {
   display: 'grid'
 };
+var RESIZE_STEP_VALUE = 10;
 
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
@@ -98,6 +102,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     maxWidth = _useState2$.maxWidth,
     isResizing = _useState2$.isResizing,
     setResizingState = _useState2[1];
+  var areResizeMetaKeysPressed = (0, _react.useRef)(false);
+  var resizerRef = (0, _react.useRef)(null);
 
   // Relying on re-renders caused by selection changes inside/around node
   var isSelectionInNode = (0, _react.useMemo)(function () {
@@ -175,6 +181,99 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       maxWidth: undefined
     });
   }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+  var handleEscape = (0, _react.useCallback)(function () {
+    editorView === null || editorView === void 0 || editorView.focus();
+  }, [editorView]);
+  var handleLayoutSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
+    if (!parentRef) {
+      return;
+    }
+    var resizerItem = parentRef.closest('.resizer-item');
+    if (!(resizerItem instanceof HTMLElement)) {
+      return;
+    }
+    var newWidth = resizerItem.offsetWidth + step;
+    if (maxWidth && newWidth > maxWidth || minWidth && newWidth < minWidth) {
+      return;
+    }
+    handleResizeStop({
+      width: resizerItem.offsetWidth,
+      x: 0,
+      y: 0,
+      height: 0
+    }, {
+      width: step,
+      height: 0
+    });
+  }, [handleResizeStop, maxWidth, minWidth, parentRef]);
+  var resizeHandleKeyDownHandler = (0, _react.useCallback)(function (event) {
+    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
+    if (event.altKey || metaKey || event.shiftKey) {
+      areResizeMetaKeysPressed.current = true;
+    }
+    if (event.altKey && metaKey) {
+      if (isBracketKey) {
+        event.preventDefault();
+        handleLayoutSizeChangeOnKeypress(event.code === 'BracketRight' ? RESIZE_STEP_VALUE : -RESIZE_STEP_VALUE);
+      }
+    } else if (!areResizeMetaKeysPressed.current) {
+      handleEscape();
+    }
+  }, [handleEscape, handleLayoutSizeChangeOnKeypress]);
+  var resizeHandleKeyUpHandler = (0, _react.useCallback)(function (event) {
+    if (event.altKey || event.metaKey) {
+      areResizeMetaKeysPressed.current = false;
+    }
+    return;
+  }, [areResizeMetaKeysPressed]);
+  var resizerGlobalKeyDownHandler = (0, _react.useCallback)(function (event) {
+    if (!resizerRef.current) {
+      return;
+    }
+    var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+    var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
+    var isTargetResizeHandle = event.target instanceof HTMLElement && event.target.classList.contains('resizer-handle-thumb');
+    if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR' || isTargetResizeHandle && (event.altKey || metaKey || event.shiftKey)) {
+      event.preventDefault();
+      if (!resizeHandleThumbEl) {
+        return;
+      }
+      resizeHandleThumbEl.focus();
+      resizeHandleThumbEl.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+    }
+  }, [resizerRef]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!resizerRef.current || !editorView) {
+      return;
+    }
+    var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+    if (!resizeHandleThumbEl) {
+      return;
+    }
+    if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_a11y')) {
+      var editorViewDom = editorView.dom;
+      var unbindEditorViewDom = (0, _bindEventListener.bind)(editorViewDom, {
+        type: 'keydown',
+        listener: resizerGlobalKeyDownHandler
+      });
+      var unbindResizeHandle = (0, _bindEventListener.bindAll)(resizeHandleThumbEl, [{
+        type: 'keydown',
+        listener: resizeHandleKeyDownHandler
+      }, {
+        type: 'keyup',
+        listener: resizeHandleKeyUpHandler
+      }]);
+      return function () {
+        unbindEditorViewDom();
+        unbindResizeHandle();
+      };
+    }
+  }, [editorView, resizerGlobalKeyDownHandler, resizeHandleKeyDownHandler, resizeHandleKeyUpHandler]);
   (0, _react.useEffect)(function () {
     // clean up gap cursor if node was unmounting when resizing (e.g. during collab)
     return function () {
@@ -190,6 +289,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     });
   }
   return /*#__PURE__*/_react.default.createElement(_Resizer.default, {
+    ref: resizerRef,
     enable: {
       left: true,
       right: true

package/dist/cjs/ui/DropList/index.js

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.7.1";
+var packageVersion = "96.8.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/messages/layout.js

@@ -74,5 +74,10 @@ export const toolbarMessages = defineMessages({
     id: 'fabric.editor.layout.columnOption',
     defaultMessage: '{count, plural, one { Column} other {{count} Columns}}',
     description: 'column option text for layout'
+  },
+  resizeLayout: {
+    id: 'fabric.editor.layout.resizeLayout',
+    defaultMessage: 'Resize layout',
+    description: 'resize layout'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "96.7.1";
+const packageVersion = "96.8.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/resizer/BreakoutResizer.js

@@ -1,12 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { bind, bindAll } from 'bind-event-listener';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
+import { browser } from '../utils/browser';
 import Resizer from './Resizer';
 const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 const getHandleStyle = node => {
+  const layoutMarginOffset = fg('platform_editor_advanced_layouts_post_fix_patch_2') ? 12 : 8;
   switch (node) {
     case 'codeBlock':
       return {
@@ -19,7 +22,7 @@ const getHandleStyle = node => {
       };
     // expand and layout section elements have a negative margin applied
     default:
-      const handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_SECTION_MARGIN * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
+      const handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_SECTION_MARGIN * 2 + layoutMarginOffset : LAYOUT_COLUMN_PADDING * 2;
       return {
         left: {
           left: `-${handleOffset}px`,
@@ -59,6 +62,7 @@ const resizingStyles = {
 const defaultStyles = {
   display: 'grid'
 };
+const RESIZE_STEP_VALUE = 10;
 
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
@@ -86,6 +90,8 @@ const BreakoutResizer = ({
     maxWidth: undefined,
     isResizing: false
   });
+  const areResizeMetaKeysPressed = useRef(false);
+  const resizerRef = useRef(null);
 
   // Relying on re-renders caused by selection changes inside/around node
   const isSelectionInNode = useMemo(() => {
@@ -170,6 +176,99 @@ const BreakoutResizer = ({
       maxWidth: undefined
     });
   }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+  const handleEscape = useCallback(() => {
+    editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+  }, [editorView]);
+  const handleLayoutSizeChangeOnKeypress = useCallback(step => {
+    if (!parentRef) {
+      return;
+    }
+    const resizerItem = parentRef.closest('.resizer-item');
+    if (!(resizerItem instanceof HTMLElement)) {
+      return;
+    }
+    const newWidth = resizerItem.offsetWidth + step;
+    if (maxWidth && newWidth > maxWidth || minWidth && newWidth < minWidth) {
+      return;
+    }
+    handleResizeStop({
+      width: resizerItem.offsetWidth,
+      x: 0,
+      y: 0,
+      height: 0
+    }, {
+      width: step,
+      height: 0
+    });
+  }, [handleResizeStop, maxWidth, minWidth, parentRef]);
+  const resizeHandleKeyDownHandler = useCallback(event => {
+    const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    if (event.altKey || metaKey || event.shiftKey) {
+      areResizeMetaKeysPressed.current = true;
+    }
+    if (event.altKey && metaKey) {
+      if (isBracketKey) {
+        event.preventDefault();
+        handleLayoutSizeChangeOnKeypress(event.code === 'BracketRight' ? RESIZE_STEP_VALUE : -RESIZE_STEP_VALUE);
+      }
+    } else if (!areResizeMetaKeysPressed.current) {
+      handleEscape();
+    }
+  }, [handleEscape, handleLayoutSizeChangeOnKeypress]);
+  const resizeHandleKeyUpHandler = useCallback(event => {
+    if (event.altKey || event.metaKey) {
+      areResizeMetaKeysPressed.current = false;
+    }
+    return;
+  }, [areResizeMetaKeysPressed]);
+  const resizerGlobalKeyDownHandler = useCallback(event => {
+    if (!resizerRef.current) {
+      return;
+    }
+    const resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+    const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    const isTargetResizeHandle = event.target instanceof HTMLElement && event.target.classList.contains('resizer-handle-thumb');
+    if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR' || isTargetResizeHandle && (event.altKey || metaKey || event.shiftKey)) {
+      event.preventDefault();
+      if (!resizeHandleThumbEl) {
+        return;
+      }
+      resizeHandleThumbEl.focus();
+      resizeHandleThumbEl.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+    }
+  }, [resizerRef]);
+  useLayoutEffect(() => {
+    if (!resizerRef.current || !editorView) {
+      return;
+    }
+    const resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+    if (!resizeHandleThumbEl) {
+      return;
+    }
+    if (fg('platform_editor_advanced_layouts_a11y')) {
+      const editorViewDom = editorView.dom;
+      const unbindEditorViewDom = bind(editorViewDom, {
+        type: 'keydown',
+        listener: resizerGlobalKeyDownHandler
+      });
+      const unbindResizeHandle = bindAll(resizeHandleThumbEl, [{
+        type: 'keydown',
+        listener: resizeHandleKeyDownHandler
+      }, {
+        type: 'keyup',
+        listener: resizeHandleKeyUpHandler
+      }]);
+      return () => {
+        unbindEditorViewDom();
+        unbindResizeHandle();
+      };
+    }
+  }, [editorView, resizerGlobalKeyDownHandler, resizeHandleKeyDownHandler, resizeHandleKeyUpHandler]);
   useEffect(() => {
     // clean up gap cursor if node was unmounting when resizing (e.g. during collab)
     return () => {
@@ -183,6 +282,7 @@ const BreakoutResizer = ({
     });
   }
   return /*#__PURE__*/React.createElement(Resizer, {
+    ref: resizerRef,
     enable: {
       left: true,
       right: true

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "96.7.1";
+const packageVersion = "96.8.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/messages/layout.js

@@ -74,5 +74,10 @@ export var toolbarMessages = defineMessages({
     id: 'fabric.editor.layout.columnOption',
     defaultMessage: '{count, plural, one { Column} other {{count} Columns}}',
     description: 'column option text for layout'
+  },
+  resizeLayout: {
+    id: 'fabric.editor.layout.resizeLayout',
+    defaultMessage: 'Resize layout',
+    description: 'resize layout'
   }
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "96.7.1";
+var packageVersion = "96.8.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/resizer/BreakoutResizer.js

@@ -1,13 +1,16 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect } from 'react';
+import { bind, bindAll } from 'bind-event-listener';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
+import { browser } from '../utils/browser';
 import Resizer from './Resizer';
 var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 var getHandleStyle = function getHandleStyle(node) {
+  var layoutMarginOffset = fg('platform_editor_advanced_layouts_post_fix_patch_2') ? 12 : 8;
   switch (node) {
     case 'codeBlock':
       return {
@@ -20,7 +23,7 @@ var getHandleStyle = function getHandleStyle(node) {
       };
     // expand and layout section elements have a negative margin applied
     default:
-      var handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_SECTION_MARGIN * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
+      var handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_SECTION_MARGIN * 2 + layoutMarginOffset : LAYOUT_COLUMN_PADDING * 2;
       return {
         left: {
           left: "-".concat(handleOffset, "px"),
@@ -60,6 +63,7 @@ var resizingStyles = {
 var defaultStyles = {
   display: 'grid'
 };
+var RESIZE_STEP_VALUE = 10;
 
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
@@ -88,6 +92,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     maxWidth = _useState2$.maxWidth,
     isResizing = _useState2$.isResizing,
     setResizingState = _useState2[1];
+  var areResizeMetaKeysPressed = useRef(false);
+  var resizerRef = useRef(null);
 
   // Relying on re-renders caused by selection changes inside/around node
   var isSelectionInNode = useMemo(function () {
@@ -165,6 +171,99 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
       maxWidth: undefined
     });
   }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+  var handleEscape = useCallback(function () {
+    editorView === null || editorView === void 0 || editorView.focus();
+  }, [editorView]);
+  var handleLayoutSizeChangeOnKeypress = useCallback(function (step) {
+    if (!parentRef) {
+      return;
+    }
+    var resizerItem = parentRef.closest('.resizer-item');
+    if (!(resizerItem instanceof HTMLElement)) {
+      return;
+    }
+    var newWidth = resizerItem.offsetWidth + step;
+    if (maxWidth && newWidth > maxWidth || minWidth && newWidth < minWidth) {
+      return;
+    }
+    handleResizeStop({
+      width: resizerItem.offsetWidth,
+      x: 0,
+      y: 0,
+      height: 0
+    }, {
+      width: step,
+      height: 0
+    });
+  }, [handleResizeStop, maxWidth, minWidth, parentRef]);
+  var resizeHandleKeyDownHandler = useCallback(function (event) {
+    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    if (event.altKey || metaKey || event.shiftKey) {
+      areResizeMetaKeysPressed.current = true;
+    }
+    if (event.altKey && metaKey) {
+      if (isBracketKey) {
+        event.preventDefault();
+        handleLayoutSizeChangeOnKeypress(event.code === 'BracketRight' ? RESIZE_STEP_VALUE : -RESIZE_STEP_VALUE);
+      }
+    } else if (!areResizeMetaKeysPressed.current) {
+      handleEscape();
+    }
+  }, [handleEscape, handleLayoutSizeChangeOnKeypress]);
+  var resizeHandleKeyUpHandler = useCallback(function (event) {
+    if (event.altKey || event.metaKey) {
+      areResizeMetaKeysPressed.current = false;
+    }
+    return;
+  }, [areResizeMetaKeysPressed]);
+  var resizerGlobalKeyDownHandler = useCallback(function (event) {
+    if (!resizerRef.current) {
+      return;
+    }
+    var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+    var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    var isTargetResizeHandle = event.target instanceof HTMLElement && event.target.classList.contains('resizer-handle-thumb');
+    if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR' || isTargetResizeHandle && (event.altKey || metaKey || event.shiftKey)) {
+      event.preventDefault();
+      if (!resizeHandleThumbEl) {
+        return;
+      }
+      resizeHandleThumbEl.focus();
+      resizeHandleThumbEl.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+    }
+  }, [resizerRef]);
+  useLayoutEffect(function () {
+    if (!resizerRef.current || !editorView) {
+      return;
+    }
+    var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
+    if (!resizeHandleThumbEl) {
+      return;
+    }
+    if (fg('platform_editor_advanced_layouts_a11y')) {
+      var editorViewDom = editorView.dom;
+      var unbindEditorViewDom = bind(editorViewDom, {
+        type: 'keydown',
+        listener: resizerGlobalKeyDownHandler
+      });
+      var unbindResizeHandle = bindAll(resizeHandleThumbEl, [{
+        type: 'keydown',
+        listener: resizeHandleKeyDownHandler
+      }, {
+        type: 'keyup',
+        listener: resizeHandleKeyUpHandler
+      }]);
+      return function () {
+        unbindEditorViewDom();
+        unbindResizeHandle();
+      };
+    }
+  }, [editorView, resizerGlobalKeyDownHandler, resizeHandleKeyDownHandler, resizeHandleKeyUpHandler]);
   useEffect(function () {
     // clean up gap cursor if node was unmounting when resizing (e.g. during collab)
     return function () {
@@ -180,6 +279,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(Resizer, {
+    ref: resizerRef,
     enable: {
       left: true,
       right: true

package/dist/esm/ui/DropList/index.js

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "96.7.1";
+var packageVersion = "96.8.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/messages/layout.d.ts

@@ -74,4 +74,9 @@ export declare const toolbarMessages: {
         defaultMessage: string;
         description: string;
     };
+    resizeLayout: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/messages/layout.d.ts

@@ -74,4 +74,9 @@ export declare const toolbarMessages: {
         defaultMessage: string;
         description: string;
     };
+    resizeLayout: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "96.7.1",
+	"version": "96.8.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -140,7 +140,7 @@
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^67.0.0",
 		"@atlaskit/media-ui": "^27.1.0",
-		"@atlaskit/media-viewer": "49.5.0",
+		"@atlaskit/media-viewer": "49.5.1",
 		"@atlaskit/mention": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^12.2.0",
@@ -163,6 +163,7 @@
 		"@sentry/browser": "^6.18.2",
 		"@sentry/integrations": "^6.18.2",
 		"@sentry/types": "^6.18.2",
+		"bind-event-listener": "^3.0.0",
 		"chromatism": "^2.6.0",
 		"classnames": "^2.2.5",
 		"clipboard-polyfill": "4.0.1",
@@ -304,6 +305,9 @@
 		"platform_editor_selection_toolbar_scroll_fix": {
 			"type": "boolean"
 		},
+		"platform_editor_advanced_layouts_a11y": {
+			"type": "boolean"
+		},
 		"platform_editor_legacy_content_macro": {
 			"type": "boolean"
 		},