@atlaskit/editor-plugin-insert-block 0.2.19 → 0.2.21

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 (11) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/ui/ToolbarInsertBlock/index.js +12 -11
  3. package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js +11 -4
  4. package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js +5 -3
  5. package/dist/es2019/ui/ToolbarInsertBlock/index.js +12 -11
  6. package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js +11 -4
  7. package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js +7 -3
  8. package/dist/esm/ui/ToolbarInsertBlock/index.js +12 -11
  9. package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js +11 -4
  10. package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js +5 -3
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 0.2.21
4
+
5
+ ### Patch Changes
6
+
7
+ - [#67051](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67051) [`08b5bd90a149`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/08b5bd90a149) - [ux] The table selector popup should gradually expand to 10 x 10 rows when hovered
8
+ - Updated dependencies
9
+
10
+ ## 0.2.20
11
+
12
+ ### Patch Changes
13
+
14
+ - [#67238](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67238) [`40533849b2ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40533849b2ec) - [ED-21835] Change EditorAPI type to always union with undefined
15
+
3
16
  ## 0.2.19
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/ui/ToolbarInsertBlock/index.js CHANGED
@@ -212,9 +212,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
212
212
  }
213
213
  });
214
214
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleLinkPanel", function (inputMethod) {
215
- var _pluginInjectionApi$c, _pluginInjectionApi$h;
215
+ var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
216
216
  var pluginInjectionApi = _this.props.pluginInjectionApi;
217
- return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
217
+ return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
218
218
  });
219
219
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertMention", function (inputMethod) {
220
220
  var _pluginInjectionApi$m, _pluginInjectionApi$m2;
@@ -249,15 +249,15 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
249
249
  });
250
250
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertTableWithSize", function (inputMethod, rowsCount, colsCount) {
251
251
  return function () {
252
- var _pluginInjectionApi$t5;
252
+ var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
253
253
  var pluginInjectionApi = _this.props.pluginInjectionApi;
254
- return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, _analytics.INPUT_METHOD.PICKER));
254
+ return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, _analytics.INPUT_METHOD.PICKER));
255
255
  };
256
256
  });
257
257
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDate", function (inputMethod) {
258
- var _pluginInjectionApi$d;
258
+ var _pluginInjectionApi$c4, _pluginInjectionApi$d;
259
259
  var pluginInjectionApi = _this.props.pluginInjectionApi;
260
- pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
260
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
261
261
  inputMethod: inputMethod
262
262
  }));
263
263
  return true;
@@ -347,17 +347,17 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
347
347
  };
348
348
  });
349
349
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedEmoji", function (emojiId) {
350
- var _pluginInjectionApi$e3;
350
+ var _pluginInjectionApi$c5, _pluginInjectionApi$e3;
351
351
  var pluginInjectionApi = _this.props.pluginInjectionApi;
352
352
  _this.props.editorView.focus();
353
- pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
353
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 || _pluginInjectionApi$c5.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
354
354
  _this.toggleEmojiPicker();
355
355
  return true;
356
356
  });
357
357
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openElementBrowser", function () {
358
- var _pluginInjectionApi$q;
358
+ var _pluginInjectionApi$c6, _pluginInjectionApi$q;
359
359
  var pluginInjectionApi = _this.props.pluginInjectionApi;
360
- pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
360
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 || _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
361
361
  });
362
362
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref3) {
363
363
  var item = _ref3.item,
@@ -538,7 +538,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
538
538
  popupsBoundariesElement: popupsBoundariesElement,
539
539
  popupsScrollableElement: popupsScrollableElement,
540
540
  handleClickOutside: this.handleTableSelectorClickOutside,
541
- handleEscapeKeydown: this.handleTableSelectorPressEscape
541
+ handleEscapeKeydown: this.handleTableSelectorPressEscape,
542
+ "data-testid": ''
542
543
  });
543
544
  }
544
545
  }, {
package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js CHANGED
@@ -24,6 +24,7 @@ var TABLE_SELECTOR_PADDING_SIDE = 10;
24
24
  var DEFAULT_TABLE_SELECTOR_ROWS = 5;
25
25
  var DEFAULT_TABLE_SELECTOR_COLS = 10;
26
26
  var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
27
+ var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
27
28
  var TableSelectorWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_tableSelectorPopup.default);
28
29
  var tableSelectorPopupWrapperStyles = (0, _react2.css)({
29
30
  borderRadius: "var(--ds-border-radius, 3px)",
@@ -60,8 +61,8 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
60
61
  // Calculate number grid cells selected
61
62
  var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_SIZE));
62
63
  var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_SIZE));
63
-
64
64
  // Keep the selected rows and columns within the defined bounds
65
+ var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
65
66
  if (selectedGridCols < 1) {
66
67
  selectedGridCols = 1;
67
68
  }
@@ -71,15 +72,21 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
71
72
  if (selectedGridRows < 1) {
72
73
  selectedGridRows = 1;
73
74
  }
74
- if (selectedGridRows > size.maxRow) {
75
- selectedGridRows = size.maxRow;
75
+ // Expand grid when row selection is greater than the default grid size
76
+ if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS) {
77
+ if (selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
78
+ gridRows = selectedGridRows + 1;
79
+ } else {
80
+ selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
81
+ gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
82
+ }
76
83
  }
77
84
  if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
78
85
  setSize({
79
86
  col: selectedGridCols,
80
87
  row: selectedGridRows,
81
88
  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
82
- maxRow: DEFAULT_TABLE_SELECTOR_ROWS
89
+ maxRow: gridRows
83
90
  });
84
91
  }
85
92
  }, [size, setSize]);
package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -79,11 +79,12 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
79
79
  onSelection = _ref3.onSelection,
80
80
  selectedCol = _ref3.selectedCol,
81
81
  selectedRow = _ref3.selectedRow,
82
- intl = _ref3.intl;
82
+ formatMessage = _ref3.intl.formatMessage;
83
83
  var buttons = (0, _react.useMemo)(function () {
84
84
  return createArray(maxCols, maxRows);
85
85
  }, [maxCols, maxRows]);
86
86
  return (0, _react2.jsx)(_primitives.Stack, null, (0, _react2.jsx)("div", {
87
+ "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
87
88
  css:
88
89
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
89
90
  gridWrapperStyles({
@@ -100,10 +101,11 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
100
101
  col: col,
101
102
  row: row,
102
103
  onClick: onSelection,
103
- label: "".concat(intl.formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
104
+ label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
104
105
  });
105
106
  })), (0, _react2.jsx)("span", {
106
- css: selectionSizeTextStyles
107
+ css: selectionSizeTextStyles,
108
+ "aria-hidden": true
107
109
  }, "".concat(selectedRow, " x ").concat(selectedCol)));
108
110
  };
109
111
  var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableSelectorPopup);
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -210,11 +210,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
210
210
  }
211
211
  });
212
212
  _defineProperty(this, "toggleLinkPanel", inputMethod => {
213
- var _pluginInjectionApi$c, _pluginInjectionApi$h;
213
+ var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
214
214
  const {
215
215
  pluginInjectionApi
216
216
  } = this.props;
217
- return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
217
+ return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
218
218
  });
219
219
  _defineProperty(this, "insertMention", inputMethod => {
220
220
  var _pluginInjectionApi$m, _pluginInjectionApi$m2, _pluginInjectionApi$m3;
@@ -252,18 +252,18 @@ export class ToolbarInsertBlock extends React.PureComponent {
252
252
  })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
253
253
  });
254
254
  _defineProperty(this, "insertTableWithSize", (inputMethod, rowsCount, colsCount) => () => {
255
- var _pluginInjectionApi$t5;
255
+ var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
256
256
  const {
257
257
  pluginInjectionApi
258
258
  } = this.props;
259
- return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
259
+ return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
260
260
  });
261
261
  _defineProperty(this, "createDate", inputMethod => {
262
- var _pluginInjectionApi$d, _pluginInjectionApi$d2;
262
+ var _pluginInjectionApi$c4, _pluginInjectionApi$d, _pluginInjectionApi$d2;
263
263
  const {
264
264
  pluginInjectionApi
265
265
  } = this.props;
266
- pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
266
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
267
267
  inputMethod
268
268
  }));
269
269
  return true;
@@ -362,21 +362,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
362
362
  return true;
363
363
  });
364
364
  _defineProperty(this, "handleSelectedEmoji", emojiId => {
365
- var _pluginInjectionApi$e3;
365
+ var _pluginInjectionApi$c5, _pluginInjectionApi$e3;
366
366
  const {
367
367
  pluginInjectionApi
368
368
  } = this.props;
369
369
  this.props.editorView.focus();
370
- pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
370
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
371
371
  this.toggleEmojiPicker();
372
372
  return true;
373
373
  });
374
374
  _defineProperty(this, "openElementBrowser", () => {
375
- var _pluginInjectionApi$q;
375
+ var _pluginInjectionApi$c6, _pluginInjectionApi$q;
376
376
  const {
377
377
  pluginInjectionApi
378
378
  } = this.props;
379
- pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
379
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
380
380
  });
381
381
  _defineProperty(this, "onItemActivated", ({
382
382
  item,
@@ -596,7 +596,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
596
596
  popupsBoundariesElement: popupsBoundariesElement,
597
597
  popupsScrollableElement: popupsScrollableElement,
598
598
  handleClickOutside: this.handleTableSelectorClickOutside,
599
- handleEscapeKeydown: this.handleTableSelectorPressEscape
599
+ handleEscapeKeydown: this.handleTableSelectorPressEscape,
600
+ "data-testid": ''
600
601
  });
601
602
  }
602
603
  render() {
package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js CHANGED
@@ -13,6 +13,7 @@ const TABLE_SELECTOR_PADDING_SIDE = 10;
13
13
  const DEFAULT_TABLE_SELECTOR_ROWS = 5;
14
14
  const DEFAULT_TABLE_SELECTOR_COLS = 10;
15
15
  const DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
16
+ const DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
16
17
  const TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
17
18
  const tableSelectorPopupWrapperStyles = css({
18
19
  borderRadius: "var(--ds-border-radius, 3px)",
@@ -47,8 +48,8 @@ export const TableSelectorPopup = props => {
47
48
  // Calculate number grid cells selected
48
49
  let selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
49
50
  let selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
50
-
51
51
  // Keep the selected rows and columns within the defined bounds
52
+ let gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
52
53
  if (selectedGridCols < 1) {
53
54
  selectedGridCols = 1;
54
55
  }
@@ -58,15 +59,21 @@ export const TableSelectorPopup = props => {
58
59
  if (selectedGridRows < 1) {
59
60
  selectedGridRows = 1;
60
61
  }
61
- if (selectedGridRows > size.maxRow) {
62
- selectedGridRows = size.maxRow;
62
+ // Expand grid when row selection is greater than the default grid size
63
+ if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS) {
64
+ if (selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
65
+ gridRows = selectedGridRows + 1;
66
+ } else {
67
+ selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
68
+ gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
69
+ }
63
70
  }
64
71
  if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
65
72
  setSize({
66
73
  col: selectedGridCols,
67
74
  row: selectedGridRows,
68
75
  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
69
- maxRow: DEFAULT_TABLE_SELECTOR_ROWS
76
+ maxRow: gridRows
70
77
  });
71
78
  }
72
79
  }, [size, setSize]);
package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -70,12 +70,15 @@ const TableSelectorPopup = ({
70
70
  onSelection,
71
71
  selectedCol,
72
72
  selectedRow,
73
- intl
73
+ intl: {
74
+ formatMessage
75
+ }
74
76
  }) => {
75
77
  const buttons = useMemo(() => {
76
78
  return createArray(maxCols, maxRows);
77
79
  }, [maxCols, maxRows]);
78
80
  return jsx(Stack, null, jsx("div", {
81
+ "aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
79
82
  css:
80
83
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
81
84
  gridWrapperStyles({
@@ -93,10 +96,11 @@ const TableSelectorPopup = ({
93
96
  col: col,
94
97
  row: row,
95
98
  onClick: onSelection,
96
- label: `${intl.formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`
99
+ label: `${formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`
97
100
  });
98
101
  })), jsx("span", {
99
- css: selectionSizeTextStyles
102
+ css: selectionSizeTextStyles,
103
+ "aria-hidden": true
100
104
  }, `${selectedRow} x ${selectedCol}`));
101
105
  };
102
106
  export default injectIntl(TableSelectorPopup);
package/dist/esm/ui/ToolbarInsertBlock/index.js CHANGED
@@ -202,9 +202,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
202
202
  }
203
203
  });
204
204
  _defineProperty(_assertThisInitialized(_this), "toggleLinkPanel", function (inputMethod) {
205
- var _pluginInjectionApi$c, _pluginInjectionApi$h;
205
+ var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
206
206
  var pluginInjectionApi = _this.props.pluginInjectionApi;
207
- return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
207
+ return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
208
208
  });
209
209
  _defineProperty(_assertThisInitialized(_this), "insertMention", function (inputMethod) {
210
210
  var _pluginInjectionApi$m, _pluginInjectionApi$m2;
@@ -239,15 +239,15 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
239
239
  });
240
240
  _defineProperty(_assertThisInitialized(_this), "insertTableWithSize", function (inputMethod, rowsCount, colsCount) {
241
241
  return function () {
242
- var _pluginInjectionApi$t5;
242
+ var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
243
243
  var pluginInjectionApi = _this.props.pluginInjectionApi;
244
- return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
244
+ return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
245
245
  };
246
246
  });
247
247
  _defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
248
- var _pluginInjectionApi$d;
248
+ var _pluginInjectionApi$c4, _pluginInjectionApi$d;
249
249
  var pluginInjectionApi = _this.props.pluginInjectionApi;
250
- pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
250
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
251
251
  inputMethod: inputMethod
252
252
  }));
253
253
  return true;
@@ -337,17 +337,17 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
337
337
  };
338
338
  });
339
339
  _defineProperty(_assertThisInitialized(_this), "handleSelectedEmoji", function (emojiId) {
340
- var _pluginInjectionApi$e3;
340
+ var _pluginInjectionApi$c5, _pluginInjectionApi$e3;
341
341
  var pluginInjectionApi = _this.props.pluginInjectionApi;
342
342
  _this.props.editorView.focus();
343
- pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
343
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 || _pluginInjectionApi$c5.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
344
344
  _this.toggleEmojiPicker();
345
345
  return true;
346
346
  });
347
347
  _defineProperty(_assertThisInitialized(_this), "openElementBrowser", function () {
348
- var _pluginInjectionApi$q;
348
+ var _pluginInjectionApi$c6, _pluginInjectionApi$q;
349
349
  var pluginInjectionApi = _this.props.pluginInjectionApi;
350
- pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
350
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 || _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
351
351
  });
352
352
  _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref3) {
353
353
  var item = _ref3.item,
@@ -528,7 +528,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
528
528
  popupsBoundariesElement: popupsBoundariesElement,
529
529
  popupsScrollableElement: popupsScrollableElement,
530
530
  handleClickOutside: this.handleTableSelectorClickOutside,
531
- handleEscapeKeydown: this.handleTableSelectorPressEscape
531
+ handleEscapeKeydown: this.handleTableSelectorPressEscape,
532
+ "data-testid": ''
532
533
  });
533
534
  }
534
535
  }, {
package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js CHANGED
@@ -14,6 +14,7 @@ var TABLE_SELECTOR_PADDING_SIDE = 10;
14
14
  var DEFAULT_TABLE_SELECTOR_ROWS = 5;
15
15
  var DEFAULT_TABLE_SELECTOR_COLS = 10;
16
16
  var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
17
+ var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
17
18
  var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
18
19
  var tableSelectorPopupWrapperStyles = css({
19
20
  borderRadius: "var(--ds-border-radius, 3px)",
@@ -50,8 +51,8 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
50
51
  // Calculate number grid cells selected
51
52
  var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
52
53
  var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
53
-
54
54
  // Keep the selected rows and columns within the defined bounds
55
+ var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
55
56
  if (selectedGridCols < 1) {
56
57
  selectedGridCols = 1;
57
58
  }
@@ -61,15 +62,21 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
61
62
  if (selectedGridRows < 1) {
62
63
  selectedGridRows = 1;
63
64
  }
64
- if (selectedGridRows > size.maxRow) {
65
- selectedGridRows = size.maxRow;
65
+ // Expand grid when row selection is greater than the default grid size
66
+ if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS) {
67
+ if (selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
68
+ gridRows = selectedGridRows + 1;
69
+ } else {
70
+ selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
71
+ gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
72
+ }
66
73
  }
67
74
  if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
68
75
  setSize({
69
76
  col: selectedGridCols,
70
77
  row: selectedGridRows,
71
78
  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
72
- maxRow: DEFAULT_TABLE_SELECTOR_ROWS
79
+ maxRow: gridRows
73
80
  });
74
81
  }
75
82
  }, [size, setSize]);
package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -72,11 +72,12 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
72
72
  onSelection = _ref3.onSelection,
73
73
  selectedCol = _ref3.selectedCol,
74
74
  selectedRow = _ref3.selectedRow,
75
- intl = _ref3.intl;
75
+ formatMessage = _ref3.intl.formatMessage;
76
76
  var buttons = useMemo(function () {
77
77
  return createArray(maxCols, maxRows);
78
78
  }, [maxCols, maxRows]);
79
79
  return jsx(Stack, null, jsx("div", {
80
+ "aria-label": "".concat(formatMessage(messages.tableSizeSelectorPopup)),
80
81
  css:
81
82
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
82
83
  gridWrapperStyles({
@@ -93,10 +94,11 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
93
94
  col: col,
94
95
  row: row,
95
96
  onClick: onSelection,
96
- label: "".concat(intl.formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
97
+ label: "".concat(formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
97
98
  });
98
99
  })), jsx("span", {
99
- css: selectionSizeTextStyles
100
+ css: selectionSizeTextStyles,
101
+ "aria-hidden": true
100
102
  }, "".concat(selectedRow, " x ").concat(selectedCol)));
101
103
  };
102
104
  export default injectIntl(TableSelectorPopup);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "0.2.19",
3
+ "version": "0.2.21",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -14,7 +14,7 @@
14
14
  "releaseModel": "continuous",
15
15
  "runReact18": false
16
16
  },
17
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
17
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
18
18
  "main": "dist/cjs/index.js",
19
19
  "module": "dist/esm/index.js",
20
20
  "module:es2019": "dist/es2019/index.js",
@@ -33,7 +33,7 @@
33
33
  ".": "./src/index.ts"
34
34
  },
35
35
  "dependencies": {
36
- "@atlaskit/editor-common": "^76.39.0",
36
+ "@atlaskit/editor-common": "^76.40.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^0.4.0",
38
38
  "@atlaskit/editor-plugin-block-type": "^3.0.0",
39
39
  "@atlaskit/editor-plugin-code-block": "^0.1.0",