@atlaskit/editor-plugin-insert-block 1.3.2 → 1.3.4

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 (13) hide show
  1. package/.eslintrc.js +24 -24
  2. package/CHANGELOG.md +198 -182
  3. package/LICENSE.md +6 -8
  4. package/dist/cjs/ui/ElementBrowser/InsertMenu.js +2 -1
  5. package/dist/cjs/ui/ToolbarInsertBlock/index.js +46 -30
  6. package/dist/es2019/ui/ElementBrowser/InsertMenu.js +2 -1
  7. package/dist/es2019/ui/ToolbarInsertBlock/index.js +60 -49
  8. package/dist/esm/ui/ElementBrowser/InsertMenu.js +2 -1
  9. package/dist/esm/ui/ToolbarInsertBlock/index.js +46 -30
  10. package/dist/types/ui/ToolbarInsertBlock/index.d.ts +2 -2
  11. package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts +2 -2
  12. package/package.json +5 -7
  13. package/report.api.md +45 -44
package/LICENSE.md CHANGED
@@ -1,13 +1,11 @@
1
1
  Copyright 2023 Atlassian Pty Ltd
2
2
 
3
- Licensed under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License.
5
- You may obtain a copy of the License at
3
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
4
+ compliance with the License. You may obtain a copy of the License at
6
5
 
7
6
  http://www.apache.org/licenses/LICENSE-2.0
8
7
 
9
- Unless required by applicable law or agreed to in writing, software
10
- distributed under the License is distributed on an "AS IS" BASIS,
11
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
- See the License for the specific language governing permissions and
13
- limitations under the License.
8
+ Unless required by applicable law or agreed to in writing, software distributed under the License is
9
+ distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
10
+ implied. See the License for the specific language governing permissions and limitations under the
11
+ License.
package/dist/cjs/ui/ElementBrowser/InsertMenu.js CHANGED
@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
+ var _analytics = require("@atlaskit/editor-common/analytics");
13
14
  var _elementBrowser = require("@atlaskit/editor-common/element-browser");
14
15
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
15
16
  var _uiReact = require("@atlaskit/editor-common/ui-react");
@@ -63,7 +64,7 @@ var InsertMenu = function InsertMenu(_ref) {
63
64
  if (!editorView.hasFocus()) {
64
65
  editorView.focus();
65
66
  }
66
- pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item)(editorView.state, editorView.dispatch);
67
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
67
68
  }, [editorView, toggleVisiblity, pluginInjectionApi]);
68
69
  var getItems = (0, _react.useCallback)(function (query, category) {
69
70
  var result;
package/dist/cjs/ui/ToolbarInsertBlock/index.js CHANGED
@@ -60,19 +60,23 @@ var tableButtonWrapper = exports.tableButtonWrapper = function tableButtonWrappe
60
60
  var isTableSelectorOpen = _ref.isTableSelectorOpen,
61
61
  isButtonDisabled = _ref.isButtonDisabled;
62
62
  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixins
63
- (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n ", "\n ", "\n\n .table-toolbar-btn {\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n margin-right: ", ";\n padding: ", ";\n & > span {\n min-width: 16px;\n margin: ", ";\n }\n }\n .table-selector-toolbar-btn {\n padding: ", ";\n & > span {\n margin: ", ";\n width: 16px !important;\n display: flex;\n justify-content: center;\n }\n\n border-top-left-radius: ", " !important;\n border-bottom-left-radius: ", " !important;\n }\n "])), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn'), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn'), "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-space-025, 1px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)")
63
+ (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\t", "\n\t\t", "\n\n .table-toolbar-btn {\n\t\t\tborder-top-right-radius: ", ";\n\t\t\tborder-bottom-right-radius: ", ";\n\t\t\tmargin-right: ", ";\n\t\t\tpadding: ", ";\n\t\t\t& > span {\n\t\t\t\tmin-width: 16px;\n\t\t\t\tmargin: ", ";\n\t\t\t}\n\t\t}\n\t\t.table-selector-toolbar-btn {\n\t\t\tpadding: ", ";\n\t\t\t& > span {\n\t\t\t\tmargin: ", ";\n\t\t\t\twidth: 16px !important;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\n\t\t\tborder-top-left-radius: ", " !important;\n\t\t\tborder-bottom-left-radius: ", " !important;\n\t\t}\n\t"])), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn'), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn'), "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-space-025, 1px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)")
64
64
  );
65
65
  };
66
66
  // eslint-disable-next-line @repo/internal/react/no-class-components
67
67
  var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
68
68
  (0, _inherits2.default)(ToolbarInsertBlock, _React$PureComponent);
69
69
  var _super = _createSuper(ToolbarInsertBlock);
70
- function ToolbarInsertBlock(props) {
70
+ function ToolbarInsertBlock() {
71
71
  var _this;
72
72
  (0, _classCallCheck2.default)(this, ToolbarInsertBlock);
73
- _this = _super.call(this, props);
73
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
74
+ args[_key] = arguments[_key];
75
+ }
76
+ _this = _super.call.apply(_super, [this].concat(args));
74
77
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableButtonRef", /*#__PURE__*/_react.default.createRef());
75
78
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableSelectorButtonRef", /*#__PURE__*/_react.default.createRef());
79
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unregisterToggleDropdownMenuOptions", null);
76
80
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
77
81
  isPlusMenuOpen: false,
78
82
  emojiPickerOpen: false,
@@ -198,10 +202,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
198
202
  _this.toggleTableSelector(_analytics.INPUT_METHOD.TOOLBAR);
199
203
  }
200
204
  });
205
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
206
+ _this.unregisterToggleDropdownMenuOptions = _this.props.registerToggleDropdownMenuOptions ? _this.props.registerToggleDropdownMenuOptions(_this.handleClick) : null;
207
+ });
201
208
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
202
- if (_this.unresgisterToggleDropdownMenuOptions) {
203
- _this.unresgisterToggleDropdownMenuOptions();
204
- }
209
+ var _this$unregisterToggl, _this2;
210
+ (_this$unregisterToggl = (_this2 = _this).unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 || _this$unregisterToggl.call(_this2);
205
211
  });
206
212
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
207
213
  _this.togglePlusMenuVisibility();
@@ -242,27 +248,35 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
242
248
  return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m2 = pluginInjectionApi.mention) === null || _pluginInjectionApi$m2 === void 0 || (_pluginInjectionApi$m2 = _pluginInjectionApi$m2.actions) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.openTypeAhead(inputMethod));
243
249
  });
244
250
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertTable", function (inputMethod) {
245
- var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3, _pluginInjectionApi$t4;
246
251
  var _this$props2 = _this.props,
247
252
  pluginInjectionApi = _this$props2.pluginInjectionApi,
248
253
  editorView = _this$props2.editorView;
249
254
  var state = editorView.state,
250
255
  dispatch = editorView.dispatch;
251
- return (_pluginInjectionApi$t = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t2 = pluginInjectionApi.table) === null || _pluginInjectionApi$t2 === void 0 || (_pluginInjectionApi$t3 = (_pluginInjectionApi$t4 = _pluginInjectionApi$t2.actions).insertTable) === null || _pluginInjectionApi$t3 === void 0 ? void 0 : _pluginInjectionApi$t3.call(_pluginInjectionApi$t4, {
252
- action: _analytics.ACTION.INSERTED,
253
- actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
254
- actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
255
- attributes: {
256
- inputMethod: inputMethod
257
- },
258
- eventType: _analytics.EVENT_TYPE.TRACK
259
- })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
256
+
257
+ // workaround to solve race condition where cursor is not placed correctly inside table
258
+ queueMicrotask(function () {
259
+ var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3;
260
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t = pluginInjectionApi.table) === null || _pluginInjectionApi$t === void 0 || (_pluginInjectionApi$t2 = (_pluginInjectionApi$t3 = _pluginInjectionApi$t.actions).insertTable) === null || _pluginInjectionApi$t2 === void 0 || _pluginInjectionApi$t2.call(_pluginInjectionApi$t3, {
261
+ action: _analytics.ACTION.INSERTED,
262
+ actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
263
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
264
+ attributes: {
265
+ inputMethod: inputMethod
266
+ },
267
+ eventType: _analytics.EVENT_TYPE.TRACK
268
+ })(state, dispatch);
269
+ });
260
270
  });
261
271
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertTableWithSize", function (inputMethod, rowsCount, colsCount) {
262
272
  return function () {
263
- var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
264
273
  var pluginInjectionApi = _this.props.pluginInjectionApi;
265
- 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));
274
+
275
+ // workaround to solve race condition where cursor is not placed correctly inside table
276
+ queueMicrotask(function () {
277
+ var _pluginInjectionApi$c3, _pluginInjectionApi$t4;
278
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, _analytics.INPUT_METHOD.PICKER));
279
+ });
266
280
  };
267
281
  });
268
282
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDate", function (inputMethod) {
@@ -318,14 +332,14 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
318
332
  });
319
333
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertTaskDecision", function (name, inputMethod) {
320
334
  return function () {
321
- var _pluginInjectionApi$t6, _pluginInjectionApi$t7;
335
+ var _pluginInjectionApi$t5, _pluginInjectionApi$t6;
322
336
  var _this$props7 = _this.props,
323
337
  _this$props7$editorVi = _this$props7.editorView,
324
338
  state = _this$props7$editorVi.state,
325
339
  dispatch = _this$props7$editorVi.dispatch,
326
340
  pluginInjectionApi = _this$props7.pluginInjectionApi;
327
341
  var listType = name === 'action' ? 'taskList' : 'decisionList';
328
- return (_pluginInjectionApi$t6 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t7 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t7 === void 0 ? void 0 : _pluginInjectionApi$t7.actions.insertTaskDecision(listType, inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$t6 !== void 0 ? _pluginInjectionApi$t6 : false;
342
+ return (_pluginInjectionApi$t5 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t6 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t6 === void 0 ? void 0 : _pluginInjectionApi$t6.actions.insertTaskDecision(listType, inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$t5 !== void 0 ? _pluginInjectionApi$t5 : false;
329
343
  };
330
344
  });
331
345
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertHorizontalRule", function (inputMethod) {
@@ -469,8 +483,6 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
469
483
  inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
470
484
  });
471
485
  });
472
- var registerToggleDropdownMenuOptions = props.registerToggleDropdownMenuOptions;
473
- _this.unresgisterToggleDropdownMenuOptions = registerToggleDropdownMenuOptions ? registerToggleDropdownMenuOptions(_this.handleClick) : null;
474
486
  return _this;
475
487
  }
476
488
  (0, _createClass2.default)(ToolbarInsertBlock, [{
@@ -503,7 +515,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
503
515
  }, {
504
516
  key: "renderPopup",
505
517
  value: function renderPopup() {
506
- var _this2 = this;
518
+ var _this3 = this;
507
519
  var emojiPickerOpen = this.state.emojiPickerOpen;
508
520
  var _this$props12 = this.props,
509
521
  popupsMountPoint = _this$props12.popupsMountPoint,
@@ -521,8 +533,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
521
533
  return null;
522
534
  }
523
535
  var onUnmount = function onUnmount() {
524
- var _this2$props$pluginIn;
525
- return (_this2$props$pluginIn = _this2.props.pluginInjectionApi) === null || _this2$props$pluginIn === void 0 || (_this2$props$pluginIn = _this2$props$pluginIn.core) === null || _this2$props$pluginIn === void 0 || (_this2$props$pluginIn = _this2$props$pluginIn.actions) === null || _this2$props$pluginIn === void 0 ? void 0 : _this2$props$pluginIn.focus();
536
+ var _this3$props$pluginIn;
537
+ return (_this3$props$pluginIn = _this3.props.pluginInjectionApi) === null || _this3$props$pluginIn === void 0 || (_this3$props$pluginIn = _this3$props$pluginIn.core) === null || _this3$props$pluginIn === void 0 || (_this3$props$pluginIn = _this3$props$pluginIn.actions) === null || _this3$props$pluginIn === void 0 ? void 0 : _this3$props$pluginIn.focus();
526
538
  };
527
539
  return (0, _react2.jsx)(_ui.Popup, {
528
540
  target: ref,
@@ -583,7 +595,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
583
595
  }, {
584
596
  key: "render",
585
597
  value: function render() {
586
- var _this3 = this,
598
+ var _this4 = this,
587
599
  _tableButton,
588
600
  _tableButton2,
589
601
  _tableButton3,
@@ -649,7 +661,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
649
661
  return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
650
662
  item: btn,
651
663
  testId: String(btn.content),
652
- ref: btn.value.name === 'emoji' ? _this3.handleEmojiButtonRef : noop,
664
+ ref: btn.value.name === 'emoji' ? _this4.handleEmojiButtonRef : noop,
653
665
  key: btn.value.name,
654
666
  spacing: isReducedSpacing ? 'none' : 'default',
655
667
  disabled: isDisabled || btn.isDisabled,
@@ -659,7 +671,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
659
671
  "aria-label": btn['aria-label'],
660
672
  "aria-haspopup": btn['aria-haspopup'],
661
673
  "aria-keyshortcuts": btn['aria-keyshortcuts'],
662
- onItemClick: _this3.insertToolbarMenuItem
674
+ onItemClick: _this4.insertToolbarMenuItem
663
675
  });
664
676
  }), this.props.tableSelectorSupported && (isTableButtonVisible || isTableSizeVisible) && (0, _react2.jsx)("div", {
665
677
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -667,7 +679,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
667
679
  isTableSelectorOpen: isTableSelectorOpen,
668
680
  isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
669
681
  })
670
- }, isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton, {
682
+ }, isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton
683
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
684
+ , {
671
685
  className: "table-toolbar-btn",
672
686
  item: tableButton,
673
687
  ref: this.tableButtonRef,
@@ -682,7 +696,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
682
696
  "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
683
697
  "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
684
698
  onItemClick: this.insertToolbarMenuItem
685
- }), isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton, {
699
+ }), isTableButtonVisible && (0, _react2.jsx)(_uiMenu.ToolbarButton
700
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
701
+ , {
686
702
  className: "table-selector-toolbar-btn",
687
703
  item: tableSelectorButton,
688
704
  testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
package/dist/es2019/ui/ElementBrowser/InsertMenu.js CHANGED
@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
 
4
4
  import { useCallback, useState } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
6
7
  import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
7
8
  import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
8
9
  import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
@@ -46,7 +47,7 @@ const InsertMenu = ({
46
47
  if (!editorView.hasFocus()) {
47
48
  editorView.focus();
48
49
  }
49
- pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.actions.insertItem(item)(editorView.state, editorView.dispatch);
50
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
50
51
  }, [editorView, toggleVisiblity, pluginInjectionApi]);
51
52
  const getItems = useCallback((query, category) => {
52
53
  let result;
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -38,39 +38,40 @@ export const tableButtonWrapper = ({
38
38
  }) =>
39
39
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixins
40
40
  css`
41
- display: flex;
42
- ${!isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn')}
43
- ${!isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn')}
41
+ display: flex;
42
+ ${!isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn')}
43
+ ${!isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn')}
44
44
 
45
45
  .table-toolbar-btn {
46
- border-top-right-radius: ${"var(--ds-border-radius-200, 0px)"};
47
- border-bottom-right-radius: ${"var(--ds-border-radius-200, 0px)"};
48
- margin-right: ${"var(--ds-space-025, 1px)"};
49
- padding: ${"var(--ds-space-0, 0px)"};
50
- & > span {
51
- min-width: 16px;
52
- margin: ${"var(--ds-space-0, 0px)"};
53
- }
54
- }
55
- .table-selector-toolbar-btn {
56
- padding: ${"var(--ds-space-0, 0px)"};
57
- & > span {
58
- margin: ${"var(--ds-space-0, 0px)"};
59
- width: 16px !important;
60
- display: flex;
61
- justify-content: center;
62
- }
46
+ border-top-right-radius: ${"var(--ds-border-radius-200, 0px)"};
47
+ border-bottom-right-radius: ${"var(--ds-border-radius-200, 0px)"};
48
+ margin-right: ${"var(--ds-space-025, 1px)"};
49
+ padding: ${"var(--ds-space-0, 0px)"};
50
+ & > span {
51
+ min-width: 16px;
52
+ margin: ${"var(--ds-space-0, 0px)"};
53
+ }
54
+ }
55
+ .table-selector-toolbar-btn {
56
+ padding: ${"var(--ds-space-0, 0px)"};
57
+ & > span {
58
+ margin: ${"var(--ds-space-0, 0px)"};
59
+ width: 16px !important;
60
+ display: flex;
61
+ justify-content: center;
62
+ }
63
63
 
64
- border-top-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
65
- border-bottom-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
66
- }
67
- `;
64
+ border-top-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
65
+ border-bottom-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
66
+ }
67
+ `;
68
68
  // eslint-disable-next-line @repo/internal/react/no-class-components
69
69
  export class ToolbarInsertBlock extends React.PureComponent {
70
- constructor(props) {
71
- super(props);
70
+ constructor(...args) {
71
+ super(...args);
72
72
  _defineProperty(this, "tableButtonRef", /*#__PURE__*/React.createRef());
73
73
  _defineProperty(this, "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
74
+ _defineProperty(this, "unregisterToggleDropdownMenuOptions", null);
74
75
  _defineProperty(this, "state", {
75
76
  isPlusMenuOpen: false,
76
77
  emojiPickerOpen: false,
@@ -198,10 +199,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
198
199
  this.toggleTableSelector(INPUT_METHOD.TOOLBAR);
199
200
  }
200
201
  });
202
+ _defineProperty(this, "componentDidMount", () => {
203
+ this.unregisterToggleDropdownMenuOptions = this.props.registerToggleDropdownMenuOptions ? this.props.registerToggleDropdownMenuOptions(this.handleClick) : null;
204
+ });
201
205
  _defineProperty(this, "componentWillUnmount", () => {
202
- if (this.unresgisterToggleDropdownMenuOptions) {
203
- this.unresgisterToggleDropdownMenuOptions();
204
- }
206
+ var _this$unregisterToggl;
207
+ (_this$unregisterToggl = this.unregisterToggleDropdownMenuOptions) === null || _this$unregisterToggl === void 0 ? void 0 : _this$unregisterToggl.call(this);
205
208
  });
206
209
  _defineProperty(this, "handleClick", () => {
207
210
  this.togglePlusMenuVisibility();
@@ -246,7 +249,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
246
249
  return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m2 = pluginInjectionApi.mention) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : (_pluginInjectionApi$m3 = _pluginInjectionApi$m2.actions) === null || _pluginInjectionApi$m3 === void 0 ? void 0 : _pluginInjectionApi$m3.openTypeAhead(inputMethod));
247
250
  });
248
251
  _defineProperty(this, "insertTable", inputMethod => {
249
- var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3, _pluginInjectionApi$t4;
250
252
  const {
251
253
  pluginInjectionApi,
252
254
  editorView
@@ -255,22 +257,31 @@ export class ToolbarInsertBlock extends React.PureComponent {
255
257
  state,
256
258
  dispatch
257
259
  } = editorView;
258
- return (_pluginInjectionApi$t = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t2 = pluginInjectionApi.table) === null || _pluginInjectionApi$t2 === void 0 ? void 0 : (_pluginInjectionApi$t3 = (_pluginInjectionApi$t4 = _pluginInjectionApi$t2.actions).insertTable) === null || _pluginInjectionApi$t3 === void 0 ? void 0 : _pluginInjectionApi$t3.call(_pluginInjectionApi$t4, {
259
- action: ACTION.INSERTED,
260
- actionSubject: ACTION_SUBJECT.DOCUMENT,
261
- actionSubjectId: ACTION_SUBJECT_ID.TABLE,
262
- attributes: {
263
- inputMethod
264
- },
265
- eventType: EVENT_TYPE.TRACK
266
- })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
260
+
261
+ // workaround to solve race condition where cursor is not placed correctly inside table
262
+ queueMicrotask(() => {
263
+ var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3;
264
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t = pluginInjectionApi.table) === null || _pluginInjectionApi$t === void 0 ? void 0 : (_pluginInjectionApi$t2 = (_pluginInjectionApi$t3 = _pluginInjectionApi$t.actions).insertTable) === null || _pluginInjectionApi$t2 === void 0 ? void 0 : _pluginInjectionApi$t2.call(_pluginInjectionApi$t3, {
265
+ action: ACTION.INSERTED,
266
+ actionSubject: ACTION_SUBJECT.DOCUMENT,
267
+ actionSubjectId: ACTION_SUBJECT_ID.TABLE,
268
+ attributes: {
269
+ inputMethod
270
+ },
271
+ eventType: EVENT_TYPE.TRACK
272
+ })(state, dispatch);
273
+ });
267
274
  });
268
275
  _defineProperty(this, "insertTableWithSize", (inputMethod, rowsCount, colsCount) => () => {
269
- var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
270
276
  const {
271
277
  pluginInjectionApi
272
278
  } = this.props;
273
- 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));
279
+
280
+ // workaround to solve race condition where cursor is not placed correctly inside table
281
+ queueMicrotask(() => {
282
+ var _pluginInjectionApi$c3, _pluginInjectionApi$t4;
283
+ 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$t4 = pluginInjectionApi.table) === null || _pluginInjectionApi$t4 === void 0 ? void 0 : _pluginInjectionApi$t4.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
284
+ });
274
285
  });
275
286
  _defineProperty(this, "createDate", inputMethod => {
276
287
  var _pluginInjectionApi$c4, _pluginInjectionApi$d, _pluginInjectionApi$d2;
@@ -330,7 +341,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
330
341
  return true;
331
342
  });
332
343
  _defineProperty(this, "insertTaskDecision", (name, inputMethod) => () => {
333
- var _pluginInjectionApi$t6, _pluginInjectionApi$t7;
344
+ var _pluginInjectionApi$t5, _pluginInjectionApi$t6;
334
345
  const {
335
346
  editorView: {
336
347
  state,
@@ -339,7 +350,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
339
350
  pluginInjectionApi
340
351
  } = this.props;
341
352
  const listType = name === 'action' ? 'taskList' : 'decisionList';
342
- return (_pluginInjectionApi$t6 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t7 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t7 === void 0 ? void 0 : _pluginInjectionApi$t7.actions.insertTaskDecision(listType, inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$t6 !== void 0 ? _pluginInjectionApi$t6 : false;
353
+ return (_pluginInjectionApi$t5 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t6 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t6 === void 0 ? void 0 : _pluginInjectionApi$t6.actions.insertTaskDecision(listType, inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$t5 !== void 0 ? _pluginInjectionApi$t5 : false;
343
354
  });
344
355
  _defineProperty(this, "insertHorizontalRule", inputMethod => {
345
356
  var _pluginInjectionApi$r, _pluginInjectionApi$r2;
@@ -492,10 +503,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
492
503
  item,
493
504
  inputMethod: INPUT_METHOD.INSERT_MENU
494
505
  }));
495
- const {
496
- registerToggleDropdownMenuOptions
497
- } = props;
498
- this.unresgisterToggleDropdownMenuOptions = registerToggleDropdownMenuOptions ? registerToggleDropdownMenuOptions(this.handleClick) : null;
499
506
  }
500
507
  static getDerivedStateFromProps(props, state) {
501
508
  const [buttons, dropdownItems] = createItems({
@@ -702,7 +709,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
702
709
  isTableSelectorOpen,
703
710
  isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
704
711
  })
705
- }, isTableButtonVisible && jsx(ToolbarButton, {
712
+ }, isTableButtonVisible && jsx(ToolbarButton
713
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
714
+ , {
706
715
  className: "table-toolbar-btn",
707
716
  item: tableButton,
708
717
  ref: this.tableButtonRef,
@@ -717,7 +726,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
717
726
  "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
718
727
  "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
719
728
  onItemClick: this.insertToolbarMenuItem
720
- }), isTableButtonVisible && jsx(ToolbarButton, {
729
+ }), isTableButtonVisible && jsx(ToolbarButton
730
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
731
+ , {
721
732
  className: "table-selector-toolbar-btn",
722
733
  item: tableSelectorButton,
723
734
  testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
package/dist/esm/ui/ElementBrowser/InsertMenu.js CHANGED
@@ -6,6 +6,7 @@ var _excluded = ["children"];
6
6
 
7
7
  import { useCallback, useState } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
9
10
  import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
10
11
  import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
11
12
  import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
@@ -57,7 +58,7 @@ var InsertMenu = function InsertMenu(_ref) {
57
58
  if (!editorView.hasFocus()) {
58
59
  editorView.focus();
59
60
  }
60
- pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item)(editorView.state, editorView.dispatch);
61
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
61
62
  }, [editorView, toggleVisiblity, pluginInjectionApi]);
62
63
  var getItems = useCallback(function (query, category) {
63
64
  var result;