@atlaskit/editor-plugin-synced-block 9.0.1 → 9.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 9.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.0.2
+
+### Patch Changes
+
+- [`ed89ab85318b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed89ab85318b9) -
+  [ux] Allow text selection and copying within reference synced blocks in the editor
+
 ## 9.0.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/syncedBlock.js

@@ -17,6 +17,8 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _editorCommands = require("../editor-commands");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
@@ -24,6 +26,11 @@ var _SyncBlockSSRReactContextsProvider = require("../ui/SyncBlockSSRReactContext
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+// Event types that should be intercepted (returned as handled) when they
+// originate inside the sync block content area, so ProseMirror does not
+// convert them into node-level selections or drag operations and the browser
+// can perform native text selection/cut instead.
+var STOPPED_EVENT_TYPES = ['mousedown', 'mousemove', 'mouseup', 'click', 'dblclick', 'selectstart'];
 var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function SyncBlock(props) {
     var _this;
@@ -54,12 +61,124 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(SyncBlock, _ReactNodeView);
   return (0, _createClass2.default)(SyncBlock, [{
     key: "createDomRef",
-    value: function createDomRef() {
+    value:
+    // Stored reference so the listener can be removed in destroy() to
+    // avoid a memory leak on every nodeview destruction.
+
+    function createDomRef() {
       // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(_syncBlock.SyncBlockSharedCssClassName.prefix);
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_14')) {
+        // Prevent native browser drag on the contentEditable="false" wrapper.
+        // Without this, clicking in empty space (outside the contentEditable
+        // renderer but inside the domRef) initiates a native element drag.
+        domRef.draggable = false;
+        this.dragStartHandler = function (e) {
+          e.preventDefault();
+        };
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop, @repo/internal/dom-events/no-unsafe-event-listeners
+        domRef.addEventListener('dragstart', this.dragStartHandler);
+      }
       return domRef;
     }
+
+    /**
+     * Allow mouse and selection events inside the renderer content to pass
+     * 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.
+     * 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
+     * stopping `cut`, a subsequent Ctrl+X would cause ProseMirror to delete the
+     * entire sync block node instead of cutting the user's text selection.
+     *
+     * Copy events are conditionally stopped: when the user has an active native
+     * text selection inside the renderer, `copy` is stopped so the browser handles
+     * it natively (copying the selected text). When there is no text selection
+     * (just a PM NodeSelection), `copy` is NOT stopped so ProseMirror's copy
+     * handler runs and sets the "sync-block-copied" flag for the reference paste flow.
+     *
+     * Events on the SyncBlockLabel are left for ProseMirror to handle, preserving
+     * label click interactions and the floating toolbar.
+     *
+     * The renderer wrapper sets contentEditable="true" to create a re-editable
+     * island inside ProseMirror's contentEditable="false" nodeview, enabling
+     * native text selection and preventing browser drag behaviour.
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (!(0, _platformFeatureFlags.fg)('platform_synced_block_patch_14')) {
+        return false;
+      }
+      var target = event.target;
+      if (!(target instanceof Element)) {
+        return false;
+      }
+
+      // Stop events inside the sync block content area, but not on the
+      // SyncBlockLabel (to preserve label click interactions).
+      if (target.closest(".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix)) && !target.closest(".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName))) {
+        var eventType = event.type;
+
+        // Stop `copy` only when there is an active native text selection
+        // inside the renderer. This lets the browser handle text copy
+        // natively. When there is no text selection (just a PM
+        // 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);
+        }
+
+        // For `cut`: when text is selected inside the renderer, stop the
+        // event and prevent default to avoid the browser removing text from
+        // the read-only content. When no text is selected (NodeSelection),
+        // let PM handle it so cut deletes the sync block as expected.
+        if (eventType === 'cut') {
+          var _selection = window.getSelection();
+          if (_selection && _selection.toString().length > 0) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+
+        // Stop keyboard events that would cause PM to replace the
+        // NodeSelection with typed text (deleting the sync block).
+        // Allow modifier-key combos (Cmd+C, Cmd+A, etc.) through.
+        // Allow Delete/Backspace through so PM's delete handler can
+        // process them (e.g. show offline error flag).
+        if ((eventType === 'keydown' || eventType === 'keypress') && event instanceof KeyboardEvent && !event.metaKey && !event.ctrlKey && event.key !== 'Delete' && event.key !== 'Backspace') {
+          return true;
+        }
+        if (STOPPED_EVENT_TYPES.includes(eventType)) {
+          // 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
+          // need to explicitly set the selection ourselves.
+          if (eventType === 'mousedown' && !(this.view.state.selection instanceof _state.NodeSelection && this.view.state.selection.node === this.node)) {
+            if (typeof this.getPos === 'function') {
+              var pos = this.getPos();
+              if (typeof pos === 'number') {
+                try {
+                  var tr = this.view.state.tr;
+                  this.view.dispatch(tr.setSelection(_state.NodeSelection.create(tr.doc, pos)));
+                } catch (_unused) {
+                  // pos no longer valid — leave selection unchanged
+                }
+              }
+            }
+          }
+          return true;
+        }
+      }
+      return false;
+    }
   }, {
     key: "validUpdate",
     value: function validUpdate(currentNode, newNode) {
@@ -135,6 +254,12 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function destroy() {
       var _this$unsubscribe;
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      if (this.dragStartHandler) {
+        var _this$dom;
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop, @repo/internal/dom-events/no-unsafe-event-listeners
+        (_this$dom = this.dom) === null || _this$dom === void 0 || _this$dom.removeEventListener('dragstart', this.dragStartHandler);
+        this.dragStartHandler = undefined;
+      }
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }
   }]);

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncBlockRendererWrapper = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
   var _api$analytics, _syncBlockFetchResult, _syncBlockFetchResult2, _syncBlockFetchResult3;
@@ -23,11 +25,32 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 || (_syncBlockFetchResult = _syncBlockFetchResult.data) === null || _syncBlockFetchResult === void 0 ? void 0 : _syncBlockFetchResult.contentUpdatedAt;
   var isUnpublishedBlock = ((_syncBlockFetchResult2 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult2 === void 0 || (_syncBlockFetchResult2 = _syncBlockFetchResult2.data) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.status) === 'unpublished';
   var isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 || (_syncBlockFetchResult3 = _syncBlockFetchResult3.error) === null || _syncBlockFetchResult3 === void 0 ? void 0 : _syncBlockFetchResult3.type) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
+  var isTextSelectionEnabled = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_14');
+
+  // Prevent editing in the contentEditable renderer wrapper. We set
+  // contentEditable="true" to enable text selection (creating an editable
+  // island inside ProseMirror's contentEditable="false" nodeview wrapper),
+  // but users must not be able to type into or modify the renderer content.
+  var preventInput = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: _syncBlock.SyncBlockSharedCssClassName.renderer
+    className: _syncBlock.SyncBlockSharedCssClassName.renderer,
+    contentEditable: isTextSelectionEnabled || undefined,
+    suppressContentEditableWarning: true
+    // Prevent the contentEditable div from being keyboard-focusable.
+    // It is only used to enable text selection, not as an input target.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: isTextSelectionEnabled ? -1 : undefined,
+    onBeforeInput: isTextSelectionEnabled ? preventInput : undefined,
+    onPaste: isTextSelectionEnabled ? preventInput : undefined
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    ,
+    onDrop: isTextSelectionEnabled ? preventInput : undefined
   }, syncedBlockRenderer({
     syncBlockFetchResult: syncBlockFetchResult,
     api: api

package/dist/es2019/nodeviews/syncedBlock.js

@@ -3,11 +3,19 @@ import React from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 import { SyncBlockSSRReactContextsProvider } from '../ui/SyncBlockSSRReactContextsProvider';
+
+// Event types that should be intercepted (returned as handled) when they
+// originate inside the sync block content area, so ProseMirror does not
+// convert them into node-level selections or drag operations and the browser
+// can perform native text selection/cut instead.
+const STOPPED_EVENT_TYPES = ['mousedown', 'mousemove', 'mouseup', 'click', 'dblclick', 'selectstart'];
 export class SyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
@@ -32,12 +40,123 @@ export class SyncBlock extends ReactNodeView {
     this.syncBlockStore = props.syncBlockStore;
     this.intl = props.intl;
   }
+  // Stored reference so the listener can be removed in destroy() to
+  // avoid a memory leak on every nodeview destruction.
+
   createDomRef() {
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
     const domRef = document.createElement('div');
     domRef.classList.add(SyncBlockSharedCssClassName.prefix);
+    if (fg('platform_synced_block_patch_14')) {
+      // Prevent native browser drag on the contentEditable="false" wrapper.
+      // Without this, clicking in empty space (outside the contentEditable
+      // renderer but inside the domRef) initiates a native element drag.
+      domRef.draggable = false;
+      this.dragStartHandler = e => {
+        e.preventDefault();
+      };
+      // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop, @repo/internal/dom-events/no-unsafe-event-listeners
+      domRef.addEventListener('dragstart', this.dragStartHandler);
+    }
     return domRef;
   }
+
+  /**
+   * Allow mouse and selection events inside the renderer content to pass
+   * 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.
+   * 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
+   * stopping `cut`, a subsequent Ctrl+X would cause ProseMirror to delete the
+   * entire sync block node instead of cutting the user's text selection.
+   *
+   * Copy events are conditionally stopped: when the user has an active native
+   * text selection inside the renderer, `copy` is stopped so the browser handles
+   * it natively (copying the selected text). When there is no text selection
+   * (just a PM NodeSelection), `copy` is NOT stopped so ProseMirror's copy
+   * handler runs and sets the "sync-block-copied" flag for the reference paste flow.
+   *
+   * Events on the SyncBlockLabel are left for ProseMirror to handle, preserving
+   * label click interactions and the floating toolbar.
+   *
+   * The renderer wrapper sets contentEditable="true" to create a re-editable
+   * island inside ProseMirror's contentEditable="false" nodeview, enabling
+   * native text selection and preventing browser drag behaviour.
+   */
+  stopEvent(event) {
+    if (!fg('platform_synced_block_patch_14')) {
+      return false;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      return false;
+    }
+
+    // Stop events inside the sync block content area, but not on the
+    // SyncBlockLabel (to preserve label click interactions).
+    if (target.closest(`.${SyncBlockSharedCssClassName.prefix}`) && !target.closest(`.${SyncBlockLabelSharedCssClassName.labelClassName}`)) {
+      const eventType = event.type;
+
+      // Stop `copy` only when there is an active native text selection
+      // inside the renderer. This lets the browser handle text copy
+      // natively. When there is no text selection (just a PM
+      // 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);
+      }
+
+      // For `cut`: when text is selected inside the renderer, stop the
+      // event and prevent default to avoid the browser removing text from
+      // the read-only content. When no text is selected (NodeSelection),
+      // let PM handle it so cut deletes the sync block as expected.
+      if (eventType === 'cut') {
+        const selection = window.getSelection();
+        if (selection && selection.toString().length > 0) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      }
+
+      // Stop keyboard events that would cause PM to replace the
+      // NodeSelection with typed text (deleting the sync block).
+      // Allow modifier-key combos (Cmd+C, Cmd+A, etc.) through.
+      // Allow Delete/Backspace through so PM's delete handler can
+      // process them (e.g. show offline error flag).
+      if ((eventType === 'keydown' || eventType === 'keypress') && event instanceof KeyboardEvent && !event.metaKey && !event.ctrlKey && event.key !== 'Delete' && event.key !== 'Backspace') {
+        return true;
+      }
+      if (STOPPED_EVENT_TYPES.includes(eventType)) {
+        // 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
+        // need to explicitly set the selection ourselves.
+        if (eventType === 'mousedown' && !(this.view.state.selection instanceof NodeSelection && this.view.state.selection.node === this.node)) {
+          if (typeof this.getPos === 'function') {
+            const pos = this.getPos();
+            if (typeof pos === 'number') {
+              try {
+                const {
+                  tr
+                } = this.view.state;
+                this.view.dispatch(tr.setSelection(NodeSelection.create(tr.doc, pos)));
+              } catch {
+                // pos no longer valid — leave selection unchanged
+              }
+            }
+          }
+        }
+        return true;
+      }
+    }
+    return false;
+  }
   validUpdate(currentNode, newNode) {
     // Only consider as the valid update if the localId and resourceId are the same
     // This prevents PM reusing the same node view for different sync block node in live page transition
@@ -100,6 +219,12 @@ export class SyncBlock extends ReactNodeView {
   destroy() {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+    if (this.dragStartHandler) {
+      var _this$dom;
+      // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop, @repo/internal/dom-events/no-unsafe-event-listeners
+      (_this$dom = this.dom) === null || _this$dom === void 0 ? void 0 : _this$dom.removeEventListener('dragstart', this.dragStartHandler);
+      this.dragStartHandler = undefined;
+    }
     super.destroy();
   }
 }

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError, useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncBlockLabel } from './SyncBlockLabel';
 const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 const SyncBlockRendererWrapperComponent = ({
@@ -17,11 +18,32 @@ const SyncBlockRendererWrapperComponent = ({
   const contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult2 = _syncBlockFetchResult.data) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.contentUpdatedAt;
   const isUnpublishedBlock = ((_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 ? void 0 : (_syncBlockFetchResult4 = _syncBlockFetchResult3.data) === null || _syncBlockFetchResult4 === void 0 ? void 0 : _syncBlockFetchResult4.status) === 'unpublished';
   const isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult5 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult5 === void 0 ? void 0 : (_syncBlockFetchResult6 = _syncBlockFetchResult5.error) === null || _syncBlockFetchResult6 === void 0 ? void 0 : _syncBlockFetchResult6.type) === SyncBlockError.NotFound;
+  const isTextSelectionEnabled = fg('platform_synced_block_patch_14');
+
+  // Prevent editing in the contentEditable renderer wrapper. We set
+  // contentEditable="true" to enable text selection (creating an editable
+  // island inside ProseMirror's contentEditable="false" nodeview wrapper),
+  // but users must not be able to type into or modify the renderer content.
+  const preventInput = useCallback(e => {
+    e.preventDefault();
+  }, []);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: SyncBlockSharedCssClassName.renderer
+    className: SyncBlockSharedCssClassName.renderer,
+    contentEditable: isTextSelectionEnabled || undefined,
+    suppressContentEditableWarning: true
+    // Prevent the contentEditable div from being keyboard-focusable.
+    // It is only used to enable text selection, not as an input target.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: isTextSelectionEnabled ? -1 : undefined,
+    onBeforeInput: isTextSelectionEnabled ? preventInput : undefined,
+    onPaste: isTextSelectionEnabled ? preventInput : undefined
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    ,
+    onDrop: isTextSelectionEnabled ? preventInput : undefined
   }, syncedBlockRenderer({
     syncBlockFetchResult,
     api

package/dist/esm/nodeviews/syncedBlock.js

@@ -12,11 +12,19 @@ import React from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 import { SyncBlockSSRReactContextsProvider } from '../ui/SyncBlockSSRReactContextsProvider';
+
+// Event types that should be intercepted (returned as handled) when they
+// originate inside the sync block content area, so ProseMirror does not
+// convert them into node-level selections or drag operations and the browser
+// can perform native text selection/cut instead.
+var STOPPED_EVENT_TYPES = ['mousedown', 'mousemove', 'mouseup', 'click', 'dblclick', 'selectstart'];
 export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function SyncBlock(props) {
     var _this;
@@ -47,12 +55,124 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(SyncBlock, _ReactNodeView);
   return _createClass(SyncBlock, [{
     key: "createDomRef",
-    value: function createDomRef() {
+    value:
+    // Stored reference so the listener can be removed in destroy() to
+    // avoid a memory leak on every nodeview destruction.
+
+    function createDomRef() {
       // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(SyncBlockSharedCssClassName.prefix);
+      if (fg('platform_synced_block_patch_14')) {
+        // Prevent native browser drag on the contentEditable="false" wrapper.
+        // Without this, clicking in empty space (outside the contentEditable
+        // renderer but inside the domRef) initiates a native element drag.
+        domRef.draggable = false;
+        this.dragStartHandler = function (e) {
+          e.preventDefault();
+        };
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop, @repo/internal/dom-events/no-unsafe-event-listeners
+        domRef.addEventListener('dragstart', this.dragStartHandler);
+      }
       return domRef;
     }
+
+    /**
+     * Allow mouse and selection events inside the renderer content to pass
+     * 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.
+     * 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
+     * stopping `cut`, a subsequent Ctrl+X would cause ProseMirror to delete the
+     * entire sync block node instead of cutting the user's text selection.
+     *
+     * Copy events are conditionally stopped: when the user has an active native
+     * text selection inside the renderer, `copy` is stopped so the browser handles
+     * it natively (copying the selected text). When there is no text selection
+     * (just a PM NodeSelection), `copy` is NOT stopped so ProseMirror's copy
+     * handler runs and sets the "sync-block-copied" flag for the reference paste flow.
+     *
+     * Events on the SyncBlockLabel are left for ProseMirror to handle, preserving
+     * label click interactions and the floating toolbar.
+     *
+     * The renderer wrapper sets contentEditable="true" to create a re-editable
+     * island inside ProseMirror's contentEditable="false" nodeview, enabling
+     * native text selection and preventing browser drag behaviour.
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (!fg('platform_synced_block_patch_14')) {
+        return false;
+      }
+      var target = event.target;
+      if (!(target instanceof Element)) {
+        return false;
+      }
+
+      // Stop events inside the sync block content area, but not on the
+      // SyncBlockLabel (to preserve label click interactions).
+      if (target.closest(".".concat(SyncBlockSharedCssClassName.prefix)) && !target.closest(".".concat(SyncBlockLabelSharedCssClassName.labelClassName))) {
+        var eventType = event.type;
+
+        // Stop `copy` only when there is an active native text selection
+        // inside the renderer. This lets the browser handle text copy
+        // natively. When there is no text selection (just a PM
+        // 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);
+        }
+
+        // For `cut`: when text is selected inside the renderer, stop the
+        // event and prevent default to avoid the browser removing text from
+        // the read-only content. When no text is selected (NodeSelection),
+        // let PM handle it so cut deletes the sync block as expected.
+        if (eventType === 'cut') {
+          var _selection = window.getSelection();
+          if (_selection && _selection.toString().length > 0) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+
+        // Stop keyboard events that would cause PM to replace the
+        // NodeSelection with typed text (deleting the sync block).
+        // Allow modifier-key combos (Cmd+C, Cmd+A, etc.) through.
+        // Allow Delete/Backspace through so PM's delete handler can
+        // process them (e.g. show offline error flag).
+        if ((eventType === 'keydown' || eventType === 'keypress') && event instanceof KeyboardEvent && !event.metaKey && !event.ctrlKey && event.key !== 'Delete' && event.key !== 'Backspace') {
+          return true;
+        }
+        if (STOPPED_EVENT_TYPES.includes(eventType)) {
+          // 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
+          // need to explicitly set the selection ourselves.
+          if (eventType === 'mousedown' && !(this.view.state.selection instanceof NodeSelection && this.view.state.selection.node === this.node)) {
+            if (typeof this.getPos === 'function') {
+              var pos = this.getPos();
+              if (typeof pos === 'number') {
+                try {
+                  var tr = this.view.state.tr;
+                  this.view.dispatch(tr.setSelection(NodeSelection.create(tr.doc, pos)));
+                } catch (_unused) {
+                  // pos no longer valid — leave selection unchanged
+                }
+              }
+            }
+          }
+          return true;
+        }
+      }
+      return false;
+    }
   }, {
     key: "validUpdate",
     value: function validUpdate(currentNode, newNode) {
@@ -128,6 +248,12 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function destroy() {
       var _this$unsubscribe;
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      if (this.dragStartHandler) {
+        var _this$dom;
+        // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop, @repo/internal/dom-events/no-unsafe-event-listeners
+        (_this$dom = this.dom) === null || _this$dom === void 0 || _this$dom.removeEventListener('dragstart', this.dragStartHandler);
+        this.dragStartHandler = undefined;
+      }
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }
   }]);

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError, useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncBlockLabel } from './SyncBlockLabel';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
@@ -16,11 +17,32 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 || (_syncBlockFetchResult = _syncBlockFetchResult.data) === null || _syncBlockFetchResult === void 0 ? void 0 : _syncBlockFetchResult.contentUpdatedAt;
   var isUnpublishedBlock = ((_syncBlockFetchResult2 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult2 === void 0 || (_syncBlockFetchResult2 = _syncBlockFetchResult2.data) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.status) === 'unpublished';
   var isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 || (_syncBlockFetchResult3 = _syncBlockFetchResult3.error) === null || _syncBlockFetchResult3 === void 0 ? void 0 : _syncBlockFetchResult3.type) === SyncBlockError.NotFound;
+  var isTextSelectionEnabled = fg('platform_synced_block_patch_14');
+
+  // Prevent editing in the contentEditable renderer wrapper. We set
+  // contentEditable="true" to enable text selection (creating an editable
+  // island inside ProseMirror's contentEditable="false" nodeview wrapper),
+  // but users must not be able to type into or modify the renderer content.
+  var preventInput = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: SyncBlockSharedCssClassName.renderer
+    className: SyncBlockSharedCssClassName.renderer,
+    contentEditable: isTextSelectionEnabled || undefined,
+    suppressContentEditableWarning: true
+    // Prevent the contentEditable div from being keyboard-focusable.
+    // It is only used to enable text selection, not as an input target.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: isTextSelectionEnabled ? -1 : undefined,
+    onBeforeInput: isTextSelectionEnabled ? preventInput : undefined,
+    onPaste: isTextSelectionEnabled ? preventInput : undefined
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    ,
+    onDrop: isTextSelectionEnabled ? preventInput : undefined
   }, syncedBlockRenderer({
     syncBlockFetchResult: syncBlockFetchResult,
     api: api

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

@@ -31,7 +31,35 @@ export declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     private removeSyncBlockStable;
     private fetchSyncBlockSourceInfoStable;
     unsubscribe: (() => void) | undefined;
+    private dragStartHandler;
     createDomRef(): HTMLElement;
+    /**
+     * Allow mouse and selection events inside the renderer content to pass
+     * 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.
+     * 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
+     * stopping `cut`, a subsequent Ctrl+X would cause ProseMirror to delete the
+     * entire sync block node instead of cutting the user's text selection.
+     *
+     * Copy events are conditionally stopped: when the user has an active native
+     * text selection inside the renderer, `copy` is stopped so the browser handles
+     * it natively (copying the selected text). When there is no text selection
+     * (just a PM NodeSelection), `copy` is NOT stopped so ProseMirror's copy
+     * handler runs and sets the "sync-block-copied" flag for the reference paste flow.
+     *
+     * Events on the SyncBlockLabel are left for ProseMirror to handle, preserving
+     * label click interactions and the floating toolbar.
+     *
+     * The renderer wrapper sets contentEditable="true" to create a re-editable
+     * island inside ProseMirror's contentEditable="false" nodeview, enabling
+     * native text selection and preventing browser drag behaviour.
+     */
+    stopEvent(event: Event): boolean;
     validUpdate(currentNode: PMNode, newNode: PMNode): boolean;
     update(node: PMNode, decorations: ReadonlyArray<Decoration>, innerDecorations?: DecorationSource): boolean;
     render({ getPos }: SyncBlockNodeViewProps): React.JSX.Element | null;

package/dist/types-ts4.5/nodeviews/syncedBlock.d.ts

@@ -31,7 +31,35 @@ export declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     private removeSyncBlockStable;
     private fetchSyncBlockSourceInfoStable;
     unsubscribe: (() => void) | undefined;
+    private dragStartHandler;
     createDomRef(): HTMLElement;
+    /**
+     * Allow mouse and selection events inside the renderer content to pass
+     * 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.
+     * 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
+     * stopping `cut`, a subsequent Ctrl+X would cause ProseMirror to delete the
+     * entire sync block node instead of cutting the user's text selection.
+     *
+     * Copy events are conditionally stopped: when the user has an active native
+     * text selection inside the renderer, `copy` is stopped so the browser handles
+     * it natively (copying the selected text). When there is no text selection
+     * (just a PM NodeSelection), `copy` is NOT stopped so ProseMirror's copy
+     * handler runs and sets the "sync-block-copied" flag for the reference paste flow.
+     *
+     * Events on the SyncBlockLabel are left for ProseMirror to handle, preserving
+     * label click interactions and the floating toolbar.
+     *
+     * The renderer wrapper sets contentEditable="true" to create a re-editable
+     * island inside ProseMirror's contentEditable="false" nodeview, enabling
+     * native text selection and preventing browser drag behaviour.
+     */
+    stopEvent(event: Event): boolean;
     validUpdate(currentNode: PMNode, newNode: PMNode): boolean;
     update(node: PMNode, decorations: ReadonlyArray<Decoration>, innerDecorations?: DecorationSource): boolean;
     render({ getPos }: SyncBlockNodeViewProps): React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "9.0.1",
+	"version": "9.0.3",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,12 +28,12 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.15.0",
+		"@atlaskit/adf-schema": "^52.16.0",
 		"@atlaskit/button": "23.11.8",
 		"@atlaskit/dropdown-menu": "16.10.1",
 		"@atlaskit/editor-json-transformer": "^8.33.0",
 		"@atlaskit/editor-plugin-analytics": "^11.0.0",
-		"@atlaskit/editor-plugin-block-menu": "^10.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^10.1.0",
 		"@atlaskit/editor-plugin-connectivity": "11.0.0",
 		"@atlaskit/editor-plugin-content-format": "^5.0.0",
 		"@atlaskit/editor-plugin-decorations": "^11.0.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-synced-block-provider": "^7.0.0",
-		"@atlaskit/editor-toolbar": "^1.9.0",
+		"@atlaskit/editor-toolbar": "^1.10.0",
 		"@atlaskit/flag": "^17.12.0",
 		"@atlaskit/icon": "35.4.0",
 		"@atlaskit/icon-lab": "^6.13.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": "^88.1.0",
+		"@atlaskit/tmp-editor-statsig": "^89.0.0",
 		"@atlaskit/tokens": "13.1.1",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
@@ -64,7 +64,7 @@
 		"date-fns": "^2.17.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.0.0",
+		"@atlaskit/editor-common": "^115.2.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},