@atlaskit/editor-plugin-synced-block 8.2.9 → 8.2.11

package/dist/esm/syncedBlockPlugin.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { syncBlock, bodiedSyncBlock } from '@atlaskit/adf-schema';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { flushBodiedSyncBlocks as _flushBodiedSyncBlocks, flushSyncBlocks, discardUnpublishedSyncBlocks as _discardUnpublishedSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
@@ -14,14 +16,51 @@ import { getToolbarConfig } from './ui/floating-toolbar';
 import { getQuickInsertConfig } from './ui/quick-insert';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
 import { getToolbarComponents } from './ui/toolbar-components';
-export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
-  var _api$editorViewMode, _api$analytics, _api$blockMenu, _config$enableSourceC, _api$toolbar, _config$enableSourceC2;
-  var config = _ref.config,
+
+/**
+ * EDITOR-6929 / PR-G: Guard contentComponent rendering.
+ * When `hasSyncedBlocks` is false return null
+ * to avoid mounting SyncBlockRefresher, DeleteConfirmationModal, and Flag —
+ * their hooks (useSharedPluginStateWithSelector) would execute selectors on
+ * every transaction for no benefit on the ~99.98% of pages with zero synced
+ * blocks.
+ */
+var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
+  var syncBlockStoreManager = _ref.syncBlockStore,
     api = _ref.api;
+  var hasSyncBlocks = useSharedPluginStateWithSelector(api, ['syncedBlock'], function (states) {
+    var _states$syncedBlockSt;
+    return (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.hasSyncedBlocks;
+  });
+  if (!hasSyncBlocks && expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
+    syncBlockStoreManager: syncBlockStoreManager,
+    api: api
+  }), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
+    syncBlockStoreManager: syncBlockStoreManager,
+    api: api
+  }), /*#__PURE__*/React.createElement(Flag, {
+    api: api
+  }));
+};
+export var syncedBlockPlugin = function syncedBlockPlugin(_ref2) {
+  var _api$editorViewMode, _api$analytics, _api$blockMenu, _config$enableSourceC, _api$toolbar, _config$enableSourceC2;
+  var config = _ref2.config,
+    api = _ref2.api;
   var refs = {};
   var viewMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
   var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider, viewMode, config === null || config === void 0 ? void 0 : config.__livePage);
+  var isPerfExperimentOn = expValEquals('editor_synced_block_perf', 'isEnabled', true);
   syncBlockStore.setFireAnalyticsEvent(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent);
+
+  // --- Memoized getSharedState (EDITOR-6929 / PR-F) ---
+  // Cache the last returned shared state object. On each call, perform a
+  // shallow comparison of all fields against the cached value. If nothing
+  // changed, return the cached reference so SharedStateAPI subscribers
+  // (React components) skip re-rendering.
+  var cachedSharedState;
   api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api, (_config$enableSourceC = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC !== void 0 ? _config$enableSourceC : false));
   api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api, (_config$enableSourceC2 = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC2 !== void 0 ? _config$enableSourceC2 : false));
   return {
@@ -63,9 +102,9 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         return copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, inputMethod, api);
       },
       insertSyncedBlock: function insertSyncedBlock() {
-        return function (_ref2) {
+        return function (_ref3) {
           var _api$analytics3;
-          var tr = _ref2.tr;
+          var tr = _ref3.tr;
           if (!(config !== null && config !== void 0 && config.enableSourceCreation)) {
             return null;
           }
@@ -91,38 +130,49 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
     pluginsOptions: {
       quickInsert: getQuickInsertConfig(config, api, syncBlockStore),
       floatingToolbar: function floatingToolbar(state, intl) {
+        var _syncedBlockPluginKey;
+        // When the experiment is ON and the document has no synced blocks,
+        // skip the toolbar config entirely to avoid the per-selection-change
+        // cost of findSyncBlockOrBodiedSyncBlock (EDITOR-6931).
+        // Save the expValEquals('editor_synced_block_perf', 'isEnabled', true) in a const
+        // because floatingToolbar is called on every selection change.
+        // computing it once at plugin initialisation is more efficient.
+        if (!((_syncedBlockPluginKey = syncedBlockPluginKey.getState(state)) !== null && _syncedBlockPluginKey !== void 0 && _syncedBlockPluginKey.hasSyncedBlocks) && isPerfExperimentOn) {
+          return undefined;
+        }
         return getToolbarConfig(state, intl, api, syncBlockStore);
       }
     },
-    contentComponent: function contentComponent(_ref3) {
-      var containerElement = _ref3.containerElement,
-        wrapperElement = _ref3.wrapperElement,
-        popupsMountPoint = _ref3.popupsMountPoint;
+    contentComponent: function contentComponent(_ref4) {
+      var containerElement = _ref4.containerElement,
+        wrapperElement = _ref4.wrapperElement,
+        popupsMountPoint = _ref4.popupsMountPoint;
       refs.containerElement = containerElement || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
-        syncBlockStoreManager: syncBlockStore,
+      return /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
+        syncBlockStore: syncBlockStore,
         api: api
-      }), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
-        syncBlockStoreManager: syncBlockStore,
-        api: api
-      }), /*#__PURE__*/React.createElement(Flag, {
-        api: api
-      }));
+      });
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {
         return;
       }
-      var _syncedBlockPluginKey = syncedBlockPluginKey.getState(editorState),
-        activeFlag = _syncedBlockPluginKey.activeFlag,
-        currentSyncBlockStore = _syncedBlockPluginKey.syncBlockStore,
-        bodiedSyncBlockDeletionStatus = _syncedBlockPluginKey.bodiedSyncBlockDeletionStatus,
-        retryCreationPosMap = _syncedBlockPluginKey.retryCreationPosMap,
-        hasSyncedBlocks = _syncedBlockPluginKey.hasSyncedBlocks,
-        hasUnsavedBodiedSyncBlockChanges = _syncedBlockPluginKey.hasUnsavedBodiedSyncBlockChanges;
-      return {
+      var pluginState = syncedBlockPluginKey.getState(editorState);
+      var activeFlag = pluginState.activeFlag,
+        currentSyncBlockStore = pluginState.syncBlockStore,
+        bodiedSyncBlockDeletionStatus = pluginState.bodiedSyncBlockDeletionStatus,
+        retryCreationPosMap = pluginState.retryCreationPosMap,
+        hasSyncedBlocks = pluginState.hasSyncedBlocks,
+        hasUnsavedBodiedSyncBlockChanges = pluginState.hasUnsavedBodiedSyncBlockChanges;
+
+      // --- EDITOR-6929 / PR-F: return a stable reference when all
+      // fields are unchanged to prevent unnecessary React re-renders. ---
+      if (cachedSharedState !== undefined && cachedSharedState.activeFlag === activeFlag && cachedSharedState.syncBlockStore === currentSyncBlockStore && cachedSharedState.bodiedSyncBlockDeletionStatus === bodiedSyncBlockDeletionStatus && cachedSharedState.retryCreationPosMap === retryCreationPosMap && cachedSharedState.hasSyncedBlocks === hasSyncedBlocks && cachedSharedState.hasUnsavedBodiedSyncBlockChanges === hasUnsavedBodiedSyncBlockChanges && expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+        return cachedSharedState;
+      }
+      var nextSharedState = {
         activeFlag: activeFlag,
         syncBlockStore: currentSyncBlockStore,
         bodiedSyncBlockDeletionStatus: bodiedSyncBlockDeletionStatus,
@@ -130,6 +180,8 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         hasSyncedBlocks: hasSyncedBlocks,
         hasUnsavedBodiedSyncBlockChanges: hasUnsavedBodiedSyncBlockChanges
       };
+      cachedSharedState = nextSharedState;
+      return nextSharedState;
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "8.2.9",
+	"version": "8.2.11",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -54,8 +54,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "19.1.2",
-		"@atlaskit/tmp-editor-statsig": "^77.1.0",
-		"@atlaskit/tokens": "13.0.3",
+		"@atlaskit/tmp-editor-statsig": "^77.3.0",
+		"@atlaskit/tokens": "13.0.4",
 		"@atlaskit/tooltip": "^22.0.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.21.0",
+		"@atlaskit/editor-common": "^114.26.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},