@atlaskit/editor-plugin-insert-block 2.0.0 → 2.0.2

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 (30) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/ElementBrowser/InsertMenu.js +10 -9
  3. package/dist/cjs/ui/ElementRail/MainToolBarIcon.js +15 -3
  4. package/dist/cjs/ui/ElementRail/index.js +2 -1
  5. package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js +2 -1
  6. package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu.js +2 -1
  7. package/dist/cjs/ui/ToolbarInsertBlock/index.js +8 -4
  8. package/dist/es2019/ui/ElementBrowser/InsertMenu.js +10 -9
  9. package/dist/es2019/ui/ElementRail/MainToolBarIcon.js +15 -3
  10. package/dist/es2019/ui/ElementRail/index.js +2 -1
  11. package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js +2 -1
  12. package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu.js +2 -1
  13. package/dist/es2019/ui/ToolbarInsertBlock/index.js +8 -5
  14. package/dist/esm/ui/ElementBrowser/InsertMenu.js +10 -9
  15. package/dist/esm/ui/ElementRail/MainToolBarIcon.js +15 -3
  16. package/dist/esm/ui/ElementRail/index.js +2 -1
  17. package/dist/esm/ui/ToolbarInsertBlock/block-insert-element-browser.js +2 -1
  18. package/dist/esm/ui/ToolbarInsertBlock/block-insert-menu.js +2 -1
  19. package/dist/esm/ui/ToolbarInsertBlock/index.js +8 -4
  20. package/dist/types/ui/ElementBrowser/InsertMenu.d.ts +1 -1
  21. package/dist/types/ui/ElementBrowser/types.d.ts +1 -0
  22. package/dist/types/ui/ElementRail/MainToolBarIcon.d.ts +2 -1
  23. package/dist/types/ui/ToolbarInsertBlock/block-insert-element-browser.d.ts +1 -0
  24. package/dist/types/ui/ToolbarInsertBlock/block-insert-menu.d.ts +1 -0
  25. package/dist/types-ts4.5/ui/ElementBrowser/InsertMenu.d.ts +1 -1
  26. package/dist/types-ts4.5/ui/ElementBrowser/types.d.ts +1 -0
  27. package/dist/types-ts4.5/ui/ElementRail/MainToolBarIcon.d.ts +2 -1
  28. package/dist/types-ts4.5/ui/ToolbarInsertBlock/block-insert-element-browser.d.ts +1 -0
  29. package/dist/types-ts4.5/ui/ToolbarInsertBlock/block-insert-menu.d.ts +1 -0
  30. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 2.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 2.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#142202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142202)
14
+ [`030b6385e8e47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/030b6385e8e47) -
15
+ Add disabled state for right rail experiment, and add appearance checks for experiments
16
+
3
17
  ## 2.0.0
4
18
 
5
19
  ### Major Changes
@@ -33,7 +33,8 @@ var InsertMenu = function InsertMenu(_ref) {
33
33
  showElementBrowserLink = _ref.showElementBrowserLink,
34
34
  onInsert = _ref.onInsert,
35
35
  toggleVisiblity = _ref.toggleVisiblity,
36
- pluginInjectionApi = _ref.pluginInjectionApi;
36
+ pluginInjectionApi = _ref.pluginInjectionApi,
37
+ isFullPageAppearance = _ref.isFullPageAppearance;
37
38
  var _useState = (0, _react.useState)(0),
38
39
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
39
40
  itemCount = _useState2[0],
@@ -69,7 +70,7 @@ var InsertMenu = function InsertMenu(_ref) {
69
70
  if (!editorView.hasFocus()) {
70
71
  editorView.focus();
71
72
  }
72
- if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
73
+ if (isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
73
74
  var _pluginInjectionApi$q;
74
75
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item,
75
76
  // @ts-expect-error
@@ -78,7 +79,7 @@ var InsertMenu = function InsertMenu(_ref) {
78
79
  var _pluginInjectionApi$q2;
79
80
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 || _pluginInjectionApi$q2.actions.insertItem(item, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
80
81
  }
81
- }, [editorView, toggleVisiblity, pluginInjectionApi]);
82
+ }, [editorView, toggleVisiblity, pluginInjectionApi, isFullPageAppearance]);
82
83
  var getItems = (0, _react.useCallback)(function (query, category) {
83
84
  var result;
84
85
  /**
@@ -99,9 +100,9 @@ var InsertMenu = function InsertMenu(_ref) {
99
100
  category: category,
100
101
  featuredItems: true,
101
102
  // @ts-ignore
102
- templateItems: (0, _experiments.editorExperiment)('element-level-templates', true)
103
+ templateItems: isFullPageAppearance && (0, _experiments.editorExperiment)('element-level-templates', true)
103
104
  })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
104
- if ((0, _experiments.editorExperiment)('element-level-templates', true)) {
105
+ if (isFullPageAppearance && (0, _experiments.editorExperiment)('element-level-templates', true)) {
105
106
  // Make sure template options appear as top 5 items
106
107
  featuredQuickInsertSuggestions.sort(function (a, b) {
107
108
  var _b$priority, _a$priority;
@@ -115,12 +116,12 @@ var InsertMenu = function InsertMenu(_ref) {
115
116
  }
116
117
  setItemCount(result.length);
117
118
  return result;
118
- }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
119
+ }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
119
120
  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 || (_pluginInjectionApi$q8 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.emptyStateHandler;
120
121
  return (
121
122
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
122
123
  (0, _react2.jsx)("div", {
123
- css: insertMenuWrapper(itemCount)
124
+ css: insertMenuWrapper(itemCount, isFullPageAppearance)
124
125
  }, (0, _react2.jsx)(ElementBrowserWrapper, {
125
126
  handleClickOutside: toggleVisiblity,
126
127
  handleEscapeKeydown: toggleVisiblity,
@@ -164,8 +165,8 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
164
165
  }
165
166
  return 560; // For showing 6 Elements.
166
167
  };
167
- var insertMenuWrapper = function insertMenuWrapper(itemCount) {
168
- if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
168
+ var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearance) {
169
+ if (isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
169
170
  return (0, _react2.css)({
170
171
  display: 'flex',
171
172
  flexDirection: 'column',
@@ -44,8 +44,19 @@ var buttonStyles = (0, _primitives.xcss)({
44
44
  outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
45
45
  }
46
46
  });
47
+ var disabledStyles = (0, _primitives.xcss)({
48
+ color: 'color.text.disabled',
49
+ backgroundColor: 'color.background.neutral',
50
+ ':hover': {
51
+ backgroundColor: 'color.background.neutral'
52
+ },
53
+ ':active': {
54
+ backgroundColor: 'color.background.neutral'
55
+ }
56
+ });
47
57
  var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
48
- var onClick = _ref.onClick;
58
+ var onClick = _ref.onClick,
59
+ isDisabled = _ref.isDisabled;
49
60
  var _useIntl = (0, _reactIntlNext.useIntl)(),
50
61
  formatMessage = _useIntl.formatMessage;
51
62
  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
@@ -60,8 +71,9 @@ var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
60
71
  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
61
72
  type: "button",
62
73
  "aria-label": formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
63
- xcss: [buttonStyles],
64
- onClick: onClick
74
+ xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
75
+ onClick: onClick,
76
+ isDisabled: isDisabled
65
77
  }, /*#__PURE__*/_react.default.createElement(_add.default, {
66
78
  label: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
67
79
  size: "medium"
@@ -230,6 +230,7 @@ var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
230
230
  onInsert: onInsert,
231
231
  toggleVisiblity: function toggleVisiblity() {},
232
232
  showElementBrowserLink: true,
233
- pluginInjectionApi: api
233
+ pluginInjectionApi: api,
234
+ isFullPageAppearance: true
234
235
  }));
235
236
  };
@@ -26,7 +26,8 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
26
26
  onInsert: props.onInsert,
27
27
  toggleVisiblity: props.togglePlusMenuVisibility,
28
28
  showElementBrowserLink: props.showElementBrowserLink,
29
- pluginInjectionApi: props.pluginInjectionApi
29
+ pluginInjectionApi: props.pluginInjectionApi,
30
+ isFullPageAppearance: props.isFullPageAppearance
30
31
  })), /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {
31
32
  "aria-expanded": props.open,
32
33
  "aria-haspopup": true,
@@ -43,6 +43,7 @@ var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props)
43
43
  spacing: props.spacing,
44
44
  togglePlusMenuVisibility: props.togglePlusMenuVisibility,
45
45
  showElementBrowserLink: props.showElementBrowserLink,
46
- pluginInjectionApi: props.pluginInjectionApi
46
+ pluginInjectionApi: props.pluginInjectionApi,
47
+ isFullPageAppearance: props.isFullPageAppearance
47
48
  });
48
49
  };
@@ -659,6 +659,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
659
659
  _tableSelectorButton5,
660
660
  _tableSelectorButton6,
661
661
  _this$props$isDisable,
662
+ _this$props$isDisable2,
662
663
  _this$props$pluginInj3;
663
664
  var _this$state2 = this.state,
664
665
  buttons = _this$state2.buttons,
@@ -703,6 +704,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
703
704
  } finally {
704
705
  _iterator.f();
705
706
  }
707
+ var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
706
708
  return (
707
709
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
708
710
  (0, _react2.jsx)("span", {
@@ -766,13 +768,14 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
766
768
  onKeyDown: this.handleTableSelectorOpenByKeyboard
767
769
  })), (0, _react2.jsx)("span", {
768
770
  css: _styles.wrapperStyle
769
- }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? (0, _react2.jsx)(_MainToolBarIcon.RightRailIcon, {
770
- onClick: this.handleClick
771
+ }, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? (0, _react2.jsx)(_MainToolBarIcon.RightRailIcon, {
772
+ onClick: this.handleClick,
773
+ isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
771
774
  }) : (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
772
775
  popupsMountPoint: this.props.popupsMountPoint,
773
776
  popupsBoundariesElement: this.props.popupsBoundariesElement,
774
777
  popupsScrollableElement: this.props.popupsScrollableElement,
775
- disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
778
+ disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
776
779
  editorView: this.props.editorView,
777
780
  spacing: this.props.isReducedSpacing ? 'none' : 'default',
778
781
  label: this.props.intl.formatMessage(_messages.messages.insertMenu),
@@ -788,7 +791,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
788
791
  onOpenChange: this.onOpenChange,
789
792
  togglePlusMenuVisibility: this.togglePlusMenuVisibility,
790
793
  showElementBrowserLink: this.props.showElementBrowserLink || false,
791
- pluginInjectionApi: this.props.pluginInjectionApi
794
+ pluginInjectionApi: this.props.pluginInjectionApi,
795
+ isFullPageAppearance: isFullPageAppearance
792
796
  })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
793
797
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
794
798
  (0, _react2.jsx)("span", {
@@ -23,7 +23,8 @@ const InsertMenu = ({
23
23
  showElementBrowserLink,
24
24
  onInsert,
25
25
  toggleVisiblity,
26
- pluginInjectionApi
26
+ pluginInjectionApi,
27
+ isFullPageAppearance
27
28
  }) => {
28
29
  var _pluginInjectionApi$q7, _pluginInjectionApi$q8, _pluginInjectionApi$q9;
29
30
  const [itemCount, setItemCount] = useState(0);
@@ -52,7 +53,7 @@ const InsertMenu = ({
52
53
  if (!editorView.hasFocus()) {
53
54
  editorView.focus();
54
55
  }
55
- if (editorExperiment('insert-menu-in-right-rail', true)) {
56
+ if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
56
57
  var _pluginInjectionApi$q;
57
58
  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.actions.insertItem(item,
58
59
  // @ts-expect-error
@@ -61,7 +62,7 @@ const InsertMenu = ({
61
62
  var _pluginInjectionApi$q2;
62
63
  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 ? void 0 : _pluginInjectionApi$q2.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
63
64
  }
64
- }, [editorView, toggleVisiblity, pluginInjectionApi]);
65
+ }, [editorView, toggleVisiblity, pluginInjectionApi, isFullPageAppearance]);
65
66
  const getItems = useCallback((query, category) => {
66
67
  let result;
67
68
  /**
@@ -82,9 +83,9 @@ const InsertMenu = ({
82
83
  category,
83
84
  featuredItems: true,
84
85
  // @ts-ignore
85
- templateItems: editorExperiment('element-level-templates', true)
86
+ templateItems: isFullPageAppearance && editorExperiment('element-level-templates', true)
86
87
  })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
87
- if (editorExperiment('element-level-templates', true)) {
88
+ if (isFullPageAppearance && editorExperiment('element-level-templates', true)) {
88
89
  // Make sure template options appear as top 5 items
89
90
  featuredQuickInsertSuggestions.sort((a, b) => {
90
91
  var _b$priority, _a$priority;
@@ -98,12 +99,12 @@ const InsertMenu = ({
98
99
  }
99
100
  setItemCount(result.length);
100
101
  return result;
101
- }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
102
+ }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
102
103
  const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : (_pluginInjectionApi$q9 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q9 === void 0 ? void 0 : _pluginInjectionApi$q9.emptyStateHandler;
103
104
  return (
104
105
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
105
106
  jsx("div", {
106
- css: insertMenuWrapper(itemCount)
107
+ css: insertMenuWrapper(itemCount, isFullPageAppearance)
107
108
  }, jsx(ElementBrowserWrapper, {
108
109
  handleClickOutside: toggleVisiblity,
109
110
  handleEscapeKeydown: toggleVisiblity,
@@ -149,8 +150,8 @@ const getInsertMenuHeight = ({
149
150
  }
150
151
  return 560; // For showing 6 Elements.
151
152
  };
152
- const insertMenuWrapper = itemCount => {
153
- if (editorExperiment('insert-menu-in-right-rail', true)) {
153
+ const insertMenuWrapper = (itemCount, isFullPageAppearance) => {
154
+ if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
154
155
  return css({
155
156
  display: 'flex',
156
157
  flexDirection: 'column',
@@ -37,8 +37,19 @@ const buttonStyles = xcss({
37
37
  outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
38
38
  }
39
39
  });
40
+ const disabledStyles = xcss({
41
+ color: 'color.text.disabled',
42
+ backgroundColor: 'color.background.neutral',
43
+ ':hover': {
44
+ backgroundColor: 'color.background.neutral'
45
+ },
46
+ ':active': {
47
+ backgroundColor: 'color.background.neutral'
48
+ }
49
+ });
40
50
  export const RightRailIcon = ({
41
- onClick
51
+ onClick,
52
+ isDisabled
42
53
  }) => {
43
54
  const {
44
55
  formatMessage
@@ -55,8 +66,9 @@ export const RightRailIcon = ({
55
66
  }, /*#__PURE__*/React.createElement(Pressable, {
56
67
  type: "button",
57
68
  "aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
58
- xcss: [buttonStyles],
59
- onClick: onClick
69
+ xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
70
+ onClick: onClick,
71
+ isDisabled: isDisabled
60
72
  }, /*#__PURE__*/React.createElement(EditorAddIcon, {
61
73
  label: formatMessage(toolbarInsertBlockMessages.insertMenu),
62
74
  size: "medium"
@@ -227,6 +227,7 @@ export const InsertMenuRail = ({
227
227
  onInsert: onInsert,
228
228
  toggleVisiblity: () => {},
229
229
  showElementBrowserLink: true,
230
- pluginInjectionApi: api
230
+ pluginInjectionApi: api,
231
+ isFullPageAppearance: true
231
232
  }));
232
233
  };
@@ -19,7 +19,8 @@ export const BlockInsertElementBrowser = props => {
19
19
  onInsert: props.onInsert,
20
20
  toggleVisiblity: props.togglePlusMenuVisibility,
21
21
  showElementBrowserLink: props.showElementBrowserLink,
22
- pluginInjectionApi: props.pluginInjectionApi
22
+ pluginInjectionApi: props.pluginInjectionApi,
23
+ isFullPageAppearance: props.isFullPageAppearance
23
24
  })), /*#__PURE__*/React.createElement(DropDownButton, {
24
25
  "aria-expanded": props.open,
25
26
  "aria-haspopup": true,
@@ -36,6 +36,7 @@ export const BlockInsertMenu = props => {
36
36
  spacing: props.spacing,
37
37
  togglePlusMenuVisibility: props.togglePlusMenuVisibility,
38
38
  showElementBrowserLink: props.showElementBrowserLink,
39
- pluginInjectionApi: props.pluginInjectionApi
39
+ pluginInjectionApi: props.pluginInjectionApi,
40
+ isFullPageAppearance: props.isFullPageAppearance
40
41
  });
41
42
  };
@@ -703,7 +703,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
703
703
  });
704
704
  }
705
705
  render() {
706
- var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$pluginInj7;
706
+ var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$isDisable2, _this$props$pluginInj7;
707
707
  const {
708
708
  buttons,
709
709
  dropdownItems,
@@ -738,6 +738,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
738
738
  toolbarButtons.push(btn);
739
739
  }
740
740
  }
741
+ const isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
741
742
  return (
742
743
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
743
744
  jsx("span", {
@@ -801,13 +802,14 @@ export class ToolbarInsertBlock extends React.PureComponent {
801
802
  onKeyDown: this.handleTableSelectorOpenByKeyboard
802
803
  })), jsx("span", {
803
804
  css: wrapperStyle
804
- }, this.renderPopup(), this.renderTableSelectorPopup(), editorExperiment('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? jsx(RightRailIcon, {
805
- onClick: this.handleClick
805
+ }, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true) ? jsx(RightRailIcon, {
806
+ onClick: this.handleClick,
807
+ isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
806
808
  }) : jsx(BlockInsertMenu, {
807
809
  popupsMountPoint: this.props.popupsMountPoint,
808
810
  popupsBoundariesElement: this.props.popupsBoundariesElement,
809
811
  popupsScrollableElement: this.props.popupsScrollableElement,
810
- disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
812
+ disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
811
813
  editorView: this.props.editorView,
812
814
  spacing: this.props.isReducedSpacing ? 'none' : 'default',
813
815
  label: this.props.intl.formatMessage(messages.insertMenu),
@@ -823,7 +825,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
823
825
  onOpenChange: this.onOpenChange,
824
826
  togglePlusMenuVisibility: this.togglePlusMenuVisibility,
825
827
  showElementBrowserLink: this.props.showElementBrowserLink || false,
826
- pluginInjectionApi: this.props.pluginInjectionApi
828
+ pluginInjectionApi: this.props.pluginInjectionApi,
829
+ isFullPageAppearance: isFullPageAppearance
827
830
  })), !((_this$props$pluginInj7 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj7 !== void 0 && _this$props$pluginInj7.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
828
831
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
829
832
  jsx("span", {
@@ -28,7 +28,8 @@ var InsertMenu = function InsertMenu(_ref) {
28
28
  showElementBrowserLink = _ref.showElementBrowserLink,
29
29
  onInsert = _ref.onInsert,
30
30
  toggleVisiblity = _ref.toggleVisiblity,
31
- pluginInjectionApi = _ref.pluginInjectionApi;
31
+ pluginInjectionApi = _ref.pluginInjectionApi,
32
+ isFullPageAppearance = _ref.isFullPageAppearance;
32
33
  var _useState = useState(0),
33
34
  _useState2 = _slicedToArray(_useState, 2),
34
35
  itemCount = _useState2[0],
@@ -64,7 +65,7 @@ var InsertMenu = function InsertMenu(_ref) {
64
65
  if (!editorView.hasFocus()) {
65
66
  editorView.focus();
66
67
  }
67
- if (editorExperiment('insert-menu-in-right-rail', true)) {
68
+ if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
68
69
  var _pluginInjectionApi$q;
69
70
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item,
70
71
  // @ts-expect-error
@@ -73,7 +74,7 @@ var InsertMenu = function InsertMenu(_ref) {
73
74
  var _pluginInjectionApi$q2;
74
75
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 || _pluginInjectionApi$q2.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
75
76
  }
76
- }, [editorView, toggleVisiblity, pluginInjectionApi]);
77
+ }, [editorView, toggleVisiblity, pluginInjectionApi, isFullPageAppearance]);
77
78
  var getItems = useCallback(function (query, category) {
78
79
  var result;
79
80
  /**
@@ -94,9 +95,9 @@ var InsertMenu = function InsertMenu(_ref) {
94
95
  category: category,
95
96
  featuredItems: true,
96
97
  // @ts-ignore
97
- templateItems: editorExperiment('element-level-templates', true)
98
+ templateItems: isFullPageAppearance && editorExperiment('element-level-templates', true)
98
99
  })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
99
- if (editorExperiment('element-level-templates', true)) {
100
+ if (isFullPageAppearance && editorExperiment('element-level-templates', true)) {
100
101
  // Make sure template options appear as top 5 items
101
102
  featuredQuickInsertSuggestions.sort(function (a, b) {
102
103
  var _b$priority, _a$priority;
@@ -110,12 +111,12 @@ var InsertMenu = function InsertMenu(_ref) {
110
111
  }
111
112
  setItemCount(result.length);
112
113
  return result;
113
- }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
114
+ }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
114
115
  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 || (_pluginInjectionApi$q8 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.emptyStateHandler;
115
116
  return (
116
117
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
117
118
  jsx("div", {
118
- css: insertMenuWrapper(itemCount)
119
+ css: insertMenuWrapper(itemCount, isFullPageAppearance)
119
120
  }, jsx(ElementBrowserWrapper, {
120
121
  handleClickOutside: toggleVisiblity,
121
122
  handleEscapeKeydown: toggleVisiblity,
@@ -159,8 +160,8 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
159
160
  }
160
161
  return 560; // For showing 6 Elements.
161
162
  };
162
- var insertMenuWrapper = function insertMenuWrapper(itemCount) {
163
- if (editorExperiment('insert-menu-in-right-rail', true)) {
163
+ var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearance) {
164
+ if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
164
165
  return css({
165
166
  display: 'flex',
166
167
  flexDirection: 'column',
@@ -37,8 +37,19 @@ var buttonStyles = xcss({
37
37
  outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
38
38
  }
39
39
  });
40
+ var disabledStyles = xcss({
41
+ color: 'color.text.disabled',
42
+ backgroundColor: 'color.background.neutral',
43
+ ':hover': {
44
+ backgroundColor: 'color.background.neutral'
45
+ },
46
+ ':active': {
47
+ backgroundColor: 'color.background.neutral'
48
+ }
49
+ });
40
50
  export var RightRailIcon = function RightRailIcon(_ref) {
41
- var onClick = _ref.onClick;
51
+ var onClick = _ref.onClick,
52
+ isDisabled = _ref.isDisabled;
42
53
  var _useIntl = useIntl(),
43
54
  formatMessage = _useIntl.formatMessage;
44
55
  return /*#__PURE__*/React.createElement(Box, {
@@ -53,8 +64,9 @@ export var RightRailIcon = function RightRailIcon(_ref) {
53
64
  }, /*#__PURE__*/React.createElement(Pressable, {
54
65
  type: "button",
55
66
  "aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
56
- xcss: [buttonStyles],
57
- onClick: onClick
67
+ xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
68
+ onClick: onClick,
69
+ isDisabled: isDisabled
58
70
  }, /*#__PURE__*/React.createElement(EditorAddIcon, {
59
71
  label: formatMessage(toolbarInsertBlockMessages.insertMenu),
60
72
  size: "medium"
@@ -219,6 +219,7 @@ export var InsertMenuRail = function InsertMenuRail(_ref) {
219
219
  onInsert: onInsert,
220
220
  toggleVisiblity: function toggleVisiblity() {},
221
221
  showElementBrowserLink: true,
222
- pluginInjectionApi: api
222
+ pluginInjectionApi: api,
223
+ isFullPageAppearance: true
223
224
  }));
224
225
  };
@@ -19,7 +19,8 @@ export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props)
19
19
  onInsert: props.onInsert,
20
20
  toggleVisiblity: props.togglePlusMenuVisibility,
21
21
  showElementBrowserLink: props.showElementBrowserLink,
22
- pluginInjectionApi: props.pluginInjectionApi
22
+ pluginInjectionApi: props.pluginInjectionApi,
23
+ isFullPageAppearance: props.isFullPageAppearance
23
24
  })), /*#__PURE__*/React.createElement(DropDownButton, {
24
25
  "aria-expanded": props.open,
25
26
  "aria-haspopup": true,
@@ -36,6 +36,7 @@ export var BlockInsertMenu = function BlockInsertMenu(props) {
36
36
  spacing: props.spacing,
37
37
  togglePlusMenuVisibility: props.togglePlusMenuVisibility,
38
38
  showElementBrowserLink: props.showElementBrowserLink,
39
- pluginInjectionApi: props.pluginInjectionApi
39
+ pluginInjectionApi: props.pluginInjectionApi,
40
+ isFullPageAppearance: props.isFullPageAppearance
40
41
  });
41
42
  };
@@ -650,6 +650,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
650
650
  _tableSelectorButton5,
651
651
  _tableSelectorButton6,
652
652
  _this$props$isDisable,
653
+ _this$props$isDisable2,
653
654
  _this$props$pluginInj3;
654
655
  var _this$state2 = this.state,
655
656
  buttons = _this$state2.buttons,
@@ -694,6 +695,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
694
695
  } finally {
695
696
  _iterator.f();
696
697
  }
698
+ var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
697
699
  return (
698
700
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
699
701
  jsx("span", {
@@ -757,13 +759,14 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
757
759
  onKeyDown: this.handleTableSelectorOpenByKeyboard
758
760
  })), jsx("span", {
759
761
  css: wrapperStyle
760
- }, this.renderPopup(), this.renderTableSelectorPopup(), editorExperiment('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? jsx(RightRailIcon, {
761
- onClick: this.handleClick
762
+ }, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true) ? jsx(RightRailIcon, {
763
+ onClick: this.handleClick,
764
+ isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
762
765
  }) : jsx(BlockInsertMenu, {
763
766
  popupsMountPoint: this.props.popupsMountPoint,
764
767
  popupsBoundariesElement: this.props.popupsBoundariesElement,
765
768
  popupsScrollableElement: this.props.popupsScrollableElement,
766
- disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
769
+ disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
767
770
  editorView: this.props.editorView,
768
771
  spacing: this.props.isReducedSpacing ? 'none' : 'default',
769
772
  label: this.props.intl.formatMessage(messages.insertMenu),
@@ -779,7 +782,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
779
782
  onOpenChange: this.onOpenChange,
780
783
  togglePlusMenuVisibility: this.togglePlusMenuVisibility,
781
784
  showElementBrowserLink: this.props.showElementBrowserLink || false,
782
- pluginInjectionApi: this.props.pluginInjectionApi
785
+ pluginInjectionApi: this.props.pluginInjectionApi,
786
+ isFullPageAppearance: isFullPageAppearance
783
787
  })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
784
788
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
785
789
  jsx("span", {
@@ -1,4 +1,4 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import type { InsertMenuProps } from './types';
3
- declare const InsertMenu: ({ editorView, dropdownItems, showElementBrowserLink, onInsert, toggleVisiblity, pluginInjectionApi, }: InsertMenuProps) => jsx.JSX.Element;
3
+ declare const InsertMenu: ({ editorView, dropdownItems, showElementBrowserLink, onInsert, toggleVisiblity, pluginInjectionApi, isFullPageAppearance, }: InsertMenuProps) => jsx.JSX.Element;
4
4
  export default InsertMenu;
@@ -12,6 +12,7 @@ export interface InsertMenuProps {
12
12
  toggleVisiblity: SimpleEventHandler<MouseEvent | KeyboardEvent>;
13
13
  onInsert: OnInsert;
14
14
  pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
15
+ isFullPageAppearance?: boolean;
15
16
  }
16
17
  export type SvgGetterParams = {
17
18
  name: string;
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  type Props = {
3
3
  onClick: () => void;
4
+ isDisabled: boolean;
4
5
  };
5
- export declare const RightRailIcon: ({ onClick }: Props) => JSX.Element;
6
+ export declare const RightRailIcon: ({ onClick, isDisabled }: Props) => JSX.Element;
6
7
  export {};
@@ -23,6 +23,7 @@ export interface BlockInsertElementBrowserProps {
23
23
  onInsert: OnInsert;
24
24
  togglePlusMenuVisibility: SimpleEventHandler<MouseEvent | KeyboardEvent>;
25
25
  pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
26
+ isFullPageAppearance?: boolean;
26
27
  }
27
28
  export declare const BlockInsertElementBrowser: (props: BlockInsertElementBrowserProps) => JSX.Element;
28
29
  export {};
@@ -28,5 +28,6 @@ export interface BlockInsertMenuProps {
28
28
  togglePlusMenuVisibility(): void;
29
29
  onKeyDown?: React.KeyboardEventHandler;
30
30
  pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
31
+ isFullPageAppearance?: boolean;
31
32
  }
32
33
  export declare const BlockInsertMenu: (props: BlockInsertMenuProps) => JSX.Element | null;
@@ -1,4 +1,4 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import type { InsertMenuProps } from './types';
3
- declare const InsertMenu: ({ editorView, dropdownItems, showElementBrowserLink, onInsert, toggleVisiblity, pluginInjectionApi, }: InsertMenuProps) => jsx.JSX.Element;
3
+ declare const InsertMenu: ({ editorView, dropdownItems, showElementBrowserLink, onInsert, toggleVisiblity, pluginInjectionApi, isFullPageAppearance, }: InsertMenuProps) => jsx.JSX.Element;
4
4
  export default InsertMenu;
@@ -12,6 +12,7 @@ export interface InsertMenuProps {
12
12
  toggleVisiblity: SimpleEventHandler<MouseEvent | KeyboardEvent>;
13
13
  onInsert: OnInsert;
14
14
  pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
15
+ isFullPageAppearance?: boolean;
15
16
  }
16
17
  export type SvgGetterParams = {
17
18
  name: string;
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  type Props = {
3
3
  onClick: () => void;
4
+ isDisabled: boolean;
4
5
  };
5
- export declare const RightRailIcon: ({ onClick }: Props) => JSX.Element;
6
+ export declare const RightRailIcon: ({ onClick, isDisabled }: Props) => JSX.Element;
6
7
  export {};
@@ -23,6 +23,7 @@ export interface BlockInsertElementBrowserProps {
23
23
  onInsert: OnInsert;
24
24
  togglePlusMenuVisibility: SimpleEventHandler<MouseEvent | KeyboardEvent>;
25
25
  pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
26
+ isFullPageAppearance?: boolean;
26
27
  }
27
28
  export declare const BlockInsertElementBrowser: (props: BlockInsertElementBrowserProps) => JSX.Element;
28
29
  export {};
@@ -28,5 +28,6 @@ export interface BlockInsertMenuProps {
28
28
  togglePlusMenuVisibility(): void;
29
29
  onKeyDown?: React.KeyboardEventHandler;
30
30
  pluginInjectionApi: ExtractInjectionAPI<InsertBlockPlugin> | undefined;
31
+ isFullPageAppearance?: boolean;
31
32
  }
32
33
  export declare const BlockInsertMenu: (props: BlockInsertMenuProps) => JSX.Element | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,28 +32,28 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/button": "^20.1.0",
35
- "@atlaskit/editor-common": "^89.2.0",
35
+ "@atlaskit/editor-common": "^90.0.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
37
- "@atlaskit/editor-plugin-block-type": "^3.14.0",
37
+ "@atlaskit/editor-plugin-block-type": "^3.15.0",
38
38
  "@atlaskit/editor-plugin-code-block": "^3.3.0",
39
39
  "@atlaskit/editor-plugin-date": "^2.3.0",
40
40
  "@atlaskit/editor-plugin-emoji": "^2.6.0",
41
- "@atlaskit/editor-plugin-expand": "^2.6.0",
41
+ "@atlaskit/editor-plugin-expand": "^2.7.0",
42
42
  "@atlaskit/editor-plugin-extension": "^1.14.0",
43
43
  "@atlaskit/editor-plugin-feature-flags": "^1.2.0",
44
44
  "@atlaskit/editor-plugin-hyperlink": "^2.9.0",
45
45
  "@atlaskit/editor-plugin-image-upload": "^1.2.0",
46
- "@atlaskit/editor-plugin-layout": "^1.7.0",
46
+ "@atlaskit/editor-plugin-layout": "^1.8.0",
47
47
  "@atlaskit/editor-plugin-media": "^1.31.0",
48
48
  "@atlaskit/editor-plugin-mentions": "^2.6.0",
49
- "@atlaskit/editor-plugin-panel": "^2.4.0",
49
+ "@atlaskit/editor-plugin-panel": "^2.5.0",
50
50
  "@atlaskit/editor-plugin-placeholder-text": "^1.7.0",
51
51
  "@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
52
- "@atlaskit/editor-plugin-quick-insert": "^1.3.0",
52
+ "@atlaskit/editor-plugin-quick-insert": "^1.4.0",
53
53
  "@atlaskit/editor-plugin-rule": "^1.8.0",
54
54
  "@atlaskit/editor-plugin-status": "^2.4.0",
55
- "@atlaskit/editor-plugin-table": "^7.25.0",
56
- "@atlaskit/editor-plugin-tasks-and-decisions": "^2.5.0",
55
+ "@atlaskit/editor-plugin-table": "^7.27.0",
56
+ "@atlaskit/editor-plugin-tasks-and-decisions": "^2.6.0",
57
57
  "@atlaskit/editor-plugin-type-ahead": "^1.8.0",
58
58
  "@atlaskit/editor-prosemirror": "6.0.0",
59
59
  "@atlaskit/editor-shared-styles": "^2.13.0",