@atlaskit/editor-common 94.11.1 → 94.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-common
 
+## 94.12.0
+
+### Minor Changes
+
+- [#159777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159777)
+  [`64dae465493a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64dae465493a4) -
+  Add Breakout Resizing component to editor-common, add support in Layout plugin
+
+### Patch Changes
+
+- [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
+  [`70ef661bbbb4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70ef661bbbb4d) -
+  Update feature flag to gate
+
 ## 94.11.1
 
 ### Patch Changes

package/afm-jira/tsconfig.json

@@ -113,6 +113,9 @@
     {
       "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../../design-system/popper/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../../design-system/primitives/afm-jira/tsconfig.json"
     },

package/dist/cjs/card/MediaAndEmbedsToolbar/index.js

@@ -130,7 +130,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    var newAttrs = (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? // with extended experience, change alignment does not change media single width
     _objectSpread(_objectSpread({}, node.attrs), {}, {
       layout: layout
     }) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
@@ -163,7 +163,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
   };
 };
 var getToolbarLayout = function getToolbarLayout(layout) {
-  if (_utils2.nonWrappedLayouts.includes(layout) && (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')) {
+  if (_utils2.nonWrappedLayouts.includes(layout) && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
     return 'center';
   }
   return 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 = "94.11.1";
+var packageVersion = "94.12.0";
 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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ignoreResizerMutations = exports.BreakoutResizer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _styles = require("../styles");
+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) {
+  switch (node) {
+    case 'codeBlock':
+      return {
+        left: {
+          left: '-12px'
+        },
+        right: {
+          right: '-12px'
+        }
+      };
+    // expand and layout section elements have a negative margin applied
+    default:
+      var handleOffset = (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.LAYOUT_COLUMN_PADDING * 2 + 8 : _styles.LAYOUT_COLUMN_PADDING * 2;
+      return {
+        left: {
+          left: "-".concat(handleOffset, "px")
+        },
+        right: {
+          right: "-".concat(handleOffset, "px")
+        }
+      };
+  }
+};
+var ignoreResizerMutations = exports.ignoreResizerMutations = function ignoreResizerMutations(mutation) {
+  return mutation.target.classList.contains('resizer-item') || mutation.type === 'attributes' && mutation.attributeName === 'style';
+};
+
+/**
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
+ * correct ADF support.
+ *
+ * use platform_editor_advanced_layouts_breakout_resizing
+ */
+var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
+  var editorView = _ref.editorView,
+    node = _ref.node,
+    getPos = _ref.getPos,
+    getRef = _ref.getRef,
+    disabled = _ref.disabled,
+    getEditorWidth = _ref.getEditorWidth;
+  var _useState = (0, _react.useState)({
+      minWidth: undefined,
+      maxWidth: undefined,
+      isResizing: false
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    _useState2$ = _useState2[0],
+    minWidth = _useState2$.minWidth,
+    maxWidth = _useState2$.maxWidth,
+    isResizing = _useState2$.isResizing,
+    setResizingState = _useState2[1];
+  var handleResizeStart = (0, _react.useCallback)(function () {
+    var newMinWidth;
+    var newMaxWidth;
+    var widthState = getEditorWidth();
+    var dispatch = editorView.dispatch,
+      state = editorView.state;
+    if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
+      newMinWidth = Math.min(widthState.lineLength, _editorSharedStyles.akEditorDefaultLayoutWidth);
+      newMaxWidth = Math.min(widthState.width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth);
+    }
+    setResizingState({
+      isResizing: true,
+      minWidth: newMinWidth,
+      maxWidth: newMaxWidth
+    });
+    dispatch(state.tr.setMeta('is-resizer-resizing', true));
+  }, [getEditorWidth, editorView]);
+  var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var breakout = state.schema.marks.breakout;
+    var node = state.doc.nodeAt(pos);
+    var newTr = state.tr;
+    if (node && breakoutSupportedNodes.includes(node.type.name)) {
+      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: Math.max(newWidth, _editorSharedStyles.akEditorDefaultLayoutWidth)
+      })]);
+    }
+    newTr.setMeta('is-resizer-resizing', false);
+    dispatch(newTr);
+    setResizingState({
+      isResizing: false,
+      minWidth: undefined,
+      maxWidth: undefined
+    });
+  }, [editorView, getPos]);
+  if (disabled) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "breakout-resizer-editor-view-wrapper",
+      ref: function ref(_ref2) {
+        return getRef && getRef(_ref2);
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_Resizer.default, {
+    enable: {
+      left: true,
+      right: true
+    },
+    handleStyles: getHandleStyle(node),
+    minWidth: minWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: isResizing ? {
+      // during resize need to center as the resizer-item gets an explicit width value
+      left: '50%',
+      transform: 'translateX(-50%)'
+    } : undefined,
+    resizeRatio: 2,
+    handleResizeStart: handleResizeStart,
+    handleResizeStop: handleResizeStop,
+    handleSize: "small",
+    childrenDOMRef: getRef
+  });
+};

package/dist/cjs/resizer/Resizer.js

@@ -15,7 +15,7 @@ var _classnames3 = _interopRequireDefault(require("classnames"));
 var _reResizable = require("re-resizable");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _resizer = require("../styles/shared/resizer");
-var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef"];
 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; }
 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; }
@@ -70,6 +70,7 @@ var ResizerNext = function ResizerNext(props, ref) {
     handleTooltipContent = props.handleTooltipContent,
     _props$needExtendedRe = props.needExtendedResizeZone,
     needExtendedResizeZone = _props$needExtendedRe === void 0 ? true : _props$needExtendedRe,
+    childrenDOMRef = props.childrenDOMRef,
     otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onResizeStart = (0, _react.useCallback)(function (event) {
     // prevent creating a drag event on Firefox
@@ -78,6 +79,9 @@ var ResizerNext = function ResizerNext(props, ref) {
     handleResizeStart();
   }, [handleResizeStart]);
   var onResize = (0, _react.useCallback)(function (_event, _direction, _elementRef, delta) {
+    if (!handleResize) {
+      return;
+    }
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -181,7 +185,7 @@ var ResizerNext = function ResizerNext(props, ref) {
   return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, (0, _extends2.default)({
     ref: resizable,
     size: {
-      width: width,
+      width: width !== null && width !== void 0 ? width : 'auto',
       // just content itself (no paddings)
       height: 'auto'
     }
@@ -199,7 +203,10 @@ var ResizerNext = function ResizerNext(props, ref) {
     snap: snap,
     handleComponent: handleComponent
   }, otherProps), /*#__PURE__*/_react.default.createElement("span", {
-    className: resizerZoneClassName
+    className: resizerZoneClassName,
+    ref: function ref(_ref) {
+      return childrenDOMRef && childrenDOMRef(_ref);
+    }
   }, children));
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(ResizerNext);

package/dist/cjs/resizer/index.js

@@ -4,10 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "BreakoutResizer", {
+  enumerable: true,
+  get: function get() {
+    return _BreakoutResizer.BreakoutResizer;
+  }
+});
 Object.defineProperty(exports, "ResizerNext", {
   enumerable: true,
   get: function get() {
     return _Resizer.default;
   }
 });
-var _Resizer = _interopRequireDefault(require("./Resizer"));
+Object.defineProperty(exports, "ignoreResizerMutations", {
+  enumerable: true,
+  get: function get() {
+    return _BreakoutResizer.ignoreResizerMutations;
+  }
+});
+var _Resizer = _interopRequireDefault(require("./Resizer"));
+var _BreakoutResizer = require("./BreakoutResizer");

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

@@ -24,7 +24,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 = "94.11.1";
+var packageVersion = "94.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -114,7 +114,7 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
       return false;
     }
     const nodeWidth = getNodeWidth(node, state.schema);
-    const newAttrs = fg('platform.editor.media.extended-resize-experience') ?
+    const newAttrs = fg('platform_editor_media_extended_resize_experience') ?
     // with extended experience, change alignment does not change media single width
     {
       ...node.attrs,
@@ -159,7 +159,7 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
   };
 };
 const getToolbarLayout = layout => {
-  if (nonWrappedLayouts.includes(layout) && fg('platform.editor.media.extended-resize-experience')) {
+  if (nonWrappedLayouts.includes(layout) && fg('platform_editor_media_extended_resize_experience')) {
     return 'center';
   }
   return 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 = "94.11.1";
+const packageVersion = "94.12.0";
 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

@@ -0,0 +1,133 @@
+import React, { useCallback, useState } from 'react';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { LAYOUT_COLUMN_PADDING } from '../styles';
+import Resizer from './Resizer';
+const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
+const getHandleStyle = node => {
+  switch (node) {
+    case 'codeBlock':
+      return {
+        left: {
+          left: '-12px'
+        },
+        right: {
+          right: '-12px'
+        }
+      };
+    // expand and layout section elements have a negative margin applied
+    default:
+      const handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_COLUMN_PADDING * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
+      return {
+        left: {
+          left: `-${handleOffset}px`
+        },
+        right: {
+          right: `-${handleOffset}px`
+        }
+      };
+  }
+};
+export const ignoreResizerMutations = mutation => {
+  return mutation.target.classList.contains('resizer-item') || mutation.type === 'attributes' && mutation.attributeName === 'style';
+};
+
+/**
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
+ * correct ADF support.
+ *
+ * use platform_editor_advanced_layouts_breakout_resizing
+ */
+const BreakoutResizer = ({
+  editorView,
+  node,
+  getPos,
+  getRef,
+  disabled,
+  getEditorWidth
+}) => {
+  const [{
+    minWidth,
+    maxWidth,
+    isResizing
+  }, setResizingState] = useState({
+    minWidth: undefined,
+    maxWidth: undefined,
+    isResizing: false
+  });
+  const handleResizeStart = useCallback(() => {
+    let newMinWidth;
+    let newMaxWidth;
+    const widthState = getEditorWidth();
+    const {
+      dispatch,
+      state
+    } = editorView;
+    if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
+      newMinWidth = Math.min(widthState.lineLength, akEditorDefaultLayoutWidth);
+      newMaxWidth = Math.min(widthState.width - akEditorGutterPaddingDynamic() * 2 - akEditorGutterPadding, akEditorFullWidthLayoutWidth);
+    }
+    setResizingState({
+      isResizing: true,
+      minWidth: newMinWidth,
+      maxWidth: newMaxWidth
+    });
+    dispatch(state.tr.setMeta('is-resizer-resizing', true));
+  }, [getEditorWidth, editorView]);
+  const handleResizeStop = useCallback((originalState, delta) => {
+    const newWidth = originalState.width + delta.width;
+    const pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    const {
+      state,
+      dispatch
+    } = editorView;
+    const {
+      breakout
+    } = state.schema.marks;
+    const node = state.doc.nodeAt(pos);
+    const newTr = state.tr;
+    if (node && breakoutSupportedNodes.includes(node.type.name)) {
+      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: Math.max(newWidth, akEditorDefaultLayoutWidth)
+      })]);
+    }
+    newTr.setMeta('is-resizer-resizing', false);
+    dispatch(newTr);
+    setResizingState({
+      isResizing: false,
+      minWidth: undefined,
+      maxWidth: undefined
+    });
+  }, [editorView, getPos]);
+  if (disabled) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "breakout-resizer-editor-view-wrapper",
+      ref: ref => getRef && getRef(ref)
+    });
+  }
+  return /*#__PURE__*/React.createElement(Resizer, {
+    enable: {
+      left: true,
+      right: true
+    },
+    handleStyles: getHandleStyle(node),
+    minWidth: minWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: isResizing ? {
+      // during resize need to center as the resizer-item gets an explicit width value
+      left: '50%',
+      transform: 'translateX(-50%)'
+    } : undefined,
+    resizeRatio: 2,
+    handleResizeStart: handleResizeStart,
+    handleResizeStop: handleResizeStop,
+    handleSize: "small",
+    childrenDOMRef: getRef
+  });
+};
+export { BreakoutResizer };

package/dist/es2019/resizer/Resizer.js

@@ -45,6 +45,7 @@ const ResizerNext = (props, ref) => {
     handleHighlight = 'none',
     handleTooltipContent,
     needExtendedResizeZone = true,
+    childrenDOMRef,
     ...otherProps
   } = props;
   const onResizeStart = useCallback(event => {
@@ -54,6 +55,9 @@ const ResizerNext = (props, ref) => {
     handleResizeStart();
   }, [handleResizeStart]);
   const onResize = useCallback((_event, _direction, _elementRef, delta) => {
+    if (!handleResize) {
+      return;
+    }
     const resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -174,7 +178,7 @@ const ResizerNext = (props, ref) => {
   return /*#__PURE__*/React.createElement(Resizable, _extends({
     ref: resizable,
     size: {
-      width,
+      width: width !== null && width !== void 0 ? width : 'auto',
       // just content itself (no paddings)
       height: 'auto'
     }
@@ -192,7 +196,8 @@ const ResizerNext = (props, ref) => {
     snap: snap,
     handleComponent: handleComponent
   }, otherProps), /*#__PURE__*/React.createElement("span", {
-    className: resizerZoneClassName
+    className: resizerZoneClassName,
+    ref: ref => childrenDOMRef && childrenDOMRef(ref)
   }, children));
 };
 export default /*#__PURE__*/forwardRef(ResizerNext);

package/dist/es2019/resizer/index.js

@@ -1 +1,2 @@
-export { default as ResizerNext } from './Resizer';
+export { default as ResizerNext } from './Resizer';
+export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';

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 = "94.11.1";
+const packageVersion = "94.12.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/card/MediaAndEmbedsToolbar/index.js

@@ -121,7 +121,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = fg('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    var newAttrs = fg('platform_editor_media_extended_resize_experience') ? // with extended experience, change alignment does not change media single width
     _objectSpread(_objectSpread({}, node.attrs), {}, {
       layout: layout
     }) : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
@@ -154,7 +154,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
   };
 };
 var getToolbarLayout = function getToolbarLayout(layout) {
-  if (nonWrappedLayouts.includes(layout) && fg('platform.editor.media.extended-resize-experience')) {
+  if (nonWrappedLayouts.includes(layout) && fg('platform_editor_media_extended_resize_experience')) {
     return 'center';
   }
   return 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 = "94.11.1";
+var packageVersion = "94.12.0";
 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

@@ -0,0 +1,131 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { LAYOUT_COLUMN_PADDING } from '../styles';
+import Resizer from './Resizer';
+var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
+var getHandleStyle = function getHandleStyle(node) {
+  switch (node) {
+    case 'codeBlock':
+      return {
+        left: {
+          left: '-12px'
+        },
+        right: {
+          right: '-12px'
+        }
+      };
+    // expand and layout section elements have a negative margin applied
+    default:
+      var handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_COLUMN_PADDING * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
+      return {
+        left: {
+          left: "-".concat(handleOffset, "px")
+        },
+        right: {
+          right: "-".concat(handleOffset, "px")
+        }
+      };
+  }
+};
+export var ignoreResizerMutations = function ignoreResizerMutations(mutation) {
+  return mutation.target.classList.contains('resizer-item') || mutation.type === 'attributes' && mutation.attributeName === 'style';
+};
+
+/**
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
+ * correct ADF support.
+ *
+ * use platform_editor_advanced_layouts_breakout_resizing
+ */
+var BreakoutResizer = function BreakoutResizer(_ref) {
+  var editorView = _ref.editorView,
+    node = _ref.node,
+    getPos = _ref.getPos,
+    getRef = _ref.getRef,
+    disabled = _ref.disabled,
+    getEditorWidth = _ref.getEditorWidth;
+  var _useState = useState({
+      minWidth: undefined,
+      maxWidth: undefined,
+      isResizing: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$ = _useState2[0],
+    minWidth = _useState2$.minWidth,
+    maxWidth = _useState2$.maxWidth,
+    isResizing = _useState2$.isResizing,
+    setResizingState = _useState2[1];
+  var handleResizeStart = useCallback(function () {
+    var newMinWidth;
+    var newMaxWidth;
+    var widthState = getEditorWidth();
+    var dispatch = editorView.dispatch,
+      state = editorView.state;
+    if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
+      newMinWidth = Math.min(widthState.lineLength, akEditorDefaultLayoutWidth);
+      newMaxWidth = Math.min(widthState.width - akEditorGutterPaddingDynamic() * 2 - akEditorGutterPadding, akEditorFullWidthLayoutWidth);
+    }
+    setResizingState({
+      isResizing: true,
+      minWidth: newMinWidth,
+      maxWidth: newMaxWidth
+    });
+    dispatch(state.tr.setMeta('is-resizer-resizing', true));
+  }, [getEditorWidth, editorView]);
+  var handleResizeStop = useCallback(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (pos === undefined) {
+      return;
+    }
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var breakout = state.schema.marks.breakout;
+    var node = state.doc.nodeAt(pos);
+    var newTr = state.tr;
+    if (node && breakoutSupportedNodes.includes(node.type.name)) {
+      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+        width: Math.max(newWidth, akEditorDefaultLayoutWidth)
+      })]);
+    }
+    newTr.setMeta('is-resizer-resizing', false);
+    dispatch(newTr);
+    setResizingState({
+      isResizing: false,
+      minWidth: undefined,
+      maxWidth: undefined
+    });
+  }, [editorView, getPos]);
+  if (disabled) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "breakout-resizer-editor-view-wrapper",
+      ref: function ref(_ref2) {
+        return getRef && getRef(_ref2);
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(Resizer, {
+    enable: {
+      left: true,
+      right: true
+    },
+    handleStyles: getHandleStyle(node),
+    minWidth: minWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: isResizing ? {
+      // during resize need to center as the resizer-item gets an explicit width value
+      left: '50%',
+      transform: 'translateX(-50%)'
+    } : undefined,
+    resizeRatio: 2,
+    handleResizeStart: handleResizeStart,
+    handleResizeStop: handleResizeStop,
+    handleSize: "small",
+    childrenDOMRef: getRef
+  });
+};
+export { BreakoutResizer };

package/dist/esm/resizer/Resizer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef"];
 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 React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -60,6 +60,7 @@ var ResizerNext = function ResizerNext(props, ref) {
     handleTooltipContent = props.handleTooltipContent,
     _props$needExtendedRe = props.needExtendedResizeZone,
     needExtendedResizeZone = _props$needExtendedRe === void 0 ? true : _props$needExtendedRe,
+    childrenDOMRef = props.childrenDOMRef,
     otherProps = _objectWithoutProperties(props, _excluded);
   var onResizeStart = useCallback(function (event) {
     // prevent creating a drag event on Firefox
@@ -68,6 +69,9 @@ var ResizerNext = function ResizerNext(props, ref) {
     handleResizeStart();
   }, [handleResizeStart]);
   var onResize = useCallback(function (_event, _direction, _elementRef, delta) {
+    if (!handleResize) {
+      return;
+    }
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -171,7 +175,7 @@ var ResizerNext = function ResizerNext(props, ref) {
   return /*#__PURE__*/React.createElement(Resizable, _extends({
     ref: resizable,
     size: {
-      width: width,
+      width: width !== null && width !== void 0 ? width : 'auto',
       // just content itself (no paddings)
       height: 'auto'
     }
@@ -189,7 +193,10 @@ var ResizerNext = function ResizerNext(props, ref) {
     snap: snap,
     handleComponent: handleComponent
   }, otherProps), /*#__PURE__*/React.createElement("span", {
-    className: resizerZoneClassName
+    className: resizerZoneClassName,
+    ref: function ref(_ref) {
+      return childrenDOMRef && childrenDOMRef(_ref);
+    }
   }, children));
 };
 export default /*#__PURE__*/forwardRef(ResizerNext);

package/dist/esm/resizer/index.js

@@ -1 +1,2 @@
-export { default as ResizerNext } from './Resizer';
+export { default as ResizerNext } from './Resizer';
+export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';

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

@@ -21,7 +21,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 = "94.11.1";
+var packageVersion = "94.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/resizer/BreakoutResizer.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorContainerWidth, type getPosHandlerNode } from '../types';
+type BreakoutSupportedNodes = 'layoutSection' | 'expand' | 'codeBlock';
+export declare const ignoreResizerMutations: (mutation: MutationRecord | {
+    type: 'selection';
+    target: Element;
+}) => boolean;
+/**
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
+ * correct ADF support.
+ *
+ * use platform_editor_advanced_layouts_breakout_resizing
+ */
+declare const BreakoutResizer: ({ editorView, node, getPos, getRef, disabled, getEditorWidth, }: {
+    editorView: EditorView;
+    node: BreakoutSupportedNodes;
+    getPos: getPosHandlerNode;
+    getRef?: ((ref: HTMLElement | null) => void) | undefined;
+    disabled: boolean;
+    getEditorWidth: () => EditorContainerWidth | undefined;
+}) => JSX.Element;
+export { BreakoutResizer };

package/dist/types/resizer/Resizer.d.ts

@@ -5,7 +5,7 @@ import type { EnabledHandles, HandleAlignmentMethod, HandleHighlight, HandlePosi
 export type ResizerProps = {
     className?: string;
     enable: EnabledHandles;
-    width: number;
+    width?: number;
     minWidth?: number | string;
     maxWidth?: number | string;
     snap?: Snap;
@@ -14,7 +14,7 @@ export type ResizerProps = {
     appearance?: ResizerAppearance;
     isHandleVisible?: boolean;
     handleResizeStart: HandleResizeStart;
-    handleResize: HandleResize;
+    handleResize?: HandleResize;
     handleResizeStop: HandleResize;
     /**
      * This can be used to override the css class name applied to the resize handle.
@@ -53,6 +53,14 @@ export type ResizerProps = {
      * control if extended resize zone is needed, by default we apply it to the resizer
      */
     needExtendedResizeZone?: boolean;
+    /**
+     * Additional styles to be applied to the resizer component
+     */
+    style?: CSSProperties;
+    /**
+     * Access to the inner most element which wraps passed children
+     */
+    childrenDOMRef?: (ref: HTMLElement | null) => void;
 };
 type forwardRefType = {
     getResizerThumbEl: () => HTMLButtonElement | null;

package/dist/types/resizer/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ResizerNext } from './Resizer';
 export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
+export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';

package/dist/types-ts4.5/resizer/BreakoutResizer.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorContainerWidth, type getPosHandlerNode } from '../types';
+type BreakoutSupportedNodes = 'layoutSection' | 'expand' | 'codeBlock';
+export declare const ignoreResizerMutations: (mutation: MutationRecord | {
+    type: 'selection';
+    target: Element;
+}) => boolean;
+/**
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
+ * correct ADF support.
+ *
+ * use platform_editor_advanced_layouts_breakout_resizing
+ */
+declare const BreakoutResizer: ({ editorView, node, getPos, getRef, disabled, getEditorWidth, }: {
+    editorView: EditorView;
+    node: BreakoutSupportedNodes;
+    getPos: getPosHandlerNode;
+    getRef?: ((ref: HTMLElement | null) => void) | undefined;
+    disabled: boolean;
+    getEditorWidth: () => EditorContainerWidth | undefined;
+}) => JSX.Element;
+export { BreakoutResizer };

package/dist/types-ts4.5/resizer/Resizer.d.ts

@@ -5,7 +5,7 @@ import type { EnabledHandles, HandleAlignmentMethod, HandleHighlight, HandlePosi
 export type ResizerProps = {
     className?: string;
     enable: EnabledHandles;
-    width: number;
+    width?: number;
     minWidth?: number | string;
     maxWidth?: number | string;
     snap?: Snap;
@@ -14,7 +14,7 @@ export type ResizerProps = {
     appearance?: ResizerAppearance;
     isHandleVisible?: boolean;
     handleResizeStart: HandleResizeStart;
-    handleResize: HandleResize;
+    handleResize?: HandleResize;
     handleResizeStop: HandleResize;
     /**
      * This can be used to override the css class name applied to the resize handle.
@@ -53,6 +53,14 @@ export type ResizerProps = {
      * control if extended resize zone is needed, by default we apply it to the resizer
      */
     needExtendedResizeZone?: boolean;
+    /**
+     * Additional styles to be applied to the resizer component
+     */
+    style?: CSSProperties;
+    /**
+     * Access to the inner most element which wraps passed children
+     */
+    childrenDOMRef?: (ref: HTMLElement | null) => void;
 };
 type forwardRefType = {
     getResizerThumbEl: () => HTMLButtonElement | null;

package/dist/types-ts4.5/resizer/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ResizerNext } from './Resizer';
 export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
+export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "94.11.1",
+	"version": "94.12.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -226,7 +226,7 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.editor.media.extended-resize-experience": {
+		"platform_editor_media_extended_resize_experience": {
 			"type": "boolean"
 		},
 		"platform_editor_breakout_use_css": {