@atlaskit/editor-synced-block-provider 2.1.2 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-synced-block-provider
 
+## 2.2.1
+
+### Patch Changes
+
+- [`127d07803ff4c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/127d07803ff4c) -
+  Internal refactor of sync block store manager
+- Updated dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- [`49860e3111ce8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49860e3111ce8) -
+  [ux] [EDITOR-2481] Implement plugin action flushBodiedSyncBlocks so that bodied sync block content
+  is only updated when required
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch Changes

package/dist/cjs/common/types.js

@@ -1,29 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SyncBlockStatus = exports.SyncBlockDataProvider = void 0;
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _nodeDataProvider = require("@atlaskit/node-data-provider");
-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; })(); }
+exports.SyncBlockStatus = void 0;
 var SyncBlockStatus = exports.SyncBlockStatus = /*#__PURE__*/function (SyncBlockStatus) {
   SyncBlockStatus["Errored"] = "errored";
   SyncBlockStatus["NotFound"] = "not_found";
   SyncBlockStatus["Unauthorized"] = "unauthorized";
   return SyncBlockStatus;
-}({});
-var SyncBlockDataProvider = exports.SyncBlockDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
-  function SyncBlockDataProvider() {
-    (0, _classCallCheck2.default)(this, SyncBlockDataProvider);
-    return _callSuper(this, SyncBlockDataProvider, arguments);
-  }
-  (0, _inherits2.default)(SyncBlockDataProvider, _NodeDataProvider);
-  return (0, _createClass2.default)(SyncBlockDataProvider);
-}(_nodeDataProvider.NodeDataProvider);
+}({});

package/dist/cjs/hooks/useFetchSyncBlockData.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFetchSyncBlockData = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _types = require("../common/types");
+var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyncBlockData(manager, syncBlockNode) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fetchSyncBlockDataResult = _useState2[0],
+    setFetchSyncBlockDataResult = _useState2[1];
+  var fetchSyncBlockNode = (0, _react.useCallback)(function () {
+    manager.fetchSyncBlockData(syncBlockNode).then(function (data) {
+      if (data && 'status' in data) {
+        // if there is an error, we don't want to replace real existing data with the error data
+        if (!fetchSyncBlockDataResult || 'status' in fetchSyncBlockDataResult) {
+          setFetchSyncBlockDataResult(data);
+        }
+      } else {
+        setFetchSyncBlockDataResult(data !== null && data !== void 0 ? data : null);
+      }
+    }).catch(function () {
+      //TODO: EDITOR-1921 - add error analytics
+      if (!fetchSyncBlockDataResult || 'status' in fetchSyncBlockDataResult) {
+        setFetchSyncBlockDataResult({
+          status: _types.SyncBlockStatus.Errored
+        });
+      }
+    });
+  }, [manager, syncBlockNode, fetchSyncBlockDataResult]);
+  (0, _react.useEffect)(function () {
+    fetchSyncBlockNode();
+    var interval = window.setInterval(fetchSyncBlockNode, 3000);
+    return function () {
+      window.clearInterval(interval);
+    };
+  }, [fetchSyncBlockNode]);
+  return fetchSyncBlockDataResult;
+};

package/dist/cjs/hooks/useHandleContentChanges.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHandleContentChanges = void 0;
+var _react = require("react");
+var useHandleContentChanges = exports.useHandleContentChanges = function useHandleContentChanges(manager, syncBlockNode) {
+  (0, _react.useEffect)(function () {
+    //TODO: EDITOR-1921 - add error analytics
+    manager.updateSyncBlockData(syncBlockNode);
+  }, [manager, syncBlockNode]);
+};

package/dist/cjs/index.js

@@ -24,7 +24,7 @@ Object.defineProperty(exports, "SyncedBlockProvider", {
 Object.defineProperty(exports, "convertSyncBlockPMNodeToSyncBlockData", {
   enumerable: true,
   get: function get() {
-    return _utils.convertSyncBlockPMNodeToSyncBlockNode;
+    return _utils.convertSyncBlockPMNodeToSyncBlockData;
   }
 });
 Object.defineProperty(exports, "createContentAPIProvidersWithDefaultKey", {
@@ -66,13 +66,13 @@ Object.defineProperty(exports, "rebaseTransaction", {
 Object.defineProperty(exports, "useFetchSyncBlockData", {
   enumerable: true,
   get: function get() {
-    return _syncBlockStoreManager.useFetchSyncBlockData;
+    return _useFetchSyncBlockData.useFetchSyncBlockData;
   }
 });
 Object.defineProperty(exports, "useHandleContentChanges", {
   enumerable: true,
   get: function get() {
-    return _syncBlockStoreManager.useHandleContentChanges;
+    return _useHandleContentChanges.useHandleContentChanges;
   }
 });
 Object.defineProperty(exports, "useMemoizedContentAPIProviders", {
@@ -87,12 +87,14 @@ Object.defineProperty(exports, "useMemoizedSyncedBlockProvider", {
     return _syncBlockProvider.useMemoizedSyncedBlockProvider;
   }
 });
-var _syncBlockProvider = require("./common/syncBlockProvider");
-var _syncBlockStoreManager = require("./common/syncBlockStoreManager");
+var _syncBlockProvider = require("./providers/syncBlockProvider");
+var _syncBlockStoreManager = require("./store-manager/syncBlockStoreManager");
+var _useFetchSyncBlockData = require("./hooks/useFetchSyncBlockData");
+var _useHandleContentChanges = require("./hooks/useHandleContentChanges");
 var _types = require("./common/types");
-var _inMemory = require("./providers/inMemory");
+var _inMemory = require("./providers/in-memory/inMemory");
 var _schema = require("./common/schema");
-var _confluenceContentAPI = require("./providers/confluenceContentAPI");
+var _confluenceContentAPI = require("./providers/confluence/confluenceContentAPI");
 var _ari = require("./utils/ari");
 var _utils = require("./utils/utils");
 var _rebaseTransaction = require("./common/rebase-transaction");

package/dist/cjs/providers/{confluenceContentAPI.js → confluence/confluenceContentAPI.js}

@@ -12,10 +12,10 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
-var _types = require("../common/types");
-var _ari = require("../utils/ari");
-var _contentProperty4 = require("../utils/contentProperty");
-var _utils = require("../utils/utils");
+var _types = require("../../common/types");
+var _ari = require("../../utils/ari");
+var _contentProperty4 = require("../../utils/contentProperty");
+var _utils = require("../../utils/utils");
 /**
  * Configuration for Content API providers
  */

package/dist/cjs/{common → providers}/syncBlockProvider.js

@@ -14,8 +14,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _types = require("../providers/types");
 var _ari = require("../utils/ari");
-var _types = require("./types");
 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 SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {

package/dist/cjs/providers/types.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncBlockDataProvider = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _nodeDataProvider = require("@atlaskit/node-data-provider");
+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 SyncBlockDataProvider = exports.SyncBlockDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
+  function SyncBlockDataProvider() {
+    (0, _classCallCheck2.default)(this, SyncBlockDataProvider);
+    return _callSuper(this, SyncBlockDataProvider, arguments);
+  }
+  (0, _inherits2.default)(SyncBlockDataProvider, _NodeDataProvider);
+  return (0, _createClass2.default)(SyncBlockDataProvider);
+}(_nodeDataProvider.NodeDataProvider);

package/dist/cjs/store-manager/referenceSyncBlockStoreManager.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReferenceSyncBlockStoreManager = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 createSyncBlockNode = function createSyncBlockNode(localId, resourceId) {
+  return {
+    type: 'syncBlock',
+    attrs: {
+      localId: localId,
+      resourceId: resourceId
+    }
+  };
+};
+var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
+  function ReferenceSyncBlockStoreManager(dataProvider) {
+    (0, _classCallCheck2.default)(this, ReferenceSyncBlockStoreManager);
+    this.dataProvider = dataProvider;
+    this.syncBlockCache = new Map();
+    this.syncBlockURLRequests = new Map();
+  }
+
+  /**
+   *
+   * @param localId - The local ID of the sync block to get the source URL for
+   * @param resourceId - The resource ID of the sync block to get the source URL for
+   * Fetches source URl for a sync block and updates sync block data with the source URL asynchronously.
+   */
+  return (0, _createClass2.default)(ReferenceSyncBlockStoreManager, [{
+    key: "fetchSyncBlockSourceURL",
+    value: function fetchSyncBlockSourceURL(_ref) {
+      var _this = this;
+      var localId = _ref.localId,
+        resourceId = _ref.resourceId;
+      if (!localId || !resourceId || !this.dataProvider) {
+        return;
+      }
+
+      // if the sync block is a reference block, we need to fetch the URL to the source
+      // we could optimise this further by checking if the sync block is on the same page as the source
+      if (!this.syncBlockURLRequests.get(localId)) {
+        this.syncBlockURLRequests.set(localId, true);
+        this.dataProvider.retrieveSyncBlockSourceUrl(createSyncBlockNode(localId, resourceId)).then(function (sourceURL) {
+          var existingSyncBlock = _this.syncBlockCache.get(localId);
+          if (existingSyncBlock) {
+            existingSyncBlock.sourceURL = sourceURL;
+          }
+        }).finally(function () {
+          _this.syncBlockURLRequests.set(localId, false);
+        });
+      }
+    }
+  }, {
+    key: "fetchSyncBlockData",
+    value: function () {
+      var _fetchSyncBlockData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(syncBlockNode) {
+        var syncNode, existingSyncBlock, data, fetchSyncBlockDataResult;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (this.dataProvider) {
+                _context.next = 2;
+                break;
+              }
+              throw new Error('Data provider not set');
+            case 2:
+              syncNode = createSyncBlockNode(syncBlockNode.attrs.localId, syncBlockNode.attrs.resourceId); // async fetch source URL if it is not already fetched
+              existingSyncBlock = this.syncBlockCache.get(syncBlockNode.attrs.localId);
+              if (!(existingSyncBlock !== null && existingSyncBlock !== void 0 && existingSyncBlock.sourceURL)) {
+                this.fetchSyncBlockSourceURL({
+                  localId: syncBlockNode.attrs.localId,
+                  resourceId: syncBlockNode.attrs.resourceId
+                });
+              }
+              _context.next = 7;
+              return this.dataProvider.fetchNodesData([syncNode]);
+            case 7:
+              data = _context.sent;
+              if (data) {
+                _context.next = 10;
+                break;
+              }
+              throw new Error('Failed to fetch sync block node data');
+            case 10:
+              fetchSyncBlockDataResult = data[0];
+              if (!('status' in fetchSyncBlockDataResult)) {
+                // only adds it to the map if it did not error out
+                this.syncBlockCache.set(syncBlockNode.attrs.localId, _objectSpread(_objectSpread({}, existingSyncBlock), fetchSyncBlockDataResult));
+              }
+              return _context.abrupt("return", fetchSyncBlockDataResult);
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function fetchSyncBlockData(_x) {
+        return _fetchSyncBlockData.apply(this, arguments);
+      }
+      return fetchSyncBlockData;
+    }()
+    /**
+     * Get the URL for a sync block.
+     * @param localId - The local ID of the sync block to get the URL for
+     * @returns
+     */
+  }, {
+    key: "getSyncBlockURL",
+    value: function getSyncBlockURL(localId) {
+      var syncBlock = this.syncBlockCache.get(localId);
+      return syncBlock === null || syncBlock === void 0 ? void 0 : syncBlock.sourceURL;
+    }
+  }]);
+}();

package/dist/cjs/store-manager/sourceSyncBlockStoreManager.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceSyncBlockStoreManager = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _uuid = _interopRequireDefault(require("uuid"));
+var _rebaseTransaction2 = require("../common/rebase-transaction");
+var _ari = require("../utils/ari");
+var _utils = require("../utils/utils");
+var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PURE__*/function () {
+  function SourceSyncBlockStoreManager(dataProvider) {
+    (0, _classCallCheck2.default)(this, SourceSyncBlockStoreManager);
+    this.dataProvider = dataProvider;
+    this.syncBlockCache = new Map();
+  }
+
+  /**
+   * Add/update a sync block node to/from the local cache
+   * @param syncBlockNode - The sync block node to update
+   */
+  return (0, _createClass2.default)(SourceSyncBlockStoreManager, [{
+    key: "updateSyncBlockData",
+    value: function updateSyncBlockData(syncBlockNode) {
+      try {
+        var _syncBlockNode$attrs = syncBlockNode.attrs,
+          localId = _syncBlockNode$attrs.localId,
+          resourceId = _syncBlockNode$attrs.resourceId;
+        if (!localId || !resourceId) {
+          throw new Error('Local ID or resource ID is not set');
+        }
+        var syncBlockData = (0, _utils.convertSyncBlockPMNodeToSyncBlockData)(syncBlockNode);
+        this.syncBlockCache.set(localId, syncBlockData);
+      } catch (_unused) {
+        //TODO: EDITOR-1921 - add error analytics
+      }
+    }
+
+    /**
+     * Save content of bodiedSyncBlock nodes in local cache to backend
+     *
+     * @returns true if saving all nodes successfully, false if fail to save some/all nodes
+     */
+  }, {
+    key: "flushBodiedSyncBlocks",
+    value: (function () {
+      var _flushBodiedSyncBlocks = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var bodiedSyncBlockNodes, bodiedSyncBlockData, resourceIds;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              if (this.dataProvider) {
+                _context.next = 3;
+                break;
+              }
+              throw new Error('Data provider not set');
+            case 3:
+              bodiedSyncBlockNodes = [];
+              bodiedSyncBlockData = [];
+              Array.from(this.syncBlockCache.values()).forEach(function (syncBlockData) {
+                bodiedSyncBlockNodes.push({
+                  type: 'bodiedSyncBlock',
+                  attrs: {
+                    localId: syncBlockData.blockInstanceId,
+                    resourceId: syncBlockData.resourceId
+                  }
+                });
+                bodiedSyncBlockData.push(syncBlockData);
+              });
+              if (!(bodiedSyncBlockNodes.length === 0)) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return", Promise.resolve(true));
+            case 8:
+              _context.next = 10;
+              return this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
+            case 10:
+              resourceIds = _context.sent;
+              return _context.abrupt("return", resourceIds.every(function (resourceId) {
+                return resourceId !== undefined;
+              }));
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](0);
+              return _context.abrupt("return", false);
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[0, 14]]);
+      }));
+      function flushBodiedSyncBlocks() {
+        return _flushBodiedSyncBlocks.apply(this, arguments);
+      }
+      return flushBodiedSyncBlocks;
+    }())
+  }, {
+    key: "setEditorView",
+    value: function setEditorView(editorView) {
+      this.editorView = editorView;
+    }
+  }, {
+    key: "registerConfirmationCallback",
+    value: function registerConfirmationCallback(callback) {
+      var _this = this;
+      this.confirmationCallback = callback;
+      return function () {
+        _this.confirmationCallback = undefined;
+      };
+    }
+  }, {
+    key: "requireConfirmationBeforeDelete",
+    value: function requireConfirmationBeforeDelete() {
+      return !!this.confirmationCallback;
+    }
+  }, {
+    key: "createSyncBlockNode",
+    value: function createSyncBlockNode() {
+      var _this$dataProvider;
+      var blockInstanceId = (0, _uuid.default)();
+      var sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
+      if (!sourceId) {
+        throw new Error('Provider of sync block plugin is not set');
+      }
+
+      // This should be generated by the data provider implementation as it differs between data providers
+      var resourceId = (0, _ari.resourceIdFromSourceAndLocalId)(sourceId, blockInstanceId);
+      var syncBlockNode = {
+        attrs: {
+          resourceId: resourceId,
+          localId: blockInstanceId
+        },
+        type: 'bodiedSyncBlock'
+      };
+      return syncBlockNode;
+    }
+  }, {
+    key: "deleteSyncBlocksWithConfirmation",
+    value: function () {
+      var _deleteSyncBlocksWithConfirmation = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(tr, syncBlockIds) {
+        var _this2 = this;
+        var confirmed, _this$editorView;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!this.confirmationCallback) {
+                _context2.next = 7;
+                break;
+              }
+              this.confirmationTransaction = tr;
+              _context2.next = 4;
+              return this.confirmationCallback();
+            case 4:
+              confirmed = _context2.sent;
+              if (confirmed) {
+                (_this$editorView = this.editorView) === null || _this$editorView === void 0 || _this$editorView.dispatch(this.confirmationTransaction.setMeta('isConfirmedSyncBlockDeletion', true));
+                // Need to update the BE on deletion
+                syncBlockIds.forEach(function (_ref) {
+                  var localId = _ref.localId;
+                  return _this2.syncBlockCache.delete(localId);
+                });
+              }
+              this.confirmationTransaction = undefined;
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function deleteSyncBlocksWithConfirmation(_x, _x2) {
+        return _deleteSyncBlocksWithConfirmation.apply(this, arguments);
+      }
+      return deleteSyncBlocksWithConfirmation;
+    }()
+  }, {
+    key: "rebaseTransaction",
+    value: function rebaseTransaction(incomingTr, state) {
+      if (!this.confirmationTransaction) {
+        return;
+      }
+      this.confirmationTransaction = (0, _rebaseTransaction2.rebaseTransaction)(this.confirmationTransaction, incomingTr, state);
+    }
+  }]);
+}();

package/dist/cjs/store-manager/syncBlockStoreManager.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncBlockStoreManager = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _referenceSyncBlockStoreManager = require("./referenceSyncBlockStoreManager");
+var _sourceSyncBlockStoreManager = require("./sourceSyncBlockStoreManager");
+// A store manager responsible for the lifecycle and state management of sync blocks in an editor instance.
+// Supports create, read, update, and delete operations for sync blocks.
+// Designed to manage local in-memory state and synchronize with an external data provider.
+// Handles caching, debouncing updates, and publish/subscribe for local changes.
+// Ensures consistency between local and remote state, and can be used in both editor and renderer contexts.
+var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/function () {
+  function SyncBlockStoreManager(dataProvider) {
+    (0, _classCallCheck2.default)(this, SyncBlockStoreManager);
+    this.referenceSyncBlockStoreManager = new _referenceSyncBlockStoreManager.ReferenceSyncBlockStoreManager(dataProvider);
+    this.sourceSyncBlockStoreManager = new _sourceSyncBlockStoreManager.SourceSyncBlockStoreManager(dataProvider);
+  }
+  return (0, _createClass2.default)(SyncBlockStoreManager, [{
+    key: "fetchSyncBlockData",
+    value: function fetchSyncBlockData(syncBlockNode) {
+      if (this.isSourceBlock(syncBlockNode)) {
+        return Promise.reject(new Error('Invalid sync block node type provided for fetchSyncBlockData'));
+      }
+      return this.referenceSyncBlockStoreManager.fetchSyncBlockData(syncBlockNode);
+    }
+
+    /**
+     * Add/update a sync block node to/from the local cache
+     * @param syncBlockNode - The sync block node to update
+     */
+  }, {
+    key: "updateSyncBlockData",
+    value: function updateSyncBlockData(syncBlockNode) {
+      if (this.isSourceBlock(syncBlockNode)) {
+        this.sourceSyncBlockStoreManager.updateSyncBlockData(syncBlockNode);
+      } else {
+        throw new Error('Invalid sync block node type provided for updateSyncBlockData');
+      }
+    }
+
+    /**
+     * Save content of bodiedSyncBlock nodes in local cache to backend
+     *
+     * @returns true if saving all nodes successfully, false if fail to save some/all nodes
+     */
+  }, {
+    key: "flushBodiedSyncBlocks",
+    value: function flushBodiedSyncBlocks() {
+      // only applicable to source sync block, for now (will be refactored further)
+      return this.sourceSyncBlockStoreManager.flushBodiedSyncBlocks();
+    }
+
+    /**
+     * Get the URL for a sync block.
+     * @param localId - The local ID of the sync block to get the URL for
+     * @returns
+     */
+  }, {
+    key: "getSyncBlockURL",
+    value: function getSyncBlockURL(localId) {
+      // only applicable to reference sync block, for now (will be refactored further)
+      return this.referenceSyncBlockStoreManager.getSyncBlockURL(localId);
+    }
+  }, {
+    key: "setEditorView",
+    value: function setEditorView(editorView) {
+      // only applicable to source sync block, for now (will be refactored further)
+      this.sourceSyncBlockStoreManager.setEditorView(editorView);
+    }
+  }, {
+    key: "isSourceBlock",
+    value: function isSourceBlock(node) {
+      return node.type.name === 'bodiedSyncBlock';
+    }
+  }, {
+    key: "registerConfirmationCallback",
+    value: function registerConfirmationCallback(callback) {
+      // only applicable to source sync block, for now (will be refactored further)
+      return this.sourceSyncBlockStoreManager.registerConfirmationCallback(callback);
+    }
+  }, {
+    key: "requireConfirmationBeforeDelete",
+    value: function requireConfirmationBeforeDelete() {
+      // only applicable to source sync block, for now (will be refactored further)
+      return this.sourceSyncBlockStoreManager.requireConfirmationBeforeDelete();
+    }
+  }, {
+    key: "createSyncBlockNode",
+    value: function createSyncBlockNode() {
+      // only applicable to source sync block, for now (will be refactored further)
+      return this.sourceSyncBlockStoreManager.createSyncBlockNode();
+    }
+  }, {
+    key: "deleteSyncBlocksWithConfirmation",
+    value: function deleteSyncBlocksWithConfirmation(tr, syncBlockIds) {
+      // only applicable to source sync block, for now (will be refactored further)
+      return this.sourceSyncBlockStoreManager.deleteSyncBlocksWithConfirmation(tr, syncBlockIds);
+    }
+  }, {
+    key: "rebaseTransaction",
+    value: function rebaseTransaction(incomingTr, state) {
+      // only applicable to source sync block, for now (will be refactored further)
+      this.sourceSyncBlockStoreManager.rebaseTransaction(incomingTr, state);
+    }
+  }]);
+}();

package/dist/cjs/utils/utils.js

@@ -3,23 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isBlogPageType = exports.convertSyncBlockPMNodeToSyncBlockNode = exports.convertSyncBlockPMNodeToSyncBlockData = void 0;
-var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
-var convertSyncBlockPMNodeToSyncBlockNode = exports.convertSyncBlockPMNodeToSyncBlockNode = function convertSyncBlockPMNodeToSyncBlockNode(node) {
-  var includeContent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var transformer = new _editorJsonTransformer.JSONTransformer();
-  var toJSON = function toJSON(node) {
-    return transformer.encodeNode(node);
-  };
-  return {
-    type: 'syncBlock',
-    attrs: {
-      localId: node.attrs.localId,
-      resourceId: node.attrs.resourceId
-    },
-    content: includeContent ? node.content.content.map(toJSON) : undefined
-  };
-};
+exports.isBlogPageType = exports.convertSyncBlockPMNodeToSyncBlockData = void 0;
 var convertSyncBlockPMNodeToSyncBlockData = exports.convertSyncBlockPMNodeToSyncBlockData = function convertSyncBlockPMNodeToSyncBlockData(node) {
   return {
     blockInstanceId: node.attrs.localId,