@atlaskit/editor-plugin-layout 2.1.0 → 2.1.2

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 (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/global-styles.js +21 -3
  3. package/dist/cjs/ui/toolbar.js +38 -17
  4. package/dist/es2019/ui/global-styles.js +21 -3
  5. package/dist/es2019/ui/toolbar.js +38 -17
  6. package/dist/esm/ui/global-styles.js +21 -3
  7. package/dist/esm/ui/toolbar.js +38 -17
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 2.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#123010](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123010)
8
+ [`de55801631775`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/de55801631775) -
9
+ [ux] Move copy/delete to overflow menu on editor floating toolbar
10
+
11
+ ## 2.1.1
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 2.1.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/ui/global-styles.js CHANGED
@@ -9,6 +9,7 @@ var _react2 = require("@emotion/react");
9
9
  var _reactIntlNext = require("react-intl-next");
10
10
  var _messages = require("@atlaskit/editor-common/messages");
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
13
  /**
13
14
  * @jsxRuntime classic
14
15
  * @jsx jsx
@@ -17,6 +18,22 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled
18
19
 
19
20
  var getPlaceholderStyle = function getPlaceholderStyle(message) {
21
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
22
+ return (0, _react2.css)({
23
+ // when paragraph is the only child, and it only has a trailingBreak.
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
25
+ '.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
27
+ '&::before': {
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
29
+ content: "\"".concat(message, "\""),
30
+ position: 'absolute',
31
+ color: "var(--ds-text-subtlest, #626F86)",
32
+ pointerEvents: 'none'
33
+ }
34
+ }
35
+ });
36
+ }
20
37
  if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
21
38
  return (0, _react2.css)({
22
39
  // when paragraph is the only child, and it only has a trailingBreak.
@@ -28,7 +45,7 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
28
45
  content: "\"".concat(message, "\""),
29
46
  position: 'absolute',
30
47
  color: "var(--ds-text-disabled, #A5ADBA)",
31
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
48
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
32
49
  marginTop: "var(--ds-space-050, 4px)",
33
50
  pointerEvents: 'none'
34
51
  }
@@ -45,7 +62,7 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
45
62
  content: "\"".concat(message, "\""),
46
63
  position: 'absolute',
47
64
  color: "var(--ds-text-disabled, #A5ADBA)",
48
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
65
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
49
66
  marginTop: "var(--ds-space-050, 4px)",
50
67
  pointerEvents: 'none'
51
68
  }
@@ -56,7 +73,8 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
56
73
  var _useIntl = (0, _reactIntlNext.useIntl)(),
57
74
  formatMessage = _useIntl.formatMessage;
58
75
  var placeholderStyle = (0, _react.useMemo)(function () {
59
- return getPlaceholderStyle(formatMessage(_messages.layoutMessages.layoutPlaceholder));
76
+ var placeholderText = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _messages.layoutMessages.controlslayoutPlaceholder : _messages.layoutMessages.layoutPlaceholder;
77
+ return getPlaceholderStyle(formatMessage(placeholderText));
60
78
  }, [formatMessage]);
61
79
  return (0, _react2.jsx)(_react2.Global, {
62
80
  styles: placeholderStyle
package/dist/cjs/ui/toolbar.js CHANGED
@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.layoutToolbarTitle = exports.buildToolbar = void 0;
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
+ var _react = _interopRequireDefault(require("react"));
10
11
  var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
11
12
  var _utils = require("@atlaskit/editor-prosemirror/utils");
13
+ var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
12
14
  var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
13
15
  var _layoutOneColumn = _interopRequireDefault(require("@atlaskit/icon/core/layout-one-column"));
14
16
  var _layoutThreeColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-three-columns"));
@@ -186,14 +188,11 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
186
188
  testId: 'column-options-button'
187
189
  }].concat((0, _toConsumableArray2.default)(distributionOptions.length > 0 ? [separator] : []), (0, _toConsumableArray2.default)(addSidebarLayouts ? distributionOptions.map(function (i) {
188
190
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
189
- }) : []), [separator, {
190
- type: 'copy-button',
191
- items: [{
192
- state: state,
193
- formatMessage: intl.formatMessage,
194
- nodeType: nodeType
195
- }]
196
- }, separator, deleteButton]);
191
+ }) : []));
192
+ };
193
+ var fullHeightSeparator = {
194
+ type: 'separator',
195
+ fullHeight: true
197
196
  };
198
197
  var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
199
198
  var _api$decorations$acti, _api$decorations, _api$analytics;
@@ -223,7 +222,36 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
223
222
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
224
223
  tabIndex: null
225
224
  };
225
+ var copyButton = {
226
+ type: 'copy-button',
227
+ items: [{
228
+ state: state,
229
+ formatMessage: intl.formatMessage,
230
+ nodeType: nodeType
231
+ }]
232
+ };
226
233
  var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
234
+ var overflowMenu = {
235
+ type: 'overflow-dropdown',
236
+ options: [{
237
+ title: 'Copy',
238
+ onClick: function onClick() {
239
+ var _api$core, _api$floatingToolbar;
240
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
241
+ api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType));
242
+ return true;
243
+ },
244
+ icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
245
+ label: "Copy"
246
+ })
247
+ }, {
248
+ title: 'Delete',
249
+ onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI),
250
+ icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
251
+ label: "Delete"
252
+ })
253
+ }]
254
+ };
227
255
  return {
228
256
  title: layoutToolbarTitle,
229
257
  // Ignored via go/ees005
@@ -233,7 +261,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
233
261
  },
234
262
  nodeType: nodeType,
235
263
  groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
236
- items: (0, _experiments.editorExperiment)('advanced_layouts', true) ? getAdvancedLayoutItems({
264
+ items: [].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('advanced_layouts', true) ? getAdvancedLayoutItems({
237
265
  addSidebarLayouts: addSidebarLayouts,
238
266
  intl: intl,
239
267
  editorAnalyticsAPI: editorAnalyticsAPI,
@@ -247,14 +275,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
247
275
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
248
276
  })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
249
277
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
250
- }) : []), [separator, {
251
- type: 'copy-button',
252
- items: [{
253
- state: state,
254
- formatMessage: intl.formatMessage,
255
- nodeType: nodeType
256
- }]
257
- }, separator, deleteButton]),
278
+ }) : []))), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? [fullHeightSeparator, overflowMenu] : [separator, copyButton, separator, deleteButton])),
258
279
  scrollable: true
259
280
  };
260
281
  }
package/dist/es2019/ui/global-styles.js CHANGED
@@ -9,7 +9,24 @@ import { css, Global, jsx } from '@emotion/react';
9
9
  import { useIntl } from 'react-intl-next';
10
10
  import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
11
11
  import { fg } from '@atlaskit/platform-feature-flags';
12
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
13
  const getPlaceholderStyle = message => {
14
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
15
+ return css({
16
+ // when paragraph is the only child, and it only has a trailingBreak.
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
18
+ '.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
20
+ '&::before': {
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
22
+ content: `"${message}"`,
23
+ position: 'absolute',
24
+ color: "var(--ds-text-subtlest, #626F86)",
25
+ pointerEvents: 'none'
26
+ }
27
+ }
28
+ });
29
+ }
13
30
  if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
14
31
  return css({
15
32
  // when paragraph is the only child, and it only has a trailingBreak.
@@ -21,7 +38,7 @@ const getPlaceholderStyle = message => {
21
38
  content: `"${message}"`,
22
39
  position: 'absolute',
23
40
  color: "var(--ds-text-disabled, #A5ADBA)",
24
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
41
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
25
42
  marginTop: "var(--ds-space-050, 4px)",
26
43
  pointerEvents: 'none'
27
44
  }
@@ -38,7 +55,7 @@ const getPlaceholderStyle = message => {
38
55
  content: `"${message}"`,
39
56
  position: 'absolute',
40
57
  color: "var(--ds-text-disabled, #A5ADBA)",
41
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
58
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
42
59
  marginTop: "var(--ds-space-050, 4px)",
43
60
  pointerEvents: 'none'
44
61
  }
@@ -50,7 +67,8 @@ export const GlobalStylesWrapper = () => {
50
67
  formatMessage
51
68
  } = useIntl();
52
69
  const placeholderStyle = useMemo(() => {
53
- return getPlaceholderStyle(formatMessage(messages.layoutPlaceholder));
70
+ const placeholderText = editorExperiment('platform_editor_controls', 'variant1') ? messages.controlslayoutPlaceholder : messages.layoutPlaceholder;
71
+ return getPlaceholderStyle(formatMessage(placeholderText));
54
72
  }, [formatMessage]);
55
73
  return jsx(Global, {
56
74
  styles: placeholderStyle
package/dist/es2019/ui/toolbar.js CHANGED
@@ -1,5 +1,7 @@
1
+ import React from 'react';
1
2
  import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
2
3
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
4
+ import CopyIcon from '@atlaskit/icon/core/copy';
3
5
  import DeleteIcon from '@atlaskit/icon/core/delete';
4
6
  import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
5
7
  import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
@@ -172,14 +174,11 @@ const getAdvancedLayoutItems = ({
172
174
  options: columnOptions,
173
175
  showSelected: true,
174
176
  testId: 'column-options-button'
175
- }, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
176
- type: 'copy-button',
177
- items: [{
178
- state,
179
- formatMessage: intl.formatMessage,
180
- nodeType
181
- }]
182
- }, separator, deleteButton];
177
+ }, ...(distributionOptions.length > 0 ? [separator] : []), ...(addSidebarLayouts ? distributionOptions.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])];
178
+ };
179
+ const fullHeightSeparator = {
180
+ type: 'separator',
181
+ fullHeight: true
183
182
  };
184
183
  export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
185
184
  var _api$decorations$acti, _api$decorations, _api$analytics;
@@ -210,7 +209,36 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
210
209
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
211
210
  tabIndex: null
212
211
  };
212
+ const copyButton = {
213
+ type: 'copy-button',
214
+ items: [{
215
+ state,
216
+ formatMessage: intl.formatMessage,
217
+ nodeType
218
+ }]
219
+ };
213
220
  const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
221
+ const overflowMenu = {
222
+ type: 'overflow-dropdown',
223
+ options: [{
224
+ title: 'Copy',
225
+ onClick: () => {
226
+ var _api$core, _api$floatingToolbar;
227
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute( // @ts-ignore
228
+ api === null || api === void 0 ? void 0 : (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType));
229
+ return true;
230
+ },
231
+ icon: /*#__PURE__*/React.createElement(CopyIcon, {
232
+ label: "Copy"
233
+ })
234
+ }, {
235
+ title: 'Delete',
236
+ onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
237
+ icon: /*#__PURE__*/React.createElement(DeleteIcon, {
238
+ label: "Delete"
239
+ })
240
+ }]
241
+ };
214
242
  return {
215
243
  title: layoutToolbarTitle,
216
244
  // Ignored via go/ees005
@@ -218,7 +246,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
218
246
  getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
219
247
  nodeType,
220
248
  groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
221
- items: editorExperiment('advanced_layouts', true) ? getAdvancedLayoutItems({
249
+ items: [...(editorExperiment('advanced_layouts', true) ? getAdvancedLayoutItems({
222
250
  addSidebarLayouts,
223
251
  intl,
224
252
  editorAnalyticsAPI,
@@ -228,14 +256,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
228
256
  separator,
229
257
  deleteButton,
230
258
  currentLayout
231
- }) : [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
232
- type: 'copy-button',
233
- items: [{
234
- state,
235
- formatMessage: intl.formatMessage,
236
- nodeType
237
- }]
238
- }, separator, deleteButton],
259
+ }) : [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : [])]), ...(editorExperiment('platform_editor_controls', 'variant1') ? [fullHeightSeparator, overflowMenu] : [separator, copyButton, separator, deleteButton])],
239
260
  scrollable: true
240
261
  };
241
262
  }
package/dist/esm/ui/global-styles.js CHANGED
@@ -9,7 +9,24 @@ import { css, Global, jsx } from '@emotion/react';
9
9
  import { useIntl } from 'react-intl-next';
10
10
  import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
11
11
  import { fg } from '@atlaskit/platform-feature-flags';
12
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
13
  var getPlaceholderStyle = function getPlaceholderStyle(message) {
14
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
15
+ return css({
16
+ // when paragraph is the only child, and it only has a trailingBreak.
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
18
+ '.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
20
+ '&::before': {
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
22
+ content: "\"".concat(message, "\""),
23
+ position: 'absolute',
24
+ color: "var(--ds-text-subtlest, #626F86)",
25
+ pointerEvents: 'none'
26
+ }
27
+ }
28
+ });
29
+ }
13
30
  if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
14
31
  return css({
15
32
  // when paragraph is the only child, and it only has a trailingBreak.
@@ -21,7 +38,7 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
21
38
  content: "\"".concat(message, "\""),
22
39
  position: 'absolute',
23
40
  color: "var(--ds-text-disabled, #A5ADBA)",
24
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
41
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
25
42
  marginTop: "var(--ds-space-050, 4px)",
26
43
  pointerEvents: 'none'
27
44
  }
@@ -38,7 +55,7 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
38
55
  content: "\"".concat(message, "\""),
39
56
  position: 'absolute',
40
57
  color: "var(--ds-text-disabled, #A5ADBA)",
41
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
58
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
42
59
  marginTop: "var(--ds-space-050, 4px)",
43
60
  pointerEvents: 'none'
44
61
  }
@@ -49,7 +66,8 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper() {
49
66
  var _useIntl = useIntl(),
50
67
  formatMessage = _useIntl.formatMessage;
51
68
  var placeholderStyle = useMemo(function () {
52
- return getPlaceholderStyle(formatMessage(messages.layoutPlaceholder));
69
+ var placeholderText = editorExperiment('platform_editor_controls', 'variant1') ? messages.controlslayoutPlaceholder : messages.layoutPlaceholder;
70
+ return getPlaceholderStyle(formatMessage(placeholderText));
53
71
  }, [formatMessage]);
54
72
  return jsx(Global, {
55
73
  styles: placeholderStyle
package/dist/esm/ui/toolbar.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ import React from 'react';
2
3
  import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
3
4
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
5
+ import CopyIcon from '@atlaskit/icon/core/copy';
4
6
  import DeleteIcon from '@atlaskit/icon/core/delete';
5
7
  import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
6
8
  import LayoutThreeColumnsIcon from '@atlaskit/icon/core/layout-three-columns';
@@ -176,14 +178,11 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
176
178
  testId: 'column-options-button'
177
179
  }].concat(_toConsumableArray(distributionOptions.length > 0 ? [separator] : []), _toConsumableArray(addSidebarLayouts ? distributionOptions.map(function (i) {
178
180
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
179
- }) : []), [separator, {
180
- type: 'copy-button',
181
- items: [{
182
- state: state,
183
- formatMessage: intl.formatMessage,
184
- nodeType: nodeType
185
- }]
186
- }, separator, deleteButton]);
181
+ }) : []));
182
+ };
183
+ var fullHeightSeparator = {
184
+ type: 'separator',
185
+ fullHeight: true
187
186
  };
188
187
  export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
189
188
  var _api$decorations$acti, _api$decorations, _api$analytics;
@@ -213,7 +212,36 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
213
212
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
214
213
  tabIndex: null
215
214
  };
215
+ var copyButton = {
216
+ type: 'copy-button',
217
+ items: [{
218
+ state: state,
219
+ formatMessage: intl.formatMessage,
220
+ nodeType: nodeType
221
+ }]
222
+ };
216
223
  var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
224
+ var overflowMenu = {
225
+ type: 'overflow-dropdown',
226
+ options: [{
227
+ title: 'Copy',
228
+ onClick: function onClick() {
229
+ var _api$core, _api$floatingToolbar;
230
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
231
+ api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType));
232
+ return true;
233
+ },
234
+ icon: /*#__PURE__*/React.createElement(CopyIcon, {
235
+ label: "Copy"
236
+ })
237
+ }, {
238
+ title: 'Delete',
239
+ onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
240
+ icon: /*#__PURE__*/React.createElement(DeleteIcon, {
241
+ label: "Delete"
242
+ })
243
+ }]
244
+ };
217
245
  return {
218
246
  title: layoutToolbarTitle,
219
247
  // Ignored via go/ees005
@@ -223,7 +251,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
223
251
  },
224
252
  nodeType: nodeType,
225
253
  groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
226
- items: editorExperiment('advanced_layouts', true) ? getAdvancedLayoutItems({
254
+ items: [].concat(_toConsumableArray(editorExperiment('advanced_layouts', true) ? getAdvancedLayoutItems({
227
255
  addSidebarLayouts: addSidebarLayouts,
228
256
  intl: intl,
229
257
  editorAnalyticsAPI: editorAnalyticsAPI,
@@ -237,14 +265,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
237
265
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
238
266
  })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
239
267
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
240
- }) : []), [separator, {
241
- type: 'copy-button',
242
- items: [{
243
- state: state,
244
- formatMessage: intl.formatMessage,
245
- nodeType: nodeType
246
- }]
247
- }, separator, deleteButton]),
268
+ }) : []))), _toConsumableArray(editorExperiment('platform_editor_controls', 'variant1') ? [fullHeightSeparator, overflowMenu] : [separator, copyButton, separator, deleteButton])),
248
269
  scrollable: true
249
270
  };
250
271
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "2.1.0",
3
+ "version": "2.1.2",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
- "@atlaskit/editor-common": "^100.5.0",
37
+ "@atlaskit/editor-common": "^101.1.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.1.0",
39
39
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
40
40
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",