@atlaskit/editor-synced-block-provider 3.0.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-synced-block-provider
 
+## 3.2.0
+
+### Minor Changes
+
+- [`b7db97837674e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7db97837674e) -
+  Use GraphQL endpoint for fetching references on a document instead of Rest API
+
+## 3.1.0
+
+### Minor Changes
+
+- [`324fe88e2a5e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/324fe88e2a5e0) -
+  EDITOR-4048 Stop flickering on repositioning of synced blocks
+
 ## 3.0.0
 
 ### Patch Changes

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

@@ -20,11 +20,10 @@ var isBlockContentResponse = exports.isBlockContentResponse = function isBlockCo
   var content = response.content;
   return typeof content === 'string';
 };
-
 /**
  * Retrieves all synced blocks referenced in a document.
  *
- * Calls the Block Service API endpoint: `/v1/block/document/reference/{documentAri}`
+ * Calls the Block Service GraphQL API: `blockService_getDocumentReferenceBlocks`
  *
  * @param documentAri - The ARI of the document to fetch synced blocks for
  * @returns A promise containing arrays of successfully fetched blocks and any errors encountered
@@ -61,32 +60,51 @@ var isBlockContentResponse = exports.isBlockContentResponse = function isBlockCo
  *   ]
  * }
  * ```
- * Check https://block-service.dev.atl-paas.net/ for latest API documentation.
  */
 var getReferenceSyncedBlocks = exports.getReferenceSyncedBlocks = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(documentAri) {
-    var response;
+    var bodyData, response, result;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
-          return (0, _retry.fetchWithRetry)("".concat(BLOCK_SERVICE_API_URL, "/block/document/reference/").concat(encodeURIComponent(documentAri)), {
-            method: 'GET',
-            headers: COMMON_HEADERS
+          bodyData = {
+            query: buildGetDocumentReferenceBlocksQuery(documentAri),
+            operationName: GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME
+          };
+          _context.next = 3;
+          return (0, _retry.fetchWithRetry)(GRAPHQL_ENDPOINT, {
+            method: 'POST',
+            headers: COMMON_HEADERS,
+            body: JSON.stringify(bodyData)
           });
-        case 2:
+        case 3:
           response = _context.sent;
           if (response.ok) {
-            _context.next = 5;
+            _context.next = 6;
             break;
           }
           throw new BlockError(response.status);
-        case 5:
-          _context.next = 7;
+        case 6:
+          _context.next = 8;
           return response.json();
-        case 7:
-          return _context.abrupt("return", _context.sent);
         case 8:
+          result = _context.sent;
+          if (!(result.errors && result.errors.length > 0)) {
+            _context.next = 11;
+            break;
+          }
+          throw new Error(result.errors.map(function (e) {
+            return e.message;
+          }).join(', '));
+        case 11:
+          if (result.data) {
+            _context.next = 13;
+            break;
+          }
+          throw new Error('No data returned from GraphQL query');
+        case 13:
+          return _context.abrupt("return", result.data.blockService_getDocumentReferenceBlocks);
+        case 14:
         case "end":
           return _context.stop();
       }
@@ -101,6 +119,11 @@ var COMMON_HEADERS = {
   Accept: 'application/json'
 };
 var BLOCK_SERVICE_API_URL = '/gateway/api/blocks/v1';
+var GRAPHQL_ENDPOINT = '/gateway/api/graphql';
+var GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_GET_DOCUMENT_REFERENCE_BLOCKS';
+var buildGetDocumentReferenceBlocksQuery = function buildGetDocumentReferenceBlocksQuery(documentAri) {
+  return "query ".concat(GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME, " {\n\tblockService_getDocumentReferenceBlocks(documentAri: \"").concat(documentAri, "\") {\n\t\tblocks {\n\t\t\tblockAri\n\t\t\tblockInstanceId\n\t\t\tcontent\n\t\t\tcreatedAt\n\t\t\tcreatedBy\n\t\t\tproduct\n\t\t\tsourceAri\n\t\t\tstatus\n\t\t\tversion\n\t\t}\n\t\terrors {\n\t\t\tblockAri\n\t\t\tcode\n\t\t\treason\n\t\t}\n\t}\n}");
+};
 var BlockError = exports.BlockError = /*#__PURE__*/function (_Error) {
   function BlockError(status) {
     var _this;

package/dist/cjs/hooks/useFetchSyncBlockData.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFetchSyncBlockData = 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -13,21 +14,32 @@ var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _types = require("../common/types");
 var _errorHandling = require("../utils/errorHandling");
 var _utils = 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; }
 var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyncBlockData(manager, resourceId, localId, fireAnalyticsEvent) {
+  // Initialize both states from a single cache lookup to avoid race conditions.
+  // When a block is moved/remounted, the old component's cleanup may clear the cache
+  // before or after the new component mounts. By doing a single lookup, we ensure
+  // consistency between syncBlockInstance and isLoading initial values.
   var _useState = (0, _react.useState)(function () {
       if (resourceId) {
-        var _manager$referenceMan, _manager$referenceMan2;
-        return (_manager$referenceMan = manager === null || manager === void 0 || (_manager$referenceMan2 = manager.referenceManager) === null || _manager$referenceMan2 === void 0 ? void 0 : _manager$referenceMan2.getInitialSyncBlockData(resourceId)) !== null && _manager$referenceMan !== void 0 ? _manager$referenceMan : null;
+        var _manager$referenceMan;
+        var initialData = manager === null || manager === void 0 || (_manager$referenceMan = manager.referenceManager) === null || _manager$referenceMan === void 0 ? void 0 : _manager$referenceMan.getInitialSyncBlockData(resourceId);
+        return {
+          syncBlockInstance: initialData !== null && initialData !== void 0 ? initialData : null,
+          isLoading: initialData === undefined
+        };
       }
-      return null;
+      return {
+        syncBlockInstance: null,
+        isLoading: true
+      };
     }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    syncBlockInstance = _useState2[0],
-    setSyncBlockInstance = _useState2[1];
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isLoading = _useState4[0],
-    setIsLoading = _useState4[1];
+    _useState2$ = _useState2[0],
+    syncBlockInstance = _useState2$.syncBlockInstance,
+    isLoading = _useState2$.isLoading,
+    setFetchState = _useState2[1];
   var reloadData = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var syncBlockNode;
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -47,13 +59,17 @@ var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyn
           }
           throw new Error('Failed to create sync block node from resourceid and localid');
         case 6:
-          setIsLoading(true);
+          setFetchState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              isLoading: true
+            });
+          });
 
           // Fetch sync block data, the `subscribeToSyncBlock` will update the state once data is fetched
           _context.next = 9;
           return manager.referenceManager.fetchSyncBlocksData([syncBlockNode]);
         case 9:
-          _context.next = 16;
+          _context.next = 17;
           break;
         case 11:
           _context.prev = 11;
@@ -64,13 +80,21 @@ var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyn
           fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent((0, _errorHandling.fetchErrorPayload)(_context.t0.message));
 
           // Set error state if fetching fails
-          setSyncBlockInstance({
-            resourceId: resourceId || '',
-            error: _types.SyncBlockError.Errored
+          setFetchState({
+            syncBlockInstance: {
+              resourceId: resourceId || '',
+              error: _types.SyncBlockError.Errored
+            },
+            isLoading: false
           });
-        case 16:
-          setIsLoading(false);
+          return _context.abrupt("return");
         case 17:
+          setFetchState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              isLoading: false
+            });
+          });
+        case 18:
         case "end":
           return _context.stop();
       }
@@ -78,8 +102,10 @@ var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyn
   })), [isLoading, localId, manager.referenceManager, resourceId, fireAnalyticsEvent]);
   (0, _react.useEffect)(function () {
     var unsubscribe = manager.referenceManager.subscribeToSyncBlock(resourceId || '', localId || '', function (data) {
-      setSyncBlockInstance(data);
-      setIsLoading(false);
+      setFetchState({
+        syncBlockInstance: data,
+        isLoading: false
+      });
     });
     return function () {
       unsubscribe();

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

@@ -28,6 +28,11 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
+  // Track pending cache deletions to handle block moves (unmount/remount)
+  // When a block is moved, the old component unmounts before the new one mounts,
+  // causing the cache to be deleted prematurely. We delay deletion to allow
+  // the new component to subscribe and cancel the pending deletion.
+
   function ReferenceSyncBlockStoreManager(dataProvider) {
     (0, _classCallCheck2.default)(this, ReferenceSyncBlockStoreManager);
     // Keeps track of addition and deletion of reference synced blocks on the document
@@ -42,6 +47,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     this.syncBlockFetchDataRequests = new Map();
     this.syncBlockSourceInfoRequests = new Map();
     this.providerFactories = new Map();
+    this.pendingCacheDeletions = new Map();
   }
   return (0, _createClass2.default)(ReferenceSyncBlockStoreManager, [{
     key: "setFireAnalyticsEvent",
@@ -341,6 +347,16 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     value: function subscribeToSyncBlock(resourceId, localId, callback) {
       var _this$dataProvider2,
         _this3 = this;
+      // Cancel any pending cache deletion for this resourceId.
+      // This handles the case where a block is moved - the old component unmounts
+      // (scheduling deletion) but the new component mounts and subscribes before
+      // the deletion timeout fires.
+      var pendingDeletion = this.pendingCacheDeletions.get(resourceId);
+      if (pendingDeletion) {
+        clearTimeout(pendingDeletion);
+        this.pendingCacheDeletions.delete(resourceId);
+      }
+
       // add to subscriptions map
       var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
       this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, (0, _defineProperty2.default)({}, localId, callback)));
@@ -371,7 +387,19 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
           delete resourceSubscriptions[localId];
           if (Object.keys(resourceSubscriptions).length === 0) {
             _this3.subscriptions.delete(resourceId);
-            _this3.deleteFromCache(resourceId);
+            // Delay cache deletion to handle block moves (unmount/remount).
+            // When a block is moved, the old component unmounts before the new one mounts.
+            // By delaying deletion, we give the new component time to subscribe and
+            // cancel this pending deletion, preserving the cached data.
+            // TODO: EDITOR-4152 - Rework this logic 
+            var deletionTimeout = setTimeout(function () {
+              // Only delete if still no subscribers (wasn't re-subscribed)
+              if (!_this3.subscriptions.has(resourceId)) {
+                _this3.deleteFromCache(resourceId);
+              }
+              _this3.pendingCacheDeletions.delete(resourceId);
+            }, 1000);
+            _this3.pendingCacheDeletions.set(resourceId, deletionTimeout);
           } else {
             _this3.subscriptions.set(resourceId, resourceSubscriptions);
           }

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

@@ -3,11 +3,10 @@ export const isBlockContentResponse = response => {
   const content = response.content;
   return typeof content === 'string';
 };
-
 /**
  * Retrieves all synced blocks referenced in a document.
  *
- * Calls the Block Service API endpoint: `/v1/block/document/reference/{documentAri}`
+ * Calls the Block Service GraphQL API: `blockService_getDocumentReferenceBlocks`
  *
  * @param documentAri - The ARI of the document to fetch synced blocks for
  * @returns A promise containing arrays of successfully fetched blocks and any errors encountered
@@ -44,23 +43,56 @@ export const isBlockContentResponse = response => {
  *   ]
  * }
  * ```
- * Check https://block-service.dev.atl-paas.net/ for latest API documentation.
  */
 export const getReferenceSyncedBlocks = async documentAri => {
-  const response = await fetchWithRetry(`${BLOCK_SERVICE_API_URL}/block/document/reference/${encodeURIComponent(documentAri)}`, {
-    method: 'GET',
-    headers: COMMON_HEADERS
+  const bodyData = {
+    query: buildGetDocumentReferenceBlocksQuery(documentAri),
+    operationName: GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME
+  };
+  const response = await fetchWithRetry(GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: COMMON_HEADERS,
+    body: JSON.stringify(bodyData)
   });
   if (!response.ok) {
     throw new BlockError(response.status);
   }
-  return await response.json();
+  const result = await response.json();
+  if (result.errors && result.errors.length > 0) {
+    throw new Error(result.errors.map(e => e.message).join(', '));
+  }
+  if (!result.data) {
+    throw new Error('No data returned from GraphQL query');
+  }
+  return result.data.blockService_getDocumentReferenceBlocks;
 };
 const COMMON_HEADERS = {
   'Content-Type': 'application/json',
   Accept: 'application/json'
 };
 const BLOCK_SERVICE_API_URL = '/gateway/api/blocks/v1';
+const GRAPHQL_ENDPOINT = '/gateway/api/graphql';
+const GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_GET_DOCUMENT_REFERENCE_BLOCKS';
+const buildGetDocumentReferenceBlocksQuery = documentAri => `query ${GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME} {
+	blockService_getDocumentReferenceBlocks(documentAri: "${documentAri}") {
+		blocks {
+			blockAri
+			blockInstanceId
+			content
+			createdAt
+			createdBy
+			product
+			sourceAri
+			status
+			version
+		}
+		errors {
+			blockAri
+			code
+			reason
+		}
+	}
+}`;
 export class BlockError extends Error {
   constructor(status) {
     super(`Block error`);

package/dist/es2019/hooks/useFetchSyncBlockData.js

@@ -4,14 +4,27 @@ import { SyncBlockError } from '../common/types';
 import { fetchErrorPayload } from '../utils/errorHandling';
 import { createSyncBlockNode } from '../utils/utils';
 export const useFetchSyncBlockData = (manager, resourceId, localId, fireAnalyticsEvent) => {
-  const [syncBlockInstance, setSyncBlockInstance] = useState(() => {
+  // Initialize both states from a single cache lookup to avoid race conditions.
+  // When a block is moved/remounted, the old component's cleanup may clear the cache
+  // before or after the new component mounts. By doing a single lookup, we ensure
+  // consistency between syncBlockInstance and isLoading initial values.
+  const [{
+    syncBlockInstance,
+    isLoading
+  }, setFetchState] = useState(() => {
     if (resourceId) {
-      var _manager$referenceMan, _manager$referenceMan2;
-      return (_manager$referenceMan = manager === null || manager === void 0 ? void 0 : (_manager$referenceMan2 = manager.referenceManager) === null || _manager$referenceMan2 === void 0 ? void 0 : _manager$referenceMan2.getInitialSyncBlockData(resourceId)) !== null && _manager$referenceMan !== void 0 ? _manager$referenceMan : null;
+      var _manager$referenceMan;
+      const initialData = manager === null || manager === void 0 ? void 0 : (_manager$referenceMan = manager.referenceManager) === null || _manager$referenceMan === void 0 ? void 0 : _manager$referenceMan.getInitialSyncBlockData(resourceId);
+      return {
+        syncBlockInstance: initialData !== null && initialData !== void 0 ? initialData : null,
+        isLoading: initialData === undefined
+      };
     }
-    return null;
+    return {
+      syncBlockInstance: null,
+      isLoading: true
+    };
   });
-  const [isLoading, setIsLoading] = useState(true);
   const reloadData = useCallback(async () => {
     if (isLoading) {
       return;
@@ -21,7 +34,10 @@ export const useFetchSyncBlockData = (manager, resourceId, localId, fireAnalytic
       if (!syncBlockNode) {
         throw new Error('Failed to create sync block node from resourceid and localid');
       }
-      setIsLoading(true);
+      setFetchState(prev => ({
+        ...prev,
+        isLoading: true
+      }));
 
       // Fetch sync block data, the `subscribeToSyncBlock` will update the state once data is fetched
       await manager.referenceManager.fetchSyncBlocksData([syncBlockNode]);
@@ -32,17 +48,26 @@ export const useFetchSyncBlockData = (manager, resourceId, localId, fireAnalytic
       fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent(fetchErrorPayload(error.message));
 
       // Set error state if fetching fails
-      setSyncBlockInstance({
-        resourceId: resourceId || '',
-        error: SyncBlockError.Errored
+      setFetchState({
+        syncBlockInstance: {
+          resourceId: resourceId || '',
+          error: SyncBlockError.Errored
+        },
+        isLoading: false
       });
+      return;
     }
-    setIsLoading(false);
+    setFetchState(prev => ({
+      ...prev,
+      isLoading: false
+    }));
   }, [isLoading, localId, manager.referenceManager, resourceId, fireAnalyticsEvent]);
   useEffect(() => {
     const unsubscribe = manager.referenceManager.subscribeToSyncBlock(resourceId || '', localId || '', data => {
-      setSyncBlockInstance(data);
-      setIsLoading(false);
+      setFetchState({
+        syncBlockInstance: data,
+        isLoading: false
+      });
     });
     return () => {
       unsubscribe();

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

@@ -12,6 +12,11 @@ import { createSyncBlockNode } from '../utils/utils';
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 export class ReferenceSyncBlockStoreManager {
+  // Track pending cache deletions to handle block moves (unmount/remount)
+  // When a block is moved, the old component unmounts before the new one mounts,
+  // causing the cache to be deleted prematurely. We delay deletion to allow
+  // the new component to subscribe and cancel the pending deletion.
+
   constructor(dataProvider) {
     // 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
@@ -25,6 +30,7 @@ export class ReferenceSyncBlockStoreManager {
     this.syncBlockFetchDataRequests = new Map();
     this.syncBlockSourceInfoRequests = new Map();
     this.providerFactories = new Map();
+    this.pendingCacheDeletions = new Map();
   }
   setFireAnalyticsEvent(fireAnalyticsEvent) {
     this.fireAnalyticsEvent = fireAnalyticsEvent;
@@ -220,6 +226,16 @@ export class ReferenceSyncBlockStoreManager {
   }
   subscribeToSyncBlock(resourceId, localId, callback) {
     var _this$dataProvider2, _this$dataProvider2$g;
+    // Cancel any pending cache deletion for this resourceId.
+    // This handles the case where a block is moved - the old component unmounts
+    // (scheduling deletion) but the new component mounts and subscribes before
+    // the deletion timeout fires.
+    const pendingDeletion = this.pendingCacheDeletions.get(resourceId);
+    if (pendingDeletion) {
+      clearTimeout(pendingDeletion);
+      this.pendingCacheDeletions.delete(resourceId);
+    }
+
     // add to subscriptions map
     const resourceSubscriptions = this.subscriptions.get(resourceId) || {};
     this.subscriptions.set(resourceId, {
@@ -253,7 +269,19 @@ export class ReferenceSyncBlockStoreManager {
         delete resourceSubscriptions[localId];
         if (Object.keys(resourceSubscriptions).length === 0) {
           this.subscriptions.delete(resourceId);
-          this.deleteFromCache(resourceId);
+          // Delay cache deletion to handle block moves (unmount/remount).
+          // When a block is moved, the old component unmounts before the new one mounts.
+          // By delaying deletion, we give the new component time to subscribe and
+          // cancel this pending deletion, preserving the cached data.
+          // TODO: EDITOR-4152 - Rework this logic 
+          const deletionTimeout = setTimeout(() => {
+            // Only delete if still no subscribers (wasn't re-subscribed)
+            if (!this.subscriptions.has(resourceId)) {
+              this.deleteFromCache(resourceId);
+            }
+            this.pendingCacheDeletions.delete(resourceId);
+          }, 1000);
+          this.pendingCacheDeletions.set(resourceId, deletionTimeout);
         } else {
           this.subscriptions.set(resourceId, resourceSubscriptions);
         }

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

@@ -13,11 +13,10 @@ export var isBlockContentResponse = function isBlockContentResponse(response) {
   var content = response.content;
   return typeof content === 'string';
 };
-
 /**
  * Retrieves all synced blocks referenced in a document.
  *
- * Calls the Block Service API endpoint: `/v1/block/document/reference/{documentAri}`
+ * Calls the Block Service GraphQL API: `blockService_getDocumentReferenceBlocks`
  *
  * @param documentAri - The ARI of the document to fetch synced blocks for
  * @returns A promise containing arrays of successfully fetched blocks and any errors encountered
@@ -54,32 +53,51 @@ export var isBlockContentResponse = function isBlockContentResponse(response) {
  *   ]
  * }
  * ```
- * Check https://block-service.dev.atl-paas.net/ for latest API documentation.
  */
 export var getReferenceSyncedBlocks = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(documentAri) {
-    var response;
+    var bodyData, response, result;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
-          return fetchWithRetry("".concat(BLOCK_SERVICE_API_URL, "/block/document/reference/").concat(encodeURIComponent(documentAri)), {
-            method: 'GET',
-            headers: COMMON_HEADERS
+          bodyData = {
+            query: buildGetDocumentReferenceBlocksQuery(documentAri),
+            operationName: GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME
+          };
+          _context.next = 3;
+          return fetchWithRetry(GRAPHQL_ENDPOINT, {
+            method: 'POST',
+            headers: COMMON_HEADERS,
+            body: JSON.stringify(bodyData)
           });
-        case 2:
+        case 3:
           response = _context.sent;
           if (response.ok) {
-            _context.next = 5;
+            _context.next = 6;
             break;
           }
           throw new BlockError(response.status);
-        case 5:
-          _context.next = 7;
+        case 6:
+          _context.next = 8;
           return response.json();
-        case 7:
-          return _context.abrupt("return", _context.sent);
         case 8:
+          result = _context.sent;
+          if (!(result.errors && result.errors.length > 0)) {
+            _context.next = 11;
+            break;
+          }
+          throw new Error(result.errors.map(function (e) {
+            return e.message;
+          }).join(', '));
+        case 11:
+          if (result.data) {
+            _context.next = 13;
+            break;
+          }
+          throw new Error('No data returned from GraphQL query');
+        case 13:
+          return _context.abrupt("return", result.data.blockService_getDocumentReferenceBlocks);
+        case 14:
         case "end":
           return _context.stop();
       }
@@ -94,6 +112,11 @@ var COMMON_HEADERS = {
   Accept: 'application/json'
 };
 var BLOCK_SERVICE_API_URL = '/gateway/api/blocks/v1';
+var GRAPHQL_ENDPOINT = '/gateway/api/graphql';
+var GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_GET_DOCUMENT_REFERENCE_BLOCKS';
+var buildGetDocumentReferenceBlocksQuery = function buildGetDocumentReferenceBlocksQuery(documentAri) {
+  return "query ".concat(GET_DOCUMENT_REFERENCE_BLOCKS_OPERATION_NAME, " {\n\tblockService_getDocumentReferenceBlocks(documentAri: \"").concat(documentAri, "\") {\n\t\tblocks {\n\t\t\tblockAri\n\t\t\tblockInstanceId\n\t\t\tcontent\n\t\t\tcreatedAt\n\t\t\tcreatedBy\n\t\t\tproduct\n\t\t\tsourceAri\n\t\t\tstatus\n\t\t\tversion\n\t\t}\n\t\terrors {\n\t\t\tblockAri\n\t\t\tcode\n\t\t\treason\n\t\t}\n\t}\n}");
+};
 export var BlockError = /*#__PURE__*/function (_Error) {
   function BlockError(status) {
     var _this;

package/dist/esm/hooks/useFetchSyncBlockData.js

@@ -1,26 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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; }
 import { useCallback, useEffect, useState } from 'react';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { SyncBlockError } from '../common/types';
 import { fetchErrorPayload } from '../utils/errorHandling';
 import { createSyncBlockNode } from '../utils/utils';
 export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resourceId, localId, fireAnalyticsEvent) {
+  // Initialize both states from a single cache lookup to avoid race conditions.
+  // When a block is moved/remounted, the old component's cleanup may clear the cache
+  // before or after the new component mounts. By doing a single lookup, we ensure
+  // consistency between syncBlockInstance and isLoading initial values.
   var _useState = useState(function () {
       if (resourceId) {
-        var _manager$referenceMan, _manager$referenceMan2;
-        return (_manager$referenceMan = manager === null || manager === void 0 || (_manager$referenceMan2 = manager.referenceManager) === null || _manager$referenceMan2 === void 0 ? void 0 : _manager$referenceMan2.getInitialSyncBlockData(resourceId)) !== null && _manager$referenceMan !== void 0 ? _manager$referenceMan : null;
+        var _manager$referenceMan;
+        var initialData = manager === null || manager === void 0 || (_manager$referenceMan = manager.referenceManager) === null || _manager$referenceMan === void 0 ? void 0 : _manager$referenceMan.getInitialSyncBlockData(resourceId);
+        return {
+          syncBlockInstance: initialData !== null && initialData !== void 0 ? initialData : null,
+          isLoading: initialData === undefined
+        };
       }
-      return null;
+      return {
+        syncBlockInstance: null,
+        isLoading: true
+      };
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    syncBlockInstance = _useState2[0],
-    setSyncBlockInstance = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    setIsLoading = _useState4[1];
+    _useState2$ = _useState2[0],
+    syncBlockInstance = _useState2$.syncBlockInstance,
+    isLoading = _useState2$.isLoading,
+    setFetchState = _useState2[1];
   var reloadData = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var syncBlockNode;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -40,13 +52,17 @@ export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resou
           }
           throw new Error('Failed to create sync block node from resourceid and localid');
         case 6:
-          setIsLoading(true);
+          setFetchState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              isLoading: true
+            });
+          });
 
           // Fetch sync block data, the `subscribeToSyncBlock` will update the state once data is fetched
           _context.next = 9;
           return manager.referenceManager.fetchSyncBlocksData([syncBlockNode]);
         case 9:
-          _context.next = 16;
+          _context.next = 17;
           break;
         case 11:
           _context.prev = 11;
@@ -57,13 +73,21 @@ export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resou
           fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent(fetchErrorPayload(_context.t0.message));
 
           // Set error state if fetching fails
-          setSyncBlockInstance({
-            resourceId: resourceId || '',
-            error: SyncBlockError.Errored
+          setFetchState({
+            syncBlockInstance: {
+              resourceId: resourceId || '',
+              error: SyncBlockError.Errored
+            },
+            isLoading: false
           });
-        case 16:
-          setIsLoading(false);
+          return _context.abrupt("return");
         case 17:
+          setFetchState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              isLoading: false
+            });
+          });
+        case 18:
         case "end":
           return _context.stop();
       }
@@ -71,8 +95,10 @@ export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resou
   })), [isLoading, localId, manager.referenceManager, resourceId, fireAnalyticsEvent]);
   useEffect(function () {
     var unsubscribe = manager.referenceManager.subscribeToSyncBlock(resourceId || '', localId || '', function (data) {
-      setSyncBlockInstance(data);
-      setIsLoading(false);
+      setFetchState({
+        syncBlockInstance: data,
+        isLoading: false
+      });
     });
     return function () {
       unsubscribe();

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

@@ -22,6 +22,11 @@ import { createSyncBlockNode } from '../utils/utils';
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
+  // Track pending cache deletions to handle block moves (unmount/remount)
+  // When a block is moved, the old component unmounts before the new one mounts,
+  // causing the cache to be deleted prematurely. We delay deletion to allow
+  // the new component to subscribe and cancel the pending deletion.
+
   function ReferenceSyncBlockStoreManager(dataProvider) {
     _classCallCheck(this, ReferenceSyncBlockStoreManager);
     // Keeps track of addition and deletion of reference synced blocks on the document
@@ -36,6 +41,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     this.syncBlockFetchDataRequests = new Map();
     this.syncBlockSourceInfoRequests = new Map();
     this.providerFactories = new Map();
+    this.pendingCacheDeletions = new Map();
   }
   return _createClass(ReferenceSyncBlockStoreManager, [{
     key: "setFireAnalyticsEvent",
@@ -335,6 +341,16 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     value: function subscribeToSyncBlock(resourceId, localId, callback) {
       var _this$dataProvider2,
         _this3 = this;
+      // Cancel any pending cache deletion for this resourceId.
+      // This handles the case where a block is moved - the old component unmounts
+      // (scheduling deletion) but the new component mounts and subscribes before
+      // the deletion timeout fires.
+      var pendingDeletion = this.pendingCacheDeletions.get(resourceId);
+      if (pendingDeletion) {
+        clearTimeout(pendingDeletion);
+        this.pendingCacheDeletions.delete(resourceId);
+      }
+
       // add to subscriptions map
       var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
       this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, _defineProperty({}, localId, callback)));
@@ -365,7 +381,19 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
           delete resourceSubscriptions[localId];
           if (Object.keys(resourceSubscriptions).length === 0) {
             _this3.subscriptions.delete(resourceId);
-            _this3.deleteFromCache(resourceId);
+            // Delay cache deletion to handle block moves (unmount/remount).
+            // When a block is moved, the old component unmounts before the new one mounts.
+            // By delaying deletion, we give the new component time to subscribe and
+            // cancel this pending deletion, preserving the cached data.
+            // TODO: EDITOR-4152 - Rework this logic 
+            var deletionTimeout = setTimeout(function () {
+              // Only delete if still no subscribers (wasn't re-subscribed)
+              if (!_this3.subscriptions.has(resourceId)) {
+                _this3.deleteFromCache(resourceId);
+              }
+              _this3.pendingCacheDeletions.delete(resourceId);
+            }, 1000);
+            _this3.pendingCacheDeletions.set(resourceId, deletionTimeout);
           } else {
             _this3.subscriptions.set(resourceId, resourceSubscriptions);
           }

package/dist/types/clients/block-service/blockService.d.ts

@@ -23,7 +23,7 @@ export declare const isBlockContentResponse: (response: BlockContentResponse | B
 /**
  * Retrieves all synced blocks referenced in a document.
  *
- * Calls the Block Service API endpoint: `/v1/block/document/reference/{documentAri}`
+ * Calls the Block Service GraphQL API: `blockService_getDocumentReferenceBlocks`
  *
  * @param documentAri - The ARI of the document to fetch synced blocks for
  * @returns A promise containing arrays of successfully fetched blocks and any errors encountered
@@ -60,7 +60,6 @@ export declare const isBlockContentResponse: (response: BlockContentResponse | B
  *   ]
  * }
  * ```
- * Check https://block-service.dev.atl-paas.net/ for latest API documentation.
  */
 export declare const getReferenceSyncedBlocks: (documentAri: string) => Promise<ReferenceSyncedBlockResponse>;
 export type GetSyncedBlockContentRequest = {

package/dist/types/store-manager/referenceSyncBlockStoreManager.d.ts

@@ -14,6 +14,7 @@ export declare class ReferenceSyncBlockStoreManager {
     private syncBlockFetchDataRequests;
     private syncBlockSourceInfoRequests;
     private isRefreshingSubscriptions;
+    private pendingCacheDeletions;
     constructor(dataProvider?: SyncBlockDataProvider);
     setFireAnalyticsEvent(fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void): void;
     generateResourceIdForReference(sourceId: ResourceId): ResourceId;

package/dist/types-ts4.5/clients/block-service/blockService.d.ts

@@ -23,7 +23,7 @@ export declare const isBlockContentResponse: (response: BlockContentResponse | B
 /**
  * Retrieves all synced blocks referenced in a document.
  *
- * Calls the Block Service API endpoint: `/v1/block/document/reference/{documentAri}`
+ * Calls the Block Service GraphQL API: `blockService_getDocumentReferenceBlocks`
  *
  * @param documentAri - The ARI of the document to fetch synced blocks for
  * @returns A promise containing arrays of successfully fetched blocks and any errors encountered
@@ -60,7 +60,6 @@ export declare const isBlockContentResponse: (response: BlockContentResponse | B
  *   ]
  * }
  * ```
- * Check https://block-service.dev.atl-paas.net/ for latest API documentation.
  */
 export declare const getReferenceSyncedBlocks: (documentAri: string) => Promise<ReferenceSyncedBlockResponse>;
 export type GetSyncedBlockContentRequest = {

package/dist/types-ts4.5/store-manager/referenceSyncBlockStoreManager.d.ts

@@ -14,6 +14,7 @@ export declare class ReferenceSyncBlockStoreManager {
     private syncBlockFetchDataRequests;
     private syncBlockSourceInfoRequests;
     private isRefreshingSubscriptions;
+    private pendingCacheDeletions;
     constructor(dataProvider?: SyncBlockDataProvider);
     setFireAnalyticsEvent(fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void): void;
     generateResourceIdForReference(sourceId: ResourceId): ResourceId;

package/package.json

@@ -76,7 +76,7 @@
 		}
 	},
 	"name": "@atlaskit/editor-synced-block-provider",
-	"version": "3.0.0",
+	"version": "3.2.0",
 	"description": "Synced Block Provider for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",