@atlaskit/editor-plugin-synced-block 4.4.0 → 4.5.0

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

@@ -1,13 +1,14 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
-import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { mapSlice, pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/editor-synced-block-provider';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
 import { FLAG_ID } from '../types';
+import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-removal';
 import { shouldIgnoreDomEvent } from './utils/ignore-dom-event';
 import { calculateDecorations } from './utils/selection-decorations';
 import { hasEditInSyncBlock, trackSyncBlocks } from './utils/track-sync-blocks';
@@ -16,7 +17,9 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
   const {
     useLongPressSelection = false
   } = options || {};
-  let confirmationTransaction;
+  const confirmationTransactionRef = {
+    current: undefined
+  };
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -25,25 +28,27 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         syncBlockStore.referenceManager.fetchSyncBlocksData(convertPMNodesToSyncBlockNodes(syncBlockNodes));
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
-          showFlag: false,
+          activeFlag: false,
           syncBlockStore: syncBlockStore
         };
       },
       apply: (tr, currentPluginState, oldEditorState) => {
-        var _meta$showFlag;
+        var _meta$activeFlag, _meta$bodiedSyncBlock;
         const meta = tr.getMeta(syncedBlockPluginKey);
         const {
-          showFlag,
-          selectionDecorationSet
+          activeFlag,
+          selectionDecorationSet,
+          bodiedSyncBlockDeletionStatus
         } = currentPluginState;
         let newDecorationSet = selectionDecorationSet.map(tr.mapping, tr.doc);
         if (!tr.selection.eq(oldEditorState.selection)) {
           newDecorationSet = calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema);
         }
         return {
-          showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : showFlag,
+          activeFlag: (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag,
           selectionDecorationSet: newDecorationSet,
-          syncBlockStore: syncBlockStore
+          syncBlockStore: syncBlockStore,
+          bodiedSyncBlockDeletionStatus: (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus
         };
       }
     },
@@ -94,6 +99,40 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         mousedown(view, event) {
           return shouldIgnoreDomEvent(view, event, api);
         }
+      },
+      transformCopied: (slice, {
+        state
+      }) => {
+        const pluginState = syncedBlockPluginKey.getState(state);
+        const syncBlockStore = pluginState === null || pluginState === void 0 ? void 0 : pluginState.syncBlockStore;
+        const {
+          schema
+        } = state;
+        if (!syncBlockStore) {
+          return slice;
+        }
+        return mapSlice(slice, node => {
+          if (node.type.name === 'bodiedSyncBlock' && node.attrs.resourceId) {
+            try {
+              const newResourceId = syncBlockStore.referenceManager.generateResourceIdForReference(node.attrs.resourceId);
+              // Convert bodiedSyncBlock to syncBlock
+              // The paste transformation will regenrate the localId
+              const newAttrs = {
+                ...node.attrs,
+                resourceId: newResourceId
+              };
+              const newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(mark => {
+                var _schema$nodes$syncBlo;
+                return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
+              }) : node.marks;
+              return schema.nodes.syncBlock.create(newAttrs, null, newMarks);
+            } catch (error) {
+              // If generateResourceIdForReference died, return the original node
+              return node;
+            }
+          }
+          return node;
+        });
       }
     },
     filterTransaction: (tr, state) => {
@@ -113,26 +152,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       } = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, state);
       if (!isOffline) {
         if (bodiedSyncBlockRemoved.length > 0) {
-          // If there are source sync blocks being removed, and we need to confirm with user before deleting,
-          // we block the transaction here, and wait for user confirmation to proceed with deletion.
-          // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
-          // proceed with deletion.
-          confirmationTransaction = tr;
-          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(node => node.attrs), () => {
-            var _api$core;
-            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(() => {
-              const trToDispatch = tr.setMeta('isConfirmedSyncBlockDeletion', true);
-              if (!trToDispatch.getMeta(pmHistoryPluginKey)) {
-                // bodiedSyncBlock deletion is expected to be permanent (cannot undo)
-                // For a normal deletion (not triggered by undo), remove it from history so that it cannot be undone
-                trToDispatch.setMeta('addToHistory', false);
-              }
-              return trToDispatch;
-            });
-          }).finally(() => {
-            confirmationTransaction = undefined;
-          });
-          return false;
+          confirmationTransactionRef.current = tr;
+          return handleBodiedSyncBlockRemoval(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef);
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(pmHistoryPluginKey))) {
@@ -146,8 +167,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
           // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
           syncBlockStore.sourceManager.registerCreationCallback(() => {
-            var _api$core2;
-            api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(() => {
+            var _api$core;
+            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(() => {
               return tr.setMeta('isCommitSyncBlockCreation', true);
             });
             api === null || api === void 0 ? void 0 : api.core.actions.focus();
@@ -176,7 +197,9 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
               tr
             }) => {
               return tr.setMeta(syncedBlockPluginKey, {
-                showFlag: errorFlag
+                activeFlag: {
+                  id: errorFlag
+                }
               });
             });
           }, 0);
@@ -187,8 +210,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
     },
     appendTransaction: (trs, oldState, newState) => {
       trs.filter(tr => tr.docChanged).forEach(tr => {
-        if (confirmationTransaction) {
-          confirmationTransaction = rebaseTransaction(confirmationTransaction, tr, newState);
+        if (confirmationTransactionRef.current) {
+          confirmationTransactionRef.current = rebaseTransaction(confirmationTransactionRef.current, tr, newState);
         }
       });
       for (const tr of trs) {

package/dist/es2019/pm-plugins/utils/handle-bodied-sync-block-removal.js

@@ -0,0 +1,74 @@
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { FLAG_ID } from '../../types';
+import { syncedBlockPluginKey } from '../main';
+const onRetry = (api, syncBlockStore) => () => {
+  var _api$core;
+  api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+    tr
+  }) => {
+    return tr.setMeta(syncedBlockPluginKey, {
+      bodiedSyncBlockDeletionStatus: 'processing',
+      activeFlag: false
+    });
+  });
+  syncBlockStore.sourceManager.retryDeletion();
+};
+const onDismissed = syncBlockStore => tr => {
+  syncBlockStore.sourceManager.clearPendingDeletion();
+  return tr.setMeta(syncedBlockPluginKey, {
+    bodiedSyncBlockDeletionStatus: 'none'
+  });
+};
+export const handleBodiedSyncBlockRemoval = (tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef) => {
+  // Clear potential old pending deletion to retreat the deletion as first attempt
+  syncBlockStore.sourceManager.clearPendingDeletion();
+
+  // If there are source sync blocks being removed, and we need to confirm with user before deleting,
+  // we block the transaction here, and wait for user confirmation to proceed with deletion.
+  // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
+  // proceed with deletion.
+  syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(node => node.attrs), () => {
+    var _api$core2;
+    const confirmationTransaction = confirmationTransactionRef.current;
+    if (!confirmationTransaction) {
+      return;
+    }
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(() => {
+      const trToDispatch = confirmationTransaction.setMeta('isConfirmedSyncBlockDeletion', true);
+      if (!trToDispatch.getMeta(pmHistoryPluginKey)) {
+        // bodiedSyncBlock deletion is expected to be permanent (cannot undo)
+        // For a normal deletion (not triggered by undo), remove it from history so that it cannot be undone
+        trToDispatch.setMeta('addToHistory', false);
+      }
+      return trToDispatch;
+    });
+  }, success => {
+    var _api$core3;
+    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+      tr
+    }) => {
+      let newState;
+      if (!success) {
+        newState = {
+          activeFlag: {
+            id: FLAG_ID.FAIL_TO_DELETE,
+            onRetry: onRetry(api, syncBlockStore),
+            onDismissed: onDismissed(syncBlockStore)
+          }
+        };
+      }
+      newState = {
+        ...newState,
+        bodiedSyncBlockDeletionStatus: syncBlockStore.sourceManager.isRetryingDeletion() ?
+        // For retry, reset to none directly to clean up the status
+        'none' :
+        // For the first attempt, set to completed for deletion modal can close the modal
+        'completed'
+      };
+      return tr.setMeta(syncedBlockPluginKey, newState);
+    });
+  }, () => {
+    confirmationTransactionRef.current = undefined;
+  });
+  return false;
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -95,12 +95,14 @@ export const syncedBlockPlugin = ({
         return;
       }
       const {
-        showFlag,
-        syncBlockStore: currentSyncBlockStore
+        activeFlag,
+        syncBlockStore: currentSyncBlockStore,
+        bodiedSyncBlockDeletionStatus
       } = syncedBlockPluginKey.getState(editorState);
       return {
-        showFlag,
-        syncBlockStore: currentSyncBlockStore
+        activeFlag,
+        syncBlockStore: currentSyncBlockStore,
+        bodiedSyncBlockDeletionStatus
       };
     }
   };

package/dist/es2019/types/index.js

@@ -2,5 +2,6 @@ export let FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["CANNOT_DELETE_WHEN_OFFLINE"] = "cannot-delete-when-offline";
   FLAG_ID["CANNOT_EDIT_WHEN_OFFLINE"] = "cannot-edit-when-offline";
   FLAG_ID["CANNOT_CREATE_WHEN_OFFLINE"] = "cannot-create-when-offline";
+  FLAG_ID["FAIL_TO_DELETE"] = "fail-to-delete";
   return FLAG_ID;
 }({});

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -5,47 +5,90 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { Text } from '@atlaskit/primitives/compiled';
+import { syncedBlockPluginKey } from '../pm-plugins/main';
 export const DeleteConfirmationModal = ({
   syncBlockStoreManager,
   api
 }) => {
+  var _api$core2, _api$core4, _api$core6;
   const [isOpen, setIsOpen] = useState(false);
   const [syncBlockCount, setSyncBlockCount] = useState(1);
   const {
-    mode
-  } = useSharedPluginStateWithSelector(api, ['connectivity'], states => {
-    var _states$connectivityS;
+    mode,
+    bodiedSyncBlockDeletionStatus,
+    activeFlag
+  } = useSharedPluginStateWithSelector(api, ['connectivity', 'syncedBlock'], states => {
+    var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
     return {
-      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+      bodiedSyncBlockDeletionStatus: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.bodiedSyncBlockDeletionStatus,
+      activeFlag: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.activeFlag
     };
   });
   const {
     formatMessage
   } = useIntl();
   const resolverRef = React.useRef(undefined);
-  const handleClose = useCallback(confirm => () => {
+  const handleClick = useCallback(confirm => () => {
+    var _api$core;
     if (resolverRef.current) {
       resolverRef.current(confirm);
       resolverRef.current = undefined;
     }
-    setIsOpen(false);
-  }, []);
+    if (!confirm) {
+      setIsOpen(false);
+    }
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => {
+      return tr.setMeta(syncedBlockPluginKey, {
+        bodiedSyncBlockDeletionStatus: confirm ? 'processing' : 'none',
+        activeFlag: false
+      });
+    });
+  }, [api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
   const confirmationCallback = useCallback(syncBlockCount => {
     setIsOpen(true);
     setSyncBlockCount(syncBlockCount);
     const confirmedPromise = new Promise(resolve => {
       resolverRef.current = resolve;
     });
+    if (activeFlag) {
+      var _api$core3;
+      api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
+        tr
+      }) => {
+        return tr.setMeta(syncedBlockPluginKey, {
+          // Clear flag to avoid potential retry deletion of different blocks
+          activeFlag: false
+        });
+      });
+    }
     return confirmedPromise;
-  }, []);
+  }, [activeFlag, api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions]);
   useEffect(() => {
     const unregister = syncBlockStoreManager.sourceManager.registerConfirmationCallback(confirmationCallback);
     return () => {
       unregister();
     };
   }, [syncBlockStoreManager, confirmationCallback]);
+  useEffect(() => {
+    if (bodiedSyncBlockDeletionStatus === 'completed' && isOpen) {
+      var _api$core5;
+      // auto close modal once deletion is successful
+      setIsOpen(false);
+      api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+        tr
+      }) => {
+        return tr.setMeta(syncedBlockPluginKey, {
+          // Reset deletion status to have a clean state for next deletion
+          bodiedSyncBlockDeletionStatus: 'none'
+        });
+      });
+    }
+  }, [api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
-    onClose: handleClose(false),
+    onClose: handleClick(false),
     testId: "sync-block-delete-confirmation"
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
@@ -55,11 +98,12 @@ export const DeleteConfirmationModal = ({
     syncBlockCount
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
-    onClick: handleClose(false)
+    onClick: handleClick(false)
   }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
     appearance: "warning",
-    onClick: handleClose(true),
+    onClick: handleClick(true),
     autoFocus: true,
-    isDisabled: mode === 'offline'
+    isDisabled: mode === 'offline',
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
   }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };

package/dist/es2019/ui/Flag.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import AkFlag, { FlagGroup } from '@atlaskit/flag';
-import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 import { FLAG_ID } from '../types';
 const flagMap = {
@@ -18,35 +18,61 @@ const flagMap = {
   [FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE]: {
     title: messages.failToCreateTitle,
     description: messages.failToCreateWhenOfflineDescription
+  },
+  [FLAG_ID.FAIL_TO_DELETE]: {
+    title: messages.cannotDeleteTitle,
+    description: messages.cannotDeleteDescription
   }
 };
 export const Flag = ({
   api
 }) => {
   const {
-    showFlag
-  } = useSharedPluginStateWithSelector(api, ['syncedBlock'], states => {
-    var _states$syncedBlockSt;
+    activeFlag,
+    mode
+  } = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], states => {
+    var _states$syncedBlockSt, _states$connectivityS;
     return {
-      showFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.showFlag
+      activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
     };
   });
   const {
     formatMessage
   } = useIntl();
-  if (!showFlag) {
+  if (!activeFlag) {
     return;
   }
   const {
     title,
     description
-  } = flagMap[showFlag];
+  } = flagMap[activeFlag.id];
+  const {
+    onRetry,
+    onDismissed: onDismissedCallback
+  } = activeFlag;
+
+  // Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
+  if (mode === 'offline' && !!onRetry) {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      tr.setMeta(syncedBlockPluginKey, {
+        activeFlag: false
+      });
+      return tr;
+    });
+    return;
+  }
   const onDismissed = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
+      onDismissedCallback === null || onDismissedCallback === void 0 ? void 0 : onDismissedCallback(tr);
+      const oldMeta = tr.getMeta(syncedBlockPluginKey);
       tr.setMeta(syncedBlockPluginKey, {
-        showFlag: false
+        ...oldMeta,
+        activeFlag: false
       });
       return tr;
     });
@@ -56,11 +82,15 @@ export const Flag = ({
     onDismissed: onDismissed,
     title: formatMessage(title),
     description: formatMessage(description),
-    id: showFlag,
-    testId: showFlag,
-    icon: /*#__PURE__*/React.createElement(StatusErrorIcon, {
+    id: activeFlag.id,
+    testId: activeFlag.id,
+    icon: /*#__PURE__*/React.createElement(StatusWarningIcon, {
       label: "",
-      color: "var(--ds-icon-danger, #C9372C)"
-    })
+      color: "var(--ds-icon-warning, #E06C00)"
+    }),
+    actions: onRetry ? [{
+      content: formatMessage(messages.deleteRetryButton),
+      onClick: onRetry
+    }] : undefined
   }));
 };

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -6,7 +6,8 @@ const SyncBlockRendererWrapperComponent = ({
   syncedBlockRenderer,
   useFetchSyncBlockData,
   localId,
-  useFetchSyncBlockTitle
+  useFetchSyncBlockTitle,
+  api
 }) => {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
@@ -14,7 +15,8 @@ const SyncBlockRendererWrapperComponent = ({
     ,
     className: SyncBlockSharedCssClassName.renderer
   }, syncedBlockRenderer({
-    useFetchSyncBlockData
+    useFetchSyncBlockData,
+    api
   })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
     isSource: false,
     useFetchSyncBlockTitle: useFetchSyncBlockTitle,

package/dist/esm/nodeviews/syncedBlock.js

@@ -60,7 +60,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         useFetchSyncBlockData: function useFetchSyncBlockData() {
           var _this2$api;
           return _useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this2$api = _this2.api) === null || _this2$api === void 0 || (_this2$api = _this2$api.analytics) === null || _this2$api === void 0 || (_this2$api = _this2$api.actions) === null || _this2$api === void 0 ? void 0 : _this2$api.fireAnalyticsEvent);
-        }
+        },
+        api: this.api
       });
     }
   }, {