@atlaskit/editor-common 103.12.0 → 103.13.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 103.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#144829](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144829)
8
+ [`14b488c2295de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14b488c2295de) -
9
+ [ux] ED27537 Update alignment dropdown in media and embed card floating toolbar
10
+
11
+ ## 103.12.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#142352](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142352)
16
+ [`05903fde6d94d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05903fde6d94d) -
17
+ Internal change to use Compiled variant of `@atlaskit/primitives`.
18
+
3
19
  ## 103.12.0
4
20
 
5
21
  ### Minor Changes
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.wrappingIcons = exports.layoutToMessages = exports.default = exports.alignmentIcons = void 0;
8
+ exports.wrappingIcons = exports.layoutToMessages = exports.default = exports.buildLayoutDropdown = exports.alignmentIcons = void 0;
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _react = _interopRequireDefault(require("react"));
@@ -15,6 +15,9 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
15
15
  var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-image-center"));
16
16
  var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-image-left"));
17
17
  var _alignImageRight = _interopRequireDefault(require("@atlaskit/icon/core/align-image-right"));
18
+ var _alignTextCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-text-center"));
19
+ var _alignTextLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-text-left"));
20
+ var _alignTextRight = _interopRequireDefault(require("@atlaskit/icon/core/align-text-right"));
18
21
  var _contentWrapLeft = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-left"));
19
22
  var _contentWrapRight = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-right"));
20
23
  var _contentWidthWideEditorMediaWide = _interopRequireDefault(require("@atlaskit/icon/core/migration/content-width-wide--editor-media-wide"));
@@ -26,7 +29,9 @@ var _mediaWrapLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor
26
29
  var _mediaWrapRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-right"));
27
30
  var _analytics = require("../../analytics");
28
31
  var _coreUtils = require("../../core-utils");
32
+ var _keymaps = require("../../keymaps");
29
33
  var _messages = _interopRequireWildcard(require("../../messages"));
34
+ var _ui = require("../../ui");
30
35
  var _utils2 = require("../../utils");
31
36
  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); }
32
37
  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; }
@@ -69,6 +74,40 @@ var alignmentIcons = exports.alignmentIcons = [{
69
74
  });
70
75
  }
71
76
  }];
77
+ var alignmentIconsControls = [{
78
+ id: 'editor.media.alignLeft',
79
+ value: 'align-start',
80
+ icon: function icon() {
81
+ return /*#__PURE__*/_react.default.createElement(_alignTextLeft.default, {
82
+ color: "currentColor",
83
+ spacing: "spacious",
84
+ label: ""
85
+ });
86
+ },
87
+ keyboardShortcut: _keymaps.alignLeft
88
+ }, {
89
+ id: 'editor.media.alignCenter',
90
+ value: 'center',
91
+ icon: function icon() {
92
+ return /*#__PURE__*/_react.default.createElement(_alignTextCenter.default, {
93
+ color: "currentColor",
94
+ spacing: "spacious",
95
+ label: ""
96
+ });
97
+ },
98
+ keyboardShortcut: _keymaps.alignCenter
99
+ }, {
100
+ id: 'editor.media.alignRight',
101
+ value: 'align-end',
102
+ icon: function icon() {
103
+ return /*#__PURE__*/_react.default.createElement(_alignTextRight.default, {
104
+ color: "currentColor",
105
+ spacing: "spacious",
106
+ label: ""
107
+ });
108
+ },
109
+ keyboardShortcut: _keymaps.alignRight
110
+ }];
72
111
  var wrappingIcons = exports.wrappingIcons = [{
73
112
  id: 'editor.media.wrapLeft',
74
113
  value: 'wrap-left',
@@ -186,8 +225,35 @@ var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl,
186
225
  });
187
226
  });
188
227
  };
189
- var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
190
- var nodes = _ref2.nodes;
228
+ var mapIconsToDropdownOptions = function mapIconsToDropdownOptions(_ref2) {
229
+ var icons = _ref2.icons,
230
+ layout = _ref2.layout,
231
+ intl = _ref2.intl,
232
+ nodeType = _ref2.nodeType,
233
+ widthPluginDependencyApi = _ref2.widthPluginDependencyApi,
234
+ analyticsApi = _ref2.analyticsApi,
235
+ isChangingLayoutDisabled = _ref2.isChangingLayoutDisabled,
236
+ allowPixelResizing = _ref2.allowPixelResizing;
237
+ return icons.map(function (layoutOption) {
238
+ var id = layoutOption.id,
239
+ value = layoutOption.value;
240
+ return _objectSpread(_objectSpread({
241
+ id: id,
242
+ icon: /*#__PURE__*/_react.default.createElement(layoutOption.icon, {
243
+ label: ""
244
+ }),
245
+ title: intl.formatMessage(layoutToMessages[value]),
246
+ selected: getToolbarLayout(layout, allowPixelResizing) === value,
247
+ onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing)
248
+ }, layoutOption.keyboardShortcut && {
249
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(layoutOption.keyboardShortcut))
250
+ }), isChangingLayoutDisabled && {
251
+ disabled: value !== 'center'
252
+ });
253
+ });
254
+ };
255
+ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref3, allowResizingInTables) {
256
+ var nodes = _ref3.nodes;
191
257
  return (0, _utils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
192
258
  };
193
259
  var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
@@ -206,6 +272,54 @@ var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widt
206
272
  var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
207
273
  return items;
208
274
  };
275
+ var buildLayoutDropdown = exports.buildLayoutDropdown = function buildLayoutDropdown(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
276
+ var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
277
+ var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
278
+ var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
279
+ var allowPixelResizing = arguments.length > 10 ? arguments[10] : undefined;
280
+ var selection = state.selection;
281
+ if (!(selection instanceof _state.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
282
+ return [];
283
+ }
284
+ var layout = selection.node.attrs.layout;
285
+ var icons = [];
286
+ if (allowAlignment) {
287
+ icons.push.apply(icons, alignmentIconsControls);
288
+ }
289
+ if (allowWrapping) {
290
+ icons.push.apply(icons, wrappingIcons);
291
+ }
292
+ if (!allowResizing) {
293
+ icons.push.apply(icons, breakoutIcons);
294
+ }
295
+ if (icons.length === 0) {
296
+ return [];
297
+ }
298
+ var selectedLayout = getSelectedLayoutIcon(icons, selection.node) || icons[0];
299
+ var alignmentDropdownOptions = mapIconsToDropdownOptions({
300
+ icons: icons,
301
+ layout: layout,
302
+ intl: intl,
303
+ nodeType: nodeType,
304
+ widthPluginDependencyApi: widthPluginDependencyApi,
305
+ analyticsApi: analyticsApi,
306
+ isChangingLayoutDisabled: isChangingLayoutDisabled,
307
+ allowPixelResizing: allowPixelResizing
308
+ });
309
+ return [{
310
+ type: 'dropdown',
311
+ title: intl.formatMessage(layoutToMessages[selectedLayout.value]),
312
+ icon: selectedLayout.icon,
313
+ options: alignmentDropdownOptions,
314
+ testId: "".concat(nodeType.name, "-layout-dropdown-trigger-button")
315
+ }];
316
+ };
317
+ var getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
318
+ var selectedLayout = selectedNode.attrs.layout;
319
+ return layoutIcons.find(function (icon) {
320
+ return icon.value === (_utils2.nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
321
+ });
322
+ };
209
323
  var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
210
324
  return allowAlignment && allowWrapping ? [{
211
325
  type: 'separator'
@@ -59,6 +59,12 @@ Object.defineProperty(exports, "buildLayoutButtons", {
59
59
  return _MediaAndEmbedsToolbar.default;
60
60
  }
61
61
  });
62
+ Object.defineProperty(exports, "buildLayoutDropdown", {
63
+ enumerable: true,
64
+ get: function get() {
65
+ return _MediaAndEmbedsToolbar.buildLayoutDropdown;
66
+ }
67
+ });
62
68
  Object.defineProperty(exports, "commandWithMetadata", {
63
69
  enumerable: true,
64
70
  get: function get() {
@@ -19,7 +19,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
19
19
  var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
20
20
  var _menu = require("@atlaskit/menu");
21
21
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
- var _primitives = require("@atlaskit/primitives");
22
+ var _compiled = require("@atlaskit/primitives/compiled");
23
23
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
24
24
  var _analytics = require("../../../analytics");
25
25
  var _quickInsert = require("../../../quick-insert");
@@ -444,18 +444,18 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref8) {
444
444
  className: "item-body"
445
445
  }, (0, _react2.jsx)("div", {
446
446
  css: itemText
447
- }, (0, _react2.jsx)(_primitives.Stack, {
447
+ }, (0, _react2.jsx)(_compiled.Stack, {
448
448
  space: "space.025"
449
449
  }, (0, _react2.jsx)("div", {
450
450
  css: itemTitleWrapper
451
- }, (0, _react2.jsx)(_primitives.Text, {
451
+ }, (0, _react2.jsx)(_compiled.Text, {
452
452
  color: isDisabled ? 'color.text.disabled' : undefined,
453
453
  maxLines: 1
454
454
  }, title), (0, _react2.jsx)("div", {
455
455
  css: itemAfter
456
456
  }, keyshortcut && (0, _react2.jsx)("div", {
457
457
  css: _shortcut.shortcutStyle
458
- }, keyshortcut))), description && (0, _react2.jsx)(_primitives.Text, {
458
+ }, keyshortcut))), description && (0, _react2.jsx)(_compiled.Text, {
459
459
  color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
460
460
  size: "small",
461
461
  maxLines: 2
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = require("react");
11
11
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
12
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
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; }
13
14
  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) { (0, _defineProperty2.default)(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; }
14
15
  // Ignored via go/ees005
@@ -105,8 +106,17 @@ function usePluginStateEffectInternal(externalPlugins, effect) {
105
106
 
106
107
  // We should store the latest effect in a reference so it is more intuitive to the user
107
108
  // and we are not causing a memory leak by having references to old state.
109
+ (0, _react.useLayoutEffect)(function () {
110
+ if (options.disabled || (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
111
+ return;
112
+ }
113
+ latestEffect.current = (0, _debounce.default)(effect);
114
+ return function () {
115
+ latestEffect.current = undefined;
116
+ };
117
+ }, [effect, options.disabled]);
108
118
  (0, _react.useEffect)(function () {
109
- if (options.disabled) {
119
+ if (options.disabled || (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)) {
110
120
  return;
111
121
  }
112
122
  latestEffect.current = (0, _debounce.default)(effect);
@@ -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 = "103.12.0";
20
+ var packageVersion = "103.13.0";
21
21
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
22
22
  // Remove URL as it has UGC
23
23
  // Ignored via go/ees007
@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
23
23
  * @jsx jsx
24
24
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
25
  var packageName = "@atlaskit/editor-common";
26
- var packageVersion = "103.12.0";
26
+ var packageVersion = "103.13.0";
27
27
  var halfFocusRing = 1;
28
28
  var dropOffset = '0, 8';
29
29
  // Ignored via go/ees005
@@ -8,7 +8,7 @@ var _react = require("react");
8
8
  var _react2 = require("@emotion/react");
9
9
  var _reactIntlNext = require("react-intl-next");
10
10
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
- var _primitives = require("@atlaskit/primitives");
11
+ var _compiled = require("@atlaskit/primitives/compiled");
12
12
  var _colors = require("@atlaskit/theme/colors");
13
13
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
14
14
  var _messages = require("../../messages");
@@ -122,7 +122,7 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
122
122
  return createArray(maxCols, maxRows);
123
123
  }, [maxCols, maxRows]);
124
124
  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
125
- return (0, _react2.jsx)(_primitives.Stack, {
125
+ return (0, _react2.jsx)(_compiled.Stack, {
126
126
  ref: setOutsideClickTargetRef
127
127
  }, (0, _react2.jsx)("div", {
128
128
  "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
@@ -5,6 +5,9 @@ import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
5
5
  import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
6
6
  import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
7
7
  import AlignImageRightIcon from '@atlaskit/icon/core/align-image-right';
8
+ import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
9
+ import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
10
+ import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
8
11
  import ContentWrapLeftIcon from '@atlaskit/icon/core/content-wrap-left';
9
12
  import ContentWrapRightIcon from '@atlaskit/icon/core/content-wrap-right';
10
13
  import ContentWidthWide from '@atlaskit/icon/core/migration/content-width-wide--editor-media-wide';
@@ -16,7 +19,9 @@ import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
16
19
  import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
17
20
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
18
21
  import { insideTable } from '../../core-utils';
22
+ import { alignCenter, alignLeft, alignRight, tooltip } from '../../keymaps';
19
23
  import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
24
+ import { Shortcut } from '../../ui';
20
25
  import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../utils';
21
26
 
22
27
  // Workaround as we don't want to import this package into `editor-common`
@@ -50,6 +55,34 @@ export const alignmentIcons = [{
50
55
  LEGACY_fallbackIcon: EditorAlignImageRight
51
56
  })
52
57
  }];
58
+ const alignmentIconsControls = [{
59
+ id: 'editor.media.alignLeft',
60
+ value: 'align-start',
61
+ icon: () => /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
62
+ color: "currentColor",
63
+ spacing: "spacious",
64
+ label: ""
65
+ }),
66
+ keyboardShortcut: alignLeft
67
+ }, {
68
+ id: 'editor.media.alignCenter',
69
+ value: 'center',
70
+ icon: () => /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
71
+ color: "currentColor",
72
+ spacing: "spacious",
73
+ label: ""
74
+ }),
75
+ keyboardShortcut: alignCenter
76
+ }, {
77
+ id: 'editor.media.alignRight',
78
+ value: 'align-end',
79
+ icon: () => /*#__PURE__*/React.createElement(AlignTextRightIcon, {
80
+ color: "currentColor",
81
+ spacing: "spacious",
82
+ label: ""
83
+ }),
84
+ keyboardShortcut: alignRight
85
+ }];
53
86
  export const wrappingIcons = [{
54
87
  id: 'editor.media.wrapLeft',
55
88
  value: 'wrap-left',
@@ -183,6 +216,36 @@ const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDepende
183
216
  })
184
217
  };
185
218
  });
219
+ const mapIconsToDropdownOptions = ({
220
+ icons,
221
+ layout,
222
+ intl,
223
+ nodeType,
224
+ widthPluginDependencyApi,
225
+ analyticsApi,
226
+ isChangingLayoutDisabled,
227
+ allowPixelResizing
228
+ }) => icons.map(layoutOption => {
229
+ const {
230
+ id,
231
+ value
232
+ } = layoutOption;
233
+ return {
234
+ id: id,
235
+ icon: /*#__PURE__*/React.createElement(layoutOption.icon, {
236
+ label: ""
237
+ }),
238
+ title: intl.formatMessage(layoutToMessages[value]),
239
+ selected: getToolbarLayout(layout, allowPixelResizing) === value,
240
+ onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing),
241
+ ...(layoutOption.keyboardShortcut && {
242
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(layoutOption.keyboardShortcut))
243
+ }),
244
+ ...(isChangingLayoutDisabled && {
245
+ disabled: value !== 'center'
246
+ })
247
+ };
248
+ });
186
249
  const shouldHideLayoutToolbar = (selection, {
187
250
  nodes
188
251
  }, allowResizingInTables) => {
@@ -204,6 +267,52 @@ const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, ana
204
267
  const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
205
268
  return items;
206
269
  };
270
+ export const buildLayoutDropdown = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true, isChangingLayoutDisabled, allowPixelResizing) => {
271
+ const {
272
+ selection
273
+ } = state;
274
+ if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
275
+ return [];
276
+ }
277
+ const {
278
+ layout
279
+ } = selection.node.attrs;
280
+ const icons = [];
281
+ if (allowAlignment) {
282
+ icons.push(...alignmentIconsControls);
283
+ }
284
+ if (allowWrapping) {
285
+ icons.push(...wrappingIcons);
286
+ }
287
+ if (!allowResizing) {
288
+ icons.push(...breakoutIcons);
289
+ }
290
+ if (icons.length === 0) {
291
+ return [];
292
+ }
293
+ const selectedLayout = getSelectedLayoutIcon(icons, selection.node) || icons[0];
294
+ const alignmentDropdownOptions = mapIconsToDropdownOptions({
295
+ icons,
296
+ layout,
297
+ intl,
298
+ nodeType,
299
+ widthPluginDependencyApi,
300
+ analyticsApi,
301
+ isChangingLayoutDisabled,
302
+ allowPixelResizing
303
+ });
304
+ return [{
305
+ type: 'dropdown',
306
+ title: intl.formatMessage(layoutToMessages[selectedLayout.value]),
307
+ icon: selectedLayout.icon,
308
+ options: alignmentDropdownOptions,
309
+ testId: `${nodeType.name}-layout-dropdown-trigger-button`
310
+ }];
311
+ };
312
+ const getSelectedLayoutIcon = (layoutIcons, selectedNode) => {
313
+ const selectedLayout = selectedNode.attrs.layout;
314
+ return layoutIcons.find(icon => icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout));
315
+ };
207
316
  const getSeparatorBetweenAlignmentAndWrapping = (allowAlignment, allowWrapping) => allowAlignment && allowWrapping ? [{
208
317
  type: 'separator'
209
318
  }] : [];
@@ -2,7 +2,7 @@
2
2
  /* eslint-disable @atlaskit/editor/no-re-export */
3
3
 
4
4
  export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
5
- export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages } from './MediaAndEmbedsToolbar';
5
+ export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages, buildLayoutDropdown } from './MediaAndEmbedsToolbar';
6
6
  export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
7
7
  export { appearancePropsMap, getButtonGroupOption } from './link-toolbar-button-group-options';
8
8
  export { getDropdownOption } from './link-toolbar-dropdown-options';
@@ -15,7 +15,7 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
15
15
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
16
16
  import { ButtonItem } from '@atlaskit/menu';
17
17
  import { fg } from '@atlaskit/platform-feature-flags';
18
- import { Stack, Text } from '@atlaskit/primitives';
18
+ import { Stack, Text } from '@atlaskit/primitives/compiled';
19
19
  import Tooltip from '@atlaskit/tooltip';
20
20
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
21
21
  import { IconFallback } from '../../../quick-insert';
@@ -1,5 +1,6 @@
1
1
  import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
2
2
  import debounce from 'lodash/debounce';
3
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
3
4
 
4
5
  // Ignored via go/ees005
5
6
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -88,8 +89,17 @@ function usePluginStateEffectInternal(externalPlugins, effect, options = {}) {
88
89
 
89
90
  // We should store the latest effect in a reference so it is more intuitive to the user
90
91
  // and we are not causing a memory leak by having references to old state.
92
+ useLayoutEffect(() => {
93
+ if (options.disabled || editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
94
+ return;
95
+ }
96
+ latestEffect.current = debounce(effect);
97
+ return () => {
98
+ latestEffect.current = undefined;
99
+ };
100
+ }, [effect, options.disabled]);
91
101
  useEffect(() => {
92
- if (options.disabled) {
102
+ if (options.disabled || editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
93
103
  return;
94
104
  }
95
105
  latestEffect.current = debounce(effect);
@@ -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 = "103.12.0";
4
+ const packageVersion = "103.13.0";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // Ignored via go/ees007
@@ -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 = "103.12.0";
16
+ const packageVersion = "103.13.0";
17
17
  const halfFocusRing = 1;
18
18
  const dropOffset = '0, 8';
19
19
  // Ignored via go/ees005
@@ -7,7 +7,7 @@ import { useContext, useEffect, useMemo, useRef } from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { injectIntl } from 'react-intl-next';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
- import { Stack } from '@atlaskit/primitives';
10
+ import { Stack } from '@atlaskit/primitives/compiled';
11
11
  import { B100 } from '@atlaskit/theme/colors';
12
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
13
  import { toolbarInsertBlockMessages as messages } from '../../messages';
@@ -9,6 +9,9 @@ import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
9
9
  import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
10
10
  import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
11
11
  import AlignImageRightIcon from '@atlaskit/icon/core/align-image-right';
12
+ import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
13
+ import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
14
+ import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
12
15
  import ContentWrapLeftIcon from '@atlaskit/icon/core/content-wrap-left';
13
16
  import ContentWrapRightIcon from '@atlaskit/icon/core/content-wrap-right';
14
17
  import ContentWidthWide from '@atlaskit/icon/core/migration/content-width-wide--editor-media-wide';
@@ -20,7 +23,9 @@ import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
20
23
  import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
21
24
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
22
25
  import { insideTable } from '../../core-utils';
26
+ import { alignCenter, alignLeft, alignRight, tooltip } from '../../keymaps';
23
27
  import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
28
+ import { Shortcut } from '../../ui';
24
29
  import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../utils';
25
30
 
26
31
  // Workaround as we don't want to import this package into `editor-common`
@@ -60,6 +65,40 @@ export var alignmentIcons = [{
60
65
  });
61
66
  }
62
67
  }];
68
+ var alignmentIconsControls = [{
69
+ id: 'editor.media.alignLeft',
70
+ value: 'align-start',
71
+ icon: function icon() {
72
+ return /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
73
+ color: "currentColor",
74
+ spacing: "spacious",
75
+ label: ""
76
+ });
77
+ },
78
+ keyboardShortcut: alignLeft
79
+ }, {
80
+ id: 'editor.media.alignCenter',
81
+ value: 'center',
82
+ icon: function icon() {
83
+ return /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
84
+ color: "currentColor",
85
+ spacing: "spacious",
86
+ label: ""
87
+ });
88
+ },
89
+ keyboardShortcut: alignCenter
90
+ }, {
91
+ id: 'editor.media.alignRight',
92
+ value: 'align-end',
93
+ icon: function icon() {
94
+ return /*#__PURE__*/React.createElement(AlignTextRightIcon, {
95
+ color: "currentColor",
96
+ spacing: "spacious",
97
+ label: ""
98
+ });
99
+ },
100
+ keyboardShortcut: alignRight
101
+ }];
63
102
  export var wrappingIcons = [{
64
103
  id: 'editor.media.wrapLeft',
65
104
  value: 'wrap-left',
@@ -177,8 +216,35 @@ var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl,
177
216
  });
178
217
  });
179
218
  };
180
- var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
181
- var nodes = _ref2.nodes;
219
+ var mapIconsToDropdownOptions = function mapIconsToDropdownOptions(_ref2) {
220
+ var icons = _ref2.icons,
221
+ layout = _ref2.layout,
222
+ intl = _ref2.intl,
223
+ nodeType = _ref2.nodeType,
224
+ widthPluginDependencyApi = _ref2.widthPluginDependencyApi,
225
+ analyticsApi = _ref2.analyticsApi,
226
+ isChangingLayoutDisabled = _ref2.isChangingLayoutDisabled,
227
+ allowPixelResizing = _ref2.allowPixelResizing;
228
+ return icons.map(function (layoutOption) {
229
+ var id = layoutOption.id,
230
+ value = layoutOption.value;
231
+ return _objectSpread(_objectSpread({
232
+ id: id,
233
+ icon: /*#__PURE__*/React.createElement(layoutOption.icon, {
234
+ label: ""
235
+ }),
236
+ title: intl.formatMessage(layoutToMessages[value]),
237
+ selected: getToolbarLayout(layout, allowPixelResizing) === value,
238
+ onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi, allowPixelResizing)
239
+ }, layoutOption.keyboardShortcut && {
240
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(layoutOption.keyboardShortcut))
241
+ }), isChangingLayoutDisabled && {
242
+ disabled: value !== 'center'
243
+ });
244
+ });
245
+ };
246
+ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref3, allowResizingInTables) {
247
+ var nodes = _ref3.nodes;
182
248
  return hasParentNodeOfType([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
183
249
  };
184
250
  var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
@@ -197,6 +263,54 @@ var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widt
197
263
  var items = [].concat(_toConsumableArray(alignmentToolbarItems), _toConsumableArray(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), _toConsumableArray(wrappingToolbarItems), _toConsumableArray(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), _toConsumableArray(breakOutToolbarItems));
198
264
  return items;
199
265
  };
266
+ export var buildLayoutDropdown = function buildLayoutDropdown(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
267
+ var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
268
+ var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
269
+ var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
270
+ var allowPixelResizing = arguments.length > 10 ? arguments[10] : undefined;
271
+ var selection = state.selection;
272
+ if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
273
+ return [];
274
+ }
275
+ var layout = selection.node.attrs.layout;
276
+ var icons = [];
277
+ if (allowAlignment) {
278
+ icons.push.apply(icons, alignmentIconsControls);
279
+ }
280
+ if (allowWrapping) {
281
+ icons.push.apply(icons, wrappingIcons);
282
+ }
283
+ if (!allowResizing) {
284
+ icons.push.apply(icons, breakoutIcons);
285
+ }
286
+ if (icons.length === 0) {
287
+ return [];
288
+ }
289
+ var selectedLayout = getSelectedLayoutIcon(icons, selection.node) || icons[0];
290
+ var alignmentDropdownOptions = mapIconsToDropdownOptions({
291
+ icons: icons,
292
+ layout: layout,
293
+ intl: intl,
294
+ nodeType: nodeType,
295
+ widthPluginDependencyApi: widthPluginDependencyApi,
296
+ analyticsApi: analyticsApi,
297
+ isChangingLayoutDisabled: isChangingLayoutDisabled,
298
+ allowPixelResizing: allowPixelResizing
299
+ });
300
+ return [{
301
+ type: 'dropdown',
302
+ title: intl.formatMessage(layoutToMessages[selectedLayout.value]),
303
+ icon: selectedLayout.icon,
304
+ options: alignmentDropdownOptions,
305
+ testId: "".concat(nodeType.name, "-layout-dropdown-trigger-button")
306
+ }];
307
+ };
308
+ var getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, selectedNode) {
309
+ var selectedLayout = selectedNode.attrs.layout;
310
+ return layoutIcons.find(function (icon) {
311
+ return icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
312
+ });
313
+ };
200
314
  var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
201
315
  return allowAlignment && allowWrapping ? [{
202
316
  type: 'separator'
@@ -2,7 +2,7 @@
2
2
  /* eslint-disable @atlaskit/editor/no-re-export */
3
3
 
4
4
  export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
5
- export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages } from './MediaAndEmbedsToolbar';
5
+ export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages, buildLayoutDropdown } from './MediaAndEmbedsToolbar';
6
6
  export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
7
7
  export { appearancePropsMap, getButtonGroupOption } from './link-toolbar-button-group-options';
8
8
  export { getDropdownOption } from './link-toolbar-dropdown-options';
@@ -16,7 +16,7 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
16
16
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
17
17
  import { ButtonItem } from '@atlaskit/menu';
18
18
  import { fg } from '@atlaskit/platform-feature-flags';
19
- import { Stack, Text } from '@atlaskit/primitives';
19
+ import { Stack, Text } from '@atlaskit/primitives/compiled';
20
20
  import Tooltip from '@atlaskit/tooltip';
21
21
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
22
22
  import { IconFallback } from '../../../quick-insert';
@@ -4,6 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
4
4
  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; }
5
5
  import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
6
6
  import debounce from 'lodash/debounce';
7
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
8
 
8
9
  // Ignored via go/ees005
9
10
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -99,8 +100,17 @@ function usePluginStateEffectInternal(externalPlugins, effect) {
99
100
 
100
101
  // We should store the latest effect in a reference so it is more intuitive to the user
101
102
  // and we are not causing a memory leak by having references to old state.
103
+ useLayoutEffect(function () {
104
+ if (options.disabled || editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
105
+ return;
106
+ }
107
+ latestEffect.current = debounce(effect);
108
+ return function () {
109
+ latestEffect.current = undefined;
110
+ };
111
+ }, [effect, options.disabled]);
102
112
  useEffect(function () {
103
- if (options.disabled) {
113
+ if (options.disabled || editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
104
114
  return;
105
115
  }
106
116
  latestEffect.current = debounce(effect);
@@ -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 = "103.12.0";
10
+ var packageVersion = "103.13.0";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // Ignored via go/ees007
@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
20
20
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
21
21
  import Layer from '../Layer';
22
22
  var packageName = "@atlaskit/editor-common";
23
- var packageVersion = "103.12.0";
23
+ var packageVersion = "103.13.0";
24
24
  var halfFocusRing = 1;
25
25
  var dropOffset = '0, 8';
26
26
  // Ignored via go/ees005
@@ -7,7 +7,7 @@ import { useContext, useEffect, useMemo, useRef } from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import { injectIntl } from 'react-intl-next';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
- import { Stack } from '@atlaskit/primitives';
10
+ import { Stack } from '@atlaskit/primitives/compiled';
11
11
  import { B100 } from '@atlaskit/theme/colors';
12
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
13
  import { toolbarInsertBlockMessages as messages } from '../../messages';
@@ -1,7 +1,9 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
+ import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
2
3
  import type { NodeType } from '@atlaskit/editor-prosemirror/model';
3
4
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
4
5
  import type { EditorAnalyticsAPI } from '../../analytics';
6
+ import { Keymap } from '../../keymaps';
5
7
  import type { Command, EditorContainerWidth, FloatingToolbarItem, Icon, NextEditorPlugin, PluginDependenciesAPI } from '../../types';
6
8
  type WidthPluginType = NextEditorPlugin<'width', {
7
9
  sharedState: EditorContainerWidth | undefined;
@@ -9,8 +11,9 @@ type WidthPluginType = NextEditorPlugin<'width', {
9
11
  type WidthPluginDependencyApi = PluginDependenciesAPI<WidthPluginType> | undefined;
10
12
  export type LayoutIcon = {
11
13
  id?: string;
12
- value: string;
14
+ value: MediaSingleLayout;
13
15
  icon: Icon;
16
+ keyboardShortcut?: Keymap;
14
17
  };
15
18
  export type IconMap = Array<LayoutIcon | {
16
19
  value: 'separator';
@@ -19,4 +22,5 @@ export declare const alignmentIcons: LayoutIcon[];
19
22
  export declare const wrappingIcons: LayoutIcon[];
20
23
  export declare const layoutToMessages: Record<string, any>;
21
24
  declare const buildLayoutButtons: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean, isChangingLayoutDisabled?: boolean, allowPixelResizing?: boolean) => FloatingToolbarItem<Command>[];
25
+ export declare const buildLayoutDropdown: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean, isChangingLayoutDisabled?: boolean, allowPixelResizing?: boolean) => FloatingToolbarItem<Command>[];
22
26
  export default buildLayoutButtons;
@@ -1,6 +1,6 @@
1
1
  export type { CardOptions, OnClickCallback } from './cardOptions';
2
2
  export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
3
- export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages, } from './MediaAndEmbedsToolbar';
3
+ export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages, buildLayoutDropdown, } from './MediaAndEmbedsToolbar';
4
4
  export type { IconMap, LayoutIcon } from './MediaAndEmbedsToolbar';
5
5
  export type { OptionConfig, CardPluginActions, QueueCardsFromTransactionAction, HideLinkToolbarAction, ChangeSelectedCardToLink, SetSelectedCardAppearance, CardReplacementInputMethod, } from './types';
6
6
  export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
@@ -1,7 +1,9 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
+ import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
2
3
  import type { NodeType } from '@atlaskit/editor-prosemirror/model';
3
4
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
4
5
  import type { EditorAnalyticsAPI } from '../../analytics';
6
+ import { Keymap } from '../../keymaps';
5
7
  import type { Command, EditorContainerWidth, FloatingToolbarItem, Icon, NextEditorPlugin, PluginDependenciesAPI } from '../../types';
6
8
  type WidthPluginType = NextEditorPlugin<'width', {
7
9
  sharedState: EditorContainerWidth | undefined;
@@ -9,8 +11,9 @@ type WidthPluginType = NextEditorPlugin<'width', {
9
11
  type WidthPluginDependencyApi = PluginDependenciesAPI<WidthPluginType> | undefined;
10
12
  export type LayoutIcon = {
11
13
  id?: string;
12
- value: string;
14
+ value: MediaSingleLayout;
13
15
  icon: Icon;
16
+ keyboardShortcut?: Keymap;
14
17
  };
15
18
  export type IconMap = Array<LayoutIcon | {
16
19
  value: 'separator';
@@ -19,4 +22,5 @@ export declare const alignmentIcons: LayoutIcon[];
19
22
  export declare const wrappingIcons: LayoutIcon[];
20
23
  export declare const layoutToMessages: Record<string, any>;
21
24
  declare const buildLayoutButtons: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean, isChangingLayoutDisabled?: boolean, allowPixelResizing?: boolean) => FloatingToolbarItem<Command>[];
25
+ export declare const buildLayoutDropdown: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean, isChangingLayoutDisabled?: boolean, allowPixelResizing?: boolean) => FloatingToolbarItem<Command>[];
22
26
  export default buildLayoutButtons;
@@ -1,6 +1,6 @@
1
1
  export type { CardOptions, OnClickCallback } from './cardOptions';
2
2
  export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
3
- export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages, } from './MediaAndEmbedsToolbar';
3
+ export { default as buildLayoutButtons, alignmentIcons, wrappingIcons, layoutToMessages, buildLayoutDropdown, } from './MediaAndEmbedsToolbar';
4
4
  export type { IconMap, LayoutIcon } from './MediaAndEmbedsToolbar';
5
5
  export type { OptionConfig, CardPluginActions, QueueCardsFromTransactionAction, HideLinkToolbarAction, ChangeSelectedCardToLink, SetSelectedCardAppearance, CardReplacementInputMethod, } from './types';
6
6
  export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "103.12.0",
3
+ "version": "103.13.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/"
@@ -163,7 +163,7 @@
163
163
  "@atlaskit/task-decision": "^19.1.0",
164
164
  "@atlaskit/textfield": "^8.0.0",
165
165
  "@atlaskit/theme": "^18.0.0",
166
- "@atlaskit/tmp-editor-statsig": "^4.12.0",
166
+ "@atlaskit/tmp-editor-statsig": "^4.13.0",
167
167
  "@atlaskit/tokens": "^4.8.0",
168
168
  "@atlaskit/tooltip": "^20.0.0",
169
169
  "@atlaskit/width-detector": "^5.0.0",