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

package/AGENTS.md

@@ -65,24 +65,24 @@ src/
 
 ### Editor Actions
 
-This package exposes top-level **editor actions** (in `editor-actions/index.ts`)
-that products call from outside the plugin lifecycle:
+This package exposes top-level **editor actions** (in `editor-actions/index.ts`) that products call
+from outside the plugin lifecycle:
 
 - `flushBodiedSyncBlocks(store)` — flush all dirty source blocks
 - `flushSyncBlocks(store)` — flush reference manager (e.g. on save)
-- `discardUnpublishedSyncBlocks(store)` — delete unpublished blocks on cancel
-  (added in EDITOR-6473; used by Confluence's editor cancel flow)
+- `discardUnpublishedSyncBlocks(store)` — delete unpublished blocks on cancel (added in EDITOR-6473;
+  used by Confluence's editor cancel flow)
 
 ### Lazy Init & Perf (EDITOR-6928 / EDITOR-6930)
 
 Behind the `editor_synced_block_perf` experiment, `main.ts`:
-- Skips creating synced-block plugin state and node-views for documents
-  with no synced blocks (`hasSyncedBlocks(doc)`).
-- Computes `statusDecorationSet` inside `apply()` and stores it on plugin
-  state, then exposes it via an O(1) `decorations` prop instead of an
-  O(n) `doc.descendants()` walk on every transaction.
-- Uses `sourceSyncBlockStoreManager.hasPendingCreations()` for an O(1)
-  pending-creation early return in `buildStatusDecorations()`.
+
+- Skips creating synced-block plugin state and node-views for documents with no synced blocks
+  (`hasSyncedBlocks(doc)`).
+- Computes `statusDecorationSet` inside `apply()` and stores it on plugin state, then exposes it via
+  an O(1) `decorations` prop instead of an O(n) `doc.descendants()` walk on every transaction.
+- Uses `sourceSyncBlockStoreManager.hasPendingCreations()` for an O(1) pending-creation early return
+  in `buildStatusDecorations()`.
 
 ### Key Code Patterns
 

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 8.2.11
+
+### Patch Changes
+
+- [`a160344820ea5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a160344820ea5) -
+  EDITOR-6929: Fix React re-render cascade by (1) returning same plugin state reference from apply()
+  when nothing changed, (2) memoizing getSharedState to return a stable reference, and (3) guarding
+  contentComponent to skip rendering when hasSyncedBlocks is false. All gated behind
+  editor_synced_block_perf experiment.
+- Updated dependencies
+
+## 8.2.10
+
+### Patch Changes
+
+- [`0a702a2b251d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a702a2b251d1) -
+  Guard menuAndToolbarExperiencesPlugin DOM listeners and floatingToolbar config behind
+  hasSyncedBlocks to avoid unnecessary work on pages without synced blocks
+- Updated dependencies
+
 ## 8.2.9
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -357,7 +357,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         // When the perf gate is ON and the doc has synced blocks we do a
         // single traversal here; afterwards `apply()` will map or rebuild
         // only when a status signal changes.
-        var initStatusDecorationSet = (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true) && docHasSyncedBlocks ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : _view.DecorationSet.empty;
+        var initStatusDecorationSet = docHasSyncedBlocks && (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true) ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : _view.DecorationSet.empty;
         return {
           selectionDecorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
@@ -374,6 +374,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       apply: function apply(tr, currentPluginState, oldEditorState) {
         var _meta$activeFlag, _meta$bodiedSyncBlock;
         var meta = tr.getMeta(syncedBlockPluginKey);
+        var isPerfExperimentOn = (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true);
         var activeFlag = currentPluginState.activeFlag,
           selectionDecorationSet = currentPluginState.selectionDecorationSet,
           bodiedSyncBlockDeletionStatus = currentPluginState.bodiedSyncBlockDeletionStatus,
@@ -387,11 +388,19 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         // Lazy-init bookkeeping: once a synced block enters the document we
         // flip `hasSyncedBlocks` to `true` for the lifetime of this editor
         var nextHasSyncedBlocks = prevHasSyncedBlocks;
-        if (!prevHasSyncedBlocks && tr.docChanged && (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true)) {
+        if (!prevHasSyncedBlocks && tr.docChanged && isPerfExperimentOn) {
           if ((0, _transactionInsertsSyncedBlock.transactionInsertsSyncedBlock)(tr)) {
             nextHasSyncedBlocks = true;
           }
         }
+
+        // --- Fast path (EDITOR-6929): when `hasSyncedBlocks` is false,
+        // no meta is set, and the selection/doc haven't changed in a way
+        // that affects our state, return the SAME object reference so
+        // SharedStateAPI skips notifying subscribers. ---
+        if (!nextHasSyncedBlocks && !meta && !tr.docChanged && tr.selection.eq(oldEditorState.selection) && isPerfExperimentOn) {
+          return currentPluginState;
+        }
         var newDecorationSet = tr.docChanged ? selectionDecorationSet.map(tr.mapping, tr.doc) // only map if document changed
         : selectionDecorationSet;
         if (!tr.selection.eq(oldEditorState.selection)) {
@@ -415,7 +424,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         var nextIsOffline = prevOffline;
         var nextIsViewMode = prevViewMode;
         var nextIsDragging = prevDragging;
-        if ((0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true)) {
+        if (isPerfExperimentOn) {
           if (!nextHasSyncedBlocks) {
             // No synced blocks → keep empty status decorations
             nextStatusDecorationSet = _view.DecorationSet.empty;
@@ -444,14 +453,24 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         }
         var newPosEntry = meta === null || meta === void 0 ? void 0 : meta.retryCreationPos;
         var newRetryCreationPosMap = mapRetryCreationPosMap(retryCreationPosMap, newPosEntry, tr.mapping.map.bind(tr.mapping));
+        var nextActiveFlag = (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag;
+        var nextBodiedSyncBlockDeletionStatus = (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus;
+        var nextHasUnsavedBodiedSyncBlockChanges = syncBlockStore.sourceManager.hasUnsavedChanges();
+
+        // --- Reference equality (EDITOR-6929): return the same object
+        // when ALL fields are reference-equal to avoid SharedStateAPI
+        // notifying subscribers and triggering React re-renders. ---
+        if (nextActiveFlag === activeFlag && newDecorationSet === selectionDecorationSet && newRetryCreationPosMap === retryCreationPosMap && nextHasSyncedBlocks === prevHasSyncedBlocks && nextBodiedSyncBlockDeletionStatus === bodiedSyncBlockDeletionStatus && nextHasUnsavedBodiedSyncBlockChanges === currentPluginState.hasUnsavedBodiedSyncBlockChanges && nextStatusDecorationSet === prevStatusDecorationSet && nextIsOffline === prevOffline && nextIsViewMode === prevViewMode && nextIsDragging === prevDragging && isPerfExperimentOn) {
+          return currentPluginState;
+        }
         return {
-          activeFlag: (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag,
+          activeFlag: nextActiveFlag,
           selectionDecorationSet: newDecorationSet,
           syncBlockStore: syncBlockStore,
           retryCreationPosMap: newRetryCreationPosMap,
           hasSyncedBlocks: nextHasSyncedBlocks,
-          bodiedSyncBlockDeletionStatus: (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus,
-          hasUnsavedBodiedSyncBlockChanges: syncBlockStore.sourceManager.hasUnsavedChanges(),
+          bodiedSyncBlockDeletionStatus: nextBodiedSyncBlockDeletionStatus,
+          hasUnsavedBodiedSyncBlockChanges: nextHasUnsavedBodiedSyncBlockChanges,
           statusDecorationSet: nextStatusDecorationSet,
           prevIsOffline: nextIsOffline,
           prevIsViewMode: nextIsViewMode,

package/dist/cjs/pm-plugins/menu-and-toolbar-experiences.js

@@ -12,7 +12,9 @@ var _experiences = require("@atlaskit/editor-common/experiences");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../types");
+var _main = require("./main");
 var TIMEOUT_DURATION = 30000;
 var pluginKey = new _state.PluginKey('syncedBlockMenuAndToolbarExperience');
 var SYNCED_BLOCK_BUTTON_TEST_IDS = Object.values(_types.SYNCED_BLOCK_BUTTON_TEST_ID);
@@ -96,69 +98,106 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
       durationMs: TIMEOUT_DURATION
     }), syncedLocationsDropdownOpenedCheck()]
   });
-  var unbindClickListener = (0, _bindEventListener.bind)(document, {
-    type: 'click',
-    listener: function listener(event) {
-      var target = event.target;
-      if (!target) {
-        return;
-      }
-      var button = target.closest('button[data-testid]');
-      if (!button || !(button instanceof HTMLButtonElement)) {
-        return;
-      }
-      var testId = button.dataset.testid;
-      if (!isSyncedBlockButtonId(testId)) {
-        return;
-      }
-      if (button.disabled) {
-        return;
-      }
-      handleButtonClick({
-        testId: testId,
-        button: button,
-        createSourcePrimaryToolbarExperience: createSourcePrimaryToolbarExperience,
-        createSourceBlockMenuExperience: createSourceBlockMenuExperience,
-        createSourceQuickInsertMenuExperience: createSourceQuickInsertMenuExperience,
-        deleteReferenceSyncedBlockExperience: deleteReferenceSyncedBlockExperience,
-        unsyncReferenceSyncedBlockExperience: unsyncReferenceSyncedBlockExperience,
-        unsyncSourceSyncedBlockExperience: unsyncSourceSyncedBlockExperience,
-        deleteSourceSyncedBlockExperience: deleteSourceSyncedBlockExperience,
-        syncedLocationsExperience: syncedLocationsExperience
-      });
-    },
-    options: {
-      capture: true
-    }
-  });
-  var unbindKeydownListener = (0, _bindEventListener.bind)(document, {
-    type: 'keydown',
-    listener: function listener(event) {
-      if (isEnterKey(event.key)) {
-        var typeaheadPopup = (0, _experiences.popupWithNestedElement)(getPopupsTarget(), '.fabric-editor-typeahead');
-        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+  var bindListeners = function bindListeners() {
+    var unbindClickListener = (0, _bindEventListener.bind)(document, {
+      type: 'click',
+      listener: function listener(event) {
+        var target = event.target;
+        if (!target) {
+          return;
+        }
+        var button = target.closest('button[data-testid]');
+        if (!button || !(button instanceof HTMLButtonElement)) {
           return;
         }
-        var targetElement = (0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
-        if (!targetElement || !(targetElement instanceof HTMLElement)) {
+        var testId = button.dataset.testid;
+        if (!isSyncedBlockButtonId(testId)) {
           return;
         }
-        var testId = targetElement.dataset.testid;
-        if (testId === _types.SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
-          createSourceQuickInsertMenuExperience.start();
+        if (button.disabled) {
+          return;
         }
+        handleButtonClick({
+          testId: testId,
+          button: button,
+          createSourcePrimaryToolbarExperience: createSourcePrimaryToolbarExperience,
+          createSourceBlockMenuExperience: createSourceBlockMenuExperience,
+          createSourceQuickInsertMenuExperience: createSourceQuickInsertMenuExperience,
+          deleteReferenceSyncedBlockExperience: deleteReferenceSyncedBlockExperience,
+          unsyncReferenceSyncedBlockExperience: unsyncReferenceSyncedBlockExperience,
+          unsyncSourceSyncedBlockExperience: unsyncSourceSyncedBlockExperience,
+          deleteSourceSyncedBlockExperience: deleteSourceSyncedBlockExperience,
+          syncedLocationsExperience: syncedLocationsExperience
+        });
+      },
+      options: {
+        capture: true
       }
-    },
-    options: {
-      capture: true
-    }
-  });
+    });
+    var unbindKeydownListener = (0, _bindEventListener.bind)(document, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (isEnterKey(event.key)) {
+          var typeaheadPopup = (0, _experiences.popupWithNestedElement)(getPopupsTarget(), '.fabric-editor-typeahead');
+          if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+            return;
+          }
+          var targetElement = (0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
+          if (!targetElement || !(targetElement instanceof HTMLElement)) {
+            return;
+          }
+          var testId = targetElement.dataset.testid;
+          if (testId === _types.SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
+            createSourceQuickInsertMenuExperience.start();
+          }
+        }
+      },
+      options: {
+        capture: true
+      }
+    });
+    return {
+      unbindClickListener: unbindClickListener,
+      unbindKeydownListener: unbindKeydownListener
+    };
+  };
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     view: function view(_view) {
+      var _syncedBlockPluginKey;
       editorViewRef.current = _view;
+
+      // Track whether listeners have been bound. When the experiment is
+      // ON and the document initially has no synced blocks, we defer
+      // binding until `update()` detects that `hasSyncedBlocks` has
+      // flipped to `true` (e.g. via paste or collab insert). This avoids
+      // the ~2-5 ms TBT cost of capture-phase click/keydown handlers on
+      // the ~99.97 % of pages that never use synced blocks (EDITOR-6931).
+      var listenersBound = false;
+      var unbindClickListener;
+      var unbindKeydownListener;
+      var ensureListenersBound = function ensureListenersBound() {
+        if (listenersBound) {
+          return;
+        }
+        listenersBound = true;
+        var unbinders = bindListeners();
+        unbindClickListener = unbinders.unbindClickListener;
+        unbindKeydownListener = unbinders.unbindKeydownListener;
+      };
+      if ((_syncedBlockPluginKey = _main.syncedBlockPluginKey.getState(_view.state)) !== null && _syncedBlockPluginKey !== void 0 && _syncedBlockPluginKey.hasSyncedBlocks || !(0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true)) {
+        ensureListenersBound();
+      }
       return {
+        update: function update(view, prevState) {
+          var _syncedBlockPluginKey2;
+          if (!listenersBound && view.state.doc !== prevState.doc && (_syncedBlockPluginKey2 = _main.syncedBlockPluginKey.getState(view.state)) !== null && _syncedBlockPluginKey2 !== void 0 && _syncedBlockPluginKey2.hasSyncedBlocks && (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true)) {
+            // Bind listeners now that synced blocks are present.
+            ensureListenersBound();
+          }
+        },
         destroy: function destroy() {
+          var _unbindClickListener, _unbindKeydownListene;
           createSourcePrimaryToolbarExperience.abort({
             reason: 'editorDestroyed'
           });
@@ -183,8 +222,8 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
           syncedLocationsExperience === null || syncedLocationsExperience === void 0 || syncedLocationsExperience.abort({
             reason: 'editorDestroyed'
           });
-          unbindClickListener();
-          unbindKeydownListener();
+          (_unbindClickListener = unbindClickListener) === null || _unbindClickListener === void 0 || _unbindClickListener();
+          (_unbindKeydownListene = unbindKeydownListener) === null || _unbindKeydownListene === void 0 || _unbindKeydownListene();
         }
       };
     }

package/dist/cjs/syncedBlockPlugin.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.syncedBlockPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
@@ -21,14 +23,50 @@ var _floatingToolbar = require("./ui/floating-toolbar");
 var _quickInsert = require("./ui/quick-insert");
 var _SyncBlockRefresher = require("./ui/SyncBlockRefresher");
 var _toolbarComponents = require("./ui/toolbar-components");
-var syncedBlockPlugin = exports.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 = (0, _hooks.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 && (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SyncBlockRefresher.SyncBlockRefresher, {
+    syncBlockStoreManager: syncBlockStoreManager,
+    api: api
+  }), /*#__PURE__*/_react.default.createElement(_DeleteConfirmationModal.DeleteConfirmationModal, {
+    syncBlockStoreManager: syncBlockStoreManager,
+    api: api
+  }), /*#__PURE__*/_react.default.createElement(_Flag.Flag, {
+    api: api
+  }));
+};
+var syncedBlockPlugin = exports.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 _editorSyncedBlockProvider.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider, viewMode, config === null || config === void 0 ? void 0 : config.__livePage);
+  var isPerfExperimentOn = (0, _expValEquals.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((0, _blockMenuComponents.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((0, _toolbarComponents.getToolbarComponents)(api, (_config$enableSourceC2 = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC2 !== void 0 ? _config$enableSourceC2 : false));
   return {
@@ -70,9 +108,9 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         return (0, _editorCommands.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;
           }
@@ -98,38 +136,49 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
     pluginsOptions: {
       quickInsert: (0, _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 = _main.syncedBlockPluginKey.getState(state)) !== null && _syncedBlockPluginKey !== void 0 && _syncedBlockPluginKey.hasSyncedBlocks) && isPerfExperimentOn) {
+          return undefined;
+        }
         return (0, _floatingToolbar.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SyncBlockRefresher.SyncBlockRefresher, {
-        syncBlockStoreManager: syncBlockStore,
+      return /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
+        syncBlockStore: syncBlockStore,
         api: api
-      }), /*#__PURE__*/_react.default.createElement(_DeleteConfirmationModal.DeleteConfirmationModal, {
-        syncBlockStoreManager: syncBlockStore,
-        api: api
-      }), /*#__PURE__*/_react.default.createElement(_Flag.Flag, {
-        api: api
-      }));
+      });
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {
         return;
       }
-      var _syncedBlockPluginKey = _main.syncedBlockPluginKey.getState(editorState),
-        activeFlag = _syncedBlockPluginKey.activeFlag,
-        currentSyncBlockStore = _syncedBlockPluginKey.syncBlockStore,
-        bodiedSyncBlockDeletionStatus = _syncedBlockPluginKey.bodiedSyncBlockDeletionStatus,
-        retryCreationPosMap = _syncedBlockPluginKey.retryCreationPosMap,
-        hasSyncedBlocks = _syncedBlockPluginKey.hasSyncedBlocks,
-        hasUnsavedBodiedSyncBlockChanges = _syncedBlockPluginKey.hasUnsavedBodiedSyncBlockChanges;
-      return {
+      var pluginState = _main.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 && (0, _expValEquals.expValEquals)('editor_synced_block_perf', 'isEnabled', true)) {
+        return cachedSharedState;
+      }
+      var nextSharedState = {
         activeFlag: activeFlag,
         syncBlockStore: currentSyncBlockStore,
         bodiedSyncBlockDeletionStatus: bodiedSyncBlockDeletionStatus,
@@ -137,6 +186,8 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         hasSyncedBlocks: hasSyncedBlocks,
         hasUnsavedBodiedSyncBlockChanges: hasUnsavedBodiedSyncBlockChanges
       };
+      cachedSharedState = nextSharedState;
+      return nextSharedState;
     }
   };
 };

package/dist/es2019/pm-plugins/main.js

@@ -324,7 +324,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         // When the perf gate is ON and the doc has synced blocks we do a
         // single traversal here; afterwards `apply()` will map or rebuild
         // only when a status signal changes.
-        const initStatusDecorationSet = expValEquals('editor_synced_block_perf', 'isEnabled', true) && docHasSyncedBlocks ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : DecorationSet.empty;
+        const initStatusDecorationSet = docHasSyncedBlocks && expValEquals('editor_synced_block_perf', 'isEnabled', true) ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : DecorationSet.empty;
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
@@ -341,6 +341,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       apply: (tr, currentPluginState, oldEditorState) => {
         var _meta$activeFlag, _meta$bodiedSyncBlock;
         const meta = tr.getMeta(syncedBlockPluginKey);
+        const isPerfExperimentOn = expValEquals('editor_synced_block_perf', 'isEnabled', true);
         const {
           activeFlag,
           selectionDecorationSet,
@@ -356,11 +357,19 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         // Lazy-init bookkeeping: once a synced block enters the document we
         // flip `hasSyncedBlocks` to `true` for the lifetime of this editor
         let nextHasSyncedBlocks = prevHasSyncedBlocks;
-        if (!prevHasSyncedBlocks && tr.docChanged && expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+        if (!prevHasSyncedBlocks && tr.docChanged && isPerfExperimentOn) {
           if (transactionInsertsSyncedBlock(tr)) {
             nextHasSyncedBlocks = true;
           }
         }
+
+        // --- Fast path (EDITOR-6929): when `hasSyncedBlocks` is false,
+        // no meta is set, and the selection/doc haven't changed in a way
+        // that affects our state, return the SAME object reference so
+        // SharedStateAPI skips notifying subscribers. ---
+        if (!nextHasSyncedBlocks && !meta && !tr.docChanged && tr.selection.eq(oldEditorState.selection) && isPerfExperimentOn) {
+          return currentPluginState;
+        }
         let newDecorationSet = tr.docChanged ? selectionDecorationSet.map(tr.mapping, tr.doc) // only map if document changed
         : selectionDecorationSet;
         if (!tr.selection.eq(oldEditorState.selection)) {
@@ -384,7 +393,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         let nextIsOffline = prevOffline;
         let nextIsViewMode = prevViewMode;
         let nextIsDragging = prevDragging;
-        if (expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+        if (isPerfExperimentOn) {
           if (!nextHasSyncedBlocks) {
             // No synced blocks → keep empty status decorations
             nextStatusDecorationSet = DecorationSet.empty;
@@ -413,14 +422,24 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         }
         const newPosEntry = meta === null || meta === void 0 ? void 0 : meta.retryCreationPos;
         const newRetryCreationPosMap = mapRetryCreationPosMap(retryCreationPosMap, newPosEntry, tr.mapping.map.bind(tr.mapping));
+        const nextActiveFlag = (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag;
+        const nextBodiedSyncBlockDeletionStatus = (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus;
+        const nextHasUnsavedBodiedSyncBlockChanges = syncBlockStore.sourceManager.hasUnsavedChanges();
+
+        // --- Reference equality (EDITOR-6929): return the same object
+        // when ALL fields are reference-equal to avoid SharedStateAPI
+        // notifying subscribers and triggering React re-renders. ---
+        if (nextActiveFlag === activeFlag && newDecorationSet === selectionDecorationSet && newRetryCreationPosMap === retryCreationPosMap && nextHasSyncedBlocks === prevHasSyncedBlocks && nextBodiedSyncBlockDeletionStatus === bodiedSyncBlockDeletionStatus && nextHasUnsavedBodiedSyncBlockChanges === currentPluginState.hasUnsavedBodiedSyncBlockChanges && nextStatusDecorationSet === prevStatusDecorationSet && nextIsOffline === prevOffline && nextIsViewMode === prevViewMode && nextIsDragging === prevDragging && isPerfExperimentOn) {
+          return currentPluginState;
+        }
         return {
-          activeFlag: (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag,
+          activeFlag: nextActiveFlag,
           selectionDecorationSet: newDecorationSet,
           syncBlockStore: syncBlockStore,
           retryCreationPosMap: newRetryCreationPosMap,
           hasSyncedBlocks: nextHasSyncedBlocks,
-          bodiedSyncBlockDeletionStatus: (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus,
-          hasUnsavedBodiedSyncBlockChanges: syncBlockStore.sourceManager.hasUnsavedChanges(),
+          bodiedSyncBlockDeletionStatus: nextBodiedSyncBlockDeletionStatus,
+          hasUnsavedBodiedSyncBlockChanges: nextHasUnsavedBodiedSyncBlockChanges,
           statusDecorationSet: nextStatusDecorationSet,
           prevIsOffline: nextIsOffline,
           prevIsViewMode: nextIsViewMode,