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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.4.5
+
+### Patch Changes
+
+- [`1a05924d64777`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a05924d64777) -
+  [EDITOR-5528] Fix bodiedSyncBlock mutation
+- Updated dependencies
+
+## 5.4.4
+
+### Patch Changes
+
+- [`29d9d25ebe53a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/29d9d25ebe53a) -
+  [ux] EDITOR-5009 show sync block border when dragging
+- Updated dependencies
+
 ## 5.4.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -44,15 +44,24 @@
 		{
 			"path": "../../editor-plugin-connectivity/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-content-format/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-cc/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-floating-toolbar/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-focus/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-prosemirror/afm-cc/tsconfig.json"
 		},
@@ -92,6 +101,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -44,15 +44,24 @@
 		{
 			"path": "../../editor-plugin-connectivity/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-content-format/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-jira/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-floating-toolbar/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-focus/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-prosemirror/afm-jira/tsconfig.json"
 		},
@@ -92,6 +101,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -44,15 +44,24 @@
 		{
 			"path": "../../editor-plugin-connectivity/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-content-format/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-products/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-floating-toolbar/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-focus/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-prosemirror/afm-products/tsconfig.json"
 		},
@@ -92,6 +101,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
 		},

package/dist/cjs/nodeviews/bodiedLazySyncedBlock.js

@@ -8,6 +8,7 @@ exports.lazyBodiedSyncBlockView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 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" != (0, _typeof2.default)(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); }
+// Delete this file when cleaning up platform_synced_block_patch_5
 var lazyBodiedSyncBlockView = exports.lazyBodiedSyncBlockView = function lazyBodiedSyncBlockView(props) {
   return (0, _lazyNodeView.withLazyLoading)({
     nodeName: 'bodiedSyncBlock',

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.bodiedSyncBlockNodeView = exports.BodiedSyncBlock = void 0;
+exports.bodiedSyncBlockNodeViewOld = exports.bodiedSyncBlockNodeView = exports.BodiedSyncBlock = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -19,27 +19,28 @@ var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
+var _SyncBlockLabel = require("../ui/SyncBlockLabel");
 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; })(); }
-var toDOM = function toDOM() {
+var toDOMOld = function toDOMOld() {
   return ['div', {
     class: _syncBlock.BodiedSyncBlockSharedCssClassName.content,
     contenteditable: true
   }, 0];
 };
-var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
-  function BodiedSyncBlock(props) {
+var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
+  function BodiedSyncBlockOld(props) {
     var _this;
-    (0, _classCallCheck2.default)(this, BodiedSyncBlock);
-    _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    (0, _classCallCheck2.default)(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;
   }
-  (0, _inherits2.default)(BodiedSyncBlock, _ReactNodeView);
-  return (0, _createClass2.default)(BodiedSyncBlock, [{
+  (0, _inherits2.default)(BodiedSyncBlockOld, _ReactNodeView);
+  return (0, _createClass2.default)(BodiedSyncBlockOld, [{
     key: "updateContentEditable",
     value: function updateContentEditable(_ref) {
       var _this$api, _this$api2;
@@ -112,7 +113,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function (_ReactNod
   }, {
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM()),
+      var _DOMSerializer$render = _model.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
@@ -140,7 +141,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function (_ReactNod
     }
   }]);
 }(_reactNodeView.default);
-var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
+var bodiedSyncBlockNodeViewOld = exports.bodiedSyncBlockNodeViewOld = function bodiedSyncBlockNodeViewOld(_ref4) {
   var pluginOptions = _ref4.pluginOptions,
     pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
     api = _ref4.api,
@@ -148,7 +149,7 @@ var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedS
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
-    return new BodiedSyncBlock({
+    return new BodiedSyncBlockOld({
       api: api,
       pluginOptions: pluginOptions,
       node: node,
@@ -159,4 +160,129 @@ var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedS
       syncBlockStore: syncBlockStore
     }).init();
   };
+};
+var toDOM = function toDOM(node) {
+  return ['div', {
+    class: "".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, " bodiedSyncBlockView-content-wrap"),
+    localid: node.attrs.localId,
+    resourceid: node.attrs.resourceId
+  }, ['div', {
+    class: _syncBlock.BodiedSyncBlockSharedCssClassName.content,
+    contenteditable: 'true'
+  }, 0]];
+};
+var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
+  function BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore) {
+    var _this4 = this;
+    (0, _classCallCheck2.default)(this, BodiedSyncBlock);
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.api = api;
+    this.syncBlockStore = syncBlockStore;
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+    var _DOMSerializer$render2 = _model.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.default.createElement(_errorBoundary.ErrorBoundary, {
+        component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        componentId: _analytics.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.default.createElement(_SyncBlockLabel.SyncBlockLabel, {
+        isSource: true,
+        localId: node.attrs.localId
+      }));
+    }, this.dom, this.labelKey);
+    this.updateContentEditable({});
+    this.handleConnectivityModeChange();
+    this.handleViewModeChange();
+  }
+  return (0, _createClass2.default)(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 = !(0, _editorPluginConnectivity.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);
+    }
+  }]);
+}();
+var bodiedSyncBlockNodeView = exports.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/cjs/pm-plugins/main.js

@@ -19,6 +19,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
 var _bodiedSyncedBlock = require("../nodeviews/bodiedSyncedBlock");
 var _syncedBlock = require("../nodeviews/syncedBlock");
@@ -353,7 +354,14 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             }).init()
           );
         },
-        bodiedSyncBlock: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5') ? (0, _bodiedSyncedBlock.bodiedSyncBlockNodeView)({
+        bodiedSyncBlock: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5') ? (0, _experiments.editorExperiment)('platform_synced_block_use_new_source_nodeview', true, {
+          exposure: true
+        }) ? (0, _bodiedSyncedBlock.bodiedSyncBlockNodeView)({
+          pluginOptions: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api,
+          syncBlockStore: syncBlockStore
+        }) : (0, _bodiedSyncedBlock.bodiedSyncBlockNodeViewOld)({
           pluginOptions: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
           api: api,
@@ -365,16 +373,18 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         })
       },
       decorations: function decorations(state) {
-        var _currentPluginState$s, _api$connectivity2, _api$editorViewMode;
+        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 : _view.DecorationSet.empty;
         var syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
         var doc = state.doc;
         var isOffline = (0, _editorPluginConnectivity.isOfflineMode)(api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode);
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+        var isDragging = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5') ? (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'dragging' : undefined;
         var offlineDecorations = [];
         var viewModeDecorations = [];
         var loadingDecorations = [];
+        var dragDecorations = [];
         state.doc.descendants(function (node, pos) {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
@@ -391,8 +401,22 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
               class: _syncBlock.SyncBlockStateCssClassName.creationLoadingClassName
             }));
           }
+
+          // Show sync block border while the user is dragging
+          if (isDragging && (node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
+            dragDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
+              class: _syncBlock.SyncBlockStateCssClassName.draggingClassName
+            }));
+          }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations);
+        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 || !(0, _experiments.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 _view.DecorationSet.empty.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations).add(doc, dragDecorations);
+        }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['bodiedSyncBlock'], function (target) {
         return !!target.closest(".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix));

package/dist/cjs/syncedBlockPlugin.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
 var _bodiedSyncBlockNodeWithToDOMFixed = require("./nodeviews/bodiedSyncBlockNodeWithToDOMFixed");
@@ -38,7 +39,13 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         node: _adfSchema.syncBlock
       }, {
         name: 'bodiedSyncBlock',
-        node: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_3') ? (0, _bodiedSyncBlockNodeWithToDOMFixed.bodiedSyncBlockNodeWithToDOMFixed)() : _adfSchema.bodiedSyncBlock
+        node:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        (0, _platformFeatureFlags.fg)('platform_synced_block_patch_3') && !(0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
+          exposure: true
+        }) ?
+        // delete bodiedSyncBlockNodeWithToDOMFixed when cleaning up platform_synced_block_patch_6
+        (0, _bodiedSyncBlockNodeWithToDOMFixed.bodiedSyncBlockNodeWithToDOMFixed)() : _adfSchema.bodiedSyncBlock
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/cjs/ui/BodiedSyncBlockWrapper.js

@@ -8,6 +8,7 @@ exports.BodiedSyncBlockWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncBlockLabel = require("./SyncBlockLabel");
+// Delete this file when cleaning up platform_synced_block_use_new_source_nodeview
 var BodiedSyncBlockWrapper = exports.BodiedSyncBlockWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var node = _ref.node,
     syncBlockStore = _ref.syncBlockStore;

package/dist/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/SyncBlockLabel.js

@@ -13,6 +13,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
 var _compiled = require("@atlaskit/primitives/compiled");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _time = require("./utils/time");
@@ -79,7 +80,9 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName,
-    "aria-describedby": ariaDescribedById
+    "aria-describedby": (isSource || isUnsyncedBlock) && (0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
+      exposure: true
+    }) ? undefined : ariaDescribedById
   }, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
     color: "var(--ds-icon-subtle, #505258)",
     size: "small",

package/dist/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/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 const lazyBodiedSyncBlockView = props => {
   return withLazyLoading({
     nodeName: 'bodiedSyncBlock',

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -1,5 +1,5 @@
 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';
@@ -7,11 +7,12 @@ 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';
-const toDOM = () => ['div', {
+import { SyncBlockLabel } from '../ui/SyncBlockLabel';
+const toDOMOld = () => ['div', {
   class: BodiedSyncBlockSharedCssClassName.content,
   contenteditable: true
 }, 0];
-export class BodiedSyncBlock extends ReactNodeView {
+class BodiedSyncBlockOld extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.api = props.api;
@@ -84,7 +85,7 @@ export class BodiedSyncBlock extends ReactNodeView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM());
+    } = DOMSerializer.renderSpec(document, toDOMOld());
     // In SSR, the first check won't work, so fallback to nodeType check
     if (dom instanceof HTMLElement || dom.nodeType === 1 && fg('platform_synced_block_patch_5')) {
       this.updateContentEditable({
@@ -107,7 +108,7 @@ export class BodiedSyncBlock extends ReactNodeView {
     }
   }
 }
-export const bodiedSyncBlockNodeView = ({
+export const bodiedSyncBlockNodeViewOld = ({
   pluginOptions,
   pmPluginFactoryParams,
   api,
@@ -117,7 +118,7 @@ export const bodiedSyncBlockNodeView = ({
     portalProviderAPI,
     eventDispatcher
   } = pmPluginFactoryParams;
-  return new BodiedSyncBlock({
+  return new BodiedSyncBlockOld({
     api,
     pluginOptions,
     node,
@@ -127,4 +128,118 @@ export const bodiedSyncBlockNodeView = ({
     eventDispatcher,
     syncBlockStore
   }).init();
+};
+const toDOM = node => ['div', {
+  class: `${BodiedSyncBlockSharedCssClassName.prefix} bodiedSyncBlockView-content-wrap`,
+  localid: node.attrs.localId,
+  resourceid: node.attrs.resourceId
+}, ['div', {
+  class: BodiedSyncBlockSharedCssClassName.content,
+  contenteditable: 'true'
+}, 0]];
+export class BodiedSyncBlock {
+  constructor(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.api = api;
+    this.syncBlockStore = syncBlockStore;
+    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM(this.node));
+    // 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(() => {
+      var _this$api7, _this$api7$analytics;
+      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+        component: ACTION_SUBJECT.SYNCED_BLOCK,
+        componentId: ACTION_SUBJECT_ID.SYNCED_BLOCK_LABEL,
+        dispatchAnalyticsEvent: (_this$api7 = this.api) === null || _this$api7 === void 0 ? void 0 : (_this$api7$analytics = _this$api7.analytics) === null || _this$api7$analytics === void 0 ? void 0 : _this$api7$analytics.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(SyncBlockLabel, {
+        isSource: true,
+        localId: node.attrs.localId
+      }));
+    }, this.dom, this.labelKey);
+    this.updateContentEditable({});
+    this.handleConnectivityModeChange();
+    this.handleViewModeChange();
+  }
+  updateContentEditable({
+    nextConnectivityMode,
+    nextViewMode
+  }) {
+    var _this$api8, _this$api8$connectivi, _this$api8$connectivi2, _this$api8$connectivi3, _this$api9, _this$api9$editorView, _this$api9$editorView2, _this$api9$editorView3;
+    const connectivityMode = nextConnectivityMode !== null && nextConnectivityMode !== void 0 ? nextConnectivityMode : (_this$api8 = this.api) === null || _this$api8 === void 0 ? void 0 : (_this$api8$connectivi = _this$api8.connectivity) === null || _this$api8$connectivi === void 0 ? void 0 : (_this$api8$connectivi2 = _this$api8$connectivi.sharedState) === null || _this$api8$connectivi2 === void 0 ? void 0 : (_this$api8$connectivi3 = _this$api8$connectivi2.currentState()) === null || _this$api8$connectivi3 === void 0 ? void 0 : _this$api8$connectivi3.mode;
+    const viewMode = nextViewMode !== null && nextViewMode !== void 0 ? nextViewMode : (_this$api9 = this.api) === null || _this$api9 === void 0 ? void 0 : (_this$api9$editorView = _this$api9.editorViewMode) === null || _this$api9$editorView === void 0 ? void 0 : (_this$api9$editorView2 = _this$api9$editorView.sharedState) === null || _this$api9$editorView2 === void 0 ? void 0 : (_this$api9$editorView3 = _this$api9$editorView2.currentState()) === null || _this$api9$editorView3 === void 0 ? void 0 : _this$api9$editorView3.mode;
+    const isOnline = !isOfflineMode(connectivityMode);
+    const isEditMode = viewMode !== 'view';
+    const shouldBeEditable = isOnline && isEditMode;
+    this.contentDOM.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
+  }
+  handleConnectivityModeChange() {
+    var _this$api0;
+    if ((_this$api0 = this.api) !== null && _this$api0 !== void 0 && _this$api0.connectivity) {
+      this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(({
+        nextSharedState
+      }) => {
+        this.updateContentEditable({
+          nextConnectivityMode: nextSharedState.mode
+        });
+      });
+    }
+  }
+  handleViewModeChange() {
+    var _this$api1;
+    if ((_this$api1 = this.api) !== null && _this$api1 !== void 0 && _this$api1.editorViewMode) {
+      this.cleanupViewModeListener = this.api.editorViewMode.sharedState.onChange(({
+        nextSharedState
+      }) => {
+        this.updateContentEditable({
+          nextViewMode: nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode
+        });
+      });
+    }
+  }
+  update(node) {
+    if (this.node.type !== node.type) {
+      return false;
+    }
+    if (node !== this.node) {
+      var _this$api$syncedBlock2, _this$api10, _this$api10$syncedBlo, _this$api10$syncedBlo2;
+      const syncBlockStore = (_this$api$syncedBlock2 = (_this$api10 = this.api) === null || _this$api10 === void 0 ? void 0 : (_this$api10$syncedBlo = _this$api10.syncedBlock.sharedState) === null || _this$api10$syncedBlo === void 0 ? void 0 : (_this$api10$syncedBlo2 = _this$api10$syncedBlo.currentState()) === null || _this$api10$syncedBlo2 === void 0 ? void 0 : _this$api10$syncedBlo2.syncBlockStore) !== null && _this$api$syncedBlock2 !== void 0 ? _this$api$syncedBlock2 : this.syncBlockStore;
+      syncBlockStore === null || syncBlockStore === void 0 ? void 0 : syncBlockStore.sourceManager.updateSyncBlockData(node);
+    }
+    this.node = node;
+    return true;
+  }
+  ignoreMutation(mutation) {
+    if (mutation.type === 'selection') {
+      return false;
+    }
+    return true;
+  }
+  destroy() {
+    var _this$cleanupConnecti, _this$cleanupViewMode;
+    (_this$cleanupConnecti = this.cleanupConnectivityModeListener) === null || _this$cleanupConnecti === void 0 ? void 0 : _this$cleanupConnecti.call(this);
+    (_this$cleanupViewMode = this.cleanupViewModeListener) === null || _this$cleanupViewMode === void 0 ? void 0 : _this$cleanupViewMode.call(this);
+    this.nodeViewPortalProviderAPI.remove(this.labelKey);
+  }
+}
+export const bodiedSyncBlockNodeView = props => {
+  const {
+    api,
+    syncBlockStore,
+    pmPluginFactoryParams: {
+      nodeViewPortalProviderAPI
+    }
+  } = props;
+  return (node, view, getPos) => {
+    return new BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI, syncBlockStore);
+  };
 };