@atlaskit/editor-plugin-synced-block 5.3.12 → 5.3.14

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.14
+
+### Patch Changes
+
+- [`ab4e4e442ad49`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab4e4e442ad49) -
+  [ux] [EDITOR-3694] Add loading state to bodiedSyncBlock for when saving new block to BE
+- Updated dependencies
+
+## 5.3.13
+
+### Patch Changes
+
+- [`7ba3979b92b42`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ba3979b92b42) -
+  Remove platform_synced_block_dogfooding feature gate
+- Updated dependencies
+
 ## 5.3.12
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -62,9 +62,6 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
 		},
-		{
-			"path": "../../editor-tables/afm-cc/tsconfig.json"
-		},
 		{
 			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -62,9 +62,6 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-jira/tsconfig.json"
 		},
-		{
-			"path": "../../editor-tables/afm-jira/tsconfig.json"
-		},
 		{
 			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -62,9 +62,6 @@
 		{
 			"path": "../../editor-synced-block-provider/afm-products/tsconfig.json"
 		},
-		{
-			"path": "../../editor-tables/afm-products/tsconfig.json"
-		},
 		{
 			"path": "../../editor-toolbar/afm-products/tsconfig.json"
 		},

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

@@ -30,23 +30,23 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     var paragraphNode = paragraph.createAndFill({});
     var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
-      if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
-          action: _analytics.ACTION.ERROR,
-          actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
-          attributes: {
-            error: 'Create and fill for empty content failed'
-          },
-          eventType: _analytics.EVENT_TYPE.OPERATIONAL
-        });
-      }
+      fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+        action: _analytics.ACTION.ERROR,
+        actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+        attributes: {
+          error: 'Create and fill for empty content failed'
+        },
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
       return false;
     }
 
     // Save the new node with empty content to backend
     // This is so that the node can be copied and referenced without the source being saved/published
-    syncBlockStore.sourceManager.createBodiedSyncBlockNode(attrs);
+    if (!(0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {
+      syncBlockStore.sourceManager.createBodiedSyncBlockNode(attrs, function () {});
+    }
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -55,47 +55,43 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
   } else {
     var conversionInfo = (0, _utils2.canBeConvertedToSyncBlock)(tr.selection);
     if (!conversionInfo) {
-      if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
-          action: _analytics.ACTION.ERROR,
-          actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
-          attributes: {
-            error: 'Content cannot be converted to sync block'
-          },
-          eventType: _analytics.EVENT_TYPE.OPERATIONAL
-        });
-      }
+      fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+        action: _analytics.ACTION.ERROR,
+        actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+        attributes: {
+          error: 'Content cannot be converted to sync block'
+        },
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
       return false;
     }
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
     var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
     if (!_newBodiedSyncBlockNode) {
-      if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
-          action: _analytics.ACTION.ERROR,
-          actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
-          attributes: {
-            error: 'Create and fill for content failed'
-          },
-          eventType: _analytics.EVENT_TYPE.OPERATIONAL
-        });
-      }
+      fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+        action: _analytics.ACTION.ERROR,
+        actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+        attributes: {
+          error: 'Create and fill for content failed'
+        },
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
       return false;
     }
 
     // Save the new node with empty content to backend
     // This is so that the node can be copied and referenced without the source being saved/published
-    syncBlockStore.sourceManager.createBodiedSyncBlockNode(_attrs, _newBodiedSyncBlockNode);
+    if (!(0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {
+      // Moved to appendTransaction
+      syncBlockStore.sourceManager.createBodiedSyncBlockNode(_attrs, function () {}, _newBodiedSyncBlockNode);
+    }
     tr.replaceWith(conversionInfo.from, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
 
     // set selection to the start of the previous selection for the position taken up by the start of the new synced block
     tr.setSelection(_state.TextSelection.create(tr.doc, conversionInfo.from));
   }
-
-  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
-  // see filterTransaction for more details
   return tr;
 };
 var copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboardEditorCommand = function copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, inputMethod, api) {

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -17,7 +17,6 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 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");
 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; })(); }
@@ -97,7 +96,7 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!syncBlockStore) {
         return null;
       }
-      return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+      return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
         dispatchAnalyticsEvent: (_this$api6 = this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions.fireAnalyticsEvent,
         fallbackComponent: null
@@ -105,11 +104,7 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         ref: forwardRef,
         syncBlockStore: syncBlockStore,
         node: this.node
-      })) : /*#__PURE__*/_react.default.createElement(_BodiedSyncBlockWrapper.BodiedSyncBlockWrapper, {
-        ref: forwardRef,
-        syncBlockStore: syncBlockStore,
-        node: this.node
-      });
+      }));
     }
   }, {
     key: "getContentDOM",

package/dist/cjs/nodeviews/syncedBlock.js

@@ -17,7 +17,6 @@ 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 _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorCommands = require("../editor-commands");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
 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)); }
@@ -49,8 +48,7 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         _this$api,
         _this$api2,
         _this2 = this,
-        _this$options2,
-        _this$options3;
+        _this$options2;
       var getPos = _ref.getPos;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
         return null;
@@ -61,14 +59,13 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!resourceId || !localId) {
         return null;
       }
-      var initialSyncBlockStore = (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? this.syncBlockStore : undefined;
-      var syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : initialSyncBlockStore;
+      var syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : this.syncBlockStore;
       if (!syncBlockStore) {
         return null;
       }
 
       // get document node from data provider
-      return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+      return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
         dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions.fireAnalyticsEvent,
         fallbackComponent: null
@@ -93,18 +90,7 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStore, resourceId, localId, (_this2$api = _this2.api) === null || _this2$api === void 0 || (_this2$api = _this2$api.analytics) === null || _this2$api === void 0 || (_this2$api = _this2$api.actions) === null || _this2$api === void 0 ? void 0 : _this2$api.fireAnalyticsEvent);
         },
         api: this.api
-      }))) : /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
-        localId: this.node.attrs.localId,
-        syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
-        useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
-          return (0, _editorSyncedBlockProvider.useFetchSyncBlockTitle)(syncBlockStore, _this2.node);
-        },
-        useFetchSyncBlockData: function useFetchSyncBlockData() {
-          var _this2$api2;
-          return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStore, resourceId, localId, (_this2$api2 = _this2.api) === null || _this2$api2 === void 0 || (_this2$api2 = _this2$api2.analytics) === null || _this2$api2 === void 0 || (_this2$api2 = _this2$api2.actions) === null || _this2$api2 === void 0 ? void 0 : _this2$api2.fireAnalyticsEvent);
-        },
-        api: this.api
-      });
+      })));
     }
   }, {
     key: "destroy",

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.syncedBlockPluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
@@ -17,20 +18,53 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
-var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
 var _syncedBlock = require("../nodeviews/syncedBlock");
 var _types = require("../types");
+var _handleBodiedSyncBlockCreation = require("./utils/handle-bodied-sync-block-creation");
 var _handleBodiedSyncBlockRemoval = require("./utils/handle-bodied-sync-block-removal");
 var _ignoreDomEvent = require("./utils/ignore-dom-event");
 var _selectionDecorations = require("./utils/selection-decorations");
 var _trackSyncBlocks6 = require("./utils/track-sync-blocks");
 var _utils2 = require("./utils/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
+var mapRetryCreationPosMap = function mapRetryCreationPosMap(oldMap, newRetryCreationPos, mapPos) {
+  var resourceId = newRetryCreationPos === null || newRetryCreationPos === void 0 ? void 0 : newRetryCreationPos.resourceId;
+  var newMap = new Map(oldMap);
+  if (resourceId) {
+    var pos = newRetryCreationPos.pos;
+    if (!pos) {
+      newMap.delete(resourceId);
+    } else {
+      newMap.set(resourceId, pos);
+    }
+  }
+  if (newMap.size === 0) {
+    return newMap;
+  }
+  var _iterator = _createForOfIteratorHelper(newMap.entries()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
+        id = _step$value[0],
+        _pos = _step$value[1];
+      newMap.set(id, {
+        from: mapPos(_pos.from),
+        to: mapPos(_pos.to)
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return newMap;
+};
 var showCopiedFlag = function showCopiedFlag(api) {
   // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
   setTimeout(function () {
@@ -64,7 +98,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
   var unpublishedFlagShown = new Set();
 
   // Set up callback to detect unpublished sync blocks when they're fetched
-  (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && syncBlockStore.referenceManager.setOnUnpublishedSyncBlockDetected(function (resourceId) {
+  syncBlockStore.referenceManager.setOnUnpublishedSyncBlockDetected(function (resourceId) {
     // Only show the flag once per sync block
     if (!unpublishedFlagShown.has(resourceId)) {
       unpublishedFlagShown.add(resourceId);
@@ -92,7 +126,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         return {
           selectionDecorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
-          syncBlockStore: syncBlockStore
+          syncBlockStore: syncBlockStore,
+          retryCreationPosMap: new Map()
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState) {
@@ -100,22 +135,29 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         var meta = tr.getMeta(syncedBlockPluginKey);
         var activeFlag = currentPluginState.activeFlag,
           selectionDecorationSet = currentPluginState.selectionDecorationSet,
-          bodiedSyncBlockDeletionStatus = currentPluginState.bodiedSyncBlockDeletionStatus;
+          bodiedSyncBlockDeletionStatus = currentPluginState.bodiedSyncBlockDeletionStatus,
+          retryCreationPosMap = currentPluginState.retryCreationPosMap;
         var newDecorationSet = selectionDecorationSet.map(tr.mapping, tr.doc);
         if (!tr.selection.eq(oldEditorState.selection)) {
           newDecorationSet = (0, _selectionDecorations.calculateDecorations)(tr.doc, tr.selection, tr.doc.type.schema);
         }
+        var newRetryCreationPosMap = retryCreationPosMap;
+        if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {
+          var newPosEntry = meta === null || meta === void 0 ? void 0 : meta.retryCreationPos;
+          newRetryCreationPosMap = mapRetryCreationPosMap(retryCreationPosMap, newPosEntry, tr.mapping.map.bind(tr.mapping));
+        }
         return {
           activeFlag: (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag,
           selectionDecorationSet: newDecorationSet,
           syncBlockStore: syncBlockStore,
+          retryCreationPosMap: newRetryCreationPosMap,
           bodiedSyncBlockDeletionStatus: (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus
         };
       }
     },
     props: {
       nodeViews: {
-        syncBlock: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? function (node, view, getPos, _decorations) {
+        syncBlock: function syncBlock(node, view, getPos, _decorations) {
           // To support SSR, pass `syncBlockStore` here
           // and do not use lazy loading.
           // We cannot start rendering and then load `syncBlockStore` asynchronously,
@@ -130,11 +172,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             eventDispatcher: pmPluginFactoryParams.eventDispatcher,
             syncBlockStore: syncBlockStore
           }).init();
-        } : (0, _lazySyncedBlock.lazySyncBlockView)({
-          options: options,
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api
-        }),
+        },
         bodiedSyncBlock: (0, _bodiedLazySyncedBlock.lazyBodiedSyncBlockView)({
           pluginOptions: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
@@ -142,13 +180,16 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         })
       },
       decorations: function decorations(state) {
-        var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$editorViewMode;
-        var selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : _view.DecorationSet.empty;
+        var _currentPluginState$s, _api$connectivity, _api$editorViewMode;
+        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$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.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 offlineDecorations = [];
         var viewModeDecorations = [];
+        var loadingDecorations = [];
         state.doc.descendants(function (node, pos) {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
@@ -160,8 +201,13 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
               class: _syncBlock.SyncBlockStateCssClassName.viewModeClassName
             }));
           }
+          if (node.type.name === 'bodiedSyncBlock' && syncBlockStore.sourceManager.isPendingCreation(node.attrs.resourceId) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {
+            loadingDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
+              class: _syncBlock.SyncBlockStateCssClassName.creationLoadingClassName
+            }));
+          }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations);
+        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations);
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['bodiedSyncBlock'], function (target) {
         return !!target.closest(".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix));
@@ -222,9 +268,15 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       var _api$connectivity2;
       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 isConfirmedSyncBlockDeletion = Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'));
+      var hasNoPendingRequest = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? false :
+      // requireConfirmationBeforeDelete is always true, so this evaluates to false and hence redundant
+      !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.sourceManager.requireConfirmationBeforeDelete()) && !syncBlockStore.sourceManager.hasPendingCreation();
+      var isCommitsCreation = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? false :
+      // For patch 1, we don't intercept the insert transaction, hence it's redundant
+      Boolean(tr.getMeta('isCommitSyncBlockCreation'));
 
       // Track newly added reference sync blocks before processing the transaction
-      if (tr.docChanged && !tr.getMeta('isRemote') && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+      if (tr.docChanged && !tr.getMeta('isRemote')) {
         var _trackSyncBlocks = (0, _trackSyncBlocks6.trackSyncBlocks)(function (node) {
             return node.type.name === 'syncBlock';
           }, tr, state),
@@ -242,50 +294,47 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       // or are from remote (collab) or already confirmed sync block deletion
       // We only care about local changes that change the document
       // and are not yet confirmed for sync block deletion
-      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.sourceManager.requireConfirmationBeforeDelete()) && !syncBlockStore.sourceManager.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isCommitSyncBlockCreation')) || !isOffline && isConfirmedSyncBlockDeletion) {
+      if (!tr.docChanged || hasNoPendingRequest || Boolean(tr.getMeta('isRemote')) || isCommitsCreation || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
       var _trackSyncBlocks2 = (0, _trackSyncBlocks6.trackSyncBlocks)(syncBlockStore.sourceManager.isSourceBlock, tr, state),
         bodiedSyncBlockRemoved = _trackSyncBlocks2.removed,
         bodiedSyncBlockAdded = _trackSyncBlocks2.added;
       if (!isOffline) {
-        if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-          var _trackSyncBlocks3 = (0, _trackSyncBlocks6.trackSyncBlocks)(function (node) {
-              return node.type.name === 'syncBlock';
-            }, tr, state),
-            syncBlockRemoved = _trackSyncBlocks3.removed,
-            syncBlockAdded = _trackSyncBlocks3.added;
-          syncBlockRemoved.forEach(function (syncBlock) {
-            var _api$analytics;
-            api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
-              action: _analytics.ACTION.DELETED,
-              actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
-              actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
-              attributes: {
-                resourceId: syncBlock.attrs.resourceId,
-                blockInstanceId: syncBlock.attrs.localId
-              },
-              eventType: _analytics.EVENT_TYPE.OPERATIONAL
-            });
+        var _trackSyncBlocks3 = (0, _trackSyncBlocks6.trackSyncBlocks)(function (node) {
+            return node.type.name === 'syncBlock';
+          }, tr, state),
+          syncBlockRemoved = _trackSyncBlocks3.removed,
+          syncBlockAdded = _trackSyncBlocks3.added;
+        syncBlockRemoved.forEach(function (syncBlock) {
+          var _api$analytics;
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
+            action: _analytics.ACTION.DELETED,
+            actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
+            attributes: {
+              resourceId: syncBlock.attrs.resourceId,
+              blockInstanceId: syncBlock.attrs.localId
+            },
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL
           });
-          syncBlockAdded.forEach(function (syncBlock) {
-            var _api$analytics2;
-            api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
-              action: _analytics.ACTION.INSERTED,
-              actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
-              actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
-              attributes: {
-                resourceId: syncBlock.attrs.resourceId,
-                blockInstanceId: syncBlock.attrs.localId
-              },
-              eventType: _analytics.EVENT_TYPE.OPERATIONAL
-            });
+        });
+        syncBlockAdded.forEach(function (syncBlock) {
+          var _api$analytics2;
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+            action: _analytics.ACTION.INSERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
+            attributes: {
+              resourceId: syncBlock.attrs.resourceId,
+              blockInstanceId: syncBlock.attrs.localId
+            },
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL
           });
-        }
-        ;
+        });
         if (bodiedSyncBlockRemoved.length > 0) {
           confirmationTransactionRef.current = tr;
-          return (0, _handleBodiedSyncBlockRemoval.handleBodiedSyncBlockRemoval)(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? getDeleteReason(tr) : undefined);
+          return (0, _handleBodiedSyncBlockRemoval.handleBodiedSyncBlockRemoval)(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr));
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(_utils.pmHistoryPluginKey))) {
@@ -294,18 +343,22 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             // After true is returned here and the node is created, we delete the node in the filterTransaction immediately, which cancels out the creation
             return true;
           }
-
-          // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
-          // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
-          // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
-          syncBlockStore.sourceManager.registerCreationCallback(function () {
-            var _api$core;
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
-              return tr.setMeta('isCommitSyncBlockCreation', true);
+          if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {
+            (0, _handleBodiedSyncBlockCreation.handleBodiedSyncBlockCreation)(bodiedSyncBlockAdded, state, api);
+            return true;
+          } else {
+            // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
+            // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
+            // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
+            syncBlockStore.sourceManager.registerCreationCallback(function () {
+              var _api$core;
+              api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
+                return tr.setMeta('isCommitSyncBlockCreation', true);
+              });
+              api === null || api === void 0 || api.core.actions.focus();
             });
-            api === null || api === void 0 || api.core.actions.focus();
-          });
-          return false;
+            return false;
+          }
         }
       } else {
         var _trackSyncBlocks4 = (0, _trackSyncBlocks6.trackSyncBlocks)(function (node) {
@@ -348,11 +401,11 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           confirmationTransactionRef.current = (0, _editorSyncedBlockProvider.rebaseTransaction)(confirmationTransactionRef.current, tr, newState);
         }
       });
-      var _iterator = _createForOfIteratorHelper(trs),
-        _step;
+      var _iterator2 = _createForOfIteratorHelper(trs),
+        _step2;
       try {
         var _loop = function _loop() {
-            var tr = _step.value;
+            var tr = _step2.value;
             if (!tr.getMeta(_utils.pmHistoryPluginKey)) {
               return 0; // continue
             }
@@ -373,15 +426,15 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             }
           },
           _ret;
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           _ret = _loop();
           if (_ret === 0) continue;
           if (_ret) return _ret.v;
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator.f();
+        _iterator2.f();
       }
       return null;
     }