@atlaskit/editor-plugin-insert-block 3.2.2 → 3.2.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 3.2.3
+
+### Patch Changes
+
+- [#142191](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142191)
+  [`8a39e59bec14f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a39e59bec14f) -
+  A11Y-9980: Update how View Item button is created.
+- Updated dependencies
+
 ## 3.2.2
 
 ### Patch Changes

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -27,8 +27,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 var DEFAULT_HEIGHT = exports.DEFAULT_HEIGHT = 560;
 var InsertMenu = function InsertMenu(_ref) {
   var _pluginInjectionApi$q6, _pluginInjectionApi$q7;
@@ -93,7 +91,9 @@ var InsertMenu = function InsertMenu(_ref) {
     };
   }, [onInsert]);
   var quickInsertDropdownItems = dropdownItems.map(transform);
-  var viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
+
+  // Please clean up viewMoreItem when cleaning up platform_editor_refactor_view_more
+  var viewMoreItem = !(0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more') && showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   var onInsertItem = (0, _react.useCallback)(function (item) {
     var _pluginInjectionApi$q;
     toggleVisiblity();
@@ -138,6 +138,11 @@ var InsertMenu = function InsertMenu(_ref) {
     return result;
   }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityState]);
   var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
+  var onViewMore = (0, _react.useCallback)(function () {
+    var _pluginInjectionApi$c, _pluginInjectionApi$q8;
+    toggleVisiblity();
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.commands.openElementBrowserModal);
+  }, [pluginInjectionApi, toggleVisiblity]);
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     (0, _react2.jsx)("div", {
@@ -157,6 +162,7 @@ var InsertMenu = function InsertMenu(_ref) {
       ,
       key: quickInsertDropdownItems.length,
       viewMoreItem: viewMoreItem,
+      onViewMore: onViewMore,
       cache: cache
     })))
   );

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -6,11 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BlockInsertMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blockInsertElementBrowser = require("./block-insert-element-browser");
 var _dropdownButton = require("./dropdown-button");
 var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props) {
-  if (props.items.length === 0) {
-    return null;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more')) {
+    if (props.items.length === 0 && !props.showElementBrowserLink) {
+      return null;
+    }
+  } else {
+    if (props.items.length === 0) {
+      return null;
+    }
   }
   if (props.disabled) {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {

package/dist/cjs/ui/ToolbarInsertBlock/create-items.js

@@ -211,7 +211,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
   if (insertMenuItems) {
     items.push.apply(items, (0, _toConsumableArray2.default)(insertMenuItems));
   }
-  if (showElementBrowserLink) {
+  if (showElementBrowserLink && !(0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more')) {
     items.push((0, _item.more)({
       content: formatMessage(_messages.toolbarInsertBlockMessages.viewMore),
       disabled: false

package/dist/cjs/ui/ToolbarInsertBlock/index.js

@@ -27,6 +27,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _picker = require("@atlaskit/emoji/picker");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockInsertMenu = require("./block-insert-menu");
 var _createItems3 = require("./create-items");
 var _templateObject;
@@ -478,7 +479,15 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           _this.insertHorizontalRule(inputMethod);
           break;
         case 'macro':
-          _this.openElementBrowser();
+          /**
+           * Remove 'macro' case when cleaning up platform_editor_refactor_view_more
+           * along with the 'more' function from platform/packages/editor/editor-plugin-insert-block/src/ui/ToolbarInsertBlock/item.tsx
+           * as it will no longer be needed for the View More button.
+           * This will also reduce confusion from the 'macro' naming.
+           */
+          if (!(0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more')) {
+            _this.openElementBrowser();
+          }
           break;
         case 'date':
           _this.createDate(inputMethod);
@@ -660,8 +669,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton4,
         _tableSelectorButton5,
         _tableSelectorButton6,
-        _this$props$isDisable,
-        _this$plusButtonRef,
+        _this$props$isDisable2,
+        _this$plusButtonRef2,
         _this$props$pluginInj;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -672,6 +681,33 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         isDisabled = _this$props13.isDisabled,
         isReducedSpacing = _this$props13.isReducedSpacing,
         editorAppearance = _this$props13.editorAppearance;
+      var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
+      if (isFullPageAppearance && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_insert_button_on_primary_toolbar')) {
+        var _this$props$isDisable, _this$plusButtonRef;
+        return (0, _react2.jsx)(_ui.ToolbarButtonGroup, null, (0, _react2.jsx)(_ui.ToolbarDropdownWrapper, null, this.renderPopup(), this.renderTableSelectorPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
+          popupsMountPoint: this.props.popupsMountPoint,
+          popupsBoundariesElement: this.props.popupsBoundariesElement,
+          popupsScrollableElement: this.props.popupsScrollableElement,
+          disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+          editorView: this.props.editorView,
+          spacing: this.props.isReducedSpacing ? 'none' : 'default',
+          label: this.props.intl.formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
+          open: this.state.isPlusMenuOpen,
+          plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
+          items: this.state.dropdownItems,
+          onRef: this.handleDropDownButtonRef,
+          onPlusButtonRef: this.handlePlusButtonRef,
+          onClick: this.handleClick,
+          onKeyDown: this.handleOpenByKeyboard,
+          onItemActivated: this.insertInsertMenuItem,
+          onInsert: this.insertInsertMenuItem,
+          onOpenChange: this.onOpenChange,
+          togglePlusMenuVisibility: this.togglePlusMenuVisibility,
+          showElementBrowserLink: this.props.showElementBrowserLink || false,
+          pluginInjectionApi: this.props.pluginInjectionApi,
+          isFullPageAppearance: isFullPageAppearance
+        })), (0, _react2.jsx)(_ui.ToolbarSeparator, null));
+      }
       var isTableButtonVisible = buttons.some(function (_ref7) {
         var value = _ref7.value;
         return value.name === 'table';
@@ -706,7 +742,6 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       } finally {
         _iterator.f();
       }
-      var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
       return (0, _react2.jsx)("span", {
         css:
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
@@ -778,12 +813,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         popupsMountPoint: this.props.popupsMountPoint,
         popupsBoundariesElement: this.props.popupsBoundariesElement,
         popupsScrollableElement: this.props.popupsScrollableElement,
-        disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+        disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
         editorView: this.props.editorView,
         spacing: this.props.isReducedSpacing ? 'none' : 'default',
         label: this.props.intl.formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
         open: this.state.isPlusMenuOpen,
-        plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
+        plusButtonRef: (_this$plusButtonRef2 = this.plusButtonRef) === null || _this$plusButtonRef2 === void 0 ? void 0 : _this$plusButtonRef2.deref(),
         items: this.state.dropdownItems,
         onRef: this.handleDropDownButtonRef,
         onPlusButtonRef: this.handlePlusButtonRef,

package/dist/cjs/ui/ToolbarInsertBlock/item.js

@@ -279,6 +279,14 @@ var status = exports.status = mem(function (init) {
     }
   });
 });
+
+/**
+ * @private
+ * @deprecated
+ * Deprecated as view more is not an item in the element browser.
+ * View more is implemented directly in the ViewMore component inside the StatelessElementBrowser when
+ * platform_editor_refactor_view_more is used.
+ */
 var more = exports.more = mem(function (init) {
   return from({
     content: init.content,

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -14,8 +14,6 @@ import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/ele
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { fg } from '@atlaskit/platform-feature-flags';
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -70,7 +68,9 @@ const InsertMenu = ({
     value: item.value
   }), [onInsert]);
   const quickInsertDropdownItems = dropdownItems.map(transform);
-  const viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
+
+  // Please clean up viewMoreItem when cleaning up platform_editor_refactor_view_more
+  const viewMoreItem = !fg('platform_editor_refactor_view_more') && showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   const onInsertItem = useCallback(item => {
     var _pluginInjectionApi$q;
     toggleVisiblity();
@@ -114,6 +114,11 @@ const InsertMenu = ({
     return result;
   }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.actions, quickInsertDropdownItems, connectivityState]);
   const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q9 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q9 === void 0 ? void 0 : (_pluginInjectionApi$q10 = _pluginInjectionApi$q9.sharedState.currentState()) === null || _pluginInjectionApi$q10 === void 0 ? void 0 : _pluginInjectionApi$q10.emptyStateHandler;
+  const onViewMore = useCallback(() => {
+    var _pluginInjectionApi$c, _pluginInjectionApi$q11;
+    toggleVisiblity();
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q11 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q11 === void 0 ? void 0 : _pluginInjectionApi$q11.commands.openElementBrowserModal);
+  }, [pluginInjectionApi, toggleVisiblity]);
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
@@ -133,6 +138,7 @@ const InsertMenu = ({
       ,
       key: quickInsertDropdownItems.length,
       viewMoreItem: viewMoreItem,
+      onViewMore: onViewMore,
       cache: cache
     })))
   );

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -1,9 +1,16 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BlockInsertElementBrowser } from './block-insert-element-browser';
 import { DropDownButton } from './dropdown-button';
 export const BlockInsertMenu = props => {
-  if (props.items.length === 0) {
-    return null;
+  if (fg('platform_editor_refactor_view_more')) {
+    if (props.items.length === 0 && !props.showElementBrowserLink) {
+      return null;
+    }
+  } else {
+    if (props.items.length === 0) {
+      return null;
+    }
   }
   if (props.disabled) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownButton, {

package/dist/es2019/ui/ToolbarInsertBlock/create-items.js

@@ -192,7 +192,7 @@ const createInsertBlockItems = config => {
   if (insertMenuItems) {
     items.push(...insertMenuItems);
   }
-  if (showElementBrowserLink) {
+  if (showElementBrowserLink && !fg('platform_editor_refactor_view_more')) {
     items.push(more({
       content: formatMessage(messages.viewMore),
       disabled: false

package/dist/es2019/ui/ToolbarInsertBlock/index.js

@@ -13,7 +13,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
-import { Popup, TableSelectorPopup } from '@atlaskit/editor-common/ui';
+import { Popup, TableSelectorPopup, ToolbarButtonGroup, ToolbarDropdownWrapper, ToolbarSeparator } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -22,6 +22,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 // eslint-disable-next-line import/no-namespace
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N20A, N30A } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 // Ignored via go/ees005
@@ -510,7 +511,15 @@ export class ToolbarInsertBlock extends React.PureComponent {
           this.insertHorizontalRule(inputMethod);
           break;
         case 'macro':
-          this.openElementBrowser();
+          /**
+           * Remove 'macro' case when cleaning up platform_editor_refactor_view_more
+           * along with the 'more' function from platform/packages/editor/editor-plugin-insert-block/src/ui/ToolbarInsertBlock/item.tsx
+           * as it will no longer be needed for the View More button.
+           * This will also reduce confusion from the 'macro' naming.
+           */
+          if (!fg('platform_editor_refactor_view_more')) {
+            this.openElementBrowser();
+          }
           break;
         case 'date':
           this.createDate(inputMethod);
@@ -709,7 +718,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
   }
   render() {
-    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$plusButtonRef, _this$props$pluginInj4;
+    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable2, _this$plusButtonRef2, _this$props$pluginInj4;
     const {
       buttons,
       dropdownItems,
@@ -721,6 +730,33 @@ export class ToolbarInsertBlock extends React.PureComponent {
       isReducedSpacing,
       editorAppearance
     } = this.props;
+    const isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
+    if (isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_insert_button_on_primary_toolbar')) {
+      var _this$props$isDisable, _this$plusButtonRef;
+      return jsx(ToolbarButtonGroup, null, jsx(ToolbarDropdownWrapper, null, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
+        popupsMountPoint: this.props.popupsMountPoint,
+        popupsBoundariesElement: this.props.popupsBoundariesElement,
+        popupsScrollableElement: this.props.popupsScrollableElement,
+        disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+        editorView: this.props.editorView,
+        spacing: this.props.isReducedSpacing ? 'none' : 'default',
+        label: this.props.intl.formatMessage(messages.insertMenu),
+        open: this.state.isPlusMenuOpen,
+        plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
+        items: this.state.dropdownItems,
+        onRef: this.handleDropDownButtonRef,
+        onPlusButtonRef: this.handlePlusButtonRef,
+        onClick: this.handleClick,
+        onKeyDown: this.handleOpenByKeyboard,
+        onItemActivated: this.insertInsertMenuItem,
+        onInsert: this.insertInsertMenuItem,
+        onOpenChange: this.onOpenChange,
+        togglePlusMenuVisibility: this.togglePlusMenuVisibility,
+        showElementBrowserLink: this.props.showElementBrowserLink || false,
+        pluginInjectionApi: this.props.pluginInjectionApi,
+        isFullPageAppearance: isFullPageAppearance
+      })), jsx(ToolbarSeparator, null));
+    }
     const isTableButtonVisible = buttons.some(({
       value
     }) => value.name === 'table');
@@ -744,7 +780,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
         toolbarButtons.push(btn);
       }
     }
-    const isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
     return jsx("span", {
       css:
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
@@ -816,12 +851,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       popupsMountPoint: this.props.popupsMountPoint,
       popupsBoundariesElement: this.props.popupsBoundariesElement,
       popupsScrollableElement: this.props.popupsScrollableElement,
-      disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+      disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
       editorView: this.props.editorView,
       spacing: this.props.isReducedSpacing ? 'none' : 'default',
       label: this.props.intl.formatMessage(messages.insertMenu),
       open: this.state.isPlusMenuOpen,
-      plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
+      plusButtonRef: (_this$plusButtonRef2 = this.plusButtonRef) === null || _this$plusButtonRef2 === void 0 ? void 0 : _this$plusButtonRef2.deref(),
       items: this.state.dropdownItems,
       onRef: this.handleDropDownButtonRef,
       onPlusButtonRef: this.handlePlusButtonRef,

package/dist/es2019/ui/ToolbarInsertBlock/item.js

@@ -225,6 +225,14 @@ export const status = mem(init => from({
     LEGACY_fallbackIcon: StatusIconLegacy
   })
 }));
+
+/**
+ * @private
+ * @deprecated
+ * Deprecated as view more is not an item in the element browser.
+ * View more is implemented directly in the ViewMore component inside the StatelessElementBrowser when
+ * platform_editor_refactor_view_more is used.
+ */
 export const more = mem(init => from({
   content: init.content,
   tooltipDescription: init.tooltipDescription,

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -21,8 +21,6 @@ import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/ele
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { fg } from '@atlaskit/platform-feature-flags';
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -90,7 +88,9 @@ var InsertMenu = function InsertMenu(_ref) {
     };
   }, [onInsert]);
   var quickInsertDropdownItems = dropdownItems.map(transform);
-  var viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
+
+  // Please clean up viewMoreItem when cleaning up platform_editor_refactor_view_more
+  var viewMoreItem = !fg('platform_editor_refactor_view_more') && showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   var onInsertItem = useCallback(function (item) {
     var _pluginInjectionApi$q;
     toggleVisiblity();
@@ -135,6 +135,11 @@ var InsertMenu = function InsertMenu(_ref) {
     return result;
   }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems, connectivityState]);
   var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
+  var onViewMore = useCallback(function () {
+    var _pluginInjectionApi$c, _pluginInjectionApi$q8;
+    toggleVisiblity();
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.commands.openElementBrowserModal);
+  }, [pluginInjectionApi, toggleVisiblity]);
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
@@ -154,6 +159,7 @@ var InsertMenu = function InsertMenu(_ref) {
       ,
       key: quickInsertDropdownItems.length,
       viewMoreItem: viewMoreItem,
+      onViewMore: onViewMore,
       cache: cache
     })))
   );

package/dist/esm/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -1,9 +1,16 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BlockInsertElementBrowser } from './block-insert-element-browser';
 import { DropDownButton } from './dropdown-button';
 export var BlockInsertMenu = function BlockInsertMenu(props) {
-  if (props.items.length === 0) {
-    return null;
+  if (fg('platform_editor_refactor_view_more')) {
+    if (props.items.length === 0 && !props.showElementBrowserLink) {
+      return null;
+    }
+  } else {
+    if (props.items.length === 0) {
+      return null;
+    }
   }
   if (props.disabled) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownButton, {

package/dist/esm/ui/ToolbarInsertBlock/create-items.js

@@ -204,7 +204,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
   if (insertMenuItems) {
     items.push.apply(items, _toConsumableArray(insertMenuItems));
   }
-  if (showElementBrowserLink) {
+  if (showElementBrowserLink && !fg('platform_editor_refactor_view_more')) {
     items.push(more({
       content: formatMessage(messages.viewMore),
       disabled: false

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -28,7 +28,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
-import { Popup, TableSelectorPopup } from '@atlaskit/editor-common/ui';
+import { Popup, TableSelectorPopup, ToolbarButtonGroup, ToolbarDropdownWrapper, ToolbarSeparator } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -37,6 +37,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 // eslint-disable-next-line import/no-namespace
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N20A, N30A } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 // Ignored via go/ees005
@@ -472,7 +473,15 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           _this.insertHorizontalRule(inputMethod);
           break;
         case 'macro':
-          _this.openElementBrowser();
+          /**
+           * Remove 'macro' case when cleaning up platform_editor_refactor_view_more
+           * along with the 'more' function from platform/packages/editor/editor-plugin-insert-block/src/ui/ToolbarInsertBlock/item.tsx
+           * as it will no longer be needed for the View More button.
+           * This will also reduce confusion from the 'macro' naming.
+           */
+          if (!fg('platform_editor_refactor_view_more')) {
+            _this.openElementBrowser();
+          }
           break;
         case 'date':
           _this.createDate(inputMethod);
@@ -654,8 +663,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableSelectorButton4,
         _tableSelectorButton5,
         _tableSelectorButton6,
-        _this$props$isDisable,
-        _this$plusButtonRef,
+        _this$props$isDisable2,
+        _this$plusButtonRef2,
         _this$props$pluginInj;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -666,6 +675,33 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         isDisabled = _this$props13.isDisabled,
         isReducedSpacing = _this$props13.isReducedSpacing,
         editorAppearance = _this$props13.editorAppearance;
+      var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
+      if (isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_insert_button_on_primary_toolbar')) {
+        var _this$props$isDisable, _this$plusButtonRef;
+        return jsx(ToolbarButtonGroup, null, jsx(ToolbarDropdownWrapper, null, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
+          popupsMountPoint: this.props.popupsMountPoint,
+          popupsBoundariesElement: this.props.popupsBoundariesElement,
+          popupsScrollableElement: this.props.popupsScrollableElement,
+          disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+          editorView: this.props.editorView,
+          spacing: this.props.isReducedSpacing ? 'none' : 'default',
+          label: this.props.intl.formatMessage(messages.insertMenu),
+          open: this.state.isPlusMenuOpen,
+          plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
+          items: this.state.dropdownItems,
+          onRef: this.handleDropDownButtonRef,
+          onPlusButtonRef: this.handlePlusButtonRef,
+          onClick: this.handleClick,
+          onKeyDown: this.handleOpenByKeyboard,
+          onItemActivated: this.insertInsertMenuItem,
+          onInsert: this.insertInsertMenuItem,
+          onOpenChange: this.onOpenChange,
+          togglePlusMenuVisibility: this.togglePlusMenuVisibility,
+          showElementBrowserLink: this.props.showElementBrowserLink || false,
+          pluginInjectionApi: this.props.pluginInjectionApi,
+          isFullPageAppearance: isFullPageAppearance
+        })), jsx(ToolbarSeparator, null));
+      }
       var isTableButtonVisible = buttons.some(function (_ref7) {
         var value = _ref7.value;
         return value.name === 'table';
@@ -700,7 +736,6 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       } finally {
         _iterator.f();
       }
-      var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
       return jsx("span", {
         css:
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
@@ -772,12 +807,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         popupsMountPoint: this.props.popupsMountPoint,
         popupsBoundariesElement: this.props.popupsBoundariesElement,
         popupsScrollableElement: this.props.popupsScrollableElement,
-        disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+        disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
         editorView: this.props.editorView,
         spacing: this.props.isReducedSpacing ? 'none' : 'default',
         label: this.props.intl.formatMessage(messages.insertMenu),
         open: this.state.isPlusMenuOpen,
-        plusButtonRef: (_this$plusButtonRef = this.plusButtonRef) === null || _this$plusButtonRef === void 0 ? void 0 : _this$plusButtonRef.deref(),
+        plusButtonRef: (_this$plusButtonRef2 = this.plusButtonRef) === null || _this$plusButtonRef2 === void 0 ? void 0 : _this$plusButtonRef2.deref(),
         items: this.state.dropdownItems,
         onRef: this.handleDropDownButtonRef,
         onPlusButtonRef: this.handlePlusButtonRef,

package/dist/esm/ui/ToolbarInsertBlock/item.js

@@ -271,6 +271,14 @@ export var status = mem(function (init) {
     }
   });
 });
+
+/**
+ * @private
+ * @deprecated
+ * Deprecated as view more is not an item in the element browser.
+ * View more is implemented directly in the ViewMore component inside the StatelessElementBrowser when
+ * platform_editor_refactor_view_more is used.
+ */
 export var more = mem(function (init) {
   return from({
     content: init.content,

package/dist/types/ui/ToolbarInsertBlock/item.d.ts

@@ -36,4 +36,11 @@ export declare const expand: MemoizedFn<(init: CreateInit) => MenuItem>;
 export declare const date: MemoizedFn<(init: CreateInit) => MenuItem>;
 export declare const placeholder: MemoizedFn<(init: CreateInit) => MenuItem>;
 export declare const status: MemoizedFn<(init: CreateInit) => MenuItem>;
+/**
+ * @private
+ * @deprecated
+ * Deprecated as view more is not an item in the element browser.
+ * View more is implemented directly in the ViewMore component inside the StatelessElementBrowser when
+ * platform_editor_refactor_view_more is used.
+ */
 export declare const more: MemoizedFn<(init: CreateInit) => MenuItem>;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/item.d.ts

@@ -36,4 +36,11 @@ export declare const expand: MemoizedFn<(init: CreateInit) => MenuItem>;
 export declare const date: MemoizedFn<(init: CreateInit) => MenuItem>;
 export declare const placeholder: MemoizedFn<(init: CreateInit) => MenuItem>;
 export declare const status: MemoizedFn<(init: CreateInit) => MenuItem>;
+/**
+ * @private
+ * @deprecated
+ * Deprecated as view more is not an item in the element browser.
+ * View more is implemented directly in the ViewMore component inside the StatelessElementBrowser when
+ * platform_editor_refactor_view_more is used.
+ */
 export declare const more: MemoizedFn<(init: CreateInit) => MenuItem>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "3.2.2",
+	"version": "3.2.3",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^23.0.0",
-		"@atlaskit/editor-common": "^103.12.0",
+		"@atlaskit/editor-common": "^103.17.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-block-type": "^5.1.0",
 		"@atlaskit/editor-plugin-code-block": "^4.4.0",
@@ -42,14 +42,14 @@
 		"@atlaskit/editor-plugin-date": "^4.2.0",
 		"@atlaskit/editor-plugin-emoji": "^3.6.0",
 		"@atlaskit/editor-plugin-expand": "^3.2.0",
-		"@atlaskit/editor-plugin-extension": "^5.2.0",
+		"@atlaskit/editor-plugin-extension": "^5.3.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-hyperlink": "^4.4.0",
 		"@atlaskit/editor-plugin-image-upload": "^2.0.0",
-		"@atlaskit/editor-plugin-layout": "^2.5.0",
+		"@atlaskit/editor-plugin-layout": "^2.6.0",
 		"@atlaskit/editor-plugin-media": "^2.6.0",
 		"@atlaskit/editor-plugin-media-insert": "^6.2.0",
-		"@atlaskit/editor-plugin-mentions": "^4.4.0",
+		"@atlaskit/editor-plugin-mentions": "^4.5.0",
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
 		"@atlaskit/editor-plugin-panel": "^4.3.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^2.2.0",
@@ -57,19 +57,19 @@
 		"@atlaskit/editor-plugin-quick-insert": "^2.4.0",
 		"@atlaskit/editor-plugin-rule": "^2.1.0",
 		"@atlaskit/editor-plugin-status": "^3.1.0",
-		"@atlaskit/editor-plugin-table": "^10.8.0",
+		"@atlaskit/editor-plugin-table": "^10.9.0",
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^5.1.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/emoji": "^69.0.0",
+		"@atlaskit/emoji": "^69.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/icon-lab": "^4.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tmp-editor-statsig": "^4.14.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -85,10 +85,10 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/ssr": "^0.4.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@types/react-virtualized": "^9.18.12",
 		"typescript": "~5.4.2"
@@ -141,6 +141,12 @@
 		},
 		"platform_editor_add_media_from_url_rollout": {
 			"type": "boolean"
+		},
+		"platform_editor_insert_button_on_primary_toolbar": {
+			"type": "boolean"
+		},
+		"platform_editor_refactor_view_more": {
+			"type": "boolean"
 		}
 	}
 }