@atlaskit/editor-plugin-insert-block 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.1.2
+
+### Patch Changes
+
+- [#144556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144556)
+  [`69f78b13edfbe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/69f78b13edfbe) -
+  Don't wrap outer click listeners for insert menu when insert-menu-in-right-rail experiment is
+  rendered to fix focus issues with confluence legacy macros
+- Updated dependencies
+
+## 2.1.1
+
+### Patch Changes
+
+- [#143799](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143799)
+  [`28c4ecb75a634`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/28c4ecb75a634) -
+  removed editorActions from onClick in Props, updated toolbar reference to it
+- Updated dependencies
+
 ## 2.1.0
 
 ### Minor Changes

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

@@ -118,6 +118,34 @@ var InsertMenu = function InsertMenu(_ref) {
     return result;
   }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
   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;
+
+  /**
+   * For insert menu in right rail experiment
+   * - Clean up ticket ED-24801
+   *
+   * The insert menu is not rendered in a popup so need to avoid wrapping it in outer click
+   * listeners because it will cause the editor to focus certain extensions (e.g. Jira legacy)
+   */
+
+  if (isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      (0, _react2.jsx)("div", {
+        css: insertMenuWrapper(itemCount, isFullPageAppearance)
+      }, (0, _react2.jsx)(FlexWrapper, null, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
+        mode: "inline",
+        getItems: getItems,
+        emptyStateHandler: emptyStateHandler,
+        onInsertItem: onInsertItem,
+        showSearch: true,
+        showCategories: false
+        // On page resize we want the InlineElementBrowser to show updated tools/overflow items
+        ,
+        key: quickInsertDropdownItems.length,
+        viewMoreItem: viewMoreItem
+      })))
+    );
+  }
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     (0, _react2.jsx)("div", {

package/dist/cjs/ui/ElementRail/MainToolBarIcon.js

@@ -47,12 +47,12 @@ var buttonStyles = (0, _primitives.xcss)({
 });
 var disabledStyles = (0, _primitives.xcss)({
   color: 'color.text.disabled',
-  backgroundColor: 'color.background.neutral',
+  backgroundColor: 'color.background.neutral.subtle',
   ':hover': {
-    backgroundColor: 'color.background.neutral'
+    backgroundColor: 'color.background.neutral.subtle'
   },
   ':active': {
-    backgroundColor: 'color.background.neutral'
+    backgroundColor: 'color.background.neutral.subtle'
   }
 });
 var activeStyles = (0, _primitives.xcss)({

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

@@ -437,7 +437,6 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         inputMethod = _ref5.inputMethod;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
-        editorActions = _this$props10.editorActions,
         handleImageUpload = _this$props10.handleImageUpload,
         expandEnabled = _this$props10.expandEnabled;
 
@@ -509,8 +508,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
 
         // eslint-disable-next-line no-fallthrough
         default:
-          if (item && item.onClick && editorActions) {
-            item.onClick(editorActions);
+          if (item && item.onClick) {
+            item.onClick();
             break;
           }
       }

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

@@ -101,6 +101,34 @@ const InsertMenu = ({
     return result;
   }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
   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;
+
+  /**
+   * For insert menu in right rail experiment
+   * - Clean up ticket ED-24801
+   *
+   * The insert menu is not rendered in a popup so need to avoid wrapping it in outer click
+   * listeners because it will cause the editor to focus certain extensions (e.g. Jira legacy)
+   */
+
+  if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      jsx("div", {
+        css: insertMenuWrapper(itemCount, isFullPageAppearance)
+      }, jsx(FlexWrapper, null, jsx(ElementBrowser, {
+        mode: "inline",
+        getItems: getItems,
+        emptyStateHandler: emptyStateHandler,
+        onInsertItem: onInsertItem,
+        showSearch: true,
+        showCategories: false
+        // On page resize we want the InlineElementBrowser to show updated tools/overflow items
+        ,
+        key: quickInsertDropdownItems.length,
+        viewMoreItem: viewMoreItem
+      })))
+    );
+  }
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {

package/dist/es2019/ui/ElementRail/MainToolBarIcon.js

@@ -40,12 +40,12 @@ const buttonStyles = xcss({
 });
 const disabledStyles = xcss({
   color: 'color.text.disabled',
-  backgroundColor: 'color.background.neutral',
+  backgroundColor: 'color.background.neutral.subtle',
   ':hover': {
-    backgroundColor: 'color.background.neutral'
+    backgroundColor: 'color.background.neutral.subtle'
   },
   ':active': {
-    backgroundColor: 'color.background.neutral'
+    backgroundColor: 'color.background.neutral.subtle'
   }
 });
 const activeStyles = xcss({

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

@@ -463,7 +463,6 @@ export class ToolbarInsertBlock extends React.PureComponent {
     }) => {
       const {
         editorView,
-        editorActions,
         handleImageUpload,
         expandEnabled
       } = this.props;
@@ -538,8 +537,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
 
         // eslint-disable-next-line no-fallthrough
         default:
-          if (item && item.onClick && editorActions) {
-            item.onClick(editorActions);
+          if (item && item.onClick) {
+            item.onClick();
             break;
           }
       }

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

@@ -113,6 +113,34 @@ var InsertMenu = function InsertMenu(_ref) {
     return result;
   }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
   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;
+
+  /**
+   * For insert menu in right rail experiment
+   * - Clean up ticket ED-24801
+   *
+   * The insert menu is not rendered in a popup so need to avoid wrapping it in outer click
+   * listeners because it will cause the editor to focus certain extensions (e.g. Jira legacy)
+   */
+
+  if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
+    return (
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      jsx("div", {
+        css: insertMenuWrapper(itemCount, isFullPageAppearance)
+      }, jsx(FlexWrapper, null, jsx(ElementBrowser, {
+        mode: "inline",
+        getItems: getItems,
+        emptyStateHandler: emptyStateHandler,
+        onInsertItem: onInsertItem,
+        showSearch: true,
+        showCategories: false
+        // On page resize we want the InlineElementBrowser to show updated tools/overflow items
+        ,
+        key: quickInsertDropdownItems.length,
+        viewMoreItem: viewMoreItem
+      })))
+    );
+  }
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {

package/dist/esm/ui/ElementRail/MainToolBarIcon.js

@@ -40,12 +40,12 @@ var buttonStyles = xcss({
 });
 var disabledStyles = xcss({
   color: 'color.text.disabled',
-  backgroundColor: 'color.background.neutral',
+  backgroundColor: 'color.background.neutral.subtle',
   ':hover': {
-    backgroundColor: 'color.background.neutral'
+    backgroundColor: 'color.background.neutral.subtle'
   },
   ':active': {
-    backgroundColor: 'color.background.neutral'
+    backgroundColor: 'color.background.neutral.subtle'
   }
 });
 var activeStyles = xcss({

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

@@ -428,7 +428,6 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         inputMethod = _ref5.inputMethod;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
-        editorActions = _this$props10.editorActions,
         handleImageUpload = _this$props10.handleImageUpload,
         expandEnabled = _this$props10.expandEnabled;
 
@@ -500,8 +499,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
 
         // eslint-disable-next-line no-fallthrough
         default:
-          if (item && item.onClick && editorActions) {
-            item.onClick(editorActions);
+          if (item && item.onClick) {
+            item.onClick();
             break;
           }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^90.2.0",
+		"@atlaskit/editor-common": "^91.0.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-block-type": "^3.15.0",
 		"@atlaskit/editor-plugin-code-block": "^3.3.0",
@@ -58,7 +58,7 @@
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
-		"@atlaskit/emoji": "^67.7.0",
+		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/heading": "2.4.5",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/icon-lab": "^0.2.0",