@atlaskit/editor-plugin-text-formatting 2.2.10 → 2.2.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 2.2.12
+
+### Patch Changes
+
+- [#161143](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161143)
+  [`6247656fbff10`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6247656fbff10) -
+  [ED-28106] Fix toolbar pinning from table cell selections breaking the toolbar
+- Updated dependencies
+
+## 2.2.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
+
 ## 2.2.10
 
 ### Patch Changes

package/dist/cjs/textFormattingPlugin.js

@@ -8,6 +8,7 @@ exports.textFormattingPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _clearFormatting = require("./pm-plugins/clear-formatting");
 var _clearFormattingKeymap = _interopRequireDefault(require("./pm-plugins/clear-formatting-keymap"));
@@ -37,6 +38,18 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
       toolbarSize = _ref2.toolbarSize,
       disabled = _ref2.disabled;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_rerender_optimization')) {
+      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponentMemoized, {
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        isReducedSpacing: isToolbarReducedSpacing,
+        editorView: editorView,
+        disabled: disabled,
+        shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
+      });
+    }
     return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
       api: api,
       popupsMountPoint: popupsMountPoint,

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
+exports.PrimaryToolbarComponentMemoized = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
@@ -112,4 +113,5 @@ function PrimaryToolbarComponent(_ref) {
     api: api,
     toolbarType: _types.ToolbarType.PRIMARY
   });
-}
+}
+var PrimaryToolbarComponentMemoized = exports.PrimaryToolbarComponentMemoized = /*#__PURE__*/_react.default.memo(PrimaryToolbarComponent);

package/dist/cjs/ui/Toolbar/formatting-in-selection-utils.js

@@ -32,7 +32,7 @@ var hasMultiplePartsWithFormattingInSelection = exports.hasMultiplePartsWithForm
 };
 var getCommonActiveMarks = exports.getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
   var selectedContent = _ref2.selectedContent;
-  if (!selectedContent) {
+  if (!selectedContent || selectedContent.length === 0) {
     return [];
   }
   // filter out fragment node contains only spaces

package/dist/es2019/textFormattingPlugin.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
@@ -11,7 +12,7 @@ import { plugin as pmPlugin } from './pm-plugins/main';
 import { pluginKey as textFormattingPluginKey } from './pm-plugins/plugin-key';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
 import { FloatingToolbarTextFormalWithIntl as FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
-import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { PrimaryToolbarComponent, PrimaryToolbarComponentMemoized } from './ui/PrimaryToolbarComponent';
 
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -30,6 +31,18 @@ export const textFormattingPlugin = ({
     toolbarSize,
     disabled
   }) => {
+    if (fg('platform_editor_toolbar_rerender_optimization')) {
+      return /*#__PURE__*/React.createElement(PrimaryToolbarComponentMemoized, {
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        isReducedSpacing: isToolbarReducedSpacing,
+        editorView: editorView,
+        disabled: disabled,
+        shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
+      });
+    }
     return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
       api: api,
       popupsMountPoint: popupsMountPoint,

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -107,4 +107,5 @@ export function PrimaryToolbarComponent({
     api: api,
     toolbarType: ToolbarType.PRIMARY
   });
-}
+}
+export const PrimaryToolbarComponentMemoized = /*#__PURE__*/React.memo(PrimaryToolbarComponent);

package/dist/es2019/ui/Toolbar/formatting-in-selection-utils.js

@@ -20,7 +20,7 @@ export const hasMultiplePartsWithFormattingInSelection = ({
 export const getCommonActiveMarks = ({
   selectedContent
 }) => {
-  if (!selectedContent) {
+  if (!selectedContent || selectedContent.length === 0) {
     return [];
   }
   // filter out fragment node contains only spaces

package/dist/esm/textFormattingPlugin.js

@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
@@ -14,7 +15,7 @@ import { plugin as pmPlugin } from './pm-plugins/main';
 import { pluginKey as textFormattingPluginKey } from './pm-plugins/plugin-key';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
 import { FloatingToolbarTextFormalWithIntl as FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
-import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { PrimaryToolbarComponent, PrimaryToolbarComponentMemoized } from './ui/PrimaryToolbarComponent';
 
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -31,6 +32,18 @@ export var textFormattingPlugin = function textFormattingPlugin(_ref) {
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
       toolbarSize = _ref2.toolbarSize,
       disabled = _ref2.disabled;
+    if (fg('platform_editor_toolbar_rerender_optimization')) {
+      return /*#__PURE__*/React.createElement(PrimaryToolbarComponentMemoized, {
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        isReducedSpacing: isToolbarReducedSpacing,
+        editorView: editorView,
+        disabled: disabled,
+        shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
+      });
+    }
     return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
       api: api,
       popupsMountPoint: popupsMountPoint,

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -105,4 +105,5 @@ export function PrimaryToolbarComponent(_ref) {
     api: api,
     toolbarType: ToolbarType.PRIMARY
   });
-}
+}
+export var PrimaryToolbarComponentMemoized = /*#__PURE__*/React.memo(PrimaryToolbarComponent);

package/dist/esm/ui/Toolbar/formatting-in-selection-utils.js

@@ -26,7 +26,7 @@ export var hasMultiplePartsWithFormattingInSelection = function hasMultipleParts
 };
 export var getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
   var selectedContent = _ref2.selectedContent;
-  if (!selectedContent) {
+  if (!selectedContent || selectedContent.length === 0) {
     return [];
   }
   // filter out fragment node contains only spaces

package/dist/types/ui/PrimaryToolbarComponent.d.ts

@@ -13,4 +13,5 @@ interface PrimaryToolbarComponentProps {
     shouldUseResponsiveToolbar: boolean;
 }
 export declare function PrimaryToolbarComponent({ api, popupsMountPoint, popupsScrollableElement, toolbarSize, editorView, disabled, isReducedSpacing, shouldUseResponsiveToolbar, }: PrimaryToolbarComponentProps): React.JSX.Element;
+export declare const PrimaryToolbarComponentMemoized: React.MemoExoticComponent<typeof PrimaryToolbarComponent>;
 export {};

package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts

@@ -13,4 +13,5 @@ interface PrimaryToolbarComponentProps {
     shouldUseResponsiveToolbar: boolean;
 }
 export declare function PrimaryToolbarComponent({ api, popupsMountPoint, popupsScrollableElement, toolbarSize, editorView, disabled, isReducedSpacing, shouldUseResponsiveToolbar, }: PrimaryToolbarComponentProps): React.JSX.Element;
+export declare const PrimaryToolbarComponentMemoized: React.MemoExoticComponent<typeof PrimaryToolbarComponent>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-formatting",
-	"version": "2.2.10",
+	"version": "2.2.12",
 	"description": "Text-formatting plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.10.0",
+		"@atlaskit/editor-common": "^105.11.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-base": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/icon": "^26.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/tmp-editor-statsig": "^5.0.0",
+		"@atlaskit/tmp-editor-statsig": "^5.1.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -124,6 +124,9 @@
 		},
 		"platform_editor_controls_patch_7": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_rerender_optimization": {
+			"type": "boolean"
 		}
 	}
 }