@atlaskit/editor-plugin-insert-block 0.2.11 → 0.2.12

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 (24) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/plugin.js +1 -0
  3. package/dist/cjs/ui/ToolbarInsertBlock/create-items.js +14 -2
  4. package/dist/cjs/ui/ToolbarInsertBlock/index.js +93 -7
  5. package/dist/cjs/ui/ToolbarInsertBlock/item.js +3 -5
  6. package/dist/es2019/plugin.js +1 -0
  7. package/dist/es2019/ui/ToolbarInsertBlock/create-items.js +16 -3
  8. package/dist/es2019/ui/ToolbarInsertBlock/index.js +105 -17
  9. package/dist/es2019/ui/ToolbarInsertBlock/item.js +2 -4
  10. package/dist/esm/plugin.js +1 -0
  11. package/dist/esm/ui/ToolbarInsertBlock/create-items.js +15 -3
  12. package/dist/esm/ui/ToolbarInsertBlock/index.js +88 -6
  13. package/dist/esm/ui/ToolbarInsertBlock/item.js +2 -4
  14. package/dist/types/plugin.d.ts +1 -0
  15. package/dist/types/ui/ToolbarInsertBlock/create-items.d.ts +1 -0
  16. package/dist/types/ui/ToolbarInsertBlock/index.d.ts +1 -0
  17. package/dist/types/ui/ToolbarInsertBlock/item.d.ts +1 -1
  18. package/dist/types/ui/ToolbarInsertBlock/types.d.ts +2 -0
  19. package/dist/types-ts4.5/plugin.d.ts +1 -0
  20. package/dist/types-ts4.5/ui/ToolbarInsertBlock/create-items.d.ts +1 -0
  21. package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts +1 -0
  22. package/dist/types-ts4.5/ui/ToolbarInsertBlock/item.d.ts +1 -1
  23. package/dist/types-ts4.5/ui/ToolbarInsertBlock/types.d.ts +2 -0
  24. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 0.2.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [#64152](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64152) [`4bc51e1731ba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4bc51e1731ba) - [ux] Added a table selector button to the full page toolbar and button styles
8
+ - Updated dependencies
9
+
3
10
  ## 0.2.11
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -127,6 +127,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
127
127
  isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
128
128
  editorView: editorView,
129
129
  tableSupported: !!editorView.state.schema.nodes.table,
130
+ tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
130
131
  actionSupported: !!editorView.state.schema.nodes.taskItem,
131
132
  mentionsSupported: !!(mentionState && mentionState.mentionProvider),
132
133
  mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
package/dist/cjs/ui/ToolbarInsertBlock/create-items.js CHANGED
@@ -39,6 +39,7 @@ var buttonToDropdownItem = (0, _memoizeOne.default)(function (title) {
39
39
  var createInsertBlockItems = function createInsertBlockItems(config) {
40
40
  var isTypeAheadAllowed = config.isTypeAheadAllowed,
41
41
  tableSupported = config.tableSupported,
42
+ tableSelectorSupported = config.tableSelectorSupported,
42
43
  mediaUploadsEnabled = config.mediaUploadsEnabled,
43
44
  mediaSupported = config.mediaSupported,
44
45
  imageUploadSupported = config.imageUploadSupported,
@@ -116,6 +117,13 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
116
117
  disabled: false
117
118
  }));
118
119
  }
120
+ if (tableSupported && tableSelectorSupported) {
121
+ items.push((0, _item.tableSelector)({
122
+ content: formatMessage(_messages2.messages.tableSelector),
123
+ tooltipDescription: formatMessage(_messages2.messages.tableSelectorDescription),
124
+ disabled: false
125
+ }));
126
+ }
119
127
  if (layoutSectionEnabled) {
120
128
  var labelColumns = formatMessage(_messages2.messages.columns);
121
129
  items.push((0, _item.layout)({
@@ -209,8 +217,12 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
209
217
  disabled: false
210
218
  }));
211
219
  }
212
- var buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
213
- var remainingItems = items.slice(numberOfButtons);
220
+ var numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
221
+ var buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
222
+ var remainingItems = items.slice(numButtonsWithoutTableSelector).filter(function (_ref) {
223
+ var name = _ref.value.name;
224
+ return name !== 'table selector';
225
+ });
214
226
  var dropdownItems = (!isNewMenuEnabled ? (0, _sortItems.sortItems)(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(_messages2.messages.insertMenu)));
215
227
  return [buttonItems, dropdownItems];
216
228
  };
package/dist/cjs/ui/ToolbarInsertBlock/index.js CHANGED
@@ -1,10 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
- exports.default = exports.ToolbarInsertBlock = void 0;
8
+ exports.tableButtonWrapper = exports.default = exports.ToolbarInsertBlock = void 0;
8
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
11
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -13,6 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
13
14
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
14
15
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
15
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
16
18
  var _react = _interopRequireDefault(require("react"));
17
19
  var _react2 = require("@emotion/react");
18
20
  var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -24,13 +26,21 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
24
26
  var _uiReact = require("@atlaskit/editor-common/ui-react");
25
27
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
26
28
  var _picker = require("@atlaskit/emoji/picker");
29
+ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
27
30
  var _blockInsertMenu = require("./block-insert-menu");
28
31
  var _createItems3 = require("./create-items");
29
32
  var _messages = require("./messages");
33
+ var _templateObject;
34
+ /** @jsx jsx */
35
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
36
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
37
+ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
38
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
39
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
30
40
  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; }
31
41
  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; }
32
42
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
33
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
43
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
34
44
  /**
35
45
  * Checks if an element is detached (i.e. not in the current document)
36
46
  */
@@ -39,6 +49,13 @@ var isDetachedElement = function isDetachedElement(el) {
39
49
  };
40
50
  var noop = function noop() {};
41
51
  var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_picker.EmojiPicker);
52
+ var TABLE_SELECTOR_STRING = 'table selector';
53
+
54
+ // TODO: Jenga team will create a component for a split button using this css
55
+ var getHoverStyles = function getHoverStyles(selector) {
56
+ return "&:hover ".concat(selector, " {\n background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n &:hover {\n background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n }\n }");
57
+ };
58
+ var tableButtonWrapper = exports.tableButtonWrapper = (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 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"])), getHoverStyles('.table-selector-toolbar-btn'), 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)");
42
59
 
43
60
  // eslint-disable-next-line @repo/internal/react/no-class-components
44
61
  var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
@@ -56,7 +73,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
56
73
  emojiPickerOpen: false,
57
74
  isOpenedByKeyboard: false,
58
75
  buttons: [],
59
- dropdownItems: []
76
+ dropdownItems: [],
77
+ isTableSelectorOpen: false
60
78
  });
61
79
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChange", function (attrs) {
62
80
  var state = {
@@ -331,8 +349,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
331
349
  case 'table':
332
350
  _this.insertTable(inputMethod);
333
351
  break;
334
- case 'table with size':
335
- _this.insertTableWithSize(inputMethod, 3, 3)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
352
+ case 'table selector':
353
+ _this.insertTableWithSize(inputMethod, 4, 4)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
336
354
  break;
337
355
  case 'image upload':
338
356
  if (handleImageUpload) {
@@ -473,6 +491,18 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
473
491
  key: "render",
474
492
  value: function render() {
475
493
  var _this2 = this,
494
+ _tableButton,
495
+ _tableButton2,
496
+ _tableButton3,
497
+ _tableButton4,
498
+ _tableButton5,
499
+ _tableButton6,
500
+ _tableSelectorButton,
501
+ _tableSelectorButton2,
502
+ _tableSelectorButton3,
503
+ _tableSelectorButton4,
504
+ _tableSelectorButton5,
505
+ _tableSelectorButton6,
476
506
  _this$props$isDisable,
477
507
  _this$props$replacePl;
478
508
  var _this$state = this.state,
@@ -485,11 +515,34 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
485
515
  if (buttons.length === 0 && dropdownItems.length === 0) {
486
516
  return null;
487
517
  }
518
+ var toolbarButtons = [];
519
+ var tableSelectorButton;
520
+ var tableButton;
521
+
522
+ // Seperate table buttons from toolbar buttons
523
+ var _iterator = _createForOfIteratorHelper(buttons),
524
+ _step;
525
+ try {
526
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
527
+ var btn = _step.value;
528
+ if (btn.value.name === TABLE_SELECTOR_STRING) {
529
+ tableSelectorButton = btn;
530
+ } else if (btn.value.name === 'table' && this.props.tableSelectorSupported) {
531
+ tableButton = btn;
532
+ } else {
533
+ toolbarButtons.push(btn);
534
+ }
535
+ }
536
+ } catch (err) {
537
+ _iterator.e(err);
538
+ } finally {
539
+ _iterator.f();
540
+ }
488
541
  return (
489
542
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
490
543
  (0, _react2.jsx)("span", {
491
544
  css: _styles.buttonGroupStyle
492
- }, buttons.map(function (btn) {
545
+ }, toolbarButtons.map(function (btn) {
493
546
  return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
494
547
  item: btn,
495
548
  testId: String(btn.content),
@@ -505,7 +558,39 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
505
558
  "aria-keyshortcuts": btn['aria-keyshortcuts'],
506
559
  onItemClick: _this2.insertToolbarMenuItem
507
560
  });
508
- }), (0, _react2.jsx)("span", {
561
+ }), this.props.tableSelectorSupported &&
562
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
563
+ (0, _react2.jsx)("div", {
564
+ css: tableButtonWrapper
565
+ }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
566
+ className: "table-toolbar-btn",
567
+ item: tableButton,
568
+ testId: String((_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.content),
569
+ key: (_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.value.name,
570
+ spacing: isReducedSpacing ? 'none' : 'default',
571
+ disabled: isDisabled || ((_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.isDisabled),
572
+ iconBefore: (_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.elemBefore,
573
+ selected: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.isActive,
574
+ title: (_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.title,
575
+ "aria-label": tableButton ? tableButton['aria-label'] : undefined,
576
+ "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
577
+ "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
578
+ onItemClick: this.insertToolbarMenuItem
579
+ }), (0, _react2.jsx)(_uiMenu.ToolbarButton, {
580
+ className: "table-selector-toolbar-btn",
581
+ item: tableSelectorButton,
582
+ testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
583
+ key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
584
+ spacing: isReducedSpacing ? 'none' : 'default',
585
+ disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
586
+ iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
587
+ selected: (_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive,
588
+ title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
589
+ "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
590
+ "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
591
+ "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
592
+ onItemClick: this.insertToolbarMenuItem
593
+ })), (0, _react2.jsx)("span", {
509
594
  css: _styles.wrapperStyle
510
595
  }, this.renderPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
511
596
  popupsMountPoint: this.props.popupsMountPoint,
@@ -540,6 +625,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
540
625
  var _createItems = (0, _createItems3.createItems)({
541
626
  isTypeAheadAllowed: props.isTypeAheadAllowed,
542
627
  tableSupported: props.tableSupported,
628
+ tableSelectorSupported: props.tableSelectorSupported,
543
629
  mediaUploadsEnabled: props.mediaUploadsEnabled,
544
630
  mediaSupported: props.mediaSupported,
545
631
  imageUploadSupported: props.imageUploadSupported,
package/dist/cjs/ui/ToolbarInsertBlock/item.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.tablePicker = exports.table = exports.status = exports.placeholder = exports.panel = exports.more = exports.mention = exports.media = exports.link = exports.layout = exports.imageUpload = exports.horizontalrule = exports.expand = exports.emoji = exports.decision = exports.date = exports.codeblock = exports.blockquote = exports.action = void 0;
7
+ exports.tableSelector = exports.table = exports.status = exports.placeholder = exports.panel = exports.more = exports.mention = exports.media = exports.link = exports.layout = exports.imageUpload = exports.horizontalrule = exports.expand = exports.emoji = exports.decision = exports.date = exports.codeblock = exports.blockquote = exports.action = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _react2 = require("@emotion/react");
10
10
  var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -132,14 +132,12 @@ var table = exports.table = mem(function (init) {
132
132
  'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleTable)
133
133
  });
134
134
  });
135
-
136
- //SIMONE TODO:
137
- var tablePicker = exports.tablePicker = mem(function (init) {
135
+ var tableSelector = exports.tableSelector = mem(function (init) {
138
136
  return from({
139
137
  content: init.content,
140
138
  tooltipDescription: init.tooltipDescription,
141
139
  disabled: init.disabled,
142
- name: 'table picker',
140
+ name: 'table selector',
143
141
  Icon: _chevronDown.default
144
142
  });
145
143
  });
package/dist/es2019/plugin.js CHANGED
@@ -121,6 +121,7 @@ function ToolbarInsertBlockWithInjectionApi({
121
121
  isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
122
122
  editorView: editorView,
123
123
  tableSupported: !!editorView.state.schema.nodes.table,
124
+ tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
124
125
  actionSupported: !!editorView.state.schema.nodes.taskItem,
125
126
  mentionsSupported: !!(mentionState && mentionState.mentionProvider),
126
127
  mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
package/dist/es2019/ui/ToolbarInsertBlock/create-items.js CHANGED
@@ -3,7 +3,7 @@ import memoize from 'lodash/memoize';
3
3
  import memoizeOne from 'memoize-one';
4
4
  import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
5
5
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
6
- import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table } from './item';
6
+ import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
7
7
  import { messages } from './messages';
8
8
  import { shallowEquals } from './shallow-equals';
9
9
  import { sortItems } from './sort-items';
@@ -25,6 +25,7 @@ const createInsertBlockItems = config => {
25
25
  const {
26
26
  isTypeAheadAllowed,
27
27
  tableSupported,
28
+ tableSelectorSupported,
28
29
  mediaUploadsEnabled,
29
30
  mediaSupported,
30
31
  imageUploadSupported,
@@ -103,6 +104,13 @@ const createInsertBlockItems = config => {
103
104
  disabled: false
104
105
  }));
105
106
  }
107
+ if (tableSupported && tableSelectorSupported) {
108
+ items.push(tableSelector({
109
+ content: formatMessage(messages.tableSelector),
110
+ tooltipDescription: formatMessage(messages.tableSelectorDescription),
111
+ disabled: false
112
+ }));
113
+ }
106
114
  if (layoutSectionEnabled) {
107
115
  const labelColumns = formatMessage(messages.columns);
108
116
  items.push(layout({
@@ -190,8 +198,13 @@ const createInsertBlockItems = config => {
190
198
  disabled: false
191
199
  }));
192
200
  }
193
- const buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
194
- const remainingItems = items.slice(numberOfButtons);
201
+ const numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
202
+ const buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
203
+ const remainingItems = items.slice(numButtonsWithoutTableSelector).filter(({
204
+ value: {
205
+ name
206
+ }
207
+ }) => name !== 'table selector');
195
208
  const dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
196
209
  return [buttonItems, dropdownItems];
197
210
  };
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  /** @jsx jsx */
3
3
  import React from 'react';
4
- import { jsx } from '@emotion/react';
4
+ import { css, jsx } from '@emotion/react';
5
5
  import ReactDOM from 'react-dom';
6
6
  import { injectIntl } from 'react-intl-next';
7
7
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -11,6 +11,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
11
11
  import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
12
12
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
13
13
  import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
14
+ import * as colors from '@atlaskit/theme/colors';
14
15
  import { BlockInsertMenu } from './block-insert-menu';
15
16
  import { createItems } from './create-items';
16
17
  import { messages } from './messages';
@@ -20,6 +21,43 @@ import { messages } from './messages';
20
21
  const isDetachedElement = el => !document.body.contains(el);
21
22
  const noop = () => {};
22
23
  const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
24
+ const TABLE_SELECTOR_STRING = 'table selector';
25
+
26
+ // TODO: Jenga team will create a component for a split button using this css
27
+ const getHoverStyles = selector => `&:hover ${selector} {
28
+ background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N20A})`};
29
+
30
+ &:hover {
31
+ background: ${`var(--ds-background-neutral-hovered, ${colors.N30A})`};
32
+ }
33
+ }`;
34
+ export const tableButtonWrapper = css`
35
+ display: flex;
36
+ ${getHoverStyles('.table-selector-toolbar-btn')}
37
+ ${getHoverStyles('.table-toolbar-btn')}
38
+
39
+ .table-toolbar-btn {
40
+ border-top-right-radius: ${"var(--ds-border-radius-200, 0px)"};
41
+ border-bottom-right-radius: ${"var(--ds-border-radius-200, 0px)"};
42
+ margin-right: ${"var(--ds-space-025, 1px)"};
43
+ padding: ${"var(--ds-space-0, 0px)"};
44
+ & > span {
45
+ margin: ${"var(--ds-space-0, 0px)"};
46
+ }
47
+ }
48
+ .table-selector-toolbar-btn {
49
+ padding: ${"var(--ds-space-0, 0px)"};
50
+ & > span {
51
+ margin: ${"var(--ds-space-0, 0px)"};
52
+ width: 16px !important;
53
+ display: flex;
54
+ justify-content: center;
55
+ }
56
+
57
+ border-top-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
58
+ border-bottom-left-radius: ${"var(--ds-border-radius-200, 0px)"} !important;
59
+ }
60
+ `;
23
61
 
24
62
  // eslint-disable-next-line @repo/internal/react/no-class-components
25
63
  export class ToolbarInsertBlock extends React.PureComponent {
@@ -30,7 +68,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
30
68
  emojiPickerOpen: false,
31
69
  isOpenedByKeyboard: false,
32
70
  buttons: [],
33
- dropdownItems: []
71
+ dropdownItems: [],
72
+ isTableSelectorOpen: false
34
73
  });
35
74
  _defineProperty(this, "onOpenChange", attrs => {
36
75
  const state = {
@@ -334,8 +373,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
334
373
  case 'table':
335
374
  this.insertTable(inputMethod);
336
375
  break;
337
- case 'table with size':
338
- this.insertTableWithSize(inputMethod, 3, 3)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
376
+ case 'table selector':
377
+ this.insertTableWithSize(inputMethod, 4, 4)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
339
378
  break;
340
379
  case 'image upload':
341
380
  if (handleImageUpload) {
@@ -417,6 +456,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
417
456
  const [buttons, dropdownItems] = createItems({
418
457
  isTypeAheadAllowed: props.isTypeAheadAllowed,
419
458
  tableSupported: props.tableSupported,
459
+ tableSelectorSupported: props.tableSelectorSupported,
420
460
  mediaUploadsEnabled: props.mediaUploadsEnabled,
421
461
  mediaSupported: props.mediaSupported,
422
462
  imageUploadSupported: props.imageUploadSupported,
@@ -508,7 +548,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
508
548
  }));
509
549
  }
510
550
  render() {
511
- var _this$props$isDisable, _this$props$replacePl;
551
+ var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl;
512
552
  const {
513
553
  buttons,
514
554
  dropdownItems,
@@ -521,23 +561,71 @@ export class ToolbarInsertBlock extends React.PureComponent {
521
561
  if (buttons.length === 0 && dropdownItems.length === 0) {
522
562
  return null;
523
563
  }
564
+ let toolbarButtons = [];
565
+ let tableSelectorButton;
566
+ let tableButton;
567
+
568
+ // Seperate table buttons from toolbar buttons
569
+ for (let btn of buttons) {
570
+ if (btn.value.name === TABLE_SELECTOR_STRING) {
571
+ tableSelectorButton = btn;
572
+ } else if (btn.value.name === 'table' && this.props.tableSelectorSupported) {
573
+ tableButton = btn;
574
+ } else {
575
+ toolbarButtons.push(btn);
576
+ }
577
+ }
524
578
  return (
525
579
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
526
580
  jsx("span", {
527
581
  css: buttonGroupStyle
528
- }, buttons.map(btn => jsx(ToolbarButton, {
529
- item: btn,
530
- testId: String(btn.content),
531
- ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
532
- key: btn.value.name,
582
+ }, toolbarButtons.map(btn => {
583
+ return jsx(ToolbarButton, {
584
+ item: btn,
585
+ testId: String(btn.content),
586
+ ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
587
+ key: btn.value.name,
588
+ spacing: isReducedSpacing ? 'none' : 'default',
589
+ disabled: isDisabled || btn.isDisabled,
590
+ iconBefore: btn.elemBefore,
591
+ selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
592
+ title: btn.title,
593
+ "aria-label": btn['aria-label'],
594
+ "aria-haspopup": btn['aria-haspopup'],
595
+ "aria-keyshortcuts": btn['aria-keyshortcuts'],
596
+ onItemClick: this.insertToolbarMenuItem
597
+ });
598
+ }), this.props.tableSelectorSupported &&
599
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
600
+ jsx("div", {
601
+ css: tableButtonWrapper
602
+ }, jsx(ToolbarButton, {
603
+ className: "table-toolbar-btn",
604
+ item: tableButton,
605
+ testId: String((_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.content),
606
+ key: (_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.value.name,
607
+ spacing: isReducedSpacing ? 'none' : 'default',
608
+ disabled: isDisabled || ((_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.isDisabled),
609
+ iconBefore: (_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.elemBefore,
610
+ selected: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.isActive,
611
+ title: (_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.title,
612
+ "aria-label": tableButton ? tableButton['aria-label'] : undefined,
613
+ "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
614
+ "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
615
+ onItemClick: this.insertToolbarMenuItem
616
+ }), jsx(ToolbarButton, {
617
+ className: "table-selector-toolbar-btn",
618
+ item: tableSelectorButton,
619
+ testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
620
+ key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
533
621
  spacing: isReducedSpacing ? 'none' : 'default',
534
- disabled: isDisabled || btn.isDisabled,
535
- iconBefore: btn.elemBefore,
536
- selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
537
- title: btn.title,
538
- "aria-label": btn['aria-label'],
539
- "aria-haspopup": btn['aria-haspopup'],
540
- "aria-keyshortcuts": btn['aria-keyshortcuts'],
622
+ disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
623
+ iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
624
+ selected: (_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive,
625
+ title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
626
+ "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
627
+ "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
628
+ "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
541
629
  onItemClick: this.insertToolbarMenuItem
542
630
  })), jsx("span", {
543
631
  css: wrapperStyle
package/dist/es2019/ui/ToolbarInsertBlock/item.js CHANGED
@@ -108,13 +108,11 @@ export const table = mem(init => from({
108
108
  shortcut: tooltip(toggleTable),
109
109
  'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
110
110
  }));
111
-
112
- //SIMONE TODO:
113
- export const tablePicker = mem(init => from({
111
+ export const tableSelector = mem(init => from({
114
112
  content: init.content,
115
113
  tooltipDescription: init.tooltipDescription,
116
114
  disabled: init.disabled,
117
- name: 'table picker',
115
+ name: 'table selector',
118
116
  Icon: ExpandIcon
119
117
  }));
120
118
  export const layout = mem(init => from({
package/dist/esm/plugin.js CHANGED
@@ -120,6 +120,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
120
120
  isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
121
121
  editorView: editorView,
122
122
  tableSupported: !!editorView.state.schema.nodes.table,
123
+ tableSelectorSupported: options.tableSelectorSupported && !!editorView.state.schema.nodes.table,
123
124
  actionSupported: !!editorView.state.schema.nodes.taskItem,
124
125
  mentionsSupported: !!(mentionState && mentionState.mentionProvider),
125
126
  mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
package/dist/esm/ui/ToolbarInsertBlock/create-items.js CHANGED
@@ -7,7 +7,7 @@ import memoize from 'lodash/memoize';
7
7
  import memoizeOne from 'memoize-one';
8
8
  import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
9
9
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
10
- import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table } from './item';
10
+ import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
11
11
  import { messages } from './messages';
12
12
  import { shallowEquals } from './shallow-equals';
13
13
  import { sortItems } from './sort-items';
@@ -32,6 +32,7 @@ var buttonToDropdownItem = memoizeOne(function (title) {
32
32
  var createInsertBlockItems = function createInsertBlockItems(config) {
33
33
  var isTypeAheadAllowed = config.isTypeAheadAllowed,
34
34
  tableSupported = config.tableSupported,
35
+ tableSelectorSupported = config.tableSelectorSupported,
35
36
  mediaUploadsEnabled = config.mediaUploadsEnabled,
36
37
  mediaSupported = config.mediaSupported,
37
38
  imageUploadSupported = config.imageUploadSupported,
@@ -109,6 +110,13 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
109
110
  disabled: false
110
111
  }));
111
112
  }
113
+ if (tableSupported && tableSelectorSupported) {
114
+ items.push(tableSelector({
115
+ content: formatMessage(messages.tableSelector),
116
+ tooltipDescription: formatMessage(messages.tableSelectorDescription),
117
+ disabled: false
118
+ }));
119
+ }
112
120
  if (layoutSectionEnabled) {
113
121
  var labelColumns = formatMessage(messages.columns);
114
122
  items.push(layout({
@@ -202,8 +210,12 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
202
210
  disabled: false
203
211
  }));
204
212
  }
205
- var buttonItems = items.slice(0, numberOfButtons).map(buttonToItem);
206
- var remainingItems = items.slice(numberOfButtons);
213
+ var numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
214
+ var buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
215
+ var remainingItems = items.slice(numButtonsWithoutTableSelector).filter(function (_ref) {
216
+ var name = _ref.value.name;
217
+ return name !== 'table selector';
218
+ });
207
219
  var dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
208
220
  return [buttonItems, dropdownItems];
209
221
  };
package/dist/esm/ui/ToolbarInsertBlock/index.js CHANGED
@@ -6,13 +6,18 @@ import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
7
7
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
9
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
10
+ var _templateObject;
11
+ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
12
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
13
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
9
14
  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; }
10
15
  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; }
11
16
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
12
17
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
13
18
  /** @jsx jsx */
14
19
  import React from 'react';
15
- import { jsx } from '@emotion/react';
20
+ import { css, jsx } from '@emotion/react';
16
21
  import ReactDOM from 'react-dom';
17
22
  import { injectIntl } from 'react-intl-next';
18
23
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -22,6 +27,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
22
27
  import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
23
28
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
24
29
  import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
30
+ import * as colors from '@atlaskit/theme/colors';
25
31
  import { BlockInsertMenu } from './block-insert-menu';
26
32
  import { createItems } from './create-items';
27
33
  import { messages } from './messages';
@@ -33,6 +39,13 @@ var isDetachedElement = function isDetachedElement(el) {
33
39
  };
34
40
  var noop = function noop() {};
35
41
  var EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
42
+ var TABLE_SELECTOR_STRING = 'table selector';
43
+
44
+ // TODO: Jenga team will create a component for a split button using this css
45
+ var getHoverStyles = function getHoverStyles(selector) {
46
+ return "&:hover ".concat(selector, " {\n background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n &:hover {\n background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n }\n }");
47
+ };
48
+ export var tableButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 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"])), getHoverStyles('.table-selector-toolbar-btn'), 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)");
36
49
 
37
50
  // eslint-disable-next-line @repo/internal/react/no-class-components
38
51
  export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
@@ -50,7 +63,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
50
63
  emojiPickerOpen: false,
51
64
  isOpenedByKeyboard: false,
52
65
  buttons: [],
53
- dropdownItems: []
66
+ dropdownItems: [],
67
+ isTableSelectorOpen: false
54
68
  });
55
69
  _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (attrs) {
56
70
  var state = {
@@ -325,8 +339,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
325
339
  case 'table':
326
340
  _this.insertTable(inputMethod);
327
341
  break;
328
- case 'table with size':
329
- _this.insertTableWithSize(inputMethod, 3, 3)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
342
+ case 'table selector':
343
+ _this.insertTableWithSize(inputMethod, 4, 4)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
330
344
  break;
331
345
  case 'image upload':
332
346
  if (handleImageUpload) {
@@ -467,6 +481,18 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
467
481
  key: "render",
468
482
  value: function render() {
469
483
  var _this2 = this,
484
+ _tableButton,
485
+ _tableButton2,
486
+ _tableButton3,
487
+ _tableButton4,
488
+ _tableButton5,
489
+ _tableButton6,
490
+ _tableSelectorButton,
491
+ _tableSelectorButton2,
492
+ _tableSelectorButton3,
493
+ _tableSelectorButton4,
494
+ _tableSelectorButton5,
495
+ _tableSelectorButton6,
470
496
  _this$props$isDisable,
471
497
  _this$props$replacePl;
472
498
  var _this$state = this.state,
@@ -479,11 +505,34 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
479
505
  if (buttons.length === 0 && dropdownItems.length === 0) {
480
506
  return null;
481
507
  }
508
+ var toolbarButtons = [];
509
+ var tableSelectorButton;
510
+ var tableButton;
511
+
512
+ // Seperate table buttons from toolbar buttons
513
+ var _iterator = _createForOfIteratorHelper(buttons),
514
+ _step;
515
+ try {
516
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
517
+ var btn = _step.value;
518
+ if (btn.value.name === TABLE_SELECTOR_STRING) {
519
+ tableSelectorButton = btn;
520
+ } else if (btn.value.name === 'table' && this.props.tableSelectorSupported) {
521
+ tableButton = btn;
522
+ } else {
523
+ toolbarButtons.push(btn);
524
+ }
525
+ }
526
+ } catch (err) {
527
+ _iterator.e(err);
528
+ } finally {
529
+ _iterator.f();
530
+ }
482
531
  return (
483
532
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
484
533
  jsx("span", {
485
534
  css: buttonGroupStyle
486
- }, buttons.map(function (btn) {
535
+ }, toolbarButtons.map(function (btn) {
487
536
  return jsx(ToolbarButton, {
488
537
  item: btn,
489
538
  testId: String(btn.content),
@@ -499,7 +548,39 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
499
548
  "aria-keyshortcuts": btn['aria-keyshortcuts'],
500
549
  onItemClick: _this2.insertToolbarMenuItem
501
550
  });
502
- }), jsx("span", {
551
+ }), this.props.tableSelectorSupported &&
552
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
553
+ jsx("div", {
554
+ css: tableButtonWrapper
555
+ }, jsx(ToolbarButton, {
556
+ className: "table-toolbar-btn",
557
+ item: tableButton,
558
+ testId: String((_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.content),
559
+ key: (_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.value.name,
560
+ spacing: isReducedSpacing ? 'none' : 'default',
561
+ disabled: isDisabled || ((_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.isDisabled),
562
+ iconBefore: (_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.elemBefore,
563
+ selected: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.isActive,
564
+ title: (_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.title,
565
+ "aria-label": tableButton ? tableButton['aria-label'] : undefined,
566
+ "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
567
+ "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
568
+ onItemClick: this.insertToolbarMenuItem
569
+ }), jsx(ToolbarButton, {
570
+ className: "table-selector-toolbar-btn",
571
+ item: tableSelectorButton,
572
+ testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
573
+ key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
574
+ spacing: isReducedSpacing ? 'none' : 'default',
575
+ disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
576
+ iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
577
+ selected: (_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive,
578
+ title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
579
+ "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
580
+ "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
581
+ "aria-keyshortcuts": tableSelectorButton ? tableSelectorButton['aria-keyshortcuts'] : undefined,
582
+ onItemClick: this.insertToolbarMenuItem
583
+ })), jsx("span", {
503
584
  css: wrapperStyle
504
585
  }, this.renderPopup(), jsx(BlockInsertMenu, {
505
586
  popupsMountPoint: this.props.popupsMountPoint,
@@ -534,6 +615,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
534
615
  var _createItems = createItems({
535
616
  isTypeAheadAllowed: props.isTypeAheadAllowed,
536
617
  tableSupported: props.tableSupported,
618
+ tableSelectorSupported: props.tableSelectorSupported,
537
619
  mediaUploadsEnabled: props.mediaUploadsEnabled,
538
620
  mediaSupported: props.mediaSupported,
539
621
  imageUploadSupported: props.imageUploadSupported,
package/dist/esm/ui/ToolbarInsertBlock/item.js CHANGED
@@ -124,14 +124,12 @@ export var table = mem(function (init) {
124
124
  'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
125
125
  });
126
126
  });
127
-
128
- //SIMONE TODO:
129
- export var tablePicker = mem(function (init) {
127
+ export var tableSelector = mem(function (init) {
130
128
  return from({
131
129
  content: init.content,
132
130
  tooltipDescription: init.tooltipDescription,
133
131
  disabled: init.disabled,
134
- name: 'table picker',
132
+ name: 'table selector',
135
133
  Icon: ExpandIcon
136
134
  });
137
135
  });
package/dist/types/plugin.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface InsertBlockOptions {
8
8
  nativeStatusSupported?: boolean;
9
9
  replacePlusMenuWithElementBrowser?: boolean;
10
10
  showElementBrowserLink?: boolean;
11
+ tableSelectorSupported?: boolean;
11
12
  }
12
13
  export type InsertBlockPlugin = NextEditorPlugin<'insertBlock', {
13
14
  pluginConfiguration: InsertBlockOptions | undefined;
package/dist/types/ui/ToolbarInsertBlock/create-items.d.ts CHANGED
@@ -7,6 +7,7 @@ import type { EmojiProvider } from '@atlaskit/emoji/resource';
7
7
  export interface CreateItemsConfig {
8
8
  isTypeAheadAllowed?: boolean;
9
9
  tableSupported?: boolean;
10
+ tableSelectorSupported?: boolean;
10
11
  mediaUploadsEnabled?: boolean;
11
12
  mediaSupported?: boolean;
12
13
  imageUploadSupported?: boolean;
package/dist/types/ui/ToolbarInsertBlock/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import type { WrappedComponentProps } from 'react-intl-next';
5
5
  import type { Props, State } from './types';
6
+ export declare const tableButtonWrapper: import("@emotion/react").SerializedStyles;
6
7
  export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
7
8
  private dropdownButtonRef?;
8
9
  private emojiButtonRef?;
package/dist/types/ui/ToolbarInsertBlock/item.d.ts CHANGED
@@ -16,7 +16,7 @@ export declare const imageUpload: MemoizedFn<(init: CreateInit) => MenuItem>;
16
16
  export declare const mention: MemoizedFn<(init: CreateInit) => MenuItem>;
17
17
  export declare const emoji: MemoizedFn<(init: CreateInit) => MenuItem>;
18
18
  export declare const table: MemoizedFn<(init: CreateInit) => MenuItem>;
19
- export declare const tablePicker: MemoizedFn<(init: CreateInit) => MenuItem>;
19
+ export declare const tableSelector: MemoizedFn<(init: CreateInit) => MenuItem>;
20
20
  export declare const layout: MemoizedFn<(init: CreateInit) => MenuItem>;
21
21
  export declare const codeblock: MemoizedFn<(init: CreateInit & {
22
22
  shortcut?: string;
package/dist/types/ui/ToolbarInsertBlock/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface Props {
16
16
  editorView: EditorView;
17
17
  editorActions?: EditorActions;
18
18
  tableSupported?: boolean;
19
+ tableSelectorSupported?: boolean;
19
20
  actionSupported?: boolean;
20
21
  decisionSupported?: boolean;
21
22
  mentionsSupported?: boolean;
@@ -56,4 +57,5 @@ export interface State {
56
57
  buttons: BlockMenuItem[];
57
58
  dropdownItems: BlockMenuItem[];
58
59
  isOpenedByKeyboard: boolean;
60
+ isTableSelectorOpen: boolean;
59
61
  }
package/dist/types-ts4.5/plugin.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface InsertBlockOptions {
8
8
  nativeStatusSupported?: boolean;
9
9
  replacePlusMenuWithElementBrowser?: boolean;
10
10
  showElementBrowserLink?: boolean;
11
+ tableSelectorSupported?: boolean;
11
12
  }
12
13
  export type InsertBlockPlugin = NextEditorPlugin<'insertBlock', {
13
14
  pluginConfiguration: InsertBlockOptions | undefined;
package/dist/types-ts4.5/ui/ToolbarInsertBlock/create-items.d.ts CHANGED
@@ -7,6 +7,7 @@ import type { EmojiProvider } from '@atlaskit/emoji/resource';
7
7
  export interface CreateItemsConfig {
8
8
  isTypeAheadAllowed?: boolean;
9
9
  tableSupported?: boolean;
10
+ tableSelectorSupported?: boolean;
10
11
  mediaUploadsEnabled?: boolean;
11
12
  mediaSupported?: boolean;
12
13
  imageUploadSupported?: boolean;
package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import type { WrappedComponentProps } from 'react-intl-next';
5
5
  import type { Props, State } from './types';
6
+ export declare const tableButtonWrapper: import("@emotion/react").SerializedStyles;
6
7
  export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
7
8
  private dropdownButtonRef?;
8
9
  private emojiButtonRef?;
package/dist/types-ts4.5/ui/ToolbarInsertBlock/item.d.ts CHANGED
@@ -16,7 +16,7 @@ export declare const imageUpload: MemoizedFn<(init: CreateInit) => MenuItem>;
16
16
  export declare const mention: MemoizedFn<(init: CreateInit) => MenuItem>;
17
17
  export declare const emoji: MemoizedFn<(init: CreateInit) => MenuItem>;
18
18
  export declare const table: MemoizedFn<(init: CreateInit) => MenuItem>;
19
- export declare const tablePicker: MemoizedFn<(init: CreateInit) => MenuItem>;
19
+ export declare const tableSelector: MemoizedFn<(init: CreateInit) => MenuItem>;
20
20
  export declare const layout: MemoizedFn<(init: CreateInit) => MenuItem>;
21
21
  export declare const codeblock: MemoizedFn<(init: CreateInit & {
22
22
  shortcut?: string;
package/dist/types-ts4.5/ui/ToolbarInsertBlock/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface Props {
16
16
  editorView: EditorView;
17
17
  editorActions?: EditorActions;
18
18
  tableSupported?: boolean;
19
+ tableSelectorSupported?: boolean;
19
20
  actionSupported?: boolean;
20
21
  decisionSupported?: boolean;
21
22
  mentionsSupported?: boolean;
@@ -56,4 +57,5 @@ export interface State {
56
57
  buttons: BlockMenuItem[];
57
58
  dropdownItems: BlockMenuItem[];
58
59
  isOpenedByKeyboard: boolean;
60
+ isTableSelectorOpen: boolean;
59
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "0.2.11",
3
+ "version": "0.2.12",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  ".": "./src/index.ts"
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/editor-common": "^76.30.0",
35
+ "@atlaskit/editor-common": "^76.33.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^0.4.0",
37
37
  "@atlaskit/editor-plugin-block-type": "^3.0.0",
38
38
  "@atlaskit/editor-plugin-code-block": "^0.1.0",
@@ -59,7 +59,7 @@
59
59
  "@atlaskit/emoji": "^67.6.0",
60
60
  "@atlaskit/icon": "^22.0.0",
61
61
  "@atlaskit/theme": "^12.6.0",
62
- "@atlaskit/tokens": "^1.32.0",
62
+ "@atlaskit/tokens": "^1.33.0",
63
63
  "@babel/runtime": "^7.0.0",
64
64
  "@emotion/react": "^11.7.1",
65
65
  "lodash": "^4.17.21",