@atlaskit/editor-plugin-synced-block 23.0.3 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 24.0.0
+
+### Patch Changes
+
+- [`8de064ccdb113`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8de064ccdb113) -
+  Prevent native editing of reference synced block content and error messages and synchronize native
+  reference text selection with ProseMirror so normal editor deletion handles the containing
+  reference and preserving text selection and link interactions behind the
+  platform_editor_blocks_patch_11 experiment.
+- Updated dependencies
+
+## 23.0.4
+
+### Patch Changes
+
+- [`59547e8338ae0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/59547e8338ae0) -
+  Clean up feature gate `platform_editor_blocks_patch_8`
+- Updated dependencies
+
 ## 23.0.3
 
 ### Patch Changes

package/dist/cjs/editor-commands/index.js

@@ -16,7 +16,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("@atlaskit/editor-synced-block-provider/utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _main = require("../pm-plugins/main");
 var _utils3 = require("../pm-plugins/utils/utils");
 var _types = require("../types");
@@ -140,7 +139,7 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
       }))).sort();
     }
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
-    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude, (0, _fg.fg)('platform_editor_blocks_patch_8') && conversionInfo.breakoutMark ? [conversionInfo.breakoutMark] : undefined);
+    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude, conversionInfo.breakoutMark ? [conversionInfo.breakoutMark] : undefined);
     if (!_newBodiedSyncBlockNode) {
       fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
         action: _analytics.ACTION.ERROR,

package/dist/cjs/nodeviews/syncedBlock.js

@@ -18,6 +18,7 @@ var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _editorCommands = require("../editor-commands");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
 var _SyncBlockSSRReactContextsProvider = require("../ui/SyncBlockSSRReactContextsProvider");
@@ -84,8 +85,9 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
      * through to the browser so that users can select and copy text within a
      * reference sync block.
      *
-     * Events that originate inside the sync block content area (but not the label)
-     * are stopped so ProseMirror does not intercept them for node-level selection.
+     * With patch_11, native selection changes select the containing node without taking focus.
+     * Without it, events inside the content area (but not the label) are stopped
+     * and mousedown explicitly selects the node.
      * This includes the full click-drag cycle (mousedown, mousemove, mouseup),
      * click, dblclick, selectstart and cut. The `cut` event is stopped because
      * mousedown explicitly sets a NodeSelection on the sync block — without
@@ -124,8 +126,16 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         // NodeSelection), we let PM handle the copy event so the
         // "sync-block-copied" flag is set for the reference paste flow.
         if (eventType === 'copy') {
-          var selection = window.getSelection();
-          return !!(selection && selection.toString().length > 0);
+          var selection = this.view.dom.ownerDocument.getSelection();
+          if (!selection || selection.toString().length === 0) {
+            return false;
+          }
+          if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11')) {
+            return true;
+          }
+          // A native whole-node selection also contains text; only delegate renderer highlights.
+          var renderer = target.closest(".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer));
+          return !!(renderer && renderer.contains(selection.anchorNode) && renderer.contains(selection.focusNode));
         }
 
         // For `cut`: when text is selected inside the renderer, stop the
@@ -150,6 +160,10 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return true;
         }
         if (STOPPED_EVENT_TYPES.includes(eventType)) {
+          if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11')) {
+            // Preserve renderer focus; the selection listener tracks the containing node.
+            return true;
+          }
           // Ensure the syncBlock has a NodeSelection so the floating
           // toolbar is visible while the user interacts with the renderer.
           // stopEvent prevents PM from processing the mousedown, so we

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createReferenceSelectionView = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var getSelectedReference = function getSelectedReference(view) {
+  var selection = view.dom.ownerDocument.getSelection();
+  var anchor = selection === null || selection === void 0 ? void 0 : selection.anchorNode;
+  var anchorElement = anchor instanceof Element ? anchor : anchor === null || anchor === void 0 ? void 0 : anchor.parentElement;
+  var renderer = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.closest(".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer));
+  if (!renderer || !(selection !== null && selection !== void 0 && selection.focusNode) || !renderer.contains(selection.focusNode)) {
+    return null;
+  }
+  var reference = renderer.closest(".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix));
+  return reference && view.dom.contains(reference) ? reference : null;
+};
+var createReferenceSelectionView = exports.createReferenceSelectionView = function createReferenceSelectionView(view) {
+  var syncReferenceSelection = function syncReferenceSelection() {
+    var _doc$nodeAt;
+    if (!view.editable) {
+      return;
+    }
+    var reference = getSelectedReference(view);
+    if (!reference) {
+      return;
+    }
+    var pos = view.posAtDOM(reference, 0);
+    var _view$state = view.state,
+      doc = _view$state.doc,
+      schema = _view$state.schema,
+      selection = _view$state.selection;
+    if (((_doc$nodeAt = doc.nodeAt(pos)) === null || _doc$nodeAt === void 0 ? void 0 : _doc$nodeAt.type) !== schema.nodes.syncBlock || selection instanceof _state.NodeSelection && selection.from === pos) {
+      return;
+    }
+    // The selectable renderer owns native focus, so PM's observer ignores its selection.
+    // Track the containing atom without focusing the editor or clearing highlighted text.
+    view.dispatch(view.state.tr.setSelection(_state.NodeSelection.create(doc, pos)));
+  };
+  var unbind = (0, _bindEventListener.bind)(view.dom.ownerDocument, {
+    type: 'selectionchange',
+    listener: syncReferenceSelection
+  });
+  return {
+    destroy: unbind
+  };
+};

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

@@ -21,13 +21,14 @@ var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _view3 = require("@atlaskit/editor-prosemirror/view");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _utils2 = require("@atlaskit/editor-synced-block-provider/utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _bodiedSyncedBlock = require("../nodeviews/bodiedSyncedBlock");
 var _syncedBlock = require("../nodeviews/syncedBlock");
 var _types = require("../types");
+var _createReferenceSelectionView = require("./createReferenceSelectionView");
 var _handleBodiedSyncBlockCreation = require("./utils/handle-bodied-sync-block-creation");
 var _handleBodiedSyncBlockRemoval = require("./utils/handle-bodied-sync-block-removal");
 var _hasSyncedBlocks = require("./utils/has-synced-blocks");
@@ -425,7 +426,7 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
   // Fast path: when all status flags are off and no creations are in flight,
   // no node can produce a decoration — skip the full doc traversal.
   if (!isOffline && !isViewMode && !isDragging && !syncBlockStore.sourceManager.hasPendingCreations()) {
-    return _view2.DecorationSet.empty;
+    return _view3.DecorationSet.empty;
   }
   var offlineDecorations = [];
   var viewModeDecorations = [];
@@ -433,22 +434,22 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
   var dragDecorations = [];
   doc.descendants(function (node, pos) {
     if (node.type.name === 'bodiedSyncBlock' && isOffline) {
-      offlineDecorations.push(_view2.Decoration.node(pos, pos + node.nodeSize, {
+      offlineDecorations.push(_view3.Decoration.node(pos, pos + node.nodeSize, {
         class: _syncBlock.SyncBlockStateCssClassName.disabledClassName
       }));
     }
     if (syncBlockStore.isSyncBlock(node) && isViewMode) {
-      viewModeDecorations.push(_view2.Decoration.node(pos, pos + node.nodeSize, {
+      viewModeDecorations.push(_view3.Decoration.node(pos, pos + node.nodeSize, {
         class: _syncBlock.SyncBlockStateCssClassName.viewModeClassName
       }));
     }
     if (node.type.name === 'bodiedSyncBlock' && syncBlockStore.sourceManager.isPendingCreation(node.attrs.resourceId)) {
-      loadingDecorations.push(_view2.Decoration.node(pos, pos + node.nodeSize, {
+      loadingDecorations.push(_view3.Decoration.node(pos, pos + node.nodeSize, {
         class: _syncBlock.SyncBlockStateCssClassName.creationLoadingClassName
       }));
     }
     if (isDragging && syncBlockStore.isSyncBlock(node)) {
-      dragDecorations.push(_view2.Decoration.node(pos, pos + node.nodeSize, {
+      dragDecorations.push(_view3.Decoration.node(pos, pos + node.nodeSize, {
         class: _syncBlock.SyncBlockStateCssClassName.draggingClassName
       }));
     }
@@ -456,7 +457,7 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
     // only traverse the top-level node of the document, as syncBlock and bodiedSyncBlock are top-level nodes
     return false;
   });
-  return _view2.DecorationSet.create(doc, [].concat(offlineDecorations, viewModeDecorations, loadingDecorations, dragDecorations));
+  return _view3.DecorationSet.create(doc, [].concat(offlineDecorations, viewModeDecorations, loadingDecorations, dragDecorations));
 };
 
 /**
@@ -715,7 +716,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 = docHasSyncedBlocks ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : _view2.DecorationSet.empty;
+        var initStatusDecorationSet = docHasSyncedBlocks ? buildStatusDecorations(instance.doc, syncBlockStore, initIsOffline, initIsViewMode, initIsDragging) : _view3.DecorationSet.empty;
         return {
           selectionDecorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
@@ -798,7 +799,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         var nextIsDragging = prevDragging;
         if (!nextHasSyncedBlocks) {
           // No synced blocks → keep empty status decorations
-          nextStatusDecorationSet = _view2.DecorationSet.empty;
+          nextStatusDecorationSet = _view3.DecorationSet.empty;
         } else {
           var _api$connectivity4, _api$editorViewMode3, _api$userIntent3;
           // Read current shared-state signals
@@ -879,7 +880,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         var _api$focus$sharedStat, _api$focus;
         var currentPluginState = syncedBlockPluginKey.getState(state);
         if (!currentPluginState) {
-          return _view2.DecorationSet.empty;
+          return _view3.DecorationSet.empty;
         }
         var selectionDecorationSet = currentPluginState.selectionDecorationSet,
           statusDecorationSet = currentPluginState.statusDecorationSet,
@@ -905,7 +906,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         // omit selection decorations (matches old behaviour).
         var statusDecorations = statusDecorationSet.find();
         if (statusDecorations.length === 0) {
-          return hasFocus ? selectionDecorationSet : _view2.DecorationSet.empty;
+          return hasFocus ? selectionDecorationSet : _view3.DecorationSet.empty;
         } else {
           return hasFocus ? selectionDecorationSet.add(state.doc, statusDecorations) : statusDecorationSet;
         }
@@ -1008,6 +1009,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         return transformedSlice;
       }
     },
+    view: function view(_view2) {
+      if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11')) {
+        return {};
+      }
+      return (0, _createReferenceSelectionView.createReferenceSelectionView)(_view2);
+    },
     filterTransaction: function filterTransaction(tr, state) {
       var _api$editorViewMode4, _api$connectivity5;
       // Lazy-init: when no synced block currently exists in the doc and the

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _getUnpublishedSourceType = require("./getUnpublishedSourceType");
 var _SyncBlockLabel = require("./SyncBlockLabel");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -66,6 +67,20 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   // ourselves. A native listener (rather than an onClick on the div) is used
   // so we delegate link clicks without making the container itself interactive.
   var rendererRef = (0, _react.useRef)(null);
+  var preventReferenceEditing = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11');
+  (0, _react.useEffect)(function () {
+    var container = rendererRef.current;
+    if (!preventReferenceEditing || !container) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(container, {
+      // Block native edits without intercepting ProseMirror's node deletion.
+      type: 'beforeinput',
+      listener: function listener(event) {
+        return event.preventDefault();
+      }
+    });
+  }, [preventReferenceEditing]);
   (0, _react.useEffect)(function () {
     var containerEl = rendererRef.current;
     if (!containerEl) {

package/dist/es2019/editor-commands/index.js

@@ -7,7 +7,6 @@ import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosem
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getSourceProductFromResourceIdSafe } from '@atlaskit/editor-synced-block-provider/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { creationMetaKey, deleteMechanismMetaKey, syncedBlockPluginKey } from '../pm-plugins/main';
 import { canBeConvertedToSyncBlock, deferDispatch, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { FLAG_ID } from '../types';
@@ -133,7 +132,7 @@ export const createSyncedBlock = ({
       nodeTypes = [...new Set(getSourceNodesFromSelectionRange(tr, tr.selection).map(node => node.type.name))].sort();
     }
     const attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
-    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude, fg('platform_editor_blocks_patch_8') && conversionInfo.breakoutMark ? [conversionInfo.breakoutMark] : undefined);
+    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude, conversionInfo.breakoutMark ? [conversionInfo.breakoutMark] : undefined);
     if (!newBodiedSyncBlockNode) {
       fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
         action: ACTION.ERROR,

package/dist/es2019/nodeviews/syncedBlock.js

@@ -7,6 +7,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 
 import { SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 import { SyncBlockSSRReactContextsProvider } from '../ui/SyncBlockSSRReactContextsProvider';
@@ -64,8 +65,9 @@ export class SyncBlock extends ReactNodeView {
    * through to the browser so that users can select and copy text within a
    * reference sync block.
    *
-   * Events that originate inside the sync block content area (but not the label)
-   * are stopped so ProseMirror does not intercept them for node-level selection.
+   * With patch_11, native selection changes select the containing node without taking focus.
+   * Without it, events inside the content area (but not the label) are stopped
+   * and mousedown explicitly selects the node.
    * This includes the full click-drag cycle (mousedown, mousemove, mouseup),
    * click, dblclick, selectstart and cut. The `cut` event is stopped because
    * mousedown explicitly sets a NodeSelection on the sync block — without
@@ -102,8 +104,16 @@ export class SyncBlock extends ReactNodeView {
       // NodeSelection), we let PM handle the copy event so the
       // "sync-block-copied" flag is set for the reference paste flow.
       if (eventType === 'copy') {
-        const selection = window.getSelection();
-        return !!(selection && selection.toString().length > 0);
+        const selection = this.view.dom.ownerDocument.getSelection();
+        if (!selection || selection.toString().length === 0) {
+          return false;
+        }
+        if (!isExperimentEnabled('platform_editor_blocks_patch_11')) {
+          return true;
+        }
+        // A native whole-node selection also contains text; only delegate renderer highlights.
+        const renderer = target.closest(`.${SyncBlockSharedCssClassName.renderer}`);
+        return !!(renderer && renderer.contains(selection.anchorNode) && renderer.contains(selection.focusNode));
       }
 
       // For `cut`: when text is selected inside the renderer, stop the
@@ -128,6 +138,10 @@ export class SyncBlock extends ReactNodeView {
         return true;
       }
       if (STOPPED_EVENT_TYPES.includes(eventType)) {
+        if (isExperimentEnabled('platform_editor_blocks_patch_11')) {
+          // Preserve renderer focus; the selection listener tracks the containing node.
+          return true;
+        }
         // Ensure the syncBlock has a NodeSelection so the floating
         // toolbar is visible while the user interacts with the renderer.
         // stopEvent prevents PM from processing the mousedown, so we

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

@@ -0,0 +1,45 @@
+import { bind } from 'bind-event-listener';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+const getSelectedReference = view => {
+  const selection = view.dom.ownerDocument.getSelection();
+  const anchor = selection === null || selection === void 0 ? void 0 : selection.anchorNode;
+  const anchorElement = anchor instanceof Element ? anchor : anchor === null || anchor === void 0 ? void 0 : anchor.parentElement;
+  const renderer = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.closest(`.${SyncBlockSharedCssClassName.renderer}`);
+  if (!renderer || !(selection !== null && selection !== void 0 && selection.focusNode) || !renderer.contains(selection.focusNode)) {
+    return null;
+  }
+  const reference = renderer.closest(`.${SyncBlockSharedCssClassName.prefix}`);
+  return reference && view.dom.contains(reference) ? reference : null;
+};
+export const createReferenceSelectionView = view => {
+  const syncReferenceSelection = () => {
+    var _doc$nodeAt;
+    if (!view.editable) {
+      return;
+    }
+    const reference = getSelectedReference(view);
+    if (!reference) {
+      return;
+    }
+    const pos = view.posAtDOM(reference, 0);
+    const {
+      doc,
+      schema,
+      selection
+    } = view.state;
+    if (((_doc$nodeAt = doc.nodeAt(pos)) === null || _doc$nodeAt === void 0 ? void 0 : _doc$nodeAt.type) !== schema.nodes.syncBlock || selection instanceof NodeSelection && selection.from === pos) {
+      return;
+    }
+    // The selectable renderer owns native focus, so PM's observer ignores its selection.
+    // Track the containing atom without focusing the editor or clearing highlighted text.
+    view.dispatch(view.state.tr.setSelection(NodeSelection.create(doc, pos)));
+  };
+  const unbind = bind(view.dom.ownerDocument, {
+    type: 'selectionchange',
+    listener: syncReferenceSelection
+  });
+  return {
+    destroy: unbind
+  };
+};

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

@@ -16,6 +16,7 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { bodiedSyncBlockNodeView } from '../nodeviews/bodiedSyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
+import { createReferenceSelectionView } from './createReferenceSelectionView';
 import { handleBodiedSyncBlockCreation } from './utils/handle-bodied-sync-block-creation';
 import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-removal';
 import { hasSyncedBlocks } from './utils/has-synced-blocks';
@@ -948,6 +949,12 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         return transformedSlice;
       }
     },
+    view: view => {
+      if (!isExperimentEnabled('platform_editor_blocks_patch_11')) {
+        return {};
+      }
+      return createReferenceSelectionView(view);
+    },
     filterTransaction: (tr, state) => {
       var _api$editorViewMode4, _api$editorViewMode4$, _api$connectivity5, _api$connectivity5$sh;
       // Lazy-init: when no synced block currently exists in the doc and the

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError, useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getUnpublishedSourceType } from './getUnpublishedSourceType';
 import { SyncBlockLabel } from './SyncBlockLabel';
 const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
@@ -54,6 +55,18 @@ const SyncBlockRendererWrapperComponent = ({
   // ourselves. A native listener (rather than an onClick on the div) is used
   // so we delegate link clicks without making the container itself interactive.
   const rendererRef = useRef(null);
+  const preventReferenceEditing = isExperimentEnabled('platform_editor_blocks_patch_11');
+  useEffect(() => {
+    const container = rendererRef.current;
+    if (!preventReferenceEditing || !container) {
+      return;
+    }
+    return bind(container, {
+      // Block native edits without intercepting ProseMirror's node deletion.
+      type: 'beforeinput',
+      listener: event => event.preventDefault()
+    });
+  }, [preventReferenceEditing]);
   useEffect(() => {
     const containerEl = rendererRef.current;
     if (!containerEl) {

package/dist/esm/editor-commands/index.js

@@ -11,7 +11,6 @@ import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosem
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getSourceProductFromResourceIdSafe } from '@atlaskit/editor-synced-block-provider/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { creationMetaKey, deleteMechanismMetaKey, syncedBlockPluginKey } from '../pm-plugins/main';
 import { canBeConvertedToSyncBlock, deferDispatch, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { FLAG_ID } from '../types';
@@ -133,7 +132,7 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
       }))).sort();
     }
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
-    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude, fg('platform_editor_blocks_patch_8') && conversionInfo.breakoutMark ? [conversionInfo.breakoutMark] : undefined);
+    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude, conversionInfo.breakoutMark ? [conversionInfo.breakoutMark] : undefined);
     if (!_newBodiedSyncBlockNode) {
       fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
         action: ACTION.ERROR,

package/dist/esm/nodeviews/syncedBlock.js

@@ -16,6 +16,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 
 import { SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 import { SyncBlockSSRReactContextsProvider } from '../ui/SyncBlockSSRReactContextsProvider';
@@ -80,8 +81,9 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
      * through to the browser so that users can select and copy text within a
      * reference sync block.
      *
-     * Events that originate inside the sync block content area (but not the label)
-     * are stopped so ProseMirror does not intercept them for node-level selection.
+     * With patch_11, native selection changes select the containing node without taking focus.
+     * Without it, events inside the content area (but not the label) are stopped
+     * and mousedown explicitly selects the node.
      * This includes the full click-drag cycle (mousedown, mousemove, mouseup),
      * click, dblclick, selectstart and cut. The `cut` event is stopped because
      * mousedown explicitly sets a NodeSelection on the sync block — without
@@ -120,8 +122,16 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         // NodeSelection), we let PM handle the copy event so the
         // "sync-block-copied" flag is set for the reference paste flow.
         if (eventType === 'copy') {
-          var selection = window.getSelection();
-          return !!(selection && selection.toString().length > 0);
+          var selection = this.view.dom.ownerDocument.getSelection();
+          if (!selection || selection.toString().length === 0) {
+            return false;
+          }
+          if (!isExperimentEnabled('platform_editor_blocks_patch_11')) {
+            return true;
+          }
+          // A native whole-node selection also contains text; only delegate renderer highlights.
+          var renderer = target.closest(".".concat(SyncBlockSharedCssClassName.renderer));
+          return !!(renderer && renderer.contains(selection.anchorNode) && renderer.contains(selection.focusNode));
         }
 
         // For `cut`: when text is selected inside the renderer, stop the
@@ -146,6 +156,10 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return true;
         }
         if (STOPPED_EVENT_TYPES.includes(eventType)) {
+          if (isExperimentEnabled('platform_editor_blocks_patch_11')) {
+            // Preserve renderer focus; the selection listener tracks the containing node.
+            return true;
+          }
           // Ensure the syncBlock has a NodeSelection so the floating
           // toolbar is visible while the user interacts with the renderer.
           // stopEvent prevents PM from processing the mousedown, so we

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

@@ -0,0 +1,44 @@
+import { bind } from 'bind-event-listener';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+var getSelectedReference = function getSelectedReference(view) {
+  var selection = view.dom.ownerDocument.getSelection();
+  var anchor = selection === null || selection === void 0 ? void 0 : selection.anchorNode;
+  var anchorElement = anchor instanceof Element ? anchor : anchor === null || anchor === void 0 ? void 0 : anchor.parentElement;
+  var renderer = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.closest(".".concat(SyncBlockSharedCssClassName.renderer));
+  if (!renderer || !(selection !== null && selection !== void 0 && selection.focusNode) || !renderer.contains(selection.focusNode)) {
+    return null;
+  }
+  var reference = renderer.closest(".".concat(SyncBlockSharedCssClassName.prefix));
+  return reference && view.dom.contains(reference) ? reference : null;
+};
+export var createReferenceSelectionView = function createReferenceSelectionView(view) {
+  var syncReferenceSelection = function syncReferenceSelection() {
+    var _doc$nodeAt;
+    if (!view.editable) {
+      return;
+    }
+    var reference = getSelectedReference(view);
+    if (!reference) {
+      return;
+    }
+    var pos = view.posAtDOM(reference, 0);
+    var _view$state = view.state,
+      doc = _view$state.doc,
+      schema = _view$state.schema,
+      selection = _view$state.selection;
+    if (((_doc$nodeAt = doc.nodeAt(pos)) === null || _doc$nodeAt === void 0 ? void 0 : _doc$nodeAt.type) !== schema.nodes.syncBlock || selection instanceof NodeSelection && selection.from === pos) {
+      return;
+    }
+    // The selectable renderer owns native focus, so PM's observer ignores its selection.
+    // Track the containing atom without focusing the editor or clearing highlighted text.
+    view.dispatch(view.state.tr.setSelection(NodeSelection.create(doc, pos)));
+  };
+  var unbind = bind(view.dom.ownerDocument, {
+    type: 'selectionchange',
+    listener: syncReferenceSelection
+  });
+  return {
+    destroy: unbind
+  };
+};

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

@@ -26,6 +26,7 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { bodiedSyncBlockNodeView } from '../nodeviews/bodiedSyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
+import { createReferenceSelectionView } from './createReferenceSelectionView';
 import { handleBodiedSyncBlockCreation } from './utils/handle-bodied-sync-block-creation';
 import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-removal';
 import { hasSyncedBlocks } from './utils/has-synced-blocks';
@@ -1001,6 +1002,12 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         return transformedSlice;
       }
     },
+    view: function view(_view2) {
+      if (!isExperimentEnabled('platform_editor_blocks_patch_11')) {
+        return {};
+      }
+      return createReferenceSelectionView(_view2);
+    },
     filterTransaction: function filterTransaction(tr, state) {
       var _api$editorViewMode4, _api$connectivity5;
       // Lazy-init: when no synced block currently exists in the doc and the

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError, useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getUnpublishedSourceType } from './getUnpublishedSourceType';
 import { SyncBlockLabel } from './SyncBlockLabel';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
@@ -57,6 +58,20 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   // ourselves. A native listener (rather than an onClick on the div) is used
   // so we delegate link clicks without making the container itself interactive.
   var rendererRef = useRef(null);
+  var preventReferenceEditing = isExperimentEnabled('platform_editor_blocks_patch_11');
+  useEffect(function () {
+    var container = rendererRef.current;
+    if (!preventReferenceEditing || !container) {
+      return;
+    }
+    return bind(container, {
+      // Block native edits without intercepting ProseMirror's node deletion.
+      type: 'beforeinput',
+      listener: function listener(event) {
+        return event.preventDefault();
+      }
+    });
+  }, [preventReferenceEditing]);
   useEffect(function () {
     var containerEl = rendererRef.current;
     if (!containerEl) {

package/dist/types/nodeviews/syncedBlock.d.ts

@@ -38,8 +38,9 @@ export declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
      * through to the browser so that users can select and copy text within a
      * reference sync block.
      *
-     * Events that originate inside the sync block content area (but not the label)
-     * are stopped so ProseMirror does not intercept them for node-level selection.
+     * With patch_11, native selection changes select the containing node without taking focus.
+     * Without it, events inside the content area (but not the label) are stopped
+     * and mousedown explicitly selects the node.
      * This includes the full click-drag cycle (mousedown, mousemove, mouseup),
      * click, dblclick, selectstart and cut. The `cut` event is stopped because
      * mousedown explicitly sets a NodeSelection on the sync block — without

package/dist/types/pm-plugins/createReferenceSelectionView.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const createReferenceSelectionView: (view: EditorView) => {
+    destroy: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "23.0.3",
+	"version": "24.0.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,24 +24,24 @@
 		"@atlaskit/button": "25.4.5",
 		"@atlaskit/dropdown-menu": "21.0.0",
 		"@atlaskit/editor-json-transformer": "^10.0.0",
-		"@atlaskit/editor-plugin-analytics": "^25.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^26.0.0",
-		"@atlaskit/editor-plugin-block-menu": "^24.0.0",
-		"@atlaskit/editor-plugin-connectivity": "25.0.0",
-		"@atlaskit/editor-plugin-content-format": "^19.0.0",
-		"@atlaskit/editor-plugin-decorations": "^25.0.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^25.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^27.0.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^27.0.0",
-		"@atlaskit/editor-plugin-focus": "^24.0.0",
-		"@atlaskit/editor-plugin-history": "^25.0.0",
-		"@atlaskit/editor-plugin-selection": "^25.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^22.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^19.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^23.0.0",
+		"@atlaskit/editor-plugin-analytics": "^26.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^27.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^25.0.0",
+		"@atlaskit/editor-plugin-connectivity": "26.0.0",
+		"@atlaskit/editor-plugin-content-format": "^20.0.0",
+		"@atlaskit/editor-plugin-decorations": "^26.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^26.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^28.0.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^28.0.0",
+		"@atlaskit/editor-plugin-focus": "^25.0.0",
+		"@atlaskit/editor-plugin-history": "^26.0.0",
+		"@atlaskit/editor-plugin-selection": "^26.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^23.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^20.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^24.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
-		"@atlaskit/editor-synced-block-provider": "^21.0.0",
+		"@atlaskit/editor-synced-block-provider": "^22.0.0",
 		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/flag": "^19.0.0",
 		"@atlaskit/icon": "38.0.2",
@@ -53,8 +53,8 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/spinner": "20.4.4",
-		"@atlaskit/tmp-editor-statsig": "^226.0.0",
-		"@atlaskit/tokens": "20.3.0",
+		"@atlaskit/tmp-editor-statsig": "^227.0.0",
+		"@atlaskit/tokens": "20.4.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -65,7 +65,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^129.1.0",
+		"@atlaskit/editor-common": "^130.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -77,9 +77,6 @@
 	"platform-feature-flags": {
 		"confluence_fronend_labels_categorization_migration": {
 			"type": "boolean"
-		},
-		"platform_editor_blocks_patch_8": {
-			"type": "boolean"
 		}
 	}
 }