@atlaskit/editor-plugin-panel 5.2.5 → 5.3.1

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 (15) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/editor-actions/actions.js +5 -11
  3. package/dist/cjs/panelPlugin.js +86 -35
  4. package/dist/cjs/pm-plugins/utils/utils.js +1 -3
  5. package/dist/es2019/editor-actions/actions.js +6 -12
  6. package/dist/es2019/panelPlugin.js +95 -39
  7. package/dist/es2019/pm-plugins/utils/utils.js +2 -5
  8. package/dist/esm/editor-actions/actions.js +6 -12
  9. package/dist/esm/panelPlugin.js +87 -36
  10. package/dist/esm/pm-plugins/utils/utils.js +2 -4
  11. package/dist/types/panelPluginType.d.ts +1 -1
  12. package/dist/types/ui/toolbar.d.ts +1 -1
  13. package/dist/types-ts4.5/panelPluginType.d.ts +1 -1
  14. package/dist/types-ts4.5/ui/toolbar.d.ts +1 -1
  15. package/package.json +5 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-panel
2
2
 
3
+ ## 5.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 5.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`a0e6cdeb5a90c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0e6cdeb5a90c) -
14
+ [ux] New experiment to unify the handling of panel insertion to more consistent behaviour.
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 5.2.5
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/editor-actions/actions.js CHANGED
@@ -15,7 +15,6 @@ var _panel = require("@atlaskit/editor-common/panel");
15
15
  var _utils = require("@atlaskit/editor-common/utils");
16
16
  var _state = require("@atlaskit/editor-prosemirror/state");
17
17
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
18
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
18
  var _utils3 = require("../pm-plugins/utils/utils");
20
19
  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; }
21
20
  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; }
@@ -52,7 +51,6 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
52
51
  var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
53
52
  var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
54
53
  return function (state, dispatch) {
55
- var _panelNode$node$attrs;
56
54
  var nodes = state.schema.nodes,
57
55
  tr = state.tr;
58
56
  var panelNode = (0, _utils3.findPanel)(state);
@@ -62,7 +60,6 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
62
60
  var newType = panelType;
63
61
  var previousType = panelNode.node.attrs.panelType;
64
62
  var newTr;
65
- var localId = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? ((_panelNode$node$attrs = panelNode.node.attrs) === null || _panelNode$node$attrs === void 0 ? void 0 : _panelNode$node$attrs.localId) || _adfSchema.uuid.generate() : undefined;
66
63
  if (allowCustomPanel) {
67
64
  var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(previousType);
68
65
  var previousIcon = panelNode.node.attrs.panelIcon;
@@ -79,13 +76,11 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
79
76
  panelIconId: newPanelOptions.emojiId,
80
77
  panelIconText: newPanelOptions.emojiText,
81
78
  panelColor: newPanelOptions.color,
82
- panelType: panelType,
83
- localId: localId
79
+ panelType: panelType
84
80
  });
85
81
  } else {
86
82
  newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
87
- panelType: panelType,
88
- localId: localId
83
+ panelType: panelType
89
84
  });
90
85
  }
91
86
  var payload = {
@@ -109,6 +104,8 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
109
104
  };
110
105
  };
111
106
  };
107
+
108
+ // Delete with 'platform_editor_fix_quick_insert_consistency_exp'
112
109
  function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
113
110
  return (0, _editorAnalytics.withAnalytics)(analyticsAPI, {
114
111
  action: _analytics.ACTION.INSERTED,
@@ -122,10 +119,7 @@ function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
122
119
  })(function (state, dispatch) {
123
120
  var nodes = state.schema.nodes;
124
121
  if (nodes.panel && nodes.paragraph) {
125
- var panelAttrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
126
- localId: _adfSchema.uuid.generate()
127
- } : {};
128
- return (0, _utils.wrapSelectionIn)(nodes.panel, panelAttrs)(state, dispatch);
122
+ return (0, _utils.wrapSelectionIn)(nodes.panel)(state, dispatch);
129
123
  }
130
124
  return false;
131
125
  });
package/dist/cjs/panelPlugin.js CHANGED
@@ -9,11 +9,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _adfSchema = require("@atlaskit/adf-schema");
11
11
  var _analytics = require("@atlaskit/editor-common/analytics");
12
+ var _insert = require("@atlaskit/editor-common/insert");
12
13
  var _messages = require("@atlaskit/editor-common/messages");
13
14
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
14
15
  var _utils = require("@atlaskit/editor-common/utils");
15
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
17
  var _colors = require("@atlaskit/theme/colors");
18
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
19
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
20
  var _actions = require("./editor-actions/actions");
19
21
  var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
@@ -57,8 +59,28 @@ var panelPlugin = function panelPlugin(_ref) {
57
59
  },
58
60
  actions: {
59
61
  insertPanel: function insertPanel(inputMethod) {
60
- var _api$analytics;
61
- return (0, _actions.insertPanelWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
62
+ if ((0, _expValEquals.expValEquals)('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
63
+ return function (state, dispatch) {
64
+ var tr = createPanelAction({
65
+ state: state,
66
+ attributes: {
67
+ panelType: _adfSchema.PanelType.INFO
68
+ },
69
+ api: api,
70
+ inputMethod: inputMethod
71
+ });
72
+ if (!tr) {
73
+ return false;
74
+ }
75
+ if (dispatch) {
76
+ dispatch(tr);
77
+ }
78
+ return true;
79
+ };
80
+ } else {
81
+ var _api$analytics;
82
+ return (0, _actions.insertPanelWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
83
+ }
62
84
  }
63
85
  },
64
86
  pluginsOptions: {
@@ -74,14 +96,14 @@ var panelPlugin = function panelPlugin(_ref) {
74
96
  icon: function icon() {
75
97
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanel, null);
76
98
  },
77
- action: function action(insert, state) {
99
+ action: function action(typeAheadInsert, state) {
78
100
  return createPanelAction({
79
101
  state: state,
80
102
  attributes: {
81
103
  panelType: _adfSchema.PanelType.INFO
82
104
  },
83
105
  api: api,
84
- insert: insert
106
+ typeAheadInsert: typeAheadInsert
85
107
  });
86
108
  }
87
109
  }];
@@ -95,14 +117,14 @@ var panelPlugin = function panelPlugin(_ref) {
95
117
  icon: function icon() {
96
118
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanel, null);
97
119
  },
98
- action: function action(insert, state) {
120
+ action: function action(typeAheadInsert, state) {
99
121
  return createPanelAction({
100
122
  state: state,
101
123
  attributes: {
102
124
  panelType: _adfSchema.PanelType.INFO
103
125
  },
104
126
  api: api,
105
- insert: insert
127
+ typeAheadInsert: typeAheadInsert
106
128
  });
107
129
  }
108
130
  }, {
@@ -113,14 +135,14 @@ var panelPlugin = function panelPlugin(_ref) {
113
135
  icon: function icon() {
114
136
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelNote, null);
115
137
  },
116
- action: function action(insert, state) {
138
+ action: function action(typeAheadInsert, state) {
117
139
  return createPanelAction({
118
140
  state: state,
119
141
  attributes: {
120
142
  panelType: _adfSchema.PanelType.NOTE
121
143
  },
122
144
  api: api,
123
- insert: insert
145
+ typeAheadInsert: typeAheadInsert
124
146
  });
125
147
  }
126
148
  }, {
@@ -132,14 +154,14 @@ var panelPlugin = function panelPlugin(_ref) {
132
154
  icon: function icon() {
133
155
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelSuccess, null);
134
156
  },
135
- action: function action(insert, state) {
157
+ action: function action(typeAheadInsert, state) {
136
158
  return createPanelAction({
137
159
  state: state,
138
160
  attributes: {
139
161
  panelType: _adfSchema.PanelType.SUCCESS
140
162
  },
141
163
  api: api,
142
- insert: insert
164
+ typeAheadInsert: typeAheadInsert
143
165
  });
144
166
  }
145
167
  }, {
@@ -150,14 +172,14 @@ var panelPlugin = function panelPlugin(_ref) {
150
172
  icon: function icon() {
151
173
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelWarning, null);
152
174
  },
153
- action: function action(insert, state) {
175
+ action: function action(typeAheadInsert, state) {
154
176
  return createPanelAction({
155
177
  state: state,
156
178
  attributes: {
157
179
  panelType: _adfSchema.PanelType.WARNING
158
180
  },
159
181
  api: api,
160
- insert: insert
182
+ typeAheadInsert: typeAheadInsert
161
183
  });
162
184
  }
163
185
  }, {
@@ -168,14 +190,14 @@ var panelPlugin = function panelPlugin(_ref) {
168
190
  icon: function icon() {
169
191
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelError, null);
170
192
  },
171
- action: function action(insert, state) {
193
+ action: function action(typeAheadInsert, state) {
172
194
  return createPanelAction({
173
195
  state: state,
174
196
  attributes: {
175
197
  panelType: _adfSchema.PanelType.ERROR
176
198
  },
177
199
  api: api,
178
- insert: insert
200
+ typeAheadInsert: typeAheadInsert
179
201
  });
180
202
  }
181
203
  }];
@@ -188,7 +210,7 @@ var panelPlugin = function panelPlugin(_ref) {
188
210
  icon: function icon() {
189
211
  return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCustomPanel, null);
190
212
  },
191
- action: function action(insert, state) {
213
+ action: function action(typeAheadInsert, state) {
192
214
  return createPanelAction({
193
215
  state: state,
194
216
  attributes: {
@@ -203,7 +225,7 @@ var panelPlugin = function panelPlugin(_ref) {
203
225
  panelColor: _colors.T50
204
226
  },
205
227
  api: api,
206
- insert: insert
228
+ typeAheadInsert: typeAheadInsert
207
229
  });
208
230
  }
209
231
  });
@@ -234,27 +256,56 @@ function createPanelAction(_ref4) {
234
256
  var state = _ref4.state,
235
257
  attributes = _ref4.attributes,
236
258
  api = _ref4.api,
237
- insert = _ref4.insert;
259
+ typeAheadInsert = _ref4.typeAheadInsert,
260
+ _ref4$inputMethod = _ref4.inputMethod,
261
+ inputMethod = _ref4$inputMethod === void 0 ? _analytics.INPUT_METHOD.QUICK_INSERT : _ref4$inputMethod;
238
262
  var panel = state.schema.nodes.panel;
239
263
  var tr;
240
- var panelAttrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _objectSpread(_objectSpread({}, attributes), {}, {
241
- localId: attributes.localId || _adfSchema.uuid.generate()
242
- }) : _objectSpread({}, attributes);
243
-
244
- // Panels should wrap content by default when inserted, the quickInsert `insert` method
245
- // will insert the node on a newline
246
- if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
247
- tr = state.selection.empty && (0, _utils.createWrapSelectionTransaction)({
248
- state: state,
249
- type: panel,
250
- nodeAttributes: panelAttrs
251
- });
264
+ /*
265
+ During investigation of go/j/ED-26928 I found that the behaviour of this experience was very
266
+ inconsistent. I reached out to Nicole* for a design review, and she confirmed that the desired
267
+ behaviour is to insert the panel on a new line if the selection is empty.
268
+ *Confluence Editor Lead Product Designer
269
+ */
270
+ if ((0, _expValEquals.expValEquals)('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
271
+ // If the selection is empty, we want to insert the panel on a new line
272
+ if (state.selection.empty) {
273
+ var node = panel.createAndFill(_objectSpread({}, attributes));
274
+ if (!node) {
275
+ return false;
276
+ }
277
+ if (typeAheadInsert !== undefined) {
278
+ // If the type-ahead insert is provided, we should use that to insert the node
279
+ tr = typeAheadInsert(node);
280
+ } else {
281
+ var _insertSelectedItem;
282
+ // Otherwise we can use insertSelectedItem to insert the node
283
+ tr = (_insertSelectedItem = (0, _insert.insertSelectedItem)(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
284
+ }
285
+ } else {
286
+ tr = (0, _utils.createWrapSelectionTransaction)({
287
+ state: state,
288
+ type: panel,
289
+ nodeAttributes: _objectSpread({}, attributes)
290
+ });
291
+ }
252
292
  } else {
253
- var node = panel.createAndFill(panelAttrs);
254
- if (!node) {
255
- return false;
293
+ // Panels should wrap content by default when inserted, the quickInsert `insert` method
294
+ // will insert the node on a newline
295
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
296
+ tr = state.selection.empty && (0, _utils.createWrapSelectionTransaction)({
297
+ state: state,
298
+ type: panel,
299
+ nodeAttributes: _objectSpread({}, attributes)
300
+ });
301
+ } else {
302
+ var _node = panel.createAndFill(_objectSpread({}, attributes));
303
+ if (!_node) {
304
+ return false;
305
+ }
306
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- This is only optional within the experiment, so safe to assume non-null here
307
+ tr = state.selection.empty && typeAheadInsert(_node);
256
308
  }
257
- tr = state.selection.empty && insert(node);
258
309
  }
259
310
  if (tr) {
260
311
  var _api$analytics2;
@@ -263,12 +314,12 @@ function createPanelAction(_ref4) {
263
314
  actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
264
315
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
265
316
  attributes: {
266
- inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
317
+ inputMethod: inputMethod,
267
318
  panelType: attributes.panelType
268
319
  },
269
320
  eventType: _analytics.EVENT_TYPE.TRACK
270
321
  })(tr);
271
322
  }
272
- return tr;
323
+ return tr !== null && tr !== void 0 ? tr : false;
273
324
  }
274
325
  var _default = exports.default = panelPlugin;
package/dist/cjs/pm-plugins/utils/utils.js CHANGED
@@ -69,9 +69,7 @@ var handleCut = exports.handleCut = function handleCut(newState, oldState) {
69
69
  return node.type.name === 'panel';
70
70
  })(oldState.tr.selection);
71
71
  var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
72
- var newPanelNode = schema.nodes.panel.create(_objectSpread(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
73
- localId: _adfSchema.uuid.generate()
74
- }), emptyParagraph);
72
+ var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
75
73
  var endPos = oldState.tr.selection.$from.pos;
76
74
  if (oldPanelNode) {
77
75
  newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new _state.TextSelection(newTr.doc.resolve(endPos)));
package/dist/es2019/editor-actions/actions.js CHANGED
@@ -1,11 +1,10 @@
1
- import { PanelType, uuid } from '@atlaskit/adf-schema';
1
+ import { PanelType } from '@atlaskit/adf-schema';
2
2
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
4
4
  import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
5
5
  import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
6
6
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
7
7
  import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
8
  import { findPanel } from '../pm-plugins/utils/utils';
10
9
  export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
11
10
  const {
@@ -38,7 +37,6 @@ export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
38
37
  return true;
39
38
  };
40
39
  export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions = {}, allowCustomPanel = false) => (state, dispatch) => {
41
- var _panelNode$node$attrs;
42
40
  const {
43
41
  schema: {
44
42
  nodes
@@ -52,7 +50,6 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
52
50
  const newType = panelType;
53
51
  const previousType = panelNode.node.attrs.panelType;
54
52
  let newTr;
55
- const localId = fg('platform_editor_adf_with_localid') ? ((_panelNode$node$attrs = panelNode.node.attrs) === null || _panelNode$node$attrs === void 0 ? void 0 : _panelNode$node$attrs.localId) || uuid.generate() : undefined;
56
53
  if (allowCustomPanel) {
57
54
  const previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
58
55
  const previousIcon = panelNode.node.attrs.panelIcon;
@@ -70,13 +67,11 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
70
67
  panelIconId: newPanelOptions.emojiId,
71
68
  panelIconText: newPanelOptions.emojiText,
72
69
  panelColor: newPanelOptions.color,
73
- panelType,
74
- localId
70
+ panelType
75
71
  });
76
72
  } else {
77
73
  newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
78
- panelType,
79
- localId
74
+ panelType
80
75
  });
81
76
  }
82
77
  const payload = {
@@ -98,6 +93,8 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
98
93
  }
99
94
  return true;
100
95
  };
96
+
97
+ // Delete with 'platform_editor_fix_quick_insert_consistency_exp'
101
98
  export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
102
99
  return withAnalytics(analyticsAPI, {
103
100
  action: ACTION.INSERTED,
@@ -113,10 +110,7 @@ export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
113
110
  nodes
114
111
  } = state.schema;
115
112
  if (nodes.panel && nodes.paragraph) {
116
- const panelAttrs = fg('platform_editor_adf_with_localid') ? {
117
- localId: uuid.generate()
118
- } : {};
119
- return wrapSelectionIn(nodes.panel, panelAttrs)(state, dispatch);
113
+ return wrapSelectionIn(nodes.panel)(state, dispatch);
120
114
  }
121
115
  return false;
122
116
  });
package/dist/es2019/panelPlugin.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import React from 'react';
2
- import { extendedPanel, extendedPanelWithLocalId, PanelType, uuid } from '@atlaskit/adf-schema';
2
+ import { extendedPanel, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
+ import { insertSelectedItem } from '@atlaskit/editor-common/insert';
4
5
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
5
6
  import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
6
7
  import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
7
8
  import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { T50 } from '@atlaskit/theme/colors';
10
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
12
  import { insertPanelWithAnalytics } from './editor-actions/actions';
11
13
  import keymap from './pm-plugins/keymaps';
@@ -43,8 +45,28 @@ const panelPlugin = ({
43
45
  },
44
46
  actions: {
45
47
  insertPanel(inputMethod) {
46
- var _api$analytics;
47
- return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
48
+ if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
49
+ return function (state, dispatch) {
50
+ const tr = createPanelAction({
51
+ state,
52
+ attributes: {
53
+ panelType: PanelType.INFO
54
+ },
55
+ api,
56
+ inputMethod
57
+ });
58
+ if (!tr) {
59
+ return false;
60
+ }
61
+ if (dispatch) {
62
+ dispatch(tr);
63
+ }
64
+ return true;
65
+ };
66
+ } else {
67
+ var _api$analytics;
68
+ return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
69
+ }
48
70
  }
49
71
  },
50
72
  pluginsOptions: {
@@ -59,14 +81,14 @@ const panelPlugin = ({
59
81
  description: formatMessage(blockTypeMessages.infoPanelDescription),
60
82
  priority: 800,
61
83
  icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
62
- action(insert, state) {
84
+ action(typeAheadInsert, state) {
63
85
  return createPanelAction({
64
86
  state,
65
87
  attributes: {
66
88
  panelType: PanelType.INFO
67
89
  },
68
90
  api,
69
- insert
91
+ typeAheadInsert
70
92
  });
71
93
  }
72
94
  }];
@@ -78,14 +100,14 @@ const panelPlugin = ({
78
100
  description: formatMessage(blockTypeMessages.infoPanelDescription),
79
101
  priority: 800,
80
102
  icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
81
- action(insert, state) {
103
+ action(typeAheadInsert, state) {
82
104
  return createPanelAction({
83
105
  state,
84
106
  attributes: {
85
107
  panelType: PanelType.INFO
86
108
  },
87
109
  api,
88
- insert
110
+ typeAheadInsert
89
111
  });
90
112
  }
91
113
  }, {
@@ -94,14 +116,14 @@ const panelPlugin = ({
94
116
  description: formatMessage(blockTypeMessages.notePanelDescription),
95
117
  priority: 1000,
96
118
  icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
97
- action(insert, state) {
119
+ action(typeAheadInsert, state) {
98
120
  return createPanelAction({
99
121
  state,
100
122
  attributes: {
101
123
  panelType: PanelType.NOTE
102
124
  },
103
125
  api,
104
- insert
126
+ typeAheadInsert
105
127
  });
106
128
  }
107
129
  }, {
@@ -111,14 +133,14 @@ const panelPlugin = ({
111
133
  keywords: ['tip'],
112
134
  priority: 1000,
113
135
  icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
114
- action(insert, state) {
136
+ action(typeAheadInsert, state) {
115
137
  return createPanelAction({
116
138
  state,
117
139
  attributes: {
118
140
  panelType: PanelType.SUCCESS
119
141
  },
120
142
  api,
121
- insert
143
+ typeAheadInsert
122
144
  });
123
145
  }
124
146
  }, {
@@ -127,14 +149,14 @@ const panelPlugin = ({
127
149
  description: formatMessage(blockTypeMessages.warningPanelDescription),
128
150
  priority: 1000,
129
151
  icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
130
- action(insert, state) {
152
+ action(typeAheadInsert, state) {
131
153
  return createPanelAction({
132
154
  state,
133
155
  attributes: {
134
156
  panelType: PanelType.WARNING
135
157
  },
136
158
  api,
137
- insert
159
+ typeAheadInsert
138
160
  });
139
161
  }
140
162
  }, {
@@ -143,14 +165,14 @@ const panelPlugin = ({
143
165
  description: formatMessage(blockTypeMessages.errorPanelDescription),
144
166
  priority: 1000,
145
167
  icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
146
- action(insert, state) {
168
+ action(typeAheadInsert, state) {
147
169
  return createPanelAction({
148
170
  state,
149
171
  attributes: {
150
172
  panelType: PanelType.ERROR
151
173
  },
152
174
  api,
153
- insert
175
+ typeAheadInsert
154
176
  });
155
177
  }
156
178
  }];
@@ -161,7 +183,7 @@ const panelPlugin = ({
161
183
  description: formatMessage(blockTypeMessages.customPanelDescription),
162
184
  priority: 1000,
163
185
  icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
164
- action(insert, state) {
186
+ action(typeAheadInsert, state) {
165
187
  return createPanelAction({
166
188
  state,
167
189
  attributes: {
@@ -176,7 +198,7 @@ const panelPlugin = ({
176
198
  panelColor: T50
177
199
  },
178
200
  api,
179
- insert
201
+ typeAheadInsert
180
202
  });
181
203
  }
182
204
  });
@@ -204,33 +226,67 @@ function createPanelAction({
204
226
  state,
205
227
  attributes,
206
228
  api,
207
- insert
229
+ typeAheadInsert,
230
+ inputMethod = INPUT_METHOD.QUICK_INSERT
208
231
  }) {
232
+ var _tr;
209
233
  const {
210
234
  panel
211
235
  } = state.schema.nodes;
212
236
  let tr;
213
- const panelAttrs = fg('platform_editor_adf_with_localid') ? {
214
- ...attributes,
215
- localId: attributes.localId || uuid.generate()
216
- } : {
217
- ...attributes
218
- };
219
-
220
- // Panels should wrap content by default when inserted, the quickInsert `insert` method
221
- // will insert the node on a newline
222
- if (editorExperiment('platform_editor_controls', 'variant1')) {
223
- tr = state.selection.empty && createWrapSelectionTransaction({
224
- state,
225
- type: panel,
226
- nodeAttributes: panelAttrs
227
- });
237
+ /*
238
+ During investigation of go/j/ED-26928 I found that the behaviour of this experience was very
239
+ inconsistent. I reached out to Nicole* for a design review, and she confirmed that the desired
240
+ behaviour is to insert the panel on a new line if the selection is empty.
241
+ *Confluence Editor Lead Product Designer
242
+ */
243
+ if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
244
+ // If the selection is empty, we want to insert the panel on a new line
245
+ if (state.selection.empty) {
246
+ const node = panel.createAndFill({
247
+ ...attributes
248
+ });
249
+ if (!node) {
250
+ return false;
251
+ }
252
+ if (typeAheadInsert !== undefined) {
253
+ // If the type-ahead insert is provided, we should use that to insert the node
254
+ tr = typeAheadInsert(node);
255
+ } else {
256
+ var _insertSelectedItem;
257
+ // Otherwise we can use insertSelectedItem to insert the node
258
+ tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
259
+ }
260
+ } else {
261
+ tr = createWrapSelectionTransaction({
262
+ state,
263
+ type: panel,
264
+ nodeAttributes: {
265
+ ...attributes
266
+ }
267
+ });
268
+ }
228
269
  } else {
229
- const node = panel.createAndFill(panelAttrs);
230
- if (!node) {
231
- return false;
270
+ // Panels should wrap content by default when inserted, the quickInsert `insert` method
271
+ // will insert the node on a newline
272
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
273
+ tr = state.selection.empty && createWrapSelectionTransaction({
274
+ state,
275
+ type: panel,
276
+ nodeAttributes: {
277
+ ...attributes
278
+ }
279
+ });
280
+ } else {
281
+ const node = panel.createAndFill({
282
+ ...attributes
283
+ });
284
+ if (!node) {
285
+ return false;
286
+ }
287
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- This is only optional within the experiment, so safe to assume non-null here
288
+ tr = state.selection.empty && typeAheadInsert(node);
232
289
  }
233
- tr = state.selection.empty && insert(node);
234
290
  }
235
291
  if (tr) {
236
292
  var _api$analytics2;
@@ -239,12 +295,12 @@ function createPanelAction({
239
295
  actionSubject: ACTION_SUBJECT.DOCUMENT,
240
296
  actionSubjectId: ACTION_SUBJECT_ID.PANEL,
241
297
  attributes: {
242
- inputMethod: INPUT_METHOD.QUICK_INSERT,
298
+ inputMethod,
243
299
  panelType: attributes.panelType
244
300
  },
245
301
  eventType: EVENT_TYPE.TRACK
246
302
  })(tr);
247
303
  }
248
- return tr;
304
+ return (_tr = tr) !== null && _tr !== void 0 ? _tr : false;
249
305
  }
250
306
  export default panelPlugin;
package/dist/es2019/pm-plugins/utils/utils.js CHANGED
@@ -1,4 +1,4 @@
1
- import { PanelType, uuid } from '@atlaskit/adf-schema';
1
+ import { PanelType } from '@atlaskit/adf-schema';
2
2
  import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
3
3
  import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
4
4
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -65,10 +65,7 @@ export const handleCut = (newState, oldState) => {
65
65
  const oldPanelNode = findParentNode(node => node.type.name === 'panel')(oldState.tr.selection);
66
66
  const clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
67
67
  const newPanelNode = schema.nodes.panel.create({
68
- ...(clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs),
69
- ...(fg('platform_editor_adf_with_localid') && {
70
- localId: uuid.generate()
71
- })
68
+ ...(clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs)
72
69
  }, emptyParagraph);
73
70
  const endPos = oldState.tr.selection.$from.pos;
74
71
  if (oldPanelNode) {
package/dist/esm/editor-actions/actions.js CHANGED
@@ -1,14 +1,13 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- import { PanelType, uuid } from '@atlaskit/adf-schema';
4
+ import { PanelType } from '@atlaskit/adf-schema';
5
5
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
6
6
  import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
7
7
  import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
8
8
  import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
9
9
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
10
10
  import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
11
- import { fg } from '@atlaskit/platform-feature-flags';
12
11
  import { findPanel } from '../pm-plugins/utils/utils';
13
12
  export var removePanel = function removePanel(editorAnalyticsAPI) {
14
13
  return function (state, dispatch) {
@@ -43,7 +42,6 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
43
42
  var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
44
43
  var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
45
44
  return function (state, dispatch) {
46
- var _panelNode$node$attrs;
47
45
  var nodes = state.schema.nodes,
48
46
  tr = state.tr;
49
47
  var panelNode = findPanel(state);
@@ -53,7 +51,6 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
53
51
  var newType = panelType;
54
52
  var previousType = panelNode.node.attrs.panelType;
55
53
  var newTr;
56
- var localId = fg('platform_editor_adf_with_localid') ? ((_panelNode$node$attrs = panelNode.node.attrs) === null || _panelNode$node$attrs === void 0 ? void 0 : _panelNode$node$attrs.localId) || uuid.generate() : undefined;
57
54
  if (allowCustomPanel) {
58
55
  var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
59
56
  var previousIcon = panelNode.node.attrs.panelIcon;
@@ -70,13 +67,11 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
70
67
  panelIconId: newPanelOptions.emojiId,
71
68
  panelIconText: newPanelOptions.emojiText,
72
69
  panelColor: newPanelOptions.color,
73
- panelType: panelType,
74
- localId: localId
70
+ panelType: panelType
75
71
  });
76
72
  } else {
77
73
  newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
78
- panelType: panelType,
79
- localId: localId
74
+ panelType: panelType
80
75
  });
81
76
  }
82
77
  var payload = {
@@ -100,6 +95,8 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
100
95
  };
101
96
  };
102
97
  };
98
+
99
+ // Delete with 'platform_editor_fix_quick_insert_consistency_exp'
103
100
  export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
104
101
  return withAnalytics(analyticsAPI, {
105
102
  action: ACTION.INSERTED,
@@ -113,10 +110,7 @@ export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
113
110
  })(function (state, dispatch) {
114
111
  var nodes = state.schema.nodes;
115
112
  if (nodes.panel && nodes.paragraph) {
116
- var panelAttrs = fg('platform_editor_adf_with_localid') ? {
117
- localId: uuid.generate()
118
- } : {};
119
- return wrapSelectionIn(nodes.panel, panelAttrs)(state, dispatch);
113
+ return wrapSelectionIn(nodes.panel)(state, dispatch);
120
114
  }
121
115
  return false;
122
116
  });
package/dist/esm/panelPlugin.js CHANGED
@@ -2,13 +2,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  import React from 'react';
5
- import { extendedPanel, extendedPanelWithLocalId, PanelType, uuid } from '@atlaskit/adf-schema';
5
+ import { extendedPanel, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
6
6
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
7
+ import { insertSelectedItem } from '@atlaskit/editor-common/insert';
7
8
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
8
9
  import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
9
10
  import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
10
11
  import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { T50 } from '@atlaskit/theme/colors';
13
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
14
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
13
15
  import { insertPanelWithAnalytics } from './editor-actions/actions';
14
16
  import keymap from './pm-plugins/keymaps';
@@ -50,8 +52,28 @@ var panelPlugin = function panelPlugin(_ref) {
50
52
  },
51
53
  actions: {
52
54
  insertPanel: function insertPanel(inputMethod) {
53
- var _api$analytics;
54
- return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
55
+ if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
56
+ return function (state, dispatch) {
57
+ var tr = createPanelAction({
58
+ state: state,
59
+ attributes: {
60
+ panelType: PanelType.INFO
61
+ },
62
+ api: api,
63
+ inputMethod: inputMethod
64
+ });
65
+ if (!tr) {
66
+ return false;
67
+ }
68
+ if (dispatch) {
69
+ dispatch(tr);
70
+ }
71
+ return true;
72
+ };
73
+ } else {
74
+ var _api$analytics;
75
+ return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
76
+ }
55
77
  }
56
78
  },
57
79
  pluginsOptions: {
@@ -67,14 +89,14 @@ var panelPlugin = function panelPlugin(_ref) {
67
89
  icon: function icon() {
68
90
  return /*#__PURE__*/React.createElement(IconPanel, null);
69
91
  },
70
- action: function action(insert, state) {
92
+ action: function action(typeAheadInsert, state) {
71
93
  return createPanelAction({
72
94
  state: state,
73
95
  attributes: {
74
96
  panelType: PanelType.INFO
75
97
  },
76
98
  api: api,
77
- insert: insert
99
+ typeAheadInsert: typeAheadInsert
78
100
  });
79
101
  }
80
102
  }];
@@ -88,14 +110,14 @@ var panelPlugin = function panelPlugin(_ref) {
88
110
  icon: function icon() {
89
111
  return /*#__PURE__*/React.createElement(IconPanel, null);
90
112
  },
91
- action: function action(insert, state) {
113
+ action: function action(typeAheadInsert, state) {
92
114
  return createPanelAction({
93
115
  state: state,
94
116
  attributes: {
95
117
  panelType: PanelType.INFO
96
118
  },
97
119
  api: api,
98
- insert: insert
120
+ typeAheadInsert: typeAheadInsert
99
121
  });
100
122
  }
101
123
  }, {
@@ -106,14 +128,14 @@ var panelPlugin = function panelPlugin(_ref) {
106
128
  icon: function icon() {
107
129
  return /*#__PURE__*/React.createElement(IconPanelNote, null);
108
130
  },
109
- action: function action(insert, state) {
131
+ action: function action(typeAheadInsert, state) {
110
132
  return createPanelAction({
111
133
  state: state,
112
134
  attributes: {
113
135
  panelType: PanelType.NOTE
114
136
  },
115
137
  api: api,
116
- insert: insert
138
+ typeAheadInsert: typeAheadInsert
117
139
  });
118
140
  }
119
141
  }, {
@@ -125,14 +147,14 @@ var panelPlugin = function panelPlugin(_ref) {
125
147
  icon: function icon() {
126
148
  return /*#__PURE__*/React.createElement(IconPanelSuccess, null);
127
149
  },
128
- action: function action(insert, state) {
150
+ action: function action(typeAheadInsert, state) {
129
151
  return createPanelAction({
130
152
  state: state,
131
153
  attributes: {
132
154
  panelType: PanelType.SUCCESS
133
155
  },
134
156
  api: api,
135
- insert: insert
157
+ typeAheadInsert: typeAheadInsert
136
158
  });
137
159
  }
138
160
  }, {
@@ -143,14 +165,14 @@ var panelPlugin = function panelPlugin(_ref) {
143
165
  icon: function icon() {
144
166
  return /*#__PURE__*/React.createElement(IconPanelWarning, null);
145
167
  },
146
- action: function action(insert, state) {
168
+ action: function action(typeAheadInsert, state) {
147
169
  return createPanelAction({
148
170
  state: state,
149
171
  attributes: {
150
172
  panelType: PanelType.WARNING
151
173
  },
152
174
  api: api,
153
- insert: insert
175
+ typeAheadInsert: typeAheadInsert
154
176
  });
155
177
  }
156
178
  }, {
@@ -161,14 +183,14 @@ var panelPlugin = function panelPlugin(_ref) {
161
183
  icon: function icon() {
162
184
  return /*#__PURE__*/React.createElement(IconPanelError, null);
163
185
  },
164
- action: function action(insert, state) {
186
+ action: function action(typeAheadInsert, state) {
165
187
  return createPanelAction({
166
188
  state: state,
167
189
  attributes: {
168
190
  panelType: PanelType.ERROR
169
191
  },
170
192
  api: api,
171
- insert: insert
193
+ typeAheadInsert: typeAheadInsert
172
194
  });
173
195
  }
174
196
  }];
@@ -181,7 +203,7 @@ var panelPlugin = function panelPlugin(_ref) {
181
203
  icon: function icon() {
182
204
  return /*#__PURE__*/React.createElement(IconCustomPanel, null);
183
205
  },
184
- action: function action(insert, state) {
206
+ action: function action(typeAheadInsert, state) {
185
207
  return createPanelAction({
186
208
  state: state,
187
209
  attributes: {
@@ -196,7 +218,7 @@ var panelPlugin = function panelPlugin(_ref) {
196
218
  panelColor: T50
197
219
  },
198
220
  api: api,
199
- insert: insert
221
+ typeAheadInsert: typeAheadInsert
200
222
  });
201
223
  }
202
224
  });
@@ -227,27 +249,56 @@ function createPanelAction(_ref4) {
227
249
  var state = _ref4.state,
228
250
  attributes = _ref4.attributes,
229
251
  api = _ref4.api,
230
- insert = _ref4.insert;
252
+ typeAheadInsert = _ref4.typeAheadInsert,
253
+ _ref4$inputMethod = _ref4.inputMethod,
254
+ inputMethod = _ref4$inputMethod === void 0 ? INPUT_METHOD.QUICK_INSERT : _ref4$inputMethod;
231
255
  var panel = state.schema.nodes.panel;
232
256
  var tr;
233
- var panelAttrs = fg('platform_editor_adf_with_localid') ? _objectSpread(_objectSpread({}, attributes), {}, {
234
- localId: attributes.localId || uuid.generate()
235
- }) : _objectSpread({}, attributes);
236
-
237
- // Panels should wrap content by default when inserted, the quickInsert `insert` method
238
- // will insert the node on a newline
239
- if (editorExperiment('platform_editor_controls', 'variant1')) {
240
- tr = state.selection.empty && createWrapSelectionTransaction({
241
- state: state,
242
- type: panel,
243
- nodeAttributes: panelAttrs
244
- });
257
+ /*
258
+ During investigation of go/j/ED-26928 I found that the behaviour of this experience was very
259
+ inconsistent. I reached out to Nicole* for a design review, and she confirmed that the desired
260
+ behaviour is to insert the panel on a new line if the selection is empty.
261
+ *Confluence Editor Lead Product Designer
262
+ */
263
+ if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
264
+ // If the selection is empty, we want to insert the panel on a new line
265
+ if (state.selection.empty) {
266
+ var node = panel.createAndFill(_objectSpread({}, attributes));
267
+ if (!node) {
268
+ return false;
269
+ }
270
+ if (typeAheadInsert !== undefined) {
271
+ // If the type-ahead insert is provided, we should use that to insert the node
272
+ tr = typeAheadInsert(node);
273
+ } else {
274
+ var _insertSelectedItem;
275
+ // Otherwise we can use insertSelectedItem to insert the node
276
+ tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
277
+ }
278
+ } else {
279
+ tr = createWrapSelectionTransaction({
280
+ state: state,
281
+ type: panel,
282
+ nodeAttributes: _objectSpread({}, attributes)
283
+ });
284
+ }
245
285
  } else {
246
- var node = panel.createAndFill(panelAttrs);
247
- if (!node) {
248
- return false;
286
+ // Panels should wrap content by default when inserted, the quickInsert `insert` method
287
+ // will insert the node on a newline
288
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
289
+ tr = state.selection.empty && createWrapSelectionTransaction({
290
+ state: state,
291
+ type: panel,
292
+ nodeAttributes: _objectSpread({}, attributes)
293
+ });
294
+ } else {
295
+ var _node = panel.createAndFill(_objectSpread({}, attributes));
296
+ if (!_node) {
297
+ return false;
298
+ }
299
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- This is only optional within the experiment, so safe to assume non-null here
300
+ tr = state.selection.empty && typeAheadInsert(_node);
249
301
  }
250
- tr = state.selection.empty && insert(node);
251
302
  }
252
303
  if (tr) {
253
304
  var _api$analytics2;
@@ -256,12 +307,12 @@ function createPanelAction(_ref4) {
256
307
  actionSubject: ACTION_SUBJECT.DOCUMENT,
257
308
  actionSubjectId: ACTION_SUBJECT_ID.PANEL,
258
309
  attributes: {
259
- inputMethod: INPUT_METHOD.QUICK_INSERT,
310
+ inputMethod: inputMethod,
260
311
  panelType: attributes.panelType
261
312
  },
262
313
  eventType: EVENT_TYPE.TRACK
263
314
  })(tr);
264
315
  }
265
- return tr;
316
+ return tr !== null && tr !== void 0 ? tr : false;
266
317
  }
267
318
  export default panelPlugin;
package/dist/esm/pm-plugins/utils/utils.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- import { PanelType, uuid } from '@atlaskit/adf-schema';
4
+ import { PanelType } from '@atlaskit/adf-schema';
5
5
  import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
6
6
  import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
7
7
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -62,9 +62,7 @@ export var handleCut = function handleCut(newState, oldState) {
62
62
  return node.type.name === 'panel';
63
63
  })(oldState.tr.selection);
64
64
  var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
65
- var newPanelNode = schema.nodes.panel.create(_objectSpread(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), fg('platform_editor_adf_with_localid') && {
66
- localId: uuid.generate()
67
- }), emptyParagraph);
65
+ var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
68
66
  var endPos = oldState.tr.selection.$from.pos;
69
67
  if (oldPanelNode) {
70
68
  newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new TextSelection(newTr.doc.resolve(endPos)));
package/dist/types/panelPluginType.d.ts CHANGED
@@ -33,6 +33,6 @@ export type PanelPlugin = NextEditorPlugin<'panel', {
33
33
  pluginConfiguration: PanelPluginOptions | undefined;
34
34
  dependencies: PanelPluginDependencies;
35
35
  actions: {
36
- insertPanel: (inputMethod: INPUT_METHOD) => Command;
36
+ insertPanel: (inputMethod: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => Command;
37
37
  };
38
38
  }>;
package/dist/types/ui/toolbar.d.ts CHANGED
@@ -11,5 +11,5 @@ import type { EmojiInfo, PanelPluginOptions } from '../panelPluginType';
11
11
  export declare const panelIconMap: {
12
12
  [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
13
13
  };
14
- export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState, api?: ExtractInjectionAPI<PanelPlugin>) => FloatingToolbarItem<Command>[];
14
+ export declare const getToolbarItems: (formatMessage: IntlShape["formatMessage"], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState, api?: ExtractInjectionAPI<PanelPlugin>) => FloatingToolbarItem<Command>[];
15
15
  export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory, api: ExtractInjectionAPI<PanelPlugin> | undefined) => FloatingToolbarConfig | undefined;
package/dist/types-ts4.5/panelPluginType.d.ts CHANGED
@@ -33,6 +33,6 @@ export type PanelPlugin = NextEditorPlugin<'panel', {
33
33
  pluginConfiguration: PanelPluginOptions | undefined;
34
34
  dependencies: PanelPluginDependencies;
35
35
  actions: {
36
- insertPanel: (inputMethod: INPUT_METHOD) => Command;
36
+ insertPanel: (inputMethod: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => Command;
37
37
  };
38
38
  }>;
package/dist/types-ts4.5/ui/toolbar.d.ts CHANGED
@@ -11,5 +11,5 @@ import type { EmojiInfo, PanelPluginOptions } from '../panelPluginType';
11
11
  export declare const panelIconMap: {
12
12
  [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
13
13
  };
14
- export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState, api?: ExtractInjectionAPI<PanelPlugin>) => FloatingToolbarItem<Command>[];
14
+ export declare const getToolbarItems: (formatMessage: IntlShape["formatMessage"], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, activePanelType?: string, activePanelColor?: string, activePanelIcon?: string, state?: EditorState, api?: ExtractInjectionAPI<PanelPlugin>) => FloatingToolbarItem<Command>[];
15
15
  export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory, api: ExtractInjectionAPI<PanelPlugin> | undefined) => FloatingToolbarConfig | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-panel",
3
- "version": "5.2.5",
3
+ "version": "5.3.1",
4
4
  "description": "Panel plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,25 +36,22 @@
36
36
  "@atlaskit/editor-plugin-decorations": "^3.0.0",
37
37
  "@atlaskit/editor-plugin-emoji": "^4.2.0",
38
38
  "@atlaskit/editor-prosemirror": "7.0.0",
39
- "@atlaskit/editor-shared-styles": "^3.5.0",
39
+ "@atlaskit/editor-shared-styles": "^3.6.0",
40
40
  "@atlaskit/emoji": "^69.3.0",
41
- "@atlaskit/icon": "^27.9.0",
41
+ "@atlaskit/icon": "^27.12.0",
42
42
  "@atlaskit/platform-feature-flags": "^1.1.0",
43
43
  "@atlaskit/theme": "^19.0.0",
44
- "@atlaskit/tmp-editor-statsig": "^9.22.0",
44
+ "@atlaskit/tmp-editor-statsig": "^10.0.0",
45
45
  "@atlaskit/tokens": "^6.0.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "uuid": "^3.1.0"
48
48
  },
49
49
  "peerDependencies": {
50
- "@atlaskit/editor-common": "^107.16.0",
50
+ "@atlaskit/editor-common": "^107.25.0",
51
51
  "react": "^18.2.0",
52
52
  "react-dom": "^18.2.0",
53
53
  "react-intl-next": "npm:react-intl@^5.18.1"
54
54
  },
55
- "devDependencies": {
56
- "typescript": "~5.4.2"
57
- },
58
55
  "techstack": {
59
56
  "@atlassian/frontend": {
60
57
  "import-structure": [