@atlaskit/editor-synced-block-provider 2.15.1 → 2.15.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-synced-block-provider
 
+## 2.15.3
+
+### Patch Changes
+
+- [`f14e76661c943`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f14e76661c943) -
+  [EDITOR-2844] Save reference synced block on document to BE when a page is saved
+- Updated dependencies
+
+## 2.15.2
+
+### Patch Changes
+
+- [`70face9ce7f1b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70face9ce7f1b) -
+  EDITOR-3778 optimise flush to only send to BE when sync block data changes
+- Updated dependencies
+
 ## 2.15.1
 
 ### Patch Changes

package/dist/cjs/clients/block-service/blockService.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateSyncedBlock = exports.isBlockContentResponse = exports.getSyncedBlockContent = exports.getReferenceSyncedBlocks = exports.deleteSyncedBlock = exports.createSyncedBlock = exports.BlockError = void 0;
+exports.updateSyncedBlock = exports.updateReferenceSyncedBlockOnDocument = exports.isBlockContentResponse = exports.getSyncedBlockContent = exports.getReferenceSyncedBlocks = exports.deleteSyncedBlock = exports.createSyncedBlock = exports.BlockError = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -247,4 +247,45 @@ var createSyncedBlock = exports.createSyncedBlock = /*#__PURE__*/function () {
   return function createSyncedBlock(_x5) {
     return _ref9.apply(this, arguments);
   };
+}();
+var updateReferenceSyncedBlockOnDocument = exports.updateReferenceSyncedBlockOnDocument = /*#__PURE__*/function () {
+  var _ref1 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(_ref0) {
+    var documentAri, blocks, _ref0$noContent, noContent, response;
+    return _regenerator.default.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          documentAri = _ref0.documentAri, blocks = _ref0.blocks, _ref0$noContent = _ref0.noContent, noContent = _ref0$noContent === void 0 ? true : _ref0$noContent;
+          _context6.next = 3;
+          return (0, _retry.fetchWithRetry)("".concat(BLOCK_SERVICE_API_URL, "/block/document/").concat(encodeURIComponent(documentAri), "/references?noContent=").concat(noContent), {
+            method: 'PUT',
+            headers: COMMON_HEADERS,
+            body: JSON.stringify({
+              blocks: blocks
+            })
+          });
+        case 3:
+          response = _context6.sent;
+          if (response.ok) {
+            _context6.next = 6;
+            break;
+          }
+          throw new BlockError(response.status);
+        case 6:
+          if (noContent) {
+            _context6.next = 10;
+            break;
+          }
+          _context6.next = 9;
+          return response.json();
+        case 9:
+          return _context6.abrupt("return", _context6.sent);
+        case 10:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  }));
+  return function updateReferenceSyncedBlockOnDocument(_x6) {
+    return _ref1.apply(this, arguments);
+  };
 }();

package/dist/cjs/providers/block-service/blockServiceAPI.js

@@ -325,21 +325,30 @@ var BlockServiceADFWriteProvider = /*#__PURE__*/function () {
               _context5.prev = 7;
               _context5.t0 = _context5["catch"](1);
               if (!(_context5.t0 instanceof _blockService.BlockError)) {
-                _context5.next = 11;
+                _context5.next = 13;
+                break;
+              }
+              if (!(_context5.t0.status === 404)) {
+                _context5.next = 12;
                 break;
               }
+              return _context5.abrupt("return", {
+                resourceId: resourceId,
+                success: true
+              });
+            case 12:
               return _context5.abrupt("return", {
                 resourceId: resourceId,
                 success: false,
                 error: mapBlockError(_context5.t0)
               });
-            case 11:
+            case 13:
               return _context5.abrupt("return", {
                 resourceId: resourceId,
                 success: false,
                 error: (0, _errorHandling.stringifyError)(_context5.t0)
               });
-            case 12:
+            case 14:
             case "end":
               return _context5.stop();
           }
@@ -360,6 +369,56 @@ var BlockServiceADFWriteProvider = /*#__PURE__*/function () {
     value: function generateResourceId() {
       return crypto.randomUUID();
     }
+  }, {
+    key: "updateReferenceData",
+    value: function () {
+      var _updateReferenceData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(blocks, noContent) {
+        var _this = this;
+        return _regenerator.default.wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.prev = 0;
+              _context6.next = 3;
+              return (0, _blockService.updateReferenceSyncedBlockOnDocument)({
+                documentAri: this.sourceAri,
+                blocks: blocks.map(function (block) {
+                  return {
+                    blockAri: (0, _ari.generateBlockAriFromReference)(_this.sourceAri, block.resourceId),
+                    blockInstanceId: block.localId
+                  };
+                }, noContent)
+              });
+            case 3:
+              return _context6.abrupt("return", {
+                success: true
+              });
+            case 6:
+              _context6.prev = 6;
+              _context6.t0 = _context6["catch"](0);
+              if (!(_context6.t0 instanceof _blockService.BlockError)) {
+                _context6.next = 10;
+                break;
+              }
+              return _context6.abrupt("return", {
+                success: false,
+                error: mapBlockError(_context6.t0)
+              });
+            case 10:
+              return _context6.abrupt("return", {
+                success: false,
+                error: (0, _errorHandling.stringifyError)(_context6.t0)
+              });
+            case 11:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6, this, [[0, 6]]);
+      }));
+      function updateReferenceData(_x6, _x7) {
+        return _updateReferenceData.apply(this, arguments);
+      }
+      return updateReferenceData;
+    }()
   }]);
 }();
 /**

package/dist/cjs/providers/confluence/confluenceContentAPI.js

@@ -409,6 +409,13 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
     value: function generateResourceIdForReference(sourceId) {
       return sourceId;
     }
+  }, {
+    key: "updateReferenceData",
+    value: function updateReferenceData(_blocks, _noContent) {
+      return Promise.resolve({
+        success: true
+      });
+    }
   }]);
 }();
 /**

package/dist/cjs/providers/syncBlockProvider.js

@@ -296,6 +296,11 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
           throw new Error("".concat(sourceProduct, " source product not supported"));
       }
     }
+  }, {
+    key: "updateReferenceData",
+    value: function updateReferenceData(blocks, noContent) {
+      return this.writeProvider.updateReferenceData(blocks, noContent);
+    }
   }]);
 }(_types2.SyncBlockDataProvider);
 var useMemoizedSyncedBlockProvider = exports.useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions, getSSRData) {

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

@@ -30,6 +30,10 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   function ReferenceSyncBlockStoreManager(dataProvider, fireAnalyticsEvent) {
     (0, _classCallCheck2.default)(this, ReferenceSyncBlockStoreManager);
+    // Keeps track of addition and deletion of reference synced blocks on the document
+    // This starts as true to always flush the cache when document is saved for the first time
+    // to cater the case when a editor seesion is closed without document being updated right after reference block is deleted
+    (0, _defineProperty2.default)(this, "isCacheDirty", true);
     (0, _defineProperty2.default)(this, "isRefreshingSubscriptions", false);
     this.syncBlockCache = new Map();
     this.subscriptions = new Map();
@@ -327,6 +331,9 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
       // add to subscriptions map
       var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
       this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, (0, _defineProperty2.default)({}, localId, callback)));
+
+      // New subscription means new reference synced block is added to the document
+      this.isCacheDirty = true;
       var syncBlockNode = (0, _utils.createSyncBlockNode)(localId, resourceId);
 
       // call the callback immediately if we have cached data
@@ -346,6 +353,8 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
       return function () {
         var resourceSubscriptions = _this3.subscriptions.get(resourceId);
         if (resourceSubscriptions) {
+          // Unsubscription means a reference synced block is removed from the document
+          _this3.isCacheDirty = true;
           delete resourceSubscriptions[localId];
           if (Object.keys(resourceSubscriptions).length === 0) {
             _this3.subscriptions.delete(resourceId);
@@ -515,6 +524,89 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
         }
       }
     }
+
+    /**
+     * Update reference synced blocks on the document with the BE
+     * 
+     * @returns true if the reference synced blocks are updated successfully, false otherwise
+     */
+  }, {
+    key: "flush",
+    value: (function () {
+      var _flush = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var success, blocks, updateResult, _this$fireAnalyticsEv9, _this$fireAnalyticsEv0;
+        return _regenerator.default.wrap(function _callee3$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (this.isCacheDirty) {
+                _context4.next = 2;
+                break;
+              }
+              return _context4.abrupt("return", true);
+            case 2:
+              success = true;
+              _context4.prev = 3;
+              if (this.dataProvider) {
+                _context4.next = 6;
+                break;
+              }
+              throw new Error('Data provider not set');
+            case 6:
+              blocks = []; // Collect all reference synced blocks on the current document
+              Array.from(this.subscriptions.entries()).forEach(function (_ref2) {
+                var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+                  resourceId = _ref3[0],
+                  callbacks = _ref3[1];
+                Object.keys(callbacks).forEach(function (localId) {
+                  blocks.push({
+                    resourceId: resourceId,
+                    localId: localId
+                  });
+                });
+              });
+              if (!(blocks.length === 0)) {
+                _context4.next = 10;
+                break;
+              }
+              return _context4.abrupt("return", true);
+            case 10:
+              _context4.next = 12;
+              return this.dataProvider.updateReferenceData(blocks);
+            case 12:
+              updateResult = _context4.sent;
+              if (!updateResult.success) {
+                success = false;
+                (_this$fireAnalyticsEv9 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv9 === void 0 || _this$fireAnalyticsEv9.call(this, (0, _errorHandling.updateReferenceErrorPayload)(updateResult.error || 'Failed to update reference synced blocks on the document'));
+              }
+              _context4.next = 21;
+              break;
+            case 16:
+              _context4.prev = 16;
+              _context4.t0 = _context4["catch"](3);
+              success = false;
+              (0, _monitoring.logException)(_context4.t0, {
+                location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
+              });
+              (_this$fireAnalyticsEv0 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv0 === void 0 || _this$fireAnalyticsEv0.call(this, (0, _errorHandling.updateReferenceErrorPayload)(_context4.t0.message));
+            case 21:
+              _context4.prev = 21;
+              if (success) {
+                this.isCacheDirty = false;
+              }
+              return _context4.finish(21);
+            case 24:
+              return _context4.abrupt("return", success);
+            case 25:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee3, this, [[3, 16, 21, 24]]);
+      }));
+      function flush() {
+        return _flush.apply(this, arguments);
+      }
+      return flush;
+    }())
   }, {
     key: "destroy",
     value: function destroy() {

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

@@ -12,9 +12,11 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _types = require("../common/types");
 var _errorHandling = require("../utils/errorHandling");
 var _utils = require("../utils/utils");
-// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+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; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 // A store manager responsible for the lifecycle and state management of source sync blocks in an editor instance.
 // Designed to manage local in-memory state and synchronize with an external data provider.
 // Supports create, flush, and delete operations for source sync blocks.
@@ -58,7 +60,9 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
           throw new Error('Local ID or resource ID is not set');
         }
         var syncBlockData = (0, _utils.convertSyncBlockPMNodeToSyncBlockData)(syncBlockNode);
-        this.syncBlockCache.set(resourceId, syncBlockData);
+        this.syncBlockCache.set(resourceId, _objectSpread(_objectSpread({}, syncBlockData), {}, {
+          isDirty: true
+        }));
         return true;
       } catch (error) {
         var _this$fireAnalyticsEv;
@@ -95,7 +99,8 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               bodiedSyncBlockData = [];
               Array.from(this.syncBlockCache.values()).forEach(function (syncBlockData) {
                 // Don't flush nodes that are waiting to be deleted to avoid nodes being re-created
-                if (!syncBlockData.pendingDeletion) {
+                // Don't flush nodes that haven't been updated since we last flushed
+                if (!syncBlockData.pendingDeletion && syncBlockData.isDirty) {
                   bodiedSyncBlockNodes.push({
                     type: 'bodiedSyncBlock',
                     attrs: {
@@ -116,37 +121,46 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               return this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
             case 10:
               writeResults = _context.sent;
+              writeResults.forEach(function (result) {
+                // set isDirty to false on write success and unrecoverable errors like not found
+                if (result.resourceId && (result.error === _types.SyncBlockError.NotFound || !result.error)) {
+                  var cachedData = _this2.syncBlockCache.get(result.resourceId);
+                  if (cachedData) {
+                    cachedData.isDirty = false;
+                  }
+                }
+              });
               if (!writeResults.every(function (result) {
-                return result.resourceId !== undefined;
+                return result.resourceId && !result.error;
               })) {
-                _context.next = 15;
+                _context.next = 16;
                 break;
               }
               return _context.abrupt("return", true);
-            case 15:
+            case 16:
               writeResults.filter(function (result) {
-                return result.resourceId === undefined;
+                return !result.resourceId || result.error;
               }).forEach(function (result) {
                 var _this2$fireAnalyticsE;
                 (_this2$fireAnalyticsE = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE === void 0 || _this2$fireAnalyticsE.call(_this2, (0, _errorHandling.updateErrorPayload)(result.error || 'Failed to write data'));
               });
               return _context.abrupt("return", false);
-            case 17:
-              _context.next = 24;
+            case 18:
+              _context.next = 25;
               break;
-            case 19:
-              _context.prev = 19;
+            case 20:
+              _context.prev = 20;
               _context.t0 = _context["catch"](0);
               (0, _monitoring.logException)(_context.t0, {
                 location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
               });
               (_this$fireAnalyticsEv2 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv2 === void 0 || _this$fireAnalyticsEv2.call(this, (0, _errorHandling.updateErrorPayload)(_context.t0.message));
               return _context.abrupt("return", false);
-            case 24:
+            case 25:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[0, 19]]);
+        }, _callee, this, [[0, 20]]);
       }));
       function flush() {
         return _flush.apply(this, arguments);

package/dist/cjs/utils/errorHandling.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateErrorPayload = exports.updateCacheErrorPayload = exports.stringifyError = exports.getSourceInfoErrorPayload = exports.getErrorPayload = exports.fetchErrorPayload = exports.deleteErrorPayload = exports.createErrorPayload = void 0;
+exports.updateReferenceErrorPayload = exports.updateErrorPayload = exports.updateCacheErrorPayload = exports.stringifyError = exports.getSourceInfoErrorPayload = exports.getErrorPayload = exports.fetchErrorPayload = exports.deleteErrorPayload = exports.createErrorPayload = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var stringifyError = exports.stringifyError = function stringifyError(error) {
   try {
@@ -32,6 +32,9 @@ var getSourceInfoErrorPayload = exports.getSourceInfoErrorPayload = function get
 var updateErrorPayload = exports.updateErrorPayload = function updateErrorPayload(error) {
   return getErrorPayload(_analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_UPDATE, error);
 };
+var updateReferenceErrorPayload = exports.updateReferenceErrorPayload = function updateReferenceErrorPayload(error) {
+  return getErrorPayload(_analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_UPDATE, error);
+};
 var createErrorPayload = exports.createErrorPayload = function createErrorPayload(error) {
   return getErrorPayload(_analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE, error);
 };

package/dist/es2019/clients/block-service/blockService.js

@@ -127,4 +127,23 @@ export const createSyncedBlock = async ({
     throw new BlockError(response.status);
   }
   return await response.json();
+};
+export const updateReferenceSyncedBlockOnDocument = async ({
+  documentAri,
+  blocks,
+  noContent = true
+}) => {
+  const response = await fetchWithRetry(`${BLOCK_SERVICE_API_URL}/block/document/${encodeURIComponent(documentAri)}/references?noContent=${noContent}`, {
+    method: 'PUT',
+    headers: COMMON_HEADERS,
+    body: JSON.stringify({
+      blocks
+    })
+  });
+  if (!response.ok) {
+    throw new BlockError(response.status);
+  }
+  if (!noContent) {
+    return await response.json();
+  }
 };

package/dist/es2019/providers/block-service/blockServiceAPI.js

@@ -1,7 +1,7 @@
 /* eslint-disable require-unicode-regexp  */
 import { useMemo } from 'react';
 import { generateBlockAri, generateBlockAriFromReference } from '../../clients/block-service/ari';
-import { BlockError, createSyncedBlock, deleteSyncedBlock, getReferenceSyncedBlocks, getSyncedBlockContent, updateSyncedBlock } from '../../clients/block-service/blockService';
+import { BlockError, createSyncedBlock, deleteSyncedBlock, getReferenceSyncedBlocks, getSyncedBlockContent, updateReferenceSyncedBlockOnDocument, updateSyncedBlock } from '../../clients/block-service/blockService';
 import { SyncBlockError } from '../../common/types';
 import { stringifyError } from '../../utils/errorHandling';
 const mapBlockError = error => {
@@ -212,6 +212,14 @@ class BlockServiceADFWriteProvider {
       };
     } catch (error) {
       if (error instanceof BlockError) {
+        if (error.status === 404) {
+          // User should not be blocked by not_found error when deleting, 
+          // hence returns successful result for 404 error
+          return {
+            resourceId,
+            success: true
+          };
+        }
         return {
           resourceId,
           success: false,
@@ -233,6 +241,31 @@ class BlockServiceADFWriteProvider {
   generateResourceId() {
     return crypto.randomUUID();
   }
+  async updateReferenceData(blocks, noContent) {
+    try {
+      await updateReferenceSyncedBlockOnDocument({
+        documentAri: this.sourceAri,
+        blocks: blocks.map(block => ({
+          blockAri: generateBlockAriFromReference(this.sourceAri, block.resourceId),
+          blockInstanceId: block.localId
+        }), noContent)
+      });
+      return {
+        success: true
+      };
+    } catch (error) {
+      if (error instanceof BlockError) {
+        return {
+          success: false,
+          error: mapBlockError(error)
+        };
+      }
+      return {
+        success: false,
+        error: stringifyError(error)
+      };
+    }
+  }
 }
 
 /**

package/dist/es2019/providers/confluence/confluenceContentAPI.js

@@ -275,6 +275,11 @@ class ConfluenceADFWriteProvider {
   generateResourceIdForReference(sourceId) {
     return sourceId;
   }
+  updateReferenceData(_blocks, _noContent) {
+    return Promise.resolve({
+      success: true
+    });
+  }
 }
 
 /**

package/dist/es2019/providers/syncBlockProvider.js

@@ -200,6 +200,9 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
         throw new Error(`${sourceProduct} source product not supported`);
     }
   }
+  updateReferenceData(blocks, noContent) {
+    return this.writeProvider.updateReferenceData(blocks, noContent);
+  }
 }
 export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId, providerOptions, getSSRData) => {
   return useMemo(() => {

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } from '../common/types';
-import { fetchErrorPayload, getSourceInfoErrorPayload } from '../utils/errorHandling';
+import { fetchErrorPayload, getSourceInfoErrorPayload, updateReferenceErrorPayload } from '../utils/errorHandling';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
 import { createSyncBlockNode } from '../utils/utils';
 
@@ -13,6 +13,10 @@ import { createSyncBlockNode } from '../utils/utils';
 // Can be used in both editor and renderer contexts.
 export class ReferenceSyncBlockStoreManager {
   constructor(dataProvider, fireAnalyticsEvent) {
+    // Keeps track of addition and deletion of reference synced blocks on the document
+    // This starts as true to always flush the cache when document is saved for the first time
+    // to cater the case when a editor seesion is closed without document being updated right after reference block is deleted
+    _defineProperty(this, "isCacheDirty", true);
     _defineProperty(this, "isRefreshingSubscriptions", false);
     this.syncBlockCache = new Map();
     this.subscriptions = new Map();
@@ -212,6 +216,9 @@ export class ReferenceSyncBlockStoreManager {
       ...resourceSubscriptions,
       [localId]: callback
     });
+
+    // New subscription means new reference synced block is added to the document
+    this.isCacheDirty = true;
     const syncBlockNode = createSyncBlockNode(localId, resourceId);
 
     // call the callback immediately if we have cached data
@@ -231,6 +238,8 @@ export class ReferenceSyncBlockStoreManager {
     return () => {
       const resourceSubscriptions = this.subscriptions.get(resourceId);
       if (resourceSubscriptions) {
+        // Unsubscription means a reference synced block is removed from the document
+        this.isCacheDirty = true;
         delete resourceSubscriptions[localId];
         if (Object.keys(resourceSubscriptions).length === 0) {
           this.subscriptions.delete(resourceId);
@@ -397,6 +406,55 @@ export class ReferenceSyncBlockStoreManager {
       }
     }
   }
+
+  /**
+   * Update reference synced blocks on the document with the BE
+   * 
+   * @returns true if the reference synced blocks are updated successfully, false otherwise
+   */
+  async flush() {
+    if (!this.isCacheDirty) {
+      return true;
+    }
+    let success = true;
+    try {
+      if (!this.dataProvider) {
+        throw new Error('Data provider not set');
+      }
+      const blocks = [];
+
+      // Collect all reference synced blocks on the current document
+      Array.from(this.subscriptions.entries()).forEach(([resourceId, callbacks]) => {
+        Object.keys(callbacks).forEach(localId => {
+          blocks.push({
+            resourceId,
+            localId
+          });
+        });
+      });
+      if (blocks.length === 0) {
+        return true;
+      }
+      const updateResult = await this.dataProvider.updateReferenceData(blocks);
+      if (!updateResult.success) {
+        var _this$fireAnalyticsEv10;
+        success = false;
+        (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 ? void 0 : _this$fireAnalyticsEv10.call(this, updateReferenceErrorPayload(updateResult.error || 'Failed to update reference synced blocks on the document'));
+      }
+    } catch (error) {
+      var _this$fireAnalyticsEv11;
+      success = false;
+      logException(error, {
+        location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
+      });
+      (_this$fireAnalyticsEv11 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv11 === void 0 ? void 0 : _this$fireAnalyticsEv11.call(this, updateReferenceErrorPayload(error.message));
+    } finally {
+      if (success) {
+        this.isCacheDirty = false;
+      }
+    }
+    return success;
+  }
   destroy() {
     this.dataProvider = undefined;
     this.syncBlockCache.clear();