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

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

@@ -4,7 +4,9 @@ import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckT
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
+import { syncedBlockPluginKey } from './main';
 const TIMEOUT_DURATION = 30000;
 const pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
 const SYNCED_BLOCK_BUTTON_TEST_IDS = Object.values(SYNCED_BLOCK_BUTTON_TEST_ID);
@@ -89,69 +91,106 @@ export const getMenuAndToolbarExperiencesPlugin = ({
       durationMs: TIMEOUT_DURATION
     }), syncedLocationsDropdownOpenedCheck()]
   });
-  const unbindClickListener = bind(document, {
-    type: 'click',
-    listener: event => {
-      const target = event.target;
-      if (!target) {
-        return;
-      }
-      const button = target.closest('button[data-testid]');
-      if (!button || !(button instanceof HTMLButtonElement)) {
-        return;
-      }
-      const testId = button.dataset.testid;
-      if (!isSyncedBlockButtonId(testId)) {
-        return;
-      }
-      if (button.disabled) {
-        return;
-      }
-      handleButtonClick({
-        testId,
-        button,
-        createSourcePrimaryToolbarExperience,
-        createSourceBlockMenuExperience,
-        createSourceQuickInsertMenuExperience,
-        deleteReferenceSyncedBlockExperience,
-        unsyncReferenceSyncedBlockExperience,
-        unsyncSourceSyncedBlockExperience,
-        deleteSourceSyncedBlockExperience,
-        syncedLocationsExperience
-      });
-    },
-    options: {
-      capture: true
-    }
-  });
-  const unbindKeydownListener = bind(document, {
-    type: 'keydown',
-    listener: event => {
-      if (isEnterKey(event.key)) {
-        const typeaheadPopup = popupWithNestedElement(getPopupsTarget(), '.fabric-editor-typeahead');
-        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+  const bindListeners = () => {
+    const unbindClickListener = bind(document, {
+      type: 'click',
+      listener: event => {
+        const target = event.target;
+        if (!target) {
+          return;
+        }
+        const button = target.closest('button[data-testid]');
+        if (!button || !(button instanceof HTMLButtonElement)) {
           return;
         }
-        const targetElement = fg('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
-        if (!targetElement || !(targetElement instanceof HTMLElement)) {
+        const testId = button.dataset.testid;
+        if (!isSyncedBlockButtonId(testId)) {
           return;
         }
-        const testId = targetElement.dataset.testid;
-        if (testId === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
-          createSourceQuickInsertMenuExperience.start();
+        if (button.disabled) {
+          return;
+        }
+        handleButtonClick({
+          testId,
+          button,
+          createSourcePrimaryToolbarExperience,
+          createSourceBlockMenuExperience,
+          createSourceQuickInsertMenuExperience,
+          deleteReferenceSyncedBlockExperience,
+          unsyncReferenceSyncedBlockExperience,
+          unsyncSourceSyncedBlockExperience,
+          deleteSourceSyncedBlockExperience,
+          syncedLocationsExperience
+        });
+      },
+      options: {
+        capture: true
+      }
+    });
+    const unbindKeydownListener = bind(document, {
+      type: 'keydown',
+      listener: event => {
+        if (isEnterKey(event.key)) {
+          const typeaheadPopup = popupWithNestedElement(getPopupsTarget(), '.fabric-editor-typeahead');
+          if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+            return;
+          }
+          const targetElement = fg('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
+          if (!targetElement || !(targetElement instanceof HTMLElement)) {
+            return;
+          }
+          const testId = targetElement.dataset.testid;
+          if (testId === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
+            createSourceQuickInsertMenuExperience.start();
+          }
         }
+      },
+      options: {
+        capture: true
       }
-    },
-    options: {
-      capture: true
-    }
-  });
+    });
+    return {
+      unbindClickListener,
+      unbindKeydownListener
+    };
+  };
   return new SafePlugin({
     key: pluginKey,
     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).
+      let listenersBound = false;
+      let unbindClickListener;
+      let unbindKeydownListener;
+      const ensureListenersBound = () => {
+        if (listenersBound) {
+          return;
+        }
+        listenersBound = true;
+        const unbinders = bindListeners();
+        unbindClickListener = unbinders.unbindClickListener;
+        unbindKeydownListener = unbinders.unbindKeydownListener;
+      };
+      if ((_syncedBlockPluginKey = syncedBlockPluginKey.getState(view.state)) !== null && _syncedBlockPluginKey !== void 0 && _syncedBlockPluginKey.hasSyncedBlocks || !expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+        ensureListenersBound();
+      }
       return {
+        update: (view, prevState) => {
+          var _syncedBlockPluginKey2;
+          if (!listenersBound && view.state.doc !== prevState.doc && (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(view.state)) !== null && _syncedBlockPluginKey2 !== void 0 && _syncedBlockPluginKey2.hasSyncedBlocks && expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+            // Bind listeners now that synced blocks are present.
+            ensureListenersBound();
+          }
+        },
         destroy: () => {
+          var _unbindClickListener, _unbindKeydownListene;
           createSourcePrimaryToolbarExperience.abort({
             reason: 'editorDestroyed'
           });
@@ -176,8 +215,8 @@ export const getMenuAndToolbarExperiencesPlugin = ({
           syncedLocationsExperience === null || syncedLocationsExperience === void 0 ? void 0 : syncedLocationsExperience.abort({
             reason: 'editorDestroyed'
           });
-          unbindClickListener();
-          unbindKeydownListener();
+          (_unbindClickListener = unbindClickListener) === null || _unbindClickListener === void 0 ? void 0 : _unbindClickListener();
+          (_unbindKeydownListene = unbindKeydownListener) === null || _unbindKeydownListene === void 0 ? void 0 : _unbindKeydownListene();
         }
       };
     }

package/dist/es2019/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, flushSyncBlocks, discardUnpublishedSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
@@ -14,6 +16,36 @@ import { getToolbarConfig } from './ui/floating-toolbar';
 import { getQuickInsertConfig } from './ui/quick-insert';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
 import { getToolbarComponents } from './ui/toolbar-components';
+
+/**
+ * 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.
+ */
+const LazySyncedBlockUI = ({
+  syncBlockStore: syncBlockStoreManager,
+  api
+}) => {
+  const hasSyncBlocks = useSharedPluginStateWithSelector(api, ['syncedBlock'], 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 const syncedBlockPlugin = ({
   config,
   api
@@ -22,7 +54,15 @@ export const syncedBlockPlugin = ({
   const refs = {};
   const viewMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
   const syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider, viewMode, config === null || config === void 0 ? void 0 : config.__livePage);
+  const isPerfExperimentOn = expValEquals('editor_synced_block_perf', 'isEnabled', true);
   syncBlockStore.setFireAnalyticsEvent(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.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.
+  let cachedSharedState;
   api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? 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 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? 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 {
@@ -84,7 +124,19 @@ export const syncedBlockPlugin = ({
     },
     pluginsOptions: {
       quickInsert: getQuickInsertConfig(config, api, syncBlockStore),
-      floatingToolbar: (state, intl) => getToolbarConfig(state, intl, api, syncBlockStore)
+      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: ({
       containerElement,
@@ -94,20 +146,16 @@ export const syncedBlockPlugin = ({
       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: editorState => {
       if (!editorState) {
         return;
       }
+      const pluginState = syncedBlockPluginKey.getState(editorState);
       const {
         activeFlag,
         syncBlockStore: currentSyncBlockStore,
@@ -115,8 +163,14 @@ export const syncedBlockPlugin = ({
         retryCreationPosMap,
         hasSyncedBlocks,
         hasUnsavedBodiedSyncBlockChanges
-      } = syncedBlockPluginKey.getState(editorState);
-      return {
+      } = pluginState;
+
+      // --- 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;
+      }
+      const nextSharedState = {
         activeFlag,
         syncBlockStore: currentSyncBlockStore,
         bodiedSyncBlockDeletionStatus,
@@ -124,6 +178,8 @@ export const syncedBlockPlugin = ({
         hasSyncedBlocks,
         hasUnsavedBodiedSyncBlockChanges
       };
+      cachedSharedState = nextSharedState;
+      return nextSharedState;
     }
   };
 };

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

@@ -350,7 +350,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         // 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 = expValEquals('editor_synced_block_perf', 'isEnabled', true) && docHasSyncedBlocks ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : DecorationSet.empty;
+        var 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,
@@ -367,6 +367,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       apply: function apply(tr, currentPluginState, oldEditorState) {
         var _meta$activeFlag, _meta$bodiedSyncBlock;
         var meta = tr.getMeta(syncedBlockPluginKey);
+        var isPerfExperimentOn = expValEquals('editor_synced_block_perf', 'isEnabled', true);
         var activeFlag = currentPluginState.activeFlag,
           selectionDecorationSet = currentPluginState.selectionDecorationSet,
           bodiedSyncBlockDeletionStatus = currentPluginState.bodiedSyncBlockDeletionStatus,
@@ -380,11 +381,19 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         // 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 && 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;
+        }
         var newDecorationSet = tr.docChanged ? selectionDecorationSet.map(tr.mapping, tr.doc) // only map if document changed
         : selectionDecorationSet;
         if (!tr.selection.eq(oldEditorState.selection)) {
@@ -408,7 +417,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         var nextIsOffline = prevOffline;
         var nextIsViewMode = prevViewMode;
         var nextIsDragging = prevDragging;
-        if (expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+        if (isPerfExperimentOn) {
           if (!nextHasSyncedBlocks) {
             // No synced blocks → keep empty status decorations
             nextStatusDecorationSet = DecorationSet.empty;
@@ -437,14 +446,24 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         }
         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/esm/pm-plugins/menu-and-toolbar-experiences.js

@@ -5,7 +5,9 @@ import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckT
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
+import { syncedBlockPluginKey } from './main';
 var TIMEOUT_DURATION = 30000;
 var pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
 var SYNCED_BLOCK_BUTTON_TEST_IDS = Object.values(SYNCED_BLOCK_BUTTON_TEST_ID);
@@ -89,69 +91,106 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
       durationMs: TIMEOUT_DURATION
     }), syncedLocationsDropdownOpenedCheck()]
   });
-  var unbindClickListener = 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 = bind(document, {
-    type: 'keydown',
-    listener: function listener(event) {
-      if (isEnterKey(event.key)) {
-        var typeaheadPopup = popupWithNestedElement(getPopupsTarget(), '.fabric-editor-typeahead');
-        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+  var bindListeners = function bindListeners() {
+    var unbindClickListener = 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;
         }
-        var targetElement = fg('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
-        if (!targetElement || !(targetElement instanceof HTMLElement)) {
+        if (button.disabled) {
           return;
         }
-        var testId = targetElement.dataset.testid;
-        if (testId === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
-          createSourceQuickInsertMenuExperience.start();
+        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 = bind(document, {
+      type: 'keydown',
+      listener: function listener(event) {
+        if (isEnterKey(event.key)) {
+          var typeaheadPopup = popupWithNestedElement(getPopupsTarget(), '.fabric-editor-typeahead');
+          if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+            return;
+          }
+          var targetElement = 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 === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
+            createSourceQuickInsertMenuExperience.start();
+          }
         }
+      },
+      options: {
+        capture: true
       }
-    },
-    options: {
-      capture: true
-    }
-  });
+    });
+    return {
+      unbindClickListener: unbindClickListener,
+      unbindKeydownListener: unbindKeydownListener
+    };
+  };
   return new 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 = syncedBlockPluginKey.getState(_view.state)) !== null && _syncedBlockPluginKey !== void 0 && _syncedBlockPluginKey.hasSyncedBlocks || !expValEquals('editor_synced_block_perf', 'isEnabled', true)) {
+        ensureListenersBound();
+      }
       return {
+        update: function update(view, prevState) {
+          var _syncedBlockPluginKey2;
+          if (!listenersBound && view.state.doc !== prevState.doc && (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(view.state)) !== null && _syncedBlockPluginKey2 !== void 0 && _syncedBlockPluginKey2.hasSyncedBlocks && 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'
           });
@@ -176,8 +215,8 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
           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();
         }
       };
     }