@atlaskit/editor-plugin-floating-toolbar 4.1.10 → 4.1.13

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 4.1.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.12
+
+### Patch Changes
+
+- [#160940](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160940)
+  [`d63ae1c3f13d9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d63ae1c3f13d9) -
+  Hide loading of floating toolbar in SSR environment
+- Updated dependencies
+
+## 4.1.11
+
+### Patch Changes
+
+- [#159090](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159090)
+  [`9cbae97c20f84`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cbae97c20f84) -
+  Reduces rerenders of text formatting options and the toolbar when it is docked to top.
+- Updated dependencies
+
 ## 4.1.10
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -14,6 +14,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
@@ -281,6 +282,11 @@ function ContentComponent(_ref5) {
     isDragging = _useSharedState.isDragging,
     isMenuOpen = _useSharedState.isMenuOpen,
     mode = _useSharedState.mode;
+  if ((0, _coreUtils.isSSR)() && (0, _experiments.editorExperiment)('platform_editor_hide_floating_toolbar_in_ssr', true, {
+    exposure: true
+  })) {
+    return null;
+  }
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }

package/dist/cjs/ui/Toolbar.js

@@ -571,6 +571,10 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       event.stopPropagation();
       event.preventDefault();
     });
+    (0, _defineProperty2.default)(_this, "isShortcutToFocusToolbar", function (event) {
+      //Alt + F10 to reach first element in this floating toolbar
+      return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+    });
     _this.scrollContainerRef = /*#__PURE__*/_react.default.createRef();
     _this.mountRef = /*#__PURE__*/_react.default.createRef();
     _this.toolbarContainerRef = /*#__PURE__*/_react.default.createRef();
@@ -699,7 +703,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         handleEscape: this.handleEscape,
         disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
         childComponentSelector: "[data-testid='editor-floating-toolbar']",
-        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+        isShortcutToFocusToolbar: (0, _platformFeatureFlags.fg)('platform_editor_toolbar_rerender_optimization') ? this.isShortcutToFocusToolbar : isShortcutToFocusToolbar,
         intl: intl
       }, (0, _react2.jsx)("div", {
         ref: this.toolbarContainerRef,

package/dist/es2019/floatingToolbarPlugin.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import camelCase from 'lodash/camelCase';
 import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -268,6 +269,11 @@ export function ContentComponent({
     isMenuOpen,
     mode
   } = useSharedState(pluginInjectionApi);
+  if (isSSR() && editorExperiment('platform_editor_hide_floating_toolbar_in_ssr', true, {
+    exposure: true
+  })) {
+    return null;
+  }
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }

package/dist/es2019/ui/Toolbar.js

@@ -531,6 +531,10 @@ class Toolbar extends Component {
       event.stopPropagation();
       event.preventDefault();
     });
+    _defineProperty(this, "isShortcutToFocusToolbar", event => {
+      //Alt + F10 to reach first element in this floating toolbar
+      return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+    });
     this.scrollContainerRef = /*#__PURE__*/React.createRef();
     this.mountRef = /*#__PURE__*/React.createRef();
     this.toolbarContainerRef = /*#__PURE__*/React.createRef();
@@ -650,7 +654,7 @@ class Toolbar extends Component {
       handleEscape: this.handleEscape,
       disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
       childComponentSelector: "[data-testid='editor-floating-toolbar']",
-      isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+      isShortcutToFocusToolbar: fg('platform_editor_toolbar_rerender_optimization') ? this.isShortcutToFocusToolbar : isShortcutToFocusToolbar,
       intl: intl
     }, jsx("div", {
       ref: this.toolbarContainerRef,

package/dist/esm/floatingToolbarPlugin.js

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import camelCase from 'lodash/camelCase';
 import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -269,6 +270,11 @@ export function ContentComponent(_ref5) {
     isDragging = _useSharedState.isDragging,
     isMenuOpen = _useSharedState.isMenuOpen,
     mode = _useSharedState.mode;
+  if (isSSR() && editorExperiment('platform_editor_hide_floating_toolbar_in_ssr', true, {
+    exposure: true
+  })) {
+    return null;
+  }
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }

package/dist/esm/ui/Toolbar.js

@@ -564,6 +564,10 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       event.stopPropagation();
       event.preventDefault();
     });
+    _defineProperty(_this, "isShortcutToFocusToolbar", function (event) {
+      //Alt + F10 to reach first element in this floating toolbar
+      return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+    });
     _this.scrollContainerRef = /*#__PURE__*/React.createRef();
     _this.mountRef = /*#__PURE__*/React.createRef();
     _this.toolbarContainerRef = /*#__PURE__*/React.createRef();
@@ -692,7 +696,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         handleEscape: this.handleEscape,
         disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
         childComponentSelector: "[data-testid='editor-floating-toolbar']",
-        isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+        isShortcutToFocusToolbar: fg('platform_editor_toolbar_rerender_optimization') ? this.isShortcutToFocusToolbar : isShortcutToFocusToolbar,
         intl: intl
       }, jsx("div", {
         ref: this.toolbarContainerRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "4.1.10",
+	"version": "4.1.13",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 		"@atlaskit/adf-utils": "^19.20.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/checkbox": "^17.1.0",
-		"@atlaskit/editor-common": "^105.10.0",
+		"@atlaskit/editor-common": "^106.0.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.1.0",
@@ -43,16 +43,16 @@
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^69.2.0",
-		"@atlaskit/icon": "^26.3.0",
+		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/select": "^20.6.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.0.0",
+		"@atlaskit/tmp-editor-statsig": "^5.2.0",
 		"@atlaskit/tokens": "^4.9.0",
-		"@atlaskit/tooltip": "^20.0.0",
+		"@atlaskit/tooltip": "^20.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -154,6 +154,9 @@
 		},
 		"platform_editor_interaction_api_refactor": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_rerender_optimization": {
+			"type": "boolean"
 		}
 	}
 }