@atlaskit/editor-plugin-insert-block 2.4.7 → 2.4.8

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.4.8
+
+### Patch Changes
+
+- [#162455](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162455)
+  [`37db7ee7998bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/37db7ee7998bb) -
+  [ux] ED-25030: Reduce padding between insert menu items and remove padding from the right hand
+  side of the insert menu when a scrollbar is not present
+- Updated dependencies
+
 ## 2.4.7
 
 ### Patch Changes

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

@@ -11,10 +11,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _theme = require("@atlaskit/theme");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -26,6 +28,7 @@ var _excluded = ["children"];
 // 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 = 560;
 var InsertMenu = function InsertMenu(_ref) {
   var _pluginInjectionApi$q7, _pluginInjectionApi$q8;
   var editorView = _ref.editorView,
@@ -39,6 +42,31 @@ var InsertMenu = function InsertMenu(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     itemCount = _useState2[0],
     setItemCount = _useState2[1];
+  var _useState3 = (0, _react.useState)(DEFAULT_HEIGHT),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var cache = new _CellMeasurer.CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: _elementBrowser.ELEMENT_ITEM_HEIGHT,
+    minHeight: _elementBrowser.ELEMENT_ITEM_HEIGHT
+  });
+  (0, _react.useLayoutEffect)(function () {
+    // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
+    var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 128;
+    var totalItemHeight = (0, _toConsumableArray2.default)(Array(itemCount)).reduce(function (sum, _, index) {
+      return sum + cache.rowHeight({
+        index: index
+      });
+    }, 0) + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    if (itemCount > 0 && totalItemHeight < DEFAULT_HEIGHT) {
+      setHeight(totalItemHeight);
+    } else {
+      setHeight(DEFAULT_HEIGHT);
+    }
+  }, [cache, itemCount]);
   var transform = (0, _react.useCallback)(function (item) {
     return {
       title: item.content,
@@ -131,7 +159,7 @@ var InsertMenu = function InsertMenu(_ref) {
     return (
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       (0, _react2.jsx)("div", {
-        css: insertMenuWrapper(itemCount, isFullPageAppearance)
+        css: insertMenuWrapper(height, itemCount, isFullPageAppearance)
       }, (0, _react2.jsx)(FlexWrapper, null, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
         mode: "inline",
         getItems: getItems,
@@ -142,14 +170,15 @@ var InsertMenu = function InsertMenu(_ref) {
         // On page resize we want the InlineElementBrowser to show updated tools/overflow items
         ,
         key: quickInsertDropdownItems.length,
-        viewMoreItem: viewMoreItem
+        viewMoreItem: viewMoreItem,
+        cache: (0, _platformFeatureFlags.fg)('platform_editor_reduce_element_browser_padding') ? cache : undefined
       })))
     );
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     (0, _react2.jsx)("div", {
-      css: insertMenuWrapper(itemCount, isFullPageAppearance)
+      css: insertMenuWrapper(height, itemCount, isFullPageAppearance)
     }, (0, _react2.jsx)(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
@@ -164,7 +193,8 @@ var InsertMenu = function InsertMenu(_ref) {
       // On page resize we want the InlineElementBrowser to show updated tools/overflow items
       ,
       key: quickInsertDropdownItems.length,
-      viewMoreItem: viewMoreItem
+      viewMoreItem: viewMoreItem,
+      cache: (0, _platformFeatureFlags.fg)('platform_editor_reduce_element_browser_padding') ? cache : undefined
     })))
   );
 };
@@ -189,11 +219,11 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 128;
   if (itemCount > 0 && itemCount < 6) {
-    return itemCount * _elementBrowser.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    return itemCount * 75 + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
   return 560; // For showing 6 Elements.
 };
-var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearance) {
+var insertMenuWrapper = function insertMenuWrapper(height, itemCount, isFullPageAppearance) {
   if (isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
     return (0, _react2.css)({
       display: 'flex',
@@ -211,8 +241,8 @@ var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearan
     display: 'flex',
     flexDirection: 'column',
     width: '320px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(getInsertMenuHeight({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    height: "".concat((0, _platformFeatureFlags.fg)('platform_editor_reduce_element_browser_padding') ? height : getInsertMenuHeight({
       itemCount: itemCount
     }), "px"),
     backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),

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

@@ -4,19 +4,22 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import { useCallback, useContext, useState } from 'react';
+import { useCallback, useContext, useLayoutEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+const DEFAULT_HEIGHT = 560;
 const InsertMenu = ({
   editorView,
   dropdownItems,
@@ -28,6 +31,26 @@ const InsertMenu = ({
 }) => {
   var _pluginInjectionApi$q7, _pluginInjectionApi$q8, _pluginInjectionApi$q9;
   const [itemCount, setItemCount] = useState(0);
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: ELEMENT_ITEM_HEIGHT,
+    minHeight: ELEMENT_ITEM_HEIGHT
+  });
+  useLayoutEffect(() => {
+    // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
+    const EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 128;
+    const totalItemHeight = [...Array(itemCount)].reduce((sum, _, index) => sum + cache.rowHeight({
+      index
+    }), 0) + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    if (itemCount > 0 && totalItemHeight < DEFAULT_HEIGHT) {
+      setHeight(totalItemHeight);
+    } else {
+      setHeight(DEFAULT_HEIGHT);
+    }
+  }, [cache, itemCount]);
   const transform = useCallback(item => ({
     title: item.content,
     description: item.tooltipDescription,
@@ -114,7 +137,7 @@ const InsertMenu = ({
     return (
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       jsx("div", {
-        css: insertMenuWrapper(itemCount, isFullPageAppearance)
+        css: insertMenuWrapper(height, itemCount, isFullPageAppearance)
       }, jsx(FlexWrapper, null, jsx(ElementBrowser, {
         mode: "inline",
         getItems: getItems,
@@ -125,14 +148,15 @@ const InsertMenu = ({
         // On page resize we want the InlineElementBrowser to show updated tools/overflow items
         ,
         key: quickInsertDropdownItems.length,
-        viewMoreItem: viewMoreItem
+        viewMoreItem: viewMoreItem,
+        cache: fg('platform_editor_reduce_element_browser_padding') ? cache : undefined
       })))
     );
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
-      css: insertMenuWrapper(itemCount, isFullPageAppearance)
+      css: insertMenuWrapper(height, itemCount, isFullPageAppearance)
     }, jsx(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
@@ -147,7 +171,8 @@ const InsertMenu = ({
       // On page resize we want the InlineElementBrowser to show updated tools/overflow items
       ,
       key: quickInsertDropdownItems.length,
-      viewMoreItem: viewMoreItem
+      viewMoreItem: viewMoreItem,
+      cache: fg('platform_editor_reduce_element_browser_padding') ? cache : undefined
     })))
   );
 };
@@ -174,11 +199,11 @@ const getInsertMenuHeight = ({
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   const EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 128;
   if (itemCount > 0 && itemCount < 6) {
-    return itemCount * ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    return itemCount * 75 + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
   return 560; // For showing 6 Elements.
 };
-const insertMenuWrapper = (itemCount, isFullPageAppearance) => {
+const insertMenuWrapper = (height, itemCount, isFullPageAppearance) => {
   if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
     return css({
       display: 'flex',
@@ -196,8 +221,8 @@ const insertMenuWrapper = (itemCount, isFullPageAppearance) => {
     display: 'flex',
     flexDirection: 'column',
     width: '320px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: `${getInsertMenuHeight({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    height: `${fg('platform_editor_reduce_element_browser_padding') ? height : getInsertMenuHeight({
       itemCount
     })}px`,
     backgroundColor: `${`var(--ds-surface-overlay, ${N0})`}`,

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

@@ -8,19 +8,22 @@ var _excluded = ["children"];
  * @jsx jsx
  */
 
-import { useCallback, useContext, useState } from 'react';
+import { useCallback, useContext, useLayoutEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+var DEFAULT_HEIGHT = 560;
 var InsertMenu = function InsertMenu(_ref) {
   var _pluginInjectionApi$q7, _pluginInjectionApi$q8;
   var editorView = _ref.editorView,
@@ -34,6 +37,31 @@ var InsertMenu = function InsertMenu(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     itemCount = _useState2[0],
     setItemCount = _useState2[1];
+  var _useState3 = useState(DEFAULT_HEIGHT),
+    _useState4 = _slicedToArray(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: ELEMENT_ITEM_HEIGHT,
+    minHeight: ELEMENT_ITEM_HEIGHT
+  });
+  useLayoutEffect(function () {
+    // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
+    var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 128;
+    var totalItemHeight = _toConsumableArray(Array(itemCount)).reduce(function (sum, _, index) {
+      return sum + cache.rowHeight({
+        index: index
+      });
+    }, 0) + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    if (itemCount > 0 && totalItemHeight < DEFAULT_HEIGHT) {
+      setHeight(totalItemHeight);
+    } else {
+      setHeight(DEFAULT_HEIGHT);
+    }
+  }, [cache, itemCount]);
   var transform = useCallback(function (item) {
     return {
       title: item.content,
@@ -126,7 +154,7 @@ var InsertMenu = function InsertMenu(_ref) {
     return (
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       jsx("div", {
-        css: insertMenuWrapper(itemCount, isFullPageAppearance)
+        css: insertMenuWrapper(height, itemCount, isFullPageAppearance)
       }, jsx(FlexWrapper, null, jsx(ElementBrowser, {
         mode: "inline",
         getItems: getItems,
@@ -137,14 +165,15 @@ var InsertMenu = function InsertMenu(_ref) {
         // On page resize we want the InlineElementBrowser to show updated tools/overflow items
         ,
         key: quickInsertDropdownItems.length,
-        viewMoreItem: viewMoreItem
+        viewMoreItem: viewMoreItem,
+        cache: fg('platform_editor_reduce_element_browser_padding') ? cache : undefined
       })))
     );
   }
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
-      css: insertMenuWrapper(itemCount, isFullPageAppearance)
+      css: insertMenuWrapper(height, itemCount, isFullPageAppearance)
     }, jsx(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
@@ -159,7 +188,8 @@ var InsertMenu = function InsertMenu(_ref) {
       // On page resize we want the InlineElementBrowser to show updated tools/overflow items
       ,
       key: quickInsertDropdownItems.length,
-      viewMoreItem: viewMoreItem
+      viewMoreItem: viewMoreItem,
+      cache: fg('platform_editor_reduce_element_browser_padding') ? cache : undefined
     })))
   );
 };
@@ -184,11 +214,11 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 128;
   if (itemCount > 0 && itemCount < 6) {
-    return itemCount * ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    return itemCount * 75 + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
   return 560; // For showing 6 Elements.
 };
-var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearance) {
+var insertMenuWrapper = function insertMenuWrapper(height, itemCount, isFullPageAppearance) {
   if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
     return css({
       display: 'flex',
@@ -206,8 +236,8 @@ var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearan
     display: 'flex',
     flexDirection: 'column',
     width: '320px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: "".concat(getInsertMenuHeight({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    height: "".concat(fg('platform_editor_reduce_element_browser_padding') ? height : getInsertMenuHeight({
       itemCount: itemCount
     }), "px"),
     backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(N0, ")")),

package/dist/types/plugin.d.ts

@@ -1,7 +1,7 @@
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import type { EditorAppearance, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { InsertBlockPluginDependencies } from './types';
-export declare const toolbarSizeToButtons: (toolbarSize: ToolbarSize, appearance?: EditorAppearance) => 2 | 0 | 3 | 5 | 7;
+export declare const toolbarSizeToButtons: (toolbarSize: ToolbarSize, appearance?: EditorAppearance) => 0 | 2 | 3 | 5 | 7;
 export interface InsertBlockOptions {
     allowTables?: boolean;
     allowExpand?: boolean;

package/dist/types-ts4.5/plugin.d.ts

@@ -1,7 +1,7 @@
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import type { EditorAppearance, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { InsertBlockPluginDependencies } from './types';
-export declare const toolbarSizeToButtons: (toolbarSize: ToolbarSize, appearance?: EditorAppearance) => 2 | 0 | 3 | 5 | 7;
+export declare const toolbarSizeToButtons: (toolbarSize: ToolbarSize, appearance?: EditorAppearance) => 0 | 2 | 3 | 5 | 7;
 export interface InsertBlockOptions {
     allowTables?: boolean;
     allowExpand?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.4.7",
+	"version": "2.4.8",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/editor-common": "^94.15.0",
+		"@atlaskit/editor-common": "^94.16.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-block-type": "^4.0.0",
 		"@atlaskit/editor-plugin-code-block": "^3.5.0",
@@ -72,7 +72,8 @@
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"lodash": "^4.17.21",
-		"memoize-one": "^6.0.0"
+		"memoize-one": "^6.0.0",
+		"react-virtualized": "^9.8.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
@@ -85,6 +86,7 @@
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
+		"@types/react-virtualized": "^9.18.12",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {
@@ -123,6 +125,9 @@
 	"platform-feature-flags": {
 		"platform_editor_toolbar_responsive_fixes": {
 			"type": "boolean"
+		},
+		"platform_editor_reduce_element_browser_padding": {
+			"type": "boolean"
 		}
 	}
 }