@atlaskit/editor-synced-block-provider 4.0.1 → 4.1.1

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

@@ -12,7 +12,6 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _monitoring = require("@atlaskit/editor-common/monitoring");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../common/types");
 var _errorHandling = require("../utils/errorHandling");
 var _experienceTracking = require("../utils/experienceTracking");
@@ -72,11 +71,9 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
           throw new Error('Local ID or resource ID is not set');
         }
         var syncBlockData = (0, _utils.convertSyncBlockPMNodeToSyncBlockData)(syncBlockNode);
-        if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
-          var cachedBlock = this.syncBlockCache.get(resourceId);
-          if (cachedBlock && !(0, _isEqual.default)(syncBlockData.content, cachedBlock.content)) {
-            this.hasReceivedContentChange = true;
-          }
+        var cachedBlock = this.syncBlockCache.get(resourceId);
+        if (cachedBlock && !(0, _isEqual.default)(syncBlockData.content, cachedBlock.content)) {
+          this.hasReceivedContentChange = true;
         }
         this.syncBlockCache.set(resourceId, _objectSpread(_objectSpread({}, syncBlockData), {}, {
           isDirty: true

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

@@ -9,26 +9,45 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _monitoring = require("@atlaskit/editor-common/monitoring");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _errorHandling = require("../utils/errorHandling");
 var _resolveSyncBlockInstance = require("../utils/resolveSyncBlockInstance");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Manages the lifecycle of GraphQL WebSocket subscriptions for sync block
- * real-time updates, and provides a listener API so React components can
- * react when the set of subscribed resource IDs changes.
+ * real-time updates, owns the subscriptions and titleSubscriptions maps,
+ * and provides a listener API so React components can react when the set
+ * of subscribed resource IDs changes.
  */
 var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__PURE__*/function () {
   function SyncBlockSubscriptionManager(deps) {
     (0, _classCallCheck2.default)(this, SyncBlockSubscriptionManager);
+    (0, _defineProperty2.default)(this, "subscriptions", new Map());
+    (0, _defineProperty2.default)(this, "titleSubscriptions", new Map());
     (0, _defineProperty2.default)(this, "graphqlSubscriptions", new Map());
     (0, _defineProperty2.default)(this, "subscriptionChangeListeners", new Set());
     (0, _defineProperty2.default)(this, "useRealTimeSubscriptions", false);
+    // 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.
+    (0, _defineProperty2.default)(this, "pendingCacheDeletions", new Map());
     this.deps = deps;
   }
+
+  /**
+   * Returns the subscriptions map. Used by external consumers (e.g. batch fetcher, flush)
+   * that need to read the current subscription state.
+   */
   return (0, _createClass2.default)(SyncBlockSubscriptionManager, [{
+    key: "getSubscriptions",
+    value: function getSubscriptions() {
+      return this.subscriptions;
+    }
+  }, {
     key: "setRealTimeSubscriptionsEnabled",
     value: function setRealTimeSubscriptionsEnabled(enabled) {
       if (this.useRealTimeSubscriptions === enabled) {
@@ -49,7 +68,7 @@ var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__P
   }, {
     key: "getSubscribedResourceIds",
     value: function getSubscribedResourceIds() {
-      return Array.from(this.deps.getSubscriptions().keys());
+      return Array.from(this.subscriptions.keys());
     }
   }, {
     key: "onSubscriptionsChanged",
@@ -89,10 +108,140 @@ var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__P
         this.deps.fetchSyncBlockSourceInfo(resolved.resourceId);
       }
     }
+  }, {
+    key: "subscribeToSyncBlock",
+    value: function subscribeToSyncBlock(resourceId, localId, callback) {
+      var _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) || {};
+      var isNewResourceSubscription = Object.keys(resourceSubscriptions).length === 0;
+      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.deps.markCacheDirty();
+
+      // Notify listeners if this is a new resource subscription
+      if (isNewResourceSubscription) {
+        this.notifySubscriptionChangeListeners();
+      }
+      var cachedData = this.deps.getFromCache(resourceId);
+      if (cachedData) {
+        callback(cachedData);
+      } else {
+        this.deps.debouncedBatchedFetchSyncBlocks(resourceId);
+      }
+
+      // Set up GraphQL subscription if real-time subscriptions are enabled
+      if (this.shouldUseRealTime()) {
+        this.setupSubscription(resourceId);
+      }
+      return function () {
+        var resourceSubscriptions = _this3.subscriptions.get(resourceId);
+        if (resourceSubscriptions) {
+          // Unsubscription means a reference synced block is removed from the document
+          _this3.deps.markCacheDirty();
+          delete resourceSubscriptions[localId];
+          if (Object.keys(resourceSubscriptions).length === 0) {
+            _this3.subscriptions.delete(resourceId);
+
+            // Clean up GraphQL subscription when no more local subscribers
+            _this3.cleanupSubscription(resourceId);
+
+            // Notify listeners that subscription was removed
+            _this3.notifySubscriptionChangeListeners();
+
+            // 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.deps.deleteFromCache(resourceId);
+              }
+              _this3.pendingCacheDeletions.delete(resourceId);
+            }, 1000);
+            _this3.pendingCacheDeletions.set(resourceId, deletionTimeout);
+          } else {
+            _this3.subscriptions.set(resourceId, resourceSubscriptions);
+          }
+        }
+      };
+    }
+  }, {
+    key: "subscribeToSourceTitle",
+    value: function subscribeToSourceTitle(node, callback) {
+      var _cachedData$data,
+        _this4 = this;
+      // check node is a sync block, as we only support sync block subscriptions
+      if (node.type.name !== 'syncBlock') {
+        return function () {};
+      }
+      var _node$attrs = node.attrs,
+        resourceId = _node$attrs.resourceId,
+        localId = _node$attrs.localId;
+      if (!localId || !resourceId) {
+        return function () {};
+      }
+      var cachedData = this.deps.getFromCache(resourceId);
+      if (cachedData !== null && cachedData !== void 0 && (_cachedData$data = cachedData.data) !== null && _cachedData$data !== void 0 && _cachedData$data.sourceTitle) {
+        callback(cachedData.data.sourceTitle);
+      }
+
+      // add to subscriptions map
+      var resourceSubscriptions = this.titleSubscriptions.get(resourceId) || {};
+      this.titleSubscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, (0, _defineProperty2.default)({}, localId, callback)));
+      return function () {
+        var resourceSubscriptions = _this4.titleSubscriptions.get(resourceId);
+        if (resourceSubscriptions) {
+          delete resourceSubscriptions[localId];
+          if (Object.keys(resourceSubscriptions).length === 0) {
+            _this4.titleSubscriptions.delete(resourceId);
+          } else {
+            _this4.titleSubscriptions.set(resourceId, resourceSubscriptions);
+          }
+        }
+      };
+    }
+  }, {
+    key: "updateSourceTitleSubscriptions",
+    value: function updateSourceTitleSubscriptions(resourceId, title) {
+      var callbacks = this.titleSubscriptions.get(resourceId);
+      if (callbacks) {
+        Object.values(callbacks).forEach(function (callback) {
+          callback(title);
+        });
+      }
+    }
+
+    /**
+     * Notifies all subscription callbacks for a given resource ID with the provided sync block instance.
+     */
+  }, {
+    key: "notifySubscriptionCallbacks",
+    value: function notifySubscriptionCallbacks(resourceId, syncBlock) {
+      var callbacks = this.subscriptions.get(resourceId);
+      if (callbacks) {
+        Object.values(callbacks).forEach(function (callback) {
+          callback(syncBlock);
+        });
+      }
+    }
   }, {
     key: "setupSubscription",
     value: function setupSubscription(resourceId) {
-      var _this3 = this;
+      var _this5 = this;
       if (this.graphqlSubscriptions.has(resourceId)) {
         return;
       }
@@ -101,13 +250,13 @@ var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__P
         return;
       }
       var unsubscribe = dataProvider.subscribeToBlockUpdates(resourceId, function (syncBlockInstance) {
-        _this3.handleGraphQLUpdate(syncBlockInstance);
+        _this5.handleGraphQLUpdate(syncBlockInstance);
       }, function (error) {
-        var _this3$deps$getFireAn;
+        var _this5$deps$getFireAn;
         (0, _monitoring.logException)(error, {
           location: 'editor-synced-block-provider/syncBlockSubscriptionManager/graphql-subscription'
         });
-        (_this3$deps$getFireAn = _this3.deps.getFireAnalyticsEvent()) === null || _this3$deps$getFireAn === void 0 || _this3$deps$getFireAn((0, _errorHandling.fetchErrorPayload)(error.message));
+        (_this5$deps$getFireAn = _this5.deps.getFireAnalyticsEvent()) === null || _this5$deps$getFireAn === void 0 || _this5$deps$getFireAn((0, _errorHandling.fetchErrorPayload)(error.message));
       });
       if (unsubscribe) {
         this.graphqlSubscriptions.set(resourceId, unsubscribe);
@@ -125,7 +274,7 @@ var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__P
   }, {
     key: "setupSubscriptionsForAllBlocks",
     value: function setupSubscriptionsForAllBlocks() {
-      var _iterator = _createForOfIteratorHelper(this.deps.getSubscriptions().keys()),
+      var _iterator = _createForOfIteratorHelper(this.subscriptions.keys()),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
@@ -159,8 +308,25 @@ var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__P
     key: "destroy",
     value: function destroy() {
       this.cleanupAll();
+      this.subscriptions.clear();
+      this.titleSubscriptions.clear();
       this.subscriptionChangeListeners.clear();
       this.useRealTimeSubscriptions = false;
+
+      // Clear any pending cache deletions
+      var _iterator3 = _createForOfIteratorHelper(this.pendingCacheDeletions.values()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var timeout = _step3.value;
+          clearTimeout(timeout);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      this.pendingCacheDeletions.clear();
     }
   }, {
     key: "shouldUseRealTime",
@@ -170,22 +336,19 @@ var SyncBlockSubscriptionManager = exports.SyncBlockSubscriptionManager = /*#__P
   }, {
     key: "handleGraphQLUpdate",
     value: function handleGraphQLUpdate(syncBlockInstance) {
-      var _this4 = this;
+      var _this6 = this;
       if (!syncBlockInstance.resourceId) {
-        if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
-          return;
-        }
-        throw new Error('Sync block instance provided to graphql subscription update missing resource id');
+        return;
       }
       var existing = this.deps.getFromCache(syncBlockInstance.resourceId);
       var resolved = existing ? (0, _resolveSyncBlockInstance.resolveSyncBlockInstance)(existing, syncBlockInstance) : syncBlockInstance;
       this.deps.updateCache(resolved);
       if (!syncBlockInstance.error) {
-        var callbacks = this.deps.getSubscriptions().get(syncBlockInstance.resourceId);
+        var callbacks = this.subscriptions.get(syncBlockInstance.resourceId);
         var localIds = callbacks ? Object.keys(callbacks) : [];
         localIds.forEach(function (localId) {
-          var _this4$deps$getFireAn, _syncBlockInstance$da;
-          (_this4$deps$getFireAn = _this4.deps.getFireAnalyticsEvent()) === null || _this4$deps$getFireAn === void 0 || _this4$deps$getFireAn((0, _errorHandling.fetchSuccessPayload)(syncBlockInstance.resourceId, localId, (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.product));
+          var _this6$deps$getFireAn, _syncBlockInstance$da;
+          (_this6$deps$getFireAn = _this6.deps.getFireAnalyticsEvent()) === null || _this6$deps$getFireAn === void 0 || _this6$deps$getFireAn((0, _errorHandling.fetchSuccessPayload)(syncBlockInstance.resourceId, localId, (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.product));
         });
         this.deps.fetchSyncBlockSourceInfo(resolved.resourceId);
       } else {

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

@@ -297,6 +297,12 @@ export class BlockError extends Error {
     this.status = status;
   }
 }
+export class BlockTimeoutError extends Error {
+  constructor() {
+    super('Block request timed out');
+    this.name = 'BlockTimeoutError';
+  }
+}
 export const getSyncedBlockContent = async ({
   blockAri
 }) => {
@@ -334,20 +340,27 @@ export const getSyncedBlockContent = async ({
  * @returns A promise containing arrays of successfully fetched blocks and any errors encountered
  */
 export const batchRetrieveSyncedBlocks = async ({
-  blockIdentifiers
+  blockIdentifiers,
+  config
 }) => {
-  var _result$data2;
+  var _config$timeoutMs, _result$data2;
   const blockAris = blockIdentifiers.map(blockIdentifier => blockIdentifier.blockAri);
   const bodyData = {
     query: buildBatchRetrieveBlocksQuery(blockAris),
     operationName: BATCH_RETRIEVE_BLOCKS_OPERATION_NAME
   };
   const url = `${GRAPHQL_ENDPOINT}?operation=editorSyncedBlockBatchRetrieveBlocks`;
-  const response = await fetchWithRetry(url, {
+
+  // undefined or 0 or negative means no timeout,
+  // We don't enforce a minimum timeout for simplicity
+
+  const fetchPromise = fetchWithRetry(url, {
     method: 'POST',
     headers: COMMON_HEADERS,
     body: JSON.stringify(bodyData)
   });
+  const timeoutMs = (_config$timeoutMs = config === null || config === void 0 ? void 0 : config.timeoutMs) !== null && _config$timeoutMs !== void 0 ? _config$timeoutMs : 0;
+  const response = await (timeoutMs > 0 ? Promise.race([fetchPromise, new Promise((_, reject) => setTimeout(() => reject(new BlockTimeoutError()), timeoutMs))]) : fetchPromise);
   if (!response.ok) {
     throw new BlockError(response.status);
   }

package/dist/es2019/common/types.js

@@ -11,5 +11,7 @@ export let SyncBlockError = /*#__PURE__*/function (SyncBlockError) {
   // content is not a valid JSON
   SyncBlockError["Offline"] = "offline";
   SyncBlockError["Unpublished"] = "unpublished";
+  // request was aborted, typically due to client timeout
+  SyncBlockError["Aborted"] = "aborted";
   return SyncBlockError;
 }({});

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

@@ -1,7 +1,8 @@
 /* eslint-disable require-unicode-regexp  */
 import { useMemo } from 'react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateBlockAri, generateBlockAriFromReference } from '../../clients/block-service/ari';
-import { batchRetrieveSyncedBlocks, BlockError, createSyncedBlock, deleteSyncedBlock, getReferenceSyncedBlocks, getReferenceSyncedBlocksByBlockAri, getSyncedBlockContent, updateReferenceSyncedBlockOnDocument, updateSyncedBlock, updateSyncedBlocks } from '../../clients/block-service/blockService';
+import { batchRetrieveSyncedBlocks, BlockError, BlockTimeoutError, createSyncedBlock, deleteSyncedBlock, getReferenceSyncedBlocks, getReferenceSyncedBlocksByBlockAri, getSyncedBlockContent, updateReferenceSyncedBlockOnDocument, updateSyncedBlock, updateSyncedBlocks } from '../../clients/block-service/blockService';
 import { subscribeToBlockUpdates as subscribeToBlockUpdatesWS } from '../../clients/block-service/blockSubscription';
 import { SyncBlockError } from '../../common/types';
 import { stringifyError } from '../../utils/errorHandling';
@@ -287,6 +288,16 @@ export const batchFetchData = async (cloudId, parentAri, blockNodeIdentifiers, c
     }
     return results;
   } catch (error) {
+    if (error instanceof BlockTimeoutError && expValEquals('platform_editor_sync_block_ssr_config', 'isEnabled', true)) {
+      return blockNodeIdentifiers.map(blockNodeIdentifier => ({
+        error: {
+          type: SyncBlockError.Aborted,
+          reason: error.message
+        },
+        resourceId: blockNodeIdentifier.resourceId
+      }));
+    }
+
     // If batch request fails, return error for all resourceIds
     return blockNodeIdentifiers.map(blockNodeIdentifier => ({
       error: {