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

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,14 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 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/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

@@ -8,6 +8,7 @@ exports.syncedBlockPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 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");
@@ -28,6 +29,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
   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);
   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));
@@ -98,6 +100,16 @@ 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);
       }
     },
@@ -122,13 +134,13 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       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;
+      var _syncedBlockPluginKey2 = _main.syncedBlockPluginKey.getState(editorState),
+        activeFlag = _syncedBlockPluginKey2.activeFlag,
+        currentSyncBlockStore = _syncedBlockPluginKey2.syncBlockStore,
+        bodiedSyncBlockDeletionStatus = _syncedBlockPluginKey2.bodiedSyncBlockDeletionStatus,
+        retryCreationPosMap = _syncedBlockPluginKey2.retryCreationPosMap,
+        hasSyncedBlocks = _syncedBlockPluginKey2.hasSyncedBlocks,
+        hasUnsavedBodiedSyncBlockChanges = _syncedBlockPluginKey2.hasUnsavedBodiedSyncBlockChanges;
       return {
         activeFlag: activeFlag,
         syncBlockStore: currentSyncBlockStore,

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,7 @@
 import React from 'react';
 import { syncBlock, bodiedSyncBlock } from '@atlaskit/adf-schema';
 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';
@@ -22,6 +23,7 @@ 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);
   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));
@@ -84,7 +86,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,

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();
         }
       };
     }

package/dist/esm/syncedBlockPlugin.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { syncBlock, bodiedSyncBlock } from '@atlaskit/adf-schema';
 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';
@@ -21,6 +22,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
   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);
   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));
@@ -91,6 +93,16 @@ 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);
       }
     },
@@ -115,13 +127,13 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       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;
+      var _syncedBlockPluginKey2 = syncedBlockPluginKey.getState(editorState),
+        activeFlag = _syncedBlockPluginKey2.activeFlag,
+        currentSyncBlockStore = _syncedBlockPluginKey2.syncBlockStore,
+        bodiedSyncBlockDeletionStatus = _syncedBlockPluginKey2.bodiedSyncBlockDeletionStatus,
+        retryCreationPosMap = _syncedBlockPluginKey2.retryCreationPosMap,
+        hasSyncedBlocks = _syncedBlockPluginKey2.hasSyncedBlocks,
+        hasUnsavedBodiedSyncBlockChanges = _syncedBlockPluginKey2.hasUnsavedBodiedSyncBlockChanges;
       return {
         activeFlag: activeFlag,
         syncBlockStore: currentSyncBlockStore,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "8.2.9",
+	"version": "8.2.10",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -54,7 +54,7 @@
 		"@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/tmp-editor-statsig": "^77.3.0",
 		"@atlaskit/tokens": "13.0.3",
 		"@atlaskit/tooltip": "^22.0.0",
 		"@atlaskit/visually-hidden": "^3.1.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"
 	},