@atlaskit/editor-plugin-layout 1.9.5 → 1.9.6

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 +15 -0
  2. package/dist/cjs/plugin.js +6 -5
  3. package/dist/cjs/toolbar.js +53 -2
  4. package/dist/es2019/plugin.js +7 -6
  5. package/dist/es2019/toolbar.js +54 -3
  6. package/dist/esm/plugin.js +7 -6
  7. package/dist/esm/toolbar.js +54 -3
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 1.9.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#155293](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155293)
8
+ [`28161e3c04419`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/28161e3c04419) -
9
+ [ux] Implement toolbar options on layout for setting number of columns
10
+ - [#156078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156078)
11
+ [`2b70196727715`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b70196727715) -
12
+ [ux] Update text for inserting multi column layout
13
+ - [#156137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156137)
14
+ [`485e094b29aa9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/485e094b29aa9) -
15
+ Use stage0 layout node spec behind adv layout experiment
16
+ - Updated dependencies
17
+
3
18
  ## 1.9.5
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -13,6 +13,7 @@ Object.defineProperty(exports, "pluginKey", {
13
13
  });
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
  var _adfSchema = require("@atlaskit/adf-schema");
16
+ var _schema = require("@atlaskit/adf-schema/schema");
16
17
  var _analytics = require("@atlaskit/editor-common/analytics");
17
18
  var _messages = require("@atlaskit/editor-common/messages");
18
19
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
@@ -32,7 +33,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
32
33
  nodes: function nodes() {
33
34
  return [{
34
35
  name: 'layoutSection',
35
- node: _adfSchema.layoutSection
36
+ node: (0, _preRelease.isPreRelease2)() ? _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
36
37
  }, {
37
38
  name: 'layoutColumn',
38
39
  node: _adfSchema.layoutColumn
@@ -65,7 +66,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
65
66
  var formatMessage = _ref3.formatMessage;
66
67
  return (0, _preRelease.isPreRelease2)() ? [{
67
68
  id: 'twocolumnslayout',
68
- title: formatMessage(_messages.toolbarInsertBlockMessages.twoColumns),
69
+ title: formatMessage(_messages.layoutMessages.twoColumns),
69
70
  description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
70
71
  keywords: ['layout', 'column', 'section', 'two column'],
71
72
  priority: 1100,
@@ -78,7 +79,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
78
79
  }
79
80
  }, {
80
81
  id: 'threecolumnslayout',
81
- title: formatMessage(_messages.toolbarInsertBlockMessages.threeColumns),
82
+ title: formatMessage(_messages.layoutMessages.threeColumns),
82
83
  description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
83
84
  keywords: ['layout', 'column', 'section', 'three column'],
84
85
  priority: 1100,
@@ -91,7 +92,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
91
92
  }
92
93
  }, {
93
94
  id: 'fourcolumnslayout',
94
- title: formatMessage(_messages.toolbarInsertBlockMessages.fourColumns),
95
+ title: formatMessage(_messages.layoutMessages.fourColumns),
95
96
  description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
96
97
  keywords: ['layout', 'column', 'section', 'four column'],
97
98
  priority: 1100,
@@ -104,7 +105,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
104
105
  }
105
106
  }, {
106
107
  id: 'fivecolumnslayout',
107
- title: formatMessage(_messages.toolbarInsertBlockMessages.fiveColumns),
108
+ title: formatMessage(_messages.layoutMessages.fiveColumns),
108
109
  description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
109
110
  keywords: ['layout', 'column', 'section', 'five column'],
110
111
  priority: 1100,
package/dist/cjs/toolbar.js CHANGED
@@ -24,6 +24,7 @@ var _layoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph
24
24
  var _layoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-right-sidebar"));
25
25
  var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
26
26
  var _actions = require("./actions");
27
+ var _preRelease = require("./utils/preRelease");
27
28
  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); }
28
29
  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; }
29
30
  var LAYOUT_TYPES = [{
@@ -79,6 +80,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
79
80
  };
80
81
  };
81
82
  var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
83
+ var iconPlaceholder = _layoutTwoColumns.default; // TODO: Replace with proper icon ED-25466
82
84
  var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
83
85
  var _api$decorations$acti, _api$decorations, _api$analytics;
84
86
  var _ref = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
@@ -87,6 +89,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
87
89
  var node = state.doc.nodeAt(pos);
88
90
  if (node) {
89
91
  var currentLayout = (0, _actions.getPresetLayout)(node);
92
+ var numberOfColumns = node.content.childCount || 2;
90
93
  var separator = {
91
94
  type: 'separator'
92
95
  };
@@ -107,7 +110,46 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
107
110
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
108
111
  tabIndex: null
109
112
  };
110
- var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
113
+ var layoutTypes = (0, _preRelease.isPreRelease2)() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
114
+ var columnOptions = [{
115
+ title: intl.formatMessage(_messages.layoutMessages.columnOption, {
116
+ count: 2
117
+ }),
118
+ //'2-columns',
119
+ icon: iconPlaceholder,
120
+ onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal', intl.formatMessage),
121
+ selected: numberOfColumns === 2
122
+ }, {
123
+ title: intl.formatMessage(_messages.layoutMessages.columnOption, {
124
+ count: 3
125
+ }),
126
+ //'3-columns'
127
+ icon: iconPlaceholder,
128
+ onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal', intl.formatMessage),
129
+ selected: numberOfColumns === 3
130
+ }, {
131
+ title: intl.formatMessage(_messages.layoutMessages.columnOption, {
132
+ count: 4
133
+ }),
134
+ //'4-columns'
135
+ icon: iconPlaceholder,
136
+ onClick: function onClick() {
137
+ // TODO: Implement layout update in ED-25053
138
+ return true;
139
+ },
140
+ selected: numberOfColumns === 4
141
+ }, {
142
+ title: intl.formatMessage(_messages.layoutMessages.columnOption, {
143
+ count: 5
144
+ }),
145
+ //'5-columns'
146
+ icon: iconPlaceholder,
147
+ onClick: function onClick() {
148
+ // TODO: Implement layout update in ED-25053
149
+ return true;
150
+ },
151
+ selected: numberOfColumns === 5
152
+ }];
111
153
  return {
112
154
  title: layoutToolbarTitle,
113
155
  getDomRef: function getDomRef(view) {
@@ -115,7 +157,16 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
115
157
  },
116
158
  nodeType: nodeType,
117
159
  groupLabel: intl.formatMessage(_messages.layoutMessages.floatingToolbarRadioGroupAriaLabel),
118
- items: [].concat((0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
160
+ items: [].concat((0, _toConsumableArray2.default)((0, _preRelease.isPreRelease2)() ? [{
161
+ type: 'dropdown',
162
+ title: intl.formatMessage(_messages.layoutMessages.columnOption, {
163
+ count: numberOfColumns
164
+ }),
165
+ //`${numberOfColumns}-columns`,
166
+ options: columnOptions,
167
+ showSelected: true,
168
+ testId: 'column-options-button'
169
+ }] : []), (0, _toConsumableArray2.default)(layoutTypes.map(function (i) {
119
170
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
120
171
  })), (0, _toConsumableArray2.default)(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
121
172
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
package/dist/es2019/plugin.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
3
+ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
3
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
- import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
+ import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
6
7
  import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
7
8
  import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -20,7 +21,7 @@ export const layoutPlugin = ({
20
21
  nodes() {
21
22
  return [{
22
23
  name: 'layoutSection',
23
- node: layoutSection
24
+ node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
24
25
  }, {
25
26
  name: 'layoutColumn',
26
27
  node: layoutColumn
@@ -52,7 +53,7 @@ export const layoutPlugin = ({
52
53
  formatMessage
53
54
  }) => isPreRelease2() ? [{
54
55
  id: 'twocolumnslayout',
55
- title: formatMessage(messages.twoColumns),
56
+ title: formatMessage(layoutMessages.twoColumns),
56
57
  description: formatMessage(messages.columnsDescription),
57
58
  keywords: ['layout', 'column', 'section', 'two column'],
58
59
  priority: 1100,
@@ -63,7 +64,7 @@ export const layoutPlugin = ({
63
64
  }
64
65
  }, {
65
66
  id: 'threecolumnslayout',
66
- title: formatMessage(messages.threeColumns),
67
+ title: formatMessage(layoutMessages.threeColumns),
67
68
  description: formatMessage(messages.columnsDescription),
68
69
  keywords: ['layout', 'column', 'section', 'three column'],
69
70
  priority: 1100,
@@ -74,7 +75,7 @@ export const layoutPlugin = ({
74
75
  }
75
76
  }, {
76
77
  id: 'fourcolumnslayout',
77
- title: formatMessage(messages.fourColumns),
78
+ title: formatMessage(layoutMessages.fourColumns),
78
79
  description: formatMessage(messages.columnsDescription),
79
80
  keywords: ['layout', 'column', 'section', 'four column'],
80
81
  priority: 1100,
@@ -85,7 +86,7 @@ export const layoutPlugin = ({
85
86
  }
86
87
  }, {
87
88
  id: 'fivecolumnslayout',
88
- title: formatMessage(messages.fiveColumns),
89
+ title: formatMessage(layoutMessages.fiveColumns),
89
90
  description: formatMessage(messages.columnsDescription),
90
91
  keywords: ['layout', 'column', 'section', 'five column'],
91
92
  priority: 1100,
package/dist/es2019/toolbar.js CHANGED
@@ -1,4 +1,4 @@
1
- import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
1
+ import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
2
2
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
3
3
  import DeleteIcon from '@atlaskit/icon/core/delete';
4
4
  import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
@@ -15,6 +15,7 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
15
15
  import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
16
16
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
17
17
  import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
18
+ import { isPreRelease2 } from './utils/preRelease';
18
19
  const LAYOUT_TYPES = [{
19
20
  id: 'editor.layout.twoEquals',
20
21
  type: 'two_equal',
@@ -66,6 +67,7 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
66
67
  tabIndex: null
67
68
  });
68
69
  export const layoutToolbarTitle = 'Layout floating controls';
70
+ const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
69
71
  export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) => {
70
72
  var _api$decorations$acti, _api$decorations, _api$analytics;
71
73
  const {
@@ -75,6 +77,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
75
77
  const node = state.doc.nodeAt(pos);
76
78
  if (node) {
77
79
  const currentLayout = getPresetLayout(node);
80
+ const numberOfColumns = node.content.childCount || 2;
78
81
  const separator = {
79
82
  type: 'separator'
80
83
  };
@@ -95,13 +98,61 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
95
98
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
96
99
  tabIndex: null
97
100
  };
98
- const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
101
+ const layoutTypes = isPreRelease2() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
102
+ const columnOptions = [{
103
+ title: intl.formatMessage(layoutMessages.columnOption, {
104
+ count: 2
105
+ }),
106
+ //'2-columns',
107
+ icon: iconPlaceholder,
108
+ onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
109
+ selected: numberOfColumns === 2
110
+ }, {
111
+ title: intl.formatMessage(layoutMessages.columnOption, {
112
+ count: 3
113
+ }),
114
+ //'3-columns'
115
+ icon: iconPlaceholder,
116
+ onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
117
+ selected: numberOfColumns === 3
118
+ }, {
119
+ title: intl.formatMessage(layoutMessages.columnOption, {
120
+ count: 4
121
+ }),
122
+ //'4-columns'
123
+ icon: iconPlaceholder,
124
+ onClick: () => {
125
+ // TODO: Implement layout update in ED-25053
126
+ return true;
127
+ },
128
+ selected: numberOfColumns === 4
129
+ }, {
130
+ title: intl.formatMessage(layoutMessages.columnOption, {
131
+ count: 5
132
+ }),
133
+ //'5-columns'
134
+ icon: iconPlaceholder,
135
+ onClick: () => {
136
+ // TODO: Implement layout update in ED-25053
137
+ return true;
138
+ },
139
+ selected: numberOfColumns === 5
140
+ }];
99
141
  return {
100
142
  title: layoutToolbarTitle,
101
143
  getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
102
144
  nodeType,
103
145
  groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
104
- items: [...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
146
+ items: [...(isPreRelease2() ? [{
147
+ type: 'dropdown',
148
+ title: intl.formatMessage(layoutMessages.columnOption, {
149
+ count: numberOfColumns
150
+ }),
151
+ //`${numberOfColumns}-columns`,
152
+ options: columnOptions,
153
+ showSelected: true,
154
+ testId: 'column-options-button'
155
+ }] : []), ...layoutTypes.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)), ...(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(i => buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI)) : []), separator, {
105
156
  type: 'copy-button',
106
157
  supportsViewMode: true,
107
158
  items: [{
package/dist/esm/plugin.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
3
+ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
3
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
- import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
+ import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
6
7
  import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
7
8
  import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -20,7 +21,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
20
21
  nodes: function nodes() {
21
22
  return [{
22
23
  name: 'layoutSection',
23
- node: layoutSection
24
+ node: isPreRelease2() ? layoutSectionWithSingleColumn : layoutSection
24
25
  }, {
25
26
  name: 'layoutColumn',
26
27
  node: layoutColumn
@@ -53,7 +54,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
53
54
  var formatMessage = _ref3.formatMessage;
54
55
  return isPreRelease2() ? [{
55
56
  id: 'twocolumnslayout',
56
- title: formatMessage(messages.twoColumns),
57
+ title: formatMessage(layoutMessages.twoColumns),
57
58
  description: formatMessage(messages.columnsDescription),
58
59
  keywords: ['layout', 'column', 'section', 'two column'],
59
60
  priority: 1100,
@@ -66,7 +67,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
66
67
  }
67
68
  }, {
68
69
  id: 'threecolumnslayout',
69
- title: formatMessage(messages.threeColumns),
70
+ title: formatMessage(layoutMessages.threeColumns),
70
71
  description: formatMessage(messages.columnsDescription),
71
72
  keywords: ['layout', 'column', 'section', 'three column'],
72
73
  priority: 1100,
@@ -79,7 +80,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
79
80
  }
80
81
  }, {
81
82
  id: 'fourcolumnslayout',
82
- title: formatMessage(messages.fourColumns),
83
+ title: formatMessage(layoutMessages.fourColumns),
83
84
  description: formatMessage(messages.columnsDescription),
84
85
  keywords: ['layout', 'column', 'section', 'four column'],
85
86
  priority: 1100,
@@ -92,7 +93,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
92
93
  }
93
94
  }, {
94
95
  id: 'fivecolumnslayout',
95
- title: formatMessage(messages.fiveColumns),
96
+ title: formatMessage(layoutMessages.fiveColumns),
96
97
  description: formatMessage(messages.columnsDescription),
97
98
  keywords: ['layout', 'column', 'section', 'five column'],
98
99
  priority: 1100,
package/dist/esm/toolbar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
- import commonMessages, { layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
2
+ import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
3
3
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
4
4
  import DeleteIcon from '@atlaskit/icon/core/delete';
5
5
  import LayoutOneColumnIcon from '@atlaskit/icon/core/layout-one-column';
@@ -16,6 +16,7 @@ import LayoutTwoLeftSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-lef
16
16
  import LayoutTwoRightSidebarIcon from '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
17
17
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
18
18
  import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from './actions';
19
+ import { isPreRelease2 } from './utils/preRelease';
19
20
  var LAYOUT_TYPES = [{
20
21
  id: 'editor.layout.twoEquals',
21
22
  type: 'two_equal',
@@ -69,6 +70,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
69
70
  };
70
71
  };
71
72
  export var layoutToolbarTitle = 'Layout floating controls';
73
+ var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon ED-25466
72
74
  export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api) {
73
75
  var _api$decorations$acti, _api$decorations, _api$analytics;
74
76
  var _ref = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
@@ -77,6 +79,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
77
79
  var node = state.doc.nodeAt(pos);
78
80
  if (node) {
79
81
  var currentLayout = getPresetLayout(node);
82
+ var numberOfColumns = node.content.childCount || 2;
80
83
  var separator = {
81
84
  type: 'separator'
82
85
  };
@@ -97,7 +100,46 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
97
100
  onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
98
101
  tabIndex: null
99
102
  };
100
- var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
103
+ var layoutTypes = isPreRelease2() ? [] : allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
104
+ var columnOptions = [{
105
+ title: intl.formatMessage(layoutMessages.columnOption, {
106
+ count: 2
107
+ }),
108
+ //'2-columns',
109
+ icon: iconPlaceholder,
110
+ onClick: setPresetLayout(editorAnalyticsAPI)('two_equal', intl.formatMessage),
111
+ selected: numberOfColumns === 2
112
+ }, {
113
+ title: intl.formatMessage(layoutMessages.columnOption, {
114
+ count: 3
115
+ }),
116
+ //'3-columns'
117
+ icon: iconPlaceholder,
118
+ onClick: setPresetLayout(editorAnalyticsAPI)('three_equal', intl.formatMessage),
119
+ selected: numberOfColumns === 3
120
+ }, {
121
+ title: intl.formatMessage(layoutMessages.columnOption, {
122
+ count: 4
123
+ }),
124
+ //'4-columns'
125
+ icon: iconPlaceholder,
126
+ onClick: function onClick() {
127
+ // TODO: Implement layout update in ED-25053
128
+ return true;
129
+ },
130
+ selected: numberOfColumns === 4
131
+ }, {
132
+ title: intl.formatMessage(layoutMessages.columnOption, {
133
+ count: 5
134
+ }),
135
+ //'5-columns'
136
+ icon: iconPlaceholder,
137
+ onClick: function onClick() {
138
+ // TODO: Implement layout update in ED-25053
139
+ return true;
140
+ },
141
+ selected: numberOfColumns === 5
142
+ }];
101
143
  return {
102
144
  title: layoutToolbarTitle,
103
145
  getDomRef: function getDomRef(view) {
@@ -105,7 +147,16 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
105
147
  },
106
148
  nodeType: nodeType,
107
149
  groupLabel: intl.formatMessage(toolbarMessages.floatingToolbarRadioGroupAriaLabel),
108
- items: [].concat(_toConsumableArray(layoutTypes.map(function (i) {
150
+ items: [].concat(_toConsumableArray(isPreRelease2() ? [{
151
+ type: 'dropdown',
152
+ title: intl.formatMessage(layoutMessages.columnOption, {
153
+ count: numberOfColumns
154
+ }),
155
+ //`${numberOfColumns}-columns`,
156
+ options: columnOptions,
157
+ showSelected: true,
158
+ testId: 'column-options-button'
159
+ }] : []), _toConsumableArray(layoutTypes.map(function (i) {
109
160
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
110
161
  })), _toConsumableArray(addSidebarLayouts ? SIDEBAR_LAYOUT_TYPES.map(function (i) {
111
162
  return buildLayoutButton(intl, i, currentLayout, editorAnalyticsAPI);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "1.9.5",
3
+ "version": "1.9.6",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,13 +32,13 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^42.3.1",
35
- "@atlaskit/editor-common": "^94.2.0",
35
+ "@atlaskit/editor-common": "^94.3.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-decorations": "^1.3.0",
38
38
  "@atlaskit/editor-prosemirror": "6.0.0",
39
39
  "@atlaskit/icon": "^22.24.0",
40
40
  "@atlaskit/platform-feature-flags": "^0.3.0",
41
- "@atlaskit/tmp-editor-statsig": "^2.8.0",
41
+ "@atlaskit/tmp-editor-statsig": "^2.9.0",
42
42
  "@atlaskit/tokens": "^2.0.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"