@atlaskit/editor-common 94.11.0 → 94.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/afm-jira/tsconfig.json +3 -0
  3. package/dist/cjs/card/MediaAndEmbedsToolbar/index.js +2 -2
  4. package/dist/cjs/extensibility/MultiBodiedExtension/action-api.js +5 -18
  5. package/dist/cjs/monitoring/error.js +1 -1
  6. package/dist/cjs/resizer/BreakoutResizer.js +140 -0
  7. package/dist/cjs/resizer/Resizer.js +10 -3
  8. package/dist/cjs/resizer/index.js +14 -1
  9. package/dist/cjs/ui/DropList/index.js +1 -1
  10. package/dist/es2019/card/MediaAndEmbedsToolbar/index.js +2 -2
  11. package/dist/es2019/extensibility/MultiBodiedExtension/action-api.js +7 -25
  12. package/dist/es2019/monitoring/error.js +1 -1
  13. package/dist/es2019/resizer/BreakoutResizer.js +133 -0
  14. package/dist/es2019/resizer/Resizer.js +7 -2
  15. package/dist/es2019/resizer/index.js +2 -1
  16. package/dist/es2019/ui/DropList/index.js +1 -1
  17. package/dist/esm/card/MediaAndEmbedsToolbar/index.js +2 -2
  18. package/dist/esm/extensibility/MultiBodiedExtension/action-api.js +5 -18
  19. package/dist/esm/monitoring/error.js +1 -1
  20. package/dist/esm/resizer/BreakoutResizer.js +131 -0
  21. package/dist/esm/resizer/Resizer.js +10 -3
  22. package/dist/esm/resizer/index.js +2 -1
  23. package/dist/esm/ui/DropList/index.js +1 -1
  24. package/dist/types/resizer/BreakoutResizer.d.ts +23 -0
  25. package/dist/types/resizer/Resizer.d.ts +10 -2
  26. package/dist/types/resizer/index.d.ts +1 -0
  27. package/dist/types-ts4.5/resizer/BreakoutResizer.d.ts +23 -0
  28. package/dist/types-ts4.5/resizer/Resizer.d.ts +10 -2
  29. package/dist/types-ts4.5/resizer/index.d.ts +1 -0
  30. package/package.json +5 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 94.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#159777](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159777)
8
+ [`64dae465493a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64dae465493a4) -
9
+ Add Breakout Resizing component to editor-common, add support in Layout plugin
10
+
11
+ ### Patch Changes
12
+
13
+ - [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
14
+ [`70ef661bbbb4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70ef661bbbb4d) -
15
+ Update feature flag to gate
16
+
17
+ ## 94.11.1
18
+
19
+ ### Patch Changes
20
+
21
+ - [#159827](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159827)
22
+ [`8e43150e942f6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e43150e942f6) -
23
+ [ux] Clean up FF for updateParams API change
24
+ - Updated dependencies
25
+
3
26
  ## 94.11.0
4
27
 
5
28
  ### Minor Changes
@@ -113,6 +113,9 @@
113
113
  {
114
114
  "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
115
115
  },
116
+ {
117
+ "path": "../../../design-system/popper/afm-jira/tsconfig.json"
118
+ },
116
119
  {
117
120
  "path": "../../../design-system/primitives/afm-jira/tsconfig.json"
118
121
  },
@@ -130,7 +130,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
130
130
  return false;
131
131
  }
132
132
  var nodeWidth = getNodeWidth(node, state.schema);
133
- var newAttrs = (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
133
+ var newAttrs = (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? // with extended experience, change alignment does not change media single width
134
134
  _objectSpread(_objectSpread({}, node.attrs), {}, {
135
135
  layout: layout
136
136
  }) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
@@ -163,7 +163,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
163
163
  };
164
164
  };
165
165
  var getToolbarLayout = function getToolbarLayout(layout) {
166
- if (_utils2.nonWrappedLayouts.includes(layout) && (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')) {
166
+ if (_utils2.nonWrappedLayouts.includes(layout) && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
167
167
  return 'center';
168
168
  }
169
169
  return layout;
@@ -8,7 +8,6 @@ exports.useMultiBodiedExtensionActions = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _state = require("@atlaskit/editor-prosemirror/state");
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
11
  var _analytics = require("../../analytics");
13
12
  var _utils = require("./utils");
14
13
  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; }
@@ -117,23 +116,11 @@ var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = fu
117
116
  // We are retaining node.attrs to keep the node type and extension key
118
117
  // and only updating the parameters coming in from the user
119
118
  // parameters will contain only macroParams information
120
- var updatedParameters;
121
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.mbe-update-params-change')) {
122
- // With the new feature flag, we will not be de-structuring macroParams,
123
- // and will directly replace/overwrite the macroParams with the parameters
124
- updatedParameters = _objectSpread(_objectSpread({}, node.attrs), {}, {
125
- parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
126
- macroParams: parameters
127
- })
128
- });
129
- } else {
130
- var _node$attrs;
131
- updatedParameters = _objectSpread(_objectSpread({}, node.attrs), {}, {
132
- parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
133
- macroParams: _objectSpread(_objectSpread({}, (_node$attrs = node.attrs) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.parameters) === null || _node$attrs === void 0 ? void 0 : _node$attrs.macroParams), parameters)
134
- })
135
- });
136
- }
119
+ var updatedParameters = _objectSpread(_objectSpread({}, node.attrs), {}, {
120
+ parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
121
+ macroParams: parameters
122
+ })
123
+ });
137
124
  var tr = state.tr.setNodeMarkup(pos, null, updatedParameters);
138
125
  dispatch(tr);
139
126
  if (eventDispatcher) {
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
17
17
  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; }
18
18
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
19
19
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
20
- var packageVersion = "94.11.0";
20
+ var packageVersion = "94.12.0";
21
21
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
22
22
  // Remove URL as it has UGC
23
23
  // TODO: Sanitise the URL instead of just removing it
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.ignoreResizerMutations = exports.BreakoutResizer = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _react = _interopRequireWildcard(require("react"));
11
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
+ var _styles = require("../styles");
14
+ var _Resizer = _interopRequireDefault(require("./Resizer"));
15
+ 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); }
16
+ 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; }
17
+ var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
18
+ var getHandleStyle = function getHandleStyle(node) {
19
+ switch (node) {
20
+ case 'codeBlock':
21
+ return {
22
+ left: {
23
+ left: '-12px'
24
+ },
25
+ right: {
26
+ right: '-12px'
27
+ }
28
+ };
29
+ // expand and layout section elements have a negative margin applied
30
+ default:
31
+ var handleOffset = (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.LAYOUT_COLUMN_PADDING * 2 + 8 : _styles.LAYOUT_COLUMN_PADDING * 2;
32
+ return {
33
+ left: {
34
+ left: "-".concat(handleOffset, "px")
35
+ },
36
+ right: {
37
+ right: "-".concat(handleOffset, "px")
38
+ }
39
+ };
40
+ }
41
+ };
42
+ var ignoreResizerMutations = exports.ignoreResizerMutations = function ignoreResizerMutations(mutation) {
43
+ return mutation.target.classList.contains('resizer-item') || mutation.type === 'attributes' && mutation.attributeName === 'style';
44
+ };
45
+
46
+ /**
47
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
48
+ * correct ADF support.
49
+ *
50
+ * use platform_editor_advanced_layouts_breakout_resizing
51
+ */
52
+ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
53
+ var editorView = _ref.editorView,
54
+ node = _ref.node,
55
+ getPos = _ref.getPos,
56
+ getRef = _ref.getRef,
57
+ disabled = _ref.disabled,
58
+ getEditorWidth = _ref.getEditorWidth;
59
+ var _useState = (0, _react.useState)({
60
+ minWidth: undefined,
61
+ maxWidth: undefined,
62
+ isResizing: false
63
+ }),
64
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
65
+ _useState2$ = _useState2[0],
66
+ minWidth = _useState2$.minWidth,
67
+ maxWidth = _useState2$.maxWidth,
68
+ isResizing = _useState2$.isResizing,
69
+ setResizingState = _useState2[1];
70
+ var handleResizeStart = (0, _react.useCallback)(function () {
71
+ var newMinWidth;
72
+ var newMaxWidth;
73
+ var widthState = getEditorWidth();
74
+ var dispatch = editorView.dispatch,
75
+ state = editorView.state;
76
+ if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
77
+ newMinWidth = Math.min(widthState.lineLength, _editorSharedStyles.akEditorDefaultLayoutWidth);
78
+ newMaxWidth = Math.min(widthState.width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth);
79
+ }
80
+ setResizingState({
81
+ isResizing: true,
82
+ minWidth: newMinWidth,
83
+ maxWidth: newMaxWidth
84
+ });
85
+ dispatch(state.tr.setMeta('is-resizer-resizing', true));
86
+ }, [getEditorWidth, editorView]);
87
+ var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
88
+ var newWidth = originalState.width + delta.width;
89
+ var pos = getPos();
90
+ if (pos === undefined) {
91
+ return;
92
+ }
93
+ var state = editorView.state,
94
+ dispatch = editorView.dispatch;
95
+ var breakout = state.schema.marks.breakout;
96
+ var node = state.doc.nodeAt(pos);
97
+ var newTr = state.tr;
98
+ if (node && breakoutSupportedNodes.includes(node.type.name)) {
99
+ newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
100
+ width: Math.max(newWidth, _editorSharedStyles.akEditorDefaultLayoutWidth)
101
+ })]);
102
+ }
103
+ newTr.setMeta('is-resizer-resizing', false);
104
+ dispatch(newTr);
105
+ setResizingState({
106
+ isResizing: false,
107
+ minWidth: undefined,
108
+ maxWidth: undefined
109
+ });
110
+ }, [editorView, getPos]);
111
+ if (disabled) {
112
+ return /*#__PURE__*/_react.default.createElement("div", {
113
+ "data-testid": "breakout-resizer-editor-view-wrapper",
114
+ ref: function ref(_ref2) {
115
+ return getRef && getRef(_ref2);
116
+ }
117
+ });
118
+ }
119
+ return /*#__PURE__*/_react.default.createElement(_Resizer.default, {
120
+ enable: {
121
+ left: true,
122
+ right: true
123
+ },
124
+ handleStyles: getHandleStyle(node),
125
+ minWidth: minWidth,
126
+ maxWidth: maxWidth
127
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
128
+ ,
129
+ style: isResizing ? {
130
+ // during resize need to center as the resizer-item gets an explicit width value
131
+ left: '50%',
132
+ transform: 'translateX(-50%)'
133
+ } : undefined,
134
+ resizeRatio: 2,
135
+ handleResizeStart: handleResizeStart,
136
+ handleResizeStop: handleResizeStop,
137
+ handleSize: "small",
138
+ childrenDOMRef: getRef
139
+ });
140
+ };
@@ -15,7 +15,7 @@ var _classnames3 = _interopRequireDefault(require("classnames"));
15
15
  var _reResizable = require("re-resizable");
16
16
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
17
17
  var _resizer = require("../styles/shared/resizer");
18
- var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone"];
18
+ var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef"];
19
19
  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); }
20
20
  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; }
21
21
  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) {
70
70
  handleTooltipContent = props.handleTooltipContent,
71
71
  _props$needExtendedRe = props.needExtendedResizeZone,
72
72
  needExtendedResizeZone = _props$needExtendedRe === void 0 ? true : _props$needExtendedRe,
73
+ childrenDOMRef = props.childrenDOMRef,
73
74
  otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
74
75
  var onResizeStart = (0, _react.useCallback)(function (event) {
75
76
  // prevent creating a drag event on Firefox
@@ -78,6 +79,9 @@ var ResizerNext = function ResizerNext(props, ref) {
78
79
  handleResizeStart();
79
80
  }, [handleResizeStart]);
80
81
  var onResize = (0, _react.useCallback)(function (_event, _direction, _elementRef, delta) {
82
+ if (!handleResize) {
83
+ return;
84
+ }
81
85
  var resizableCurrent = resizable.current;
82
86
  if (!resizableCurrent || !resizableCurrent.state.original) {
83
87
  return;
@@ -181,7 +185,7 @@ var ResizerNext = function ResizerNext(props, ref) {
181
185
  return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, (0, _extends2.default)({
182
186
  ref: resizable,
183
187
  size: {
184
- width: width,
188
+ width: width !== null && width !== void 0 ? width : 'auto',
185
189
  // just content itself (no paddings)
186
190
  height: 'auto'
187
191
  }
@@ -199,7 +203,10 @@ var ResizerNext = function ResizerNext(props, ref) {
199
203
  snap: snap,
200
204
  handleComponent: handleComponent
201
205
  }, otherProps), /*#__PURE__*/_react.default.createElement("span", {
202
- className: resizerZoneClassName
206
+ className: resizerZoneClassName,
207
+ ref: function ref(_ref) {
208
+ return childrenDOMRef && childrenDOMRef(_ref);
209
+ }
203
210
  }, children));
204
211
  };
205
212
  var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(ResizerNext);
@@ -4,10 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
+ Object.defineProperty(exports, "BreakoutResizer", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _BreakoutResizer.BreakoutResizer;
11
+ }
12
+ });
7
13
  Object.defineProperty(exports, "ResizerNext", {
8
14
  enumerable: true,
9
15
  get: function get() {
10
16
  return _Resizer.default;
11
17
  }
12
18
  });
13
- var _Resizer = _interopRequireDefault(require("./Resizer"));
19
+ Object.defineProperty(exports, "ignoreResizerMutations", {
20
+ enumerable: true,
21
+ get: function get() {
22
+ return _BreakoutResizer.ignoreResizerMutations;
23
+ }
24
+ });
25
+ var _Resizer = _interopRequireDefault(require("./Resizer"));
26
+ var _BreakoutResizer = require("./BreakoutResizer");
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
24
24
  * @jsx jsx
25
25
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "94.11.0";
27
+ var packageVersion = "94.12.0";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var DropList = /*#__PURE__*/function (_Component) {
@@ -114,7 +114,7 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
114
114
  return false;
115
115
  }
116
116
  const nodeWidth = getNodeWidth(node, state.schema);
117
- const newAttrs = fg('platform.editor.media.extended-resize-experience') ?
117
+ const newAttrs = fg('platform_editor_media_extended_resize_experience') ?
118
118
  // with extended experience, change alignment does not change media single width
119
119
  {
120
120
  ...node.attrs,
@@ -159,7 +159,7 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
159
159
  };
160
160
  };
161
161
  const getToolbarLayout = layout => {
162
- if (nonWrappedLayouts.includes(layout) && fg('platform.editor.media.extended-resize-experience')) {
162
+ if (nonWrappedLayouts.includes(layout) && fg('platform_editor_media_extended_resize_experience')) {
163
163
  return 'center';
164
164
  }
165
165
  return layout;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
3
  import { ACTION } from '../../analytics';
5
4
  import { sendMBEAnalyticsEvent } from './utils';
6
5
  export const useMultiBodiedExtensionActions = ({
@@ -116,30 +115,13 @@ export const useMultiBodiedExtensionActions = ({
116
115
  // We are retaining node.attrs to keep the node type and extension key
117
116
  // and only updating the parameters coming in from the user
118
117
  // parameters will contain only macroParams information
119
- let updatedParameters;
120
- if (getBooleanFF('platform.editor.mbe-update-params-change')) {
121
- // With the new feature flag, we will not be de-structuring macroParams,
122
- // and will directly replace/overwrite the macroParams with the parameters
123
- updatedParameters = {
124
- ...node.attrs,
125
- parameters: {
126
- ...node.attrs.parameters,
127
- macroParams: parameters
128
- }
129
- };
130
- } else {
131
- var _node$attrs, _node$attrs$parameter;
132
- updatedParameters = {
133
- ...node.attrs,
134
- parameters: {
135
- ...node.attrs.parameters,
136
- macroParams: {
137
- ...((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : (_node$attrs$parameter = _node$attrs.parameters) === null || _node$attrs$parameter === void 0 ? void 0 : _node$attrs$parameter.macroParams),
138
- ...parameters
139
- }
140
- }
141
- };
142
- }
118
+ const updatedParameters = {
119
+ ...node.attrs,
120
+ parameters: {
121
+ ...node.attrs.parameters,
122
+ macroParams: parameters
123
+ }
124
+ };
143
125
  const tr = state.tr.setNodeMarkup(pos, null, updatedParameters);
144
126
  dispatch(tr);
145
127
  if (eventDispatcher) {
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "94.11.0";
4
+ const packageVersion = "94.12.0";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // TODO: Sanitise the URL instead of just removing it
@@ -0,0 +1,133 @@
1
+ import React, { useCallback, useState } from 'react';
2
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
3
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
+ import { LAYOUT_COLUMN_PADDING } from '../styles';
5
+ import Resizer from './Resizer';
6
+ const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
7
+ const getHandleStyle = node => {
8
+ switch (node) {
9
+ case 'codeBlock':
10
+ return {
11
+ left: {
12
+ left: '-12px'
13
+ },
14
+ right: {
15
+ right: '-12px'
16
+ }
17
+ };
18
+ // expand and layout section elements have a negative margin applied
19
+ default:
20
+ const handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_COLUMN_PADDING * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
21
+ return {
22
+ left: {
23
+ left: `-${handleOffset}px`
24
+ },
25
+ right: {
26
+ right: `-${handleOffset}px`
27
+ }
28
+ };
29
+ }
30
+ };
31
+ export const ignoreResizerMutations = mutation => {
32
+ return mutation.target.classList.contains('resizer-item') || mutation.type === 'attributes' && mutation.attributeName === 'style';
33
+ };
34
+
35
+ /**
36
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
37
+ * correct ADF support.
38
+ *
39
+ * use platform_editor_advanced_layouts_breakout_resizing
40
+ */
41
+ const BreakoutResizer = ({
42
+ editorView,
43
+ node,
44
+ getPos,
45
+ getRef,
46
+ disabled,
47
+ getEditorWidth
48
+ }) => {
49
+ const [{
50
+ minWidth,
51
+ maxWidth,
52
+ isResizing
53
+ }, setResizingState] = useState({
54
+ minWidth: undefined,
55
+ maxWidth: undefined,
56
+ isResizing: false
57
+ });
58
+ const handleResizeStart = useCallback(() => {
59
+ let newMinWidth;
60
+ let newMaxWidth;
61
+ const widthState = getEditorWidth();
62
+ const {
63
+ dispatch,
64
+ state
65
+ } = editorView;
66
+ if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
67
+ newMinWidth = Math.min(widthState.lineLength, akEditorDefaultLayoutWidth);
68
+ newMaxWidth = Math.min(widthState.width - akEditorGutterPaddingDynamic() * 2 - akEditorGutterPadding, akEditorFullWidthLayoutWidth);
69
+ }
70
+ setResizingState({
71
+ isResizing: true,
72
+ minWidth: newMinWidth,
73
+ maxWidth: newMaxWidth
74
+ });
75
+ dispatch(state.tr.setMeta('is-resizer-resizing', true));
76
+ }, [getEditorWidth, editorView]);
77
+ const handleResizeStop = useCallback((originalState, delta) => {
78
+ const newWidth = originalState.width + delta.width;
79
+ const pos = getPos();
80
+ if (pos === undefined) {
81
+ return;
82
+ }
83
+ const {
84
+ state,
85
+ dispatch
86
+ } = editorView;
87
+ const {
88
+ breakout
89
+ } = state.schema.marks;
90
+ const node = state.doc.nodeAt(pos);
91
+ const newTr = state.tr;
92
+ if (node && breakoutSupportedNodes.includes(node.type.name)) {
93
+ newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
94
+ width: Math.max(newWidth, akEditorDefaultLayoutWidth)
95
+ })]);
96
+ }
97
+ newTr.setMeta('is-resizer-resizing', false);
98
+ dispatch(newTr);
99
+ setResizingState({
100
+ isResizing: false,
101
+ minWidth: undefined,
102
+ maxWidth: undefined
103
+ });
104
+ }, [editorView, getPos]);
105
+ if (disabled) {
106
+ return /*#__PURE__*/React.createElement("div", {
107
+ "data-testid": "breakout-resizer-editor-view-wrapper",
108
+ ref: ref => getRef && getRef(ref)
109
+ });
110
+ }
111
+ return /*#__PURE__*/React.createElement(Resizer, {
112
+ enable: {
113
+ left: true,
114
+ right: true
115
+ },
116
+ handleStyles: getHandleStyle(node),
117
+ minWidth: minWidth,
118
+ maxWidth: maxWidth
119
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
120
+ ,
121
+ style: isResizing ? {
122
+ // during resize need to center as the resizer-item gets an explicit width value
123
+ left: '50%',
124
+ transform: 'translateX(-50%)'
125
+ } : undefined,
126
+ resizeRatio: 2,
127
+ handleResizeStart: handleResizeStart,
128
+ handleResizeStop: handleResizeStop,
129
+ handleSize: "small",
130
+ childrenDOMRef: getRef
131
+ });
132
+ };
133
+ export { BreakoutResizer };
@@ -45,6 +45,7 @@ const ResizerNext = (props, ref) => {
45
45
  handleHighlight = 'none',
46
46
  handleTooltipContent,
47
47
  needExtendedResizeZone = true,
48
+ childrenDOMRef,
48
49
  ...otherProps
49
50
  } = props;
50
51
  const onResizeStart = useCallback(event => {
@@ -54,6 +55,9 @@ const ResizerNext = (props, ref) => {
54
55
  handleResizeStart();
55
56
  }, [handleResizeStart]);
56
57
  const onResize = useCallback((_event, _direction, _elementRef, delta) => {
58
+ if (!handleResize) {
59
+ return;
60
+ }
57
61
  const resizableCurrent = resizable.current;
58
62
  if (!resizableCurrent || !resizableCurrent.state.original) {
59
63
  return;
@@ -174,7 +178,7 @@ const ResizerNext = (props, ref) => {
174
178
  return /*#__PURE__*/React.createElement(Resizable, _extends({
175
179
  ref: resizable,
176
180
  size: {
177
- width,
181
+ width: width !== null && width !== void 0 ? width : 'auto',
178
182
  // just content itself (no paddings)
179
183
  height: 'auto'
180
184
  }
@@ -192,7 +196,8 @@ const ResizerNext = (props, ref) => {
192
196
  snap: snap,
193
197
  handleComponent: handleComponent
194
198
  }, otherProps), /*#__PURE__*/React.createElement("span", {
195
- className: resizerZoneClassName
199
+ className: resizerZoneClassName,
200
+ ref: ref => childrenDOMRef && childrenDOMRef(ref)
196
201
  }, children));
197
202
  };
198
203
  export default /*#__PURE__*/forwardRef(ResizerNext);
@@ -1 +1,2 @@
1
- export { default as ResizerNext } from './Resizer';
1
+ export { default as ResizerNext } from './Resizer';
2
+ export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
13
13
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
14
  import Layer from '../Layer';
15
15
  const packageName = "@atlaskit/editor-common";
16
- const packageVersion = "94.11.0";
16
+ const packageVersion = "94.12.0";
17
17
  const halfFocusRing = 1;
18
18
  const dropOffset = '0, 8';
19
19
  class DropList extends Component {
@@ -121,7 +121,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
121
121
  return false;
122
122
  }
123
123
  var nodeWidth = getNodeWidth(node, state.schema);
124
- var newAttrs = fg('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
124
+ var newAttrs = fg('platform_editor_media_extended_resize_experience') ? // with extended experience, change alignment does not change media single width
125
125
  _objectSpread(_objectSpread({}, node.attrs), {}, {
126
126
  layout: layout
127
127
  }) : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
@@ -154,7 +154,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
154
154
  };
155
155
  };
156
156
  var getToolbarLayout = function getToolbarLayout(layout) {
157
- if (nonWrappedLayouts.includes(layout) && fg('platform.editor.media.extended-resize-experience')) {
157
+ if (nonWrappedLayouts.includes(layout) && fg('platform_editor_media_extended_resize_experience')) {
158
158
  return 'center';
159
159
  }
160
160
  return layout;
@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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; }
4
4
  import React from 'react';
5
5
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
6
  import { ACTION } from '../../analytics';
8
7
  import { sendMBEAnalyticsEvent } from './utils';
9
8
  export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
@@ -110,23 +109,11 @@ export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActi
110
109
  // We are retaining node.attrs to keep the node type and extension key
111
110
  // and only updating the parameters coming in from the user
112
111
  // parameters will contain only macroParams information
113
- var updatedParameters;
114
- if (getBooleanFF('platform.editor.mbe-update-params-change')) {
115
- // With the new feature flag, we will not be de-structuring macroParams,
116
- // and will directly replace/overwrite the macroParams with the parameters
117
- updatedParameters = _objectSpread(_objectSpread({}, node.attrs), {}, {
118
- parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
119
- macroParams: parameters
120
- })
121
- });
122
- } else {
123
- var _node$attrs;
124
- updatedParameters = _objectSpread(_objectSpread({}, node.attrs), {}, {
125
- parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
126
- macroParams: _objectSpread(_objectSpread({}, (_node$attrs = node.attrs) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.parameters) === null || _node$attrs === void 0 ? void 0 : _node$attrs.macroParams), parameters)
127
- })
128
- });
129
- }
112
+ var updatedParameters = _objectSpread(_objectSpread({}, node.attrs), {}, {
113
+ parameters: _objectSpread(_objectSpread({}, node.attrs.parameters), {}, {
114
+ macroParams: parameters
115
+ })
116
+ });
130
117
  var tr = state.tr.setNodeMarkup(pos, null, updatedParameters);
131
118
  dispatch(tr);
132
119
  if (eventDispatcher) {
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import { isFedRamp } from './environment';
8
8
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
9
9
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
10
- var packageVersion = "94.11.0";
10
+ var packageVersion = "94.12.0";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // TODO: Sanitise the URL instead of just removing it
@@ -0,0 +1,131 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import React, { useCallback, useState } from 'react';
3
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
4
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
+ import { LAYOUT_COLUMN_PADDING } from '../styles';
6
+ import Resizer from './Resizer';
7
+ var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
8
+ var getHandleStyle = function getHandleStyle(node) {
9
+ switch (node) {
10
+ case 'codeBlock':
11
+ return {
12
+ left: {
13
+ left: '-12px'
14
+ },
15
+ right: {
16
+ right: '-12px'
17
+ }
18
+ };
19
+ // expand and layout section elements have a negative margin applied
20
+ default:
21
+ var handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_COLUMN_PADDING * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
22
+ return {
23
+ left: {
24
+ left: "-".concat(handleOffset, "px")
25
+ },
26
+ right: {
27
+ right: "-".concat(handleOffset, "px")
28
+ }
29
+ };
30
+ }
31
+ };
32
+ export var ignoreResizerMutations = function ignoreResizerMutations(mutation) {
33
+ return mutation.target.classList.contains('resizer-item') || mutation.type === 'attributes' && mutation.attributeName === 'style';
34
+ };
35
+
36
+ /**
37
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
38
+ * correct ADF support.
39
+ *
40
+ * use platform_editor_advanced_layouts_breakout_resizing
41
+ */
42
+ var BreakoutResizer = function BreakoutResizer(_ref) {
43
+ var editorView = _ref.editorView,
44
+ node = _ref.node,
45
+ getPos = _ref.getPos,
46
+ getRef = _ref.getRef,
47
+ disabled = _ref.disabled,
48
+ getEditorWidth = _ref.getEditorWidth;
49
+ var _useState = useState({
50
+ minWidth: undefined,
51
+ maxWidth: undefined,
52
+ isResizing: false
53
+ }),
54
+ _useState2 = _slicedToArray(_useState, 2),
55
+ _useState2$ = _useState2[0],
56
+ minWidth = _useState2$.minWidth,
57
+ maxWidth = _useState2$.maxWidth,
58
+ isResizing = _useState2$.isResizing,
59
+ setResizingState = _useState2[1];
60
+ var handleResizeStart = useCallback(function () {
61
+ var newMinWidth;
62
+ var newMaxWidth;
63
+ var widthState = getEditorWidth();
64
+ var dispatch = editorView.dispatch,
65
+ state = editorView.state;
66
+ if (widthState !== undefined && widthState.lineLength !== undefined && widthState.width !== undefined) {
67
+ newMinWidth = Math.min(widthState.lineLength, akEditorDefaultLayoutWidth);
68
+ newMaxWidth = Math.min(widthState.width - akEditorGutterPaddingDynamic() * 2 - akEditorGutterPadding, akEditorFullWidthLayoutWidth);
69
+ }
70
+ setResizingState({
71
+ isResizing: true,
72
+ minWidth: newMinWidth,
73
+ maxWidth: newMaxWidth
74
+ });
75
+ dispatch(state.tr.setMeta('is-resizer-resizing', true));
76
+ }, [getEditorWidth, editorView]);
77
+ var handleResizeStop = useCallback(function (originalState, delta) {
78
+ var newWidth = originalState.width + delta.width;
79
+ var pos = getPos();
80
+ if (pos === undefined) {
81
+ return;
82
+ }
83
+ var state = editorView.state,
84
+ dispatch = editorView.dispatch;
85
+ var breakout = state.schema.marks.breakout;
86
+ var node = state.doc.nodeAt(pos);
87
+ var newTr = state.tr;
88
+ if (node && breakoutSupportedNodes.includes(node.type.name)) {
89
+ newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
90
+ width: Math.max(newWidth, akEditorDefaultLayoutWidth)
91
+ })]);
92
+ }
93
+ newTr.setMeta('is-resizer-resizing', false);
94
+ dispatch(newTr);
95
+ setResizingState({
96
+ isResizing: false,
97
+ minWidth: undefined,
98
+ maxWidth: undefined
99
+ });
100
+ }, [editorView, getPos]);
101
+ if (disabled) {
102
+ return /*#__PURE__*/React.createElement("div", {
103
+ "data-testid": "breakout-resizer-editor-view-wrapper",
104
+ ref: function ref(_ref2) {
105
+ return getRef && getRef(_ref2);
106
+ }
107
+ });
108
+ }
109
+ return /*#__PURE__*/React.createElement(Resizer, {
110
+ enable: {
111
+ left: true,
112
+ right: true
113
+ },
114
+ handleStyles: getHandleStyle(node),
115
+ minWidth: minWidth,
116
+ maxWidth: maxWidth
117
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
118
+ ,
119
+ style: isResizing ? {
120
+ // during resize need to center as the resizer-item gets an explicit width value
121
+ left: '50%',
122
+ transform: 'translateX(-50%)'
123
+ } : undefined,
124
+ resizeRatio: 2,
125
+ handleResizeStart: handleResizeStart,
126
+ handleResizeStop: handleResizeStop,
127
+ handleSize: "small",
128
+ childrenDOMRef: getRef
129
+ });
130
+ };
131
+ export { BreakoutResizer };
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
- var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone"];
5
+ var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef"];
6
6
  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; }
7
7
  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; }
8
8
  import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -60,6 +60,7 @@ var ResizerNext = function ResizerNext(props, ref) {
60
60
  handleTooltipContent = props.handleTooltipContent,
61
61
  _props$needExtendedRe = props.needExtendedResizeZone,
62
62
  needExtendedResizeZone = _props$needExtendedRe === void 0 ? true : _props$needExtendedRe,
63
+ childrenDOMRef = props.childrenDOMRef,
63
64
  otherProps = _objectWithoutProperties(props, _excluded);
64
65
  var onResizeStart = useCallback(function (event) {
65
66
  // prevent creating a drag event on Firefox
@@ -68,6 +69,9 @@ var ResizerNext = function ResizerNext(props, ref) {
68
69
  handleResizeStart();
69
70
  }, [handleResizeStart]);
70
71
  var onResize = useCallback(function (_event, _direction, _elementRef, delta) {
72
+ if (!handleResize) {
73
+ return;
74
+ }
71
75
  var resizableCurrent = resizable.current;
72
76
  if (!resizableCurrent || !resizableCurrent.state.original) {
73
77
  return;
@@ -171,7 +175,7 @@ var ResizerNext = function ResizerNext(props, ref) {
171
175
  return /*#__PURE__*/React.createElement(Resizable, _extends({
172
176
  ref: resizable,
173
177
  size: {
174
- width: width,
178
+ width: width !== null && width !== void 0 ? width : 'auto',
175
179
  // just content itself (no paddings)
176
180
  height: 'auto'
177
181
  }
@@ -189,7 +193,10 @@ var ResizerNext = function ResizerNext(props, ref) {
189
193
  snap: snap,
190
194
  handleComponent: handleComponent
191
195
  }, otherProps), /*#__PURE__*/React.createElement("span", {
192
- className: resizerZoneClassName
196
+ className: resizerZoneClassName,
197
+ ref: function ref(_ref) {
198
+ return childrenDOMRef && childrenDOMRef(_ref);
199
+ }
193
200
  }, children));
194
201
  };
195
202
  export default /*#__PURE__*/forwardRef(ResizerNext);
@@ -1 +1,2 @@
1
- export { default as ResizerNext } from './Resizer';
1
+ export { default as ResizerNext } from './Resizer';
2
+ export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
21
21
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
22
22
  import Layer from '../Layer';
23
23
  var packageName = "@atlaskit/editor-common";
24
- var packageVersion = "94.11.0";
24
+ var packageVersion = "94.12.0";
25
25
  var halfFocusRing = 1;
26
26
  var dropOffset = '0, 8';
27
27
  var DropList = /*#__PURE__*/function (_Component) {
@@ -0,0 +1,23 @@
1
+ /// <reference types="react" />
2
+ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
3
+ import { type EditorContainerWidth, type getPosHandlerNode } from '../types';
4
+ type BreakoutSupportedNodes = 'layoutSection' | 'expand' | 'codeBlock';
5
+ export declare const ignoreResizerMutations: (mutation: MutationRecord | {
6
+ type: 'selection';
7
+ target: Element;
8
+ }) => boolean;
9
+ /**
10
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
11
+ * correct ADF support.
12
+ *
13
+ * use platform_editor_advanced_layouts_breakout_resizing
14
+ */
15
+ declare const BreakoutResizer: ({ editorView, node, getPos, getRef, disabled, getEditorWidth, }: {
16
+ editorView: EditorView;
17
+ node: BreakoutSupportedNodes;
18
+ getPos: getPosHandlerNode;
19
+ getRef?: ((ref: HTMLElement | null) => void) | undefined;
20
+ disabled: boolean;
21
+ getEditorWidth: () => EditorContainerWidth | undefined;
22
+ }) => JSX.Element;
23
+ export { BreakoutResizer };
@@ -5,7 +5,7 @@ import type { EnabledHandles, HandleAlignmentMethod, HandleHighlight, HandlePosi
5
5
  export type ResizerProps = {
6
6
  className?: string;
7
7
  enable: EnabledHandles;
8
- width: number;
8
+ width?: number;
9
9
  minWidth?: number | string;
10
10
  maxWidth?: number | string;
11
11
  snap?: Snap;
@@ -14,7 +14,7 @@ export type ResizerProps = {
14
14
  appearance?: ResizerAppearance;
15
15
  isHandleVisible?: boolean;
16
16
  handleResizeStart: HandleResizeStart;
17
- handleResize: HandleResize;
17
+ handleResize?: HandleResize;
18
18
  handleResizeStop: HandleResize;
19
19
  /**
20
20
  * This can be used to override the css class name applied to the resize handle.
@@ -53,6 +53,14 @@ export type ResizerProps = {
53
53
  * control if extended resize zone is needed, by default we apply it to the resizer
54
54
  */
55
55
  needExtendedResizeZone?: boolean;
56
+ /**
57
+ * Additional styles to be applied to the resizer component
58
+ */
59
+ style?: CSSProperties;
60
+ /**
61
+ * Access to the inner most element which wraps passed children
62
+ */
63
+ childrenDOMRef?: (ref: HTMLElement | null) => void;
56
64
  };
57
65
  type forwardRefType = {
58
66
  getResizerThumbEl: () => HTMLButtonElement | null;
@@ -1,2 +1,3 @@
1
1
  export { default as ResizerNext } from './Resizer';
2
2
  export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
3
+ export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
@@ -0,0 +1,23 @@
1
+ /// <reference types="react" />
2
+ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
3
+ import { type EditorContainerWidth, type getPosHandlerNode } from '../types';
4
+ type BreakoutSupportedNodes = 'layoutSection' | 'expand' | 'codeBlock';
5
+ export declare const ignoreResizerMutations: (mutation: MutationRecord | {
6
+ type: 'selection';
7
+ target: Element;
8
+ }) => boolean;
9
+ /**
10
+ * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
11
+ * correct ADF support.
12
+ *
13
+ * use platform_editor_advanced_layouts_breakout_resizing
14
+ */
15
+ declare const BreakoutResizer: ({ editorView, node, getPos, getRef, disabled, getEditorWidth, }: {
16
+ editorView: EditorView;
17
+ node: BreakoutSupportedNodes;
18
+ getPos: getPosHandlerNode;
19
+ getRef?: ((ref: HTMLElement | null) => void) | undefined;
20
+ disabled: boolean;
21
+ getEditorWidth: () => EditorContainerWidth | undefined;
22
+ }) => JSX.Element;
23
+ export { BreakoutResizer };
@@ -5,7 +5,7 @@ import type { EnabledHandles, HandleAlignmentMethod, HandleHighlight, HandlePosi
5
5
  export type ResizerProps = {
6
6
  className?: string;
7
7
  enable: EnabledHandles;
8
- width: number;
8
+ width?: number;
9
9
  minWidth?: number | string;
10
10
  maxWidth?: number | string;
11
11
  snap?: Snap;
@@ -14,7 +14,7 @@ export type ResizerProps = {
14
14
  appearance?: ResizerAppearance;
15
15
  isHandleVisible?: boolean;
16
16
  handleResizeStart: HandleResizeStart;
17
- handleResize: HandleResize;
17
+ handleResize?: HandleResize;
18
18
  handleResizeStop: HandleResize;
19
19
  /**
20
20
  * This can be used to override the css class name applied to the resize handle.
@@ -53,6 +53,14 @@ export type ResizerProps = {
53
53
  * control if extended resize zone is needed, by default we apply it to the resizer
54
54
  */
55
55
  needExtendedResizeZone?: boolean;
56
+ /**
57
+ * Additional styles to be applied to the resizer component
58
+ */
59
+ style?: CSSProperties;
60
+ /**
61
+ * Access to the inner most element which wraps passed children
62
+ */
63
+ childrenDOMRef?: (ref: HTMLElement | null) => void;
56
64
  };
57
65
  type forwardRefType = {
58
66
  getResizerThumbEl: () => HTMLButtonElement | null;
@@ -1,2 +1,3 @@
1
1
  export { default as ResizerNext } from './Resizer';
2
2
  export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
3
+ export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "94.11.0",
3
+ "version": "94.12.0",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -128,7 +128,7 @@
128
128
  "@atlaskit/emoji": "^67.9.0",
129
129
  "@atlaskit/icon": "^22.24.0",
130
130
  "@atlaskit/icon-object": "^6.7.0",
131
- "@atlaskit/link-datasource": "^3.7.0",
131
+ "@atlaskit/link-datasource": "^3.8.0",
132
132
  "@atlaskit/link-picker": "^1.47.0",
133
133
  "@atlaskit/media-card": "^78.10.0",
134
134
  "@atlaskit/media-client": "^28.0.0",
@@ -140,7 +140,7 @@
140
140
  "@atlaskit/media-viewer": "49.2.5",
141
141
  "@atlaskit/mention": "^23.3.0",
142
142
  "@atlaskit/menu": "^2.13.0",
143
- "@atlaskit/onboarding": "^12.0.0",
143
+ "@atlaskit/onboarding": "^12.1.0",
144
144
  "@atlaskit/platform-feature-flags": "^0.3.0",
145
145
  "@atlaskit/popper": "^6.3.0",
146
146
  "@atlaskit/primitives": "^13.0.0",
@@ -152,7 +152,7 @@
152
152
  "@atlaskit/task-decision": "^17.11.0",
153
153
  "@atlaskit/textfield": "^6.5.0",
154
154
  "@atlaskit/tmp-editor-statsig": "^2.11.0",
155
- "@atlaskit/tokens": "^2.0.0",
155
+ "@atlaskit/tokens": "^2.1.0",
156
156
  "@atlaskit/tooltip": "^18.8.0",
157
157
  "@atlaskit/width-detector": "^4.3.0",
158
158
  "@babel/runtime": "^7.0.0",
@@ -226,7 +226,7 @@
226
226
  }
227
227
  },
228
228
  "platform-feature-flags": {
229
- "platform.editor.media.extended-resize-experience": {
229
+ "platform_editor_media_extended_resize_experience": {
230
230
  "type": "boolean"
231
231
  },
232
232
  "platform_editor_breakout_use_css": {
@@ -238,9 +238,6 @@
238
238
  "editor_inline_comments_on_inline_nodes": {
239
239
  "type": "boolean"
240
240
  },
241
- "platform.editor.mbe-update-params-change": {
242
- "type": "boolean"
243
- },
244
241
  "annotations_align_editor_and_renderer_styles": {
245
242
  "type": "boolean"
246
243
  },