@atlaskit/editor-plugin-synced-block 5.4.4 → 5.4.5

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

@@ -9,8 +9,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
-import { bodiedSyncBlockNodeView } from '../nodeviews/bodiedSyncedBlock';
+import { bodiedSyncBlockNodeView, bodiedSyncBlockNodeViewOld } from '../nodeviews/bodiedSyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
 import { handleBodiedSyncBlockCreation } from './utils/handle-bodied-sync-block-creation';
@@ -314,7 +315,14 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           eventDispatcher: pmPluginFactoryParams.eventDispatcher,
           syncBlockStore: syncBlockStore
         }).init(),
-        bodiedSyncBlock: fg('platform_synced_block_patch_5') ? bodiedSyncBlockNodeView({
+        bodiedSyncBlock: fg('platform_synced_block_patch_5') ? editorExperiment('platform_synced_block_use_new_source_nodeview', true, {
+          exposure: true
+        }) ? bodiedSyncBlockNodeView({
+          pluginOptions: options,
+          pmPluginFactoryParams,
+          api,
+          syncBlockStore
+        }) : bodiedSyncBlockNodeViewOld({
           pluginOptions: options,
           pmPluginFactoryParams,
           api,
@@ -326,7 +334,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         })
       },
       decorations: state => {
-        var _currentPluginState$s, _api$connectivity2, _api$connectivity2$sh, _api$editorViewMode, _api$editorViewMode$s, _api$userIntent, _api$userIntent$share;
+        var _currentPluginState$s, _api$connectivity2, _api$connectivity2$sh, _api$editorViewMode, _api$editorViewMode$s, _api$userIntent, _api$userIntent$share, _api$focus, _api$focus$sharedStat, _api$focus$sharedStat2;
         const currentPluginState = syncedBlockPluginKey.getState(state);
         const selectionDecorationSet = (_currentPluginState$s = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.selectionDecorationSet) !== null && _currentPluginState$s !== void 0 ? _currentPluginState$s : DecorationSet.empty;
         const syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
@@ -364,7 +372,14 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
             }));
           }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        if (api !== null && api !== void 0 && (_api$focus = api.focus) !== null && _api$focus !== void 0 && (_api$focus$sharedStat = _api$focus.sharedState) !== null && _api$focus$sharedStat !== void 0 && (_api$focus$sharedStat2 = _api$focus$sharedStat.currentState()) !== null && _api$focus$sharedStat2 !== void 0 && _api$focus$sharedStat2.hasFocus || !editorExperiment('platform_synced_block_patch_6', true, {
+          exposure: true
+        })) {
+          // Don't show decorations if the editor is not focused
+          return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        } else {
+          return DecorationSet.empty.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        }
       },
       handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], target => !!target.closest(`.${BodiedSyncBlockSharedCssClassName.prefix}`), {
         useLongPressSelection

package/dist/es2019/syncedBlockPlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
 import { bodiedSyncBlockNodeWithToDOMFixed } from './nodeviews/bodiedSyncBlockNodeWithToDOMFixed';
@@ -32,7 +33,13 @@ export const syncedBlockPlugin = ({
         node: syncBlock
       }, {
         name: 'bodiedSyncBlock',
-        node: fg('platform_synced_block_patch_3') ? bodiedSyncBlockNodeWithToDOMFixed() : bodiedSyncBlock
+        node:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        fg('platform_synced_block_patch_3') && !editorExperiment('platform_synced_block_patch_6', true, {
+          exposure: true
+        }) ?
+        // delete bodiedSyncBlockNodeWithToDOMFixed when cleaning up platform_synced_block_patch_6
+        bodiedSyncBlockNodeWithToDOMFixed() : bodiedSyncBlock
       }];
     },
     pmPlugins() {

package/dist/es2019/ui/BodiedSyncBlockWrapper.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockLabel } from './SyncBlockLabel';
+// Delete this file when cleaning up platform_synced_block_use_new_source_nodeview
 export const BodiedSyncBlockWrapper = /*#__PURE__*/React.forwardRef(({
   node,
   syncBlockStore

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -1,4 +1,4 @@
-/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./DeleteConfirmationModal.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useState } from 'react';

package/dist/es2019/ui/SyncBlockLabel.js

@@ -4,6 +4,7 @@ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages'
 import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
 import { Text } from '@atlaskit/primitives/compiled';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { formatElapsedTime } from './utils/time';
@@ -69,7 +70,9 @@ const SyncBlockLabelComponent = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: SyncBlockLabelSharedCssClassName.labelClassName,
-    "aria-describedby": ariaDescribedById
+    "aria-describedby": (isSource || isUnsyncedBlock) && editorExperiment('platform_synced_block_patch_6', true, {
+      exposure: true
+    }) ? undefined : ariaDescribedById
   }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
     color: "var(--ds-icon-subtle, #505258)",
     size: "small",

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -1,4 +1,4 @@
-/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';

package/dist/es2019/ui/quick-insert.js

@@ -1,4 +1,4 @@
-/* quick-insert.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* quick-insert.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./quick-insert.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/nodeviews/bodiedLazySyncedBlock.js

@@ -1,4 +1,5 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+// Delete this file when cleaning up platform_synced_block_patch_5
 export var lazyBodiedSyncBlockView = function lazyBodiedSyncBlockView(props) {
   return withLazyLoading({
     nodeName: 'bodiedSyncBlock',

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -14,25 +14,26 @@ import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
-var toDOM = function toDOM() {
+import { SyncBlockLabel } from '../ui/SyncBlockLabel';
+var toDOMOld = function toDOMOld() {
   return ['div', {
     class: BodiedSyncBlockSharedCssClassName.content,
     contenteditable: true
   }, 0];
 };
-export var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
-  function BodiedSyncBlock(props) {
+var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
+  function BodiedSyncBlockOld(props) {
     var _this;
-    _classCallCheck(this, BodiedSyncBlock);
-    _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    _classCallCheck(this, BodiedSyncBlockOld);
+    _this = _callSuper(this, BodiedSyncBlockOld, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.api = props.api;
     _this.syncBlockStore = props.syncBlockStore;
     _this.handleConnectivityModeChange();
     _this.handleViewModeChange();
     return _this;
   }
-  _inherits(BodiedSyncBlock, _ReactNodeView);
-  return _createClass(BodiedSyncBlock, [{
+  _inherits(BodiedSyncBlockOld, _ReactNodeView);
+  return _createClass(BodiedSyncBlockOld, [{
     key: "updateContentEditable",
     value: function updateContentEditable(_ref) {
       var _this$api, _this$api2;
@@ -105,7 +106,7 @@ export var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM()),
+      var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOMOld()),
         dom = _DOMSerializer$render.dom,
         contentDOM = _DOMSerializer$render.contentDOM;
       // In SSR, the first check won't work, so fallback to nodeType check
@@ -133,7 +134,7 @@ export var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
 }(ReactNodeView);
-export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
+export var bodiedSyncBlockNodeViewOld = function bodiedSyncBlockNodeViewOld(_ref4) {
   var pluginOptions = _ref4.pluginOptions,
     pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
     api = _ref4.api,
@@ -141,7 +142,7 @@ export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
-    return new BodiedSyncBlock({
+    return new BodiedSyncBlockOld({
       api: api,
       pluginOptions: pluginOptions,
       node: node,
@@ -152,4 +153,129 @@ export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
       syncBlockStore: syncBlockStore
     }).init();
   };
+};
+var toDOM = function toDOM(node) {
+  return ['div', {
+    class: "".concat(BodiedSyncBlockSharedCssClassName.prefix, " bodiedSyncBlockView-content-wrap"),
+    localid: node.attrs.localId,
+    resourceid: node.attrs.resourceId
+  }, ['div', {
+    class: BodiedSyncBlockSharedCssClassName.content,
+    contenteditable: 'true'
+  }, 0]];
+};
+export var BodiedSyncBlock = /*#__PURE__*/function () {
+  function BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore) {
+    var _this4 = this;
+    _classCallCheck(this, BodiedSyncBlock);
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.api = api;
+    this.syncBlockStore = syncBlockStore;
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+    var _DOMSerializer$render2 = DOMSerializer.renderSpec(document, toDOM(this.node)),
+      dom = _DOMSerializer$render2.dom,
+      contentDOM = _DOMSerializer$render2.contentDOM;
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    this.dom = dom;
+    // eslint-disable-next-line @atlaskit/editor/no-as-casting
+    this.contentDOM = contentDOM;
+    this.labelKey = crypto.randomUUID();
+    this.nodeViewPortalProviderAPI.render(function () {
+      var _this4$api;
+      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+        component: ACTION_SUBJECT.SYNCED_BLOCK,
+        componentId: ACTION_SUBJECT_ID.SYNCED_BLOCK_LABEL,
+        dispatchAnalyticsEvent: (_this4$api = _this4.api) === null || _this4$api === void 0 || (_this4$api = _this4$api.analytics) === null || _this4$api === void 0 ? void 0 : _this4$api.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(SyncBlockLabel, {
+        isSource: true,
+        localId: node.attrs.localId
+      }));
+    }, this.dom, this.labelKey);
+    this.updateContentEditable({});
+    this.handleConnectivityModeChange();
+    this.handleViewModeChange();
+  }
+  return _createClass(BodiedSyncBlock, [{
+    key: "updateContentEditable",
+    value: function updateContentEditable(_ref5) {
+      var _this$api7, _this$api8;
+      var nextConnectivityMode = _ref5.nextConnectivityMode,
+        nextViewMode = _ref5.nextViewMode;
+      var connectivityMode = nextConnectivityMode !== null && nextConnectivityMode !== void 0 ? nextConnectivityMode : (_this$api7 = this.api) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.connectivity) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.sharedState) === null || _this$api7 === void 0 || (_this$api7 = _this$api7.currentState()) === null || _this$api7 === void 0 ? void 0 : _this$api7.mode;
+      var viewMode = nextViewMode !== null && nextViewMode !== void 0 ? nextViewMode : (_this$api8 = this.api) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.editorViewMode) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.sharedState) === null || _this$api8 === void 0 || (_this$api8 = _this$api8.currentState()) === null || _this$api8 === void 0 ? void 0 : _this$api8.mode;
+      var isOnline = !isOfflineMode(connectivityMode);
+      var isEditMode = viewMode !== 'view';
+      var shouldBeEditable = isOnline && isEditMode;
+      this.contentDOM.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
+    }
+  }, {
+    key: "handleConnectivityModeChange",
+    value: function handleConnectivityModeChange() {
+      var _this$api9,
+        _this5 = this;
+      if ((_this$api9 = this.api) !== null && _this$api9 !== void 0 && _this$api9.connectivity) {
+        this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(function (_ref6) {
+          var nextSharedState = _ref6.nextSharedState;
+          _this5.updateContentEditable({
+            nextConnectivityMode: nextSharedState.mode
+          });
+        });
+      }
+    }
+  }, {
+    key: "handleViewModeChange",
+    value: function handleViewModeChange() {
+      var _this$api0,
+        _this6 = this;
+      if ((_this$api0 = this.api) !== null && _this$api0 !== void 0 && _this$api0.editorViewMode) {
+        this.cleanupViewModeListener = this.api.editorViewMode.sharedState.onChange(function (_ref7) {
+          var nextSharedState = _ref7.nextSharedState;
+          _this6.updateContentEditable({
+            nextViewMode: nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode
+          });
+        });
+      }
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      if (this.node.type !== node.type) {
+        return false;
+      }
+      if (node !== this.node) {
+        var _this$api$syncedBlock2, _this$api1;
+        var syncBlockStore = (_this$api$syncedBlock2 = (_this$api1 = this.api) === null || _this$api1 === void 0 || (_this$api1 = _this$api1.syncedBlock.sharedState) === null || _this$api1 === void 0 || (_this$api1 = _this$api1.currentState()) === null || _this$api1 === void 0 ? void 0 : _this$api1.syncBlockStore) !== null && _this$api$syncedBlock2 !== void 0 ? _this$api$syncedBlock2 : this.syncBlockStore;
+        syncBlockStore === null || syncBlockStore === void 0 || syncBlockStore.sourceManager.updateSyncBlockData(node);
+      }
+      this.node = node;
+      return true;
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      if (mutation.type === 'selection') {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$cleanupConnecti, _this$cleanupViewMode;
+      (_this$cleanupConnecti = this.cleanupConnectivityModeListener) === null || _this$cleanupConnecti === void 0 || _this$cleanupConnecti.call(this);
+      (_this$cleanupViewMode = this.cleanupViewModeListener) === null || _this$cleanupViewMode === void 0 || _this$cleanupViewMode.call(this);
+      this.nodeViewPortalProviderAPI.remove(this.labelKey);
+    }
+  }]);
+}();
+export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(props) {
+  var api = props.api,
+    syncBlockStore = props.syncBlockStore,
+    nodeViewPortalProviderAPI = props.pmPluginFactoryParams.nodeViewPortalProviderAPI;
+  return function (node, view, getPos) {
+    return new BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore);
+  };
 };

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

@@ -17,8 +17,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
-import { bodiedSyncBlockNodeView } from '../nodeviews/bodiedSyncedBlock';
+import { bodiedSyncBlockNodeView, bodiedSyncBlockNodeViewOld } from '../nodeviews/bodiedSyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
 import { handleBodiedSyncBlockCreation } from './utils/handle-bodied-sync-block-creation';
@@ -346,7 +347,14 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
             }).init()
           );
         },
-        bodiedSyncBlock: fg('platform_synced_block_patch_5') ? bodiedSyncBlockNodeView({
+        bodiedSyncBlock: fg('platform_synced_block_patch_5') ? editorExperiment('platform_synced_block_use_new_source_nodeview', true, {
+          exposure: true
+        }) ? bodiedSyncBlockNodeView({
+          pluginOptions: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api,
+          syncBlockStore: syncBlockStore
+        }) : bodiedSyncBlockNodeViewOld({
           pluginOptions: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
           api: api,
@@ -358,7 +366,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         })
       },
       decorations: function decorations(state) {
-        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode, _api$userIntent;
+        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode, _api$userIntent, _api$focus;
         var currentPluginState = syncedBlockPluginKey.getState(state);
         var selectionDecorationSet = (_currentPluginState$s = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.selectionDecorationSet) !== null && _currentPluginState$s !== void 0 ? _currentPluginState$s : DecorationSet.empty;
         var syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
@@ -394,7 +402,14 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
             }));
           }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        if (api !== null && api !== void 0 && (_api$focus = api.focus) !== null && _api$focus !== void 0 && (_api$focus = _api$focus.sharedState) !== null && _api$focus !== void 0 && (_api$focus = _api$focus.currentState()) !== null && _api$focus !== void 0 && _api$focus.hasFocus || !editorExperiment('platform_synced_block_patch_6', true, {
+          exposure: true
+        })) {
+          // Don't show decorations if the editor is not focused
+          return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        } else {
+          return DecorationSet.empty.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        }
       },
       handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], function (target) {
         return !!target.closest(".".concat(BodiedSyncBlockSharedCssClassName.prefix));

package/dist/esm/syncedBlockPlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { flushBodiedSyncBlocks as _flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
 import { bodiedSyncBlockNodeWithToDOMFixed } from './nodeviews/bodiedSyncBlockNodeWithToDOMFixed';
@@ -31,7 +32,13 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         node: syncBlock
       }, {
         name: 'bodiedSyncBlock',
-        node: fg('platform_synced_block_patch_3') ? bodiedSyncBlockNodeWithToDOMFixed() : bodiedSyncBlock
+        node:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        fg('platform_synced_block_patch_3') && !editorExperiment('platform_synced_block_patch_6', true, {
+          exposure: true
+        }) ?
+        // delete bodiedSyncBlockNodeWithToDOMFixed when cleaning up platform_synced_block_patch_6
+        bodiedSyncBlockNodeWithToDOMFixed() : bodiedSyncBlock
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/esm/ui/BodiedSyncBlockWrapper.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockLabel } from './SyncBlockLabel';
+// Delete this file when cleaning up platform_synced_block_use_new_source_nodeview
 export var BodiedSyncBlockWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var node = _ref.node,
     syncBlockStore = _ref.syncBlockStore;

package/dist/esm/ui/DeleteConfirmationModal.js

@@ -1,4 +1,4 @@
-/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./DeleteConfirmationModal.compiled.css";

package/dist/esm/ui/SyncBlockLabel.js

@@ -5,6 +5,7 @@ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages'
 import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
 import { Text } from '@atlaskit/primitives/compiled';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { formatElapsedTime } from './utils/time';
@@ -70,7 +71,9 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: SyncBlockLabelSharedCssClassName.labelClassName,
-    "aria-describedby": ariaDescribedById
+    "aria-describedby": (isSource || isUnsyncedBlock) && editorExperiment('platform_synced_block_patch_6', true, {
+      exposure: true
+    }) ? undefined : ariaDescribedById
   }, /*#__PURE__*/React.createElement(BlockSyncedIcon, {
     color: "var(--ds-icon-subtle, #505258)",
     size: "small",

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -1,4 +1,4 @@
-/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

package/dist/esm/ui/quick-insert.js

@@ -1,4 +1,4 @@
-/* quick-insert.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* quick-insert.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./quick-insert.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,11 +1,10 @@
-import React from 'react';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { ForwardRef, ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
+import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
 import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
-import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, getPosHandlerNode, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
@@ -18,27 +17,34 @@ export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     syncBlockStore?: SyncBlockStoreManager;
     view: EditorView;
 }
-export declare class BodiedSyncBlock extends ReactNodeView<BodiedSyncBlockNodeViewProps> {
-    private cleanupConnectivityModeListener?;
-    private cleanupViewModeListener?;
+export interface BodiedSyncBlockNodeViewProperties {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    pluginOptions: SyncedBlockPluginOptions | undefined;
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    syncBlockStore?: SyncBlockStoreManager;
+}
+export declare const bodiedSyncBlockNodeViewOld: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;
+export declare class BodiedSyncBlock implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    node: PMNode;
+    view: EditorView;
+    getPos: getPosHandlerNode;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     private api?;
     private syncBlockStore?;
-    constructor(props: BodiedSyncBlockNodeViewProps);
+    private cleanupConnectivityModeListener?;
+    private cleanupViewModeListener?;
+    private labelKey;
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, syncBlockStore?: SyncBlockStoreManager);
     private updateContentEditable;
     private handleConnectivityModeChange;
     private handleViewModeChange;
-    createDomRef(): HTMLElement;
-    render(_props: never, forwardRef: ForwardRef): React.JSX.Element | null;
-    getContentDOM(): {
-        dom: HTMLElement;
-        contentDOM: HTMLElement | undefined;
-    } | undefined;
+    update(node: PMNode): boolean;
+    ignoreMutation(mutation: MutationRecord | {
+        target: Node;
+        type: 'selection';
+    }): boolean;
     destroy(): void;
 }
-export interface BodiedSyncBlockNodeViewProperties {
-    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
-    pluginOptions: SyncedBlockPluginOptions | undefined;
-    pmPluginFactoryParams: PMPluginFactoryParams;
-    syncBlockStore?: SyncBlockStoreManager;
-}
-export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;
+export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => ((node: PMNode, view: EditorView, getPos: getPosHandler) => NodeView);

package/dist/types/syncedBlockPluginType.d.ts

@@ -10,6 +10,7 @@ import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
+import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
@@ -81,7 +82,8 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<ConnectivityPlugin>,
         OptionalPlugin<EditorViewModePlugin>,
         OptionalPlugin<ContentFormatPlugin>,
-        OptionalPlugin<UserIntentPlugin>
+        OptionalPlugin<UserIntentPlugin>,
+        OptionalPlugin<FocusPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
     sharedState: SyncedBlockSharedState | undefined;

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

@@ -1,11 +1,10 @@
-import React from 'react';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { ForwardRef, ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
+import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
 import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
-import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, getPosHandlerNode, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
@@ -18,27 +17,34 @@ export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     syncBlockStore?: SyncBlockStoreManager;
     view: EditorView;
 }
-export declare class BodiedSyncBlock extends ReactNodeView<BodiedSyncBlockNodeViewProps> {
-    private cleanupConnectivityModeListener?;
-    private cleanupViewModeListener?;
+export interface BodiedSyncBlockNodeViewProperties {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    pluginOptions: SyncedBlockPluginOptions | undefined;
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    syncBlockStore?: SyncBlockStoreManager;
+}
+export declare const bodiedSyncBlockNodeViewOld: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;
+export declare class BodiedSyncBlock implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    node: PMNode;
+    view: EditorView;
+    getPos: getPosHandlerNode;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
     private api?;
     private syncBlockStore?;
-    constructor(props: BodiedSyncBlockNodeViewProps);
+    private cleanupConnectivityModeListener?;
+    private cleanupViewModeListener?;
+    private labelKey;
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, nodeViewPortalProviderAPI: PortalProviderAPI, syncBlockStore?: SyncBlockStoreManager);
     private updateContentEditable;
     private handleConnectivityModeChange;
     private handleViewModeChange;
-    createDomRef(): HTMLElement;
-    render(_props: never, forwardRef: ForwardRef): React.JSX.Element | null;
-    getContentDOM(): {
-        dom: HTMLElement;
-        contentDOM: HTMLElement | undefined;
-    } | undefined;
+    update(node: PMNode): boolean;
+    ignoreMutation(mutation: MutationRecord | {
+        target: Node;
+        type: 'selection';
+    }): boolean;
     destroy(): void;
 }
-export interface BodiedSyncBlockNodeViewProperties {
-    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
-    pluginOptions: SyncedBlockPluginOptions | undefined;
-    pmPluginFactoryParams: PMPluginFactoryParams;
-    syncBlockStore?: SyncBlockStoreManager;
-}
-export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;
+export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => ((node: PMNode, view: EditorView, getPos: getPosHandler) => NodeView);

package/dist/types-ts4.5/syncedBlockPluginType.d.ts

@@ -10,6 +10,7 @@ import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
+import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
@@ -81,7 +82,8 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         OptionalPlugin<ConnectivityPlugin>,
         OptionalPlugin<EditorViewModePlugin>,
         OptionalPlugin<ContentFormatPlugin>,
-        OptionalPlugin<UserIntentPlugin>
+        OptionalPlugin<UserIntentPlugin>,
+        OptionalPlugin<FocusPlugin>
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
     sharedState: SyncedBlockSharedState | undefined;