@atlaskit/editor-plugin-synced-block 4.2.9 → 4.2.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.2.10
+
+### Patch Changes
+
+- [`f727550ca4b3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f727550ca4b3d) -
+  [ux] [EDITOR-2738] Disable creation/deletion/data fetching of reference sync block in offline mode
+- Updated dependencies
+
 ## 4.2.9
 
 ### Patch Changes

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

@@ -16,7 +16,7 @@ var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
 var _types = require("../types");
 var _ignoreDomEvent = require("./utils/ignore-dom-event");
 var _selectionDecorations = require("./utils/selection-decorations");
-var _trackSyncBlocks2 = require("./utils/track-sync-blocks");
+var _trackSyncBlocks3 = require("./utils/track-sync-blocks");
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref = options || {},
@@ -114,19 +114,19 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isCommitSyncBlockCreation')) || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
-      var _trackSyncBlocks = (0, _trackSyncBlocks2.trackSyncBlocks)(syncBlockStore, tr, state),
-        removed = _trackSyncBlocks.removed,
-        added = _trackSyncBlocks.added;
+      var _trackSyncBlocks = (0, _trackSyncBlocks3.trackSyncBlocks)(syncBlockStore.isSourceBlock, tr, state),
+        bodiedSyncBlockRemoved = _trackSyncBlocks.removed,
+        bodiedSyncBlockAdded = _trackSyncBlocks.added;
       if (!isOffline) {
-        if (removed.length > 0) {
+        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.
-          syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
+          syncBlockStore.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved);
           return false;
         }
-        if (added.length > 0) {
+        if (bodiedSyncBlockAdded.length > 0) {
           // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
           // 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
@@ -140,23 +140,30 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return false;
         }
       } else {
-        // Disable node deletion/creation/edition in offline mode and trigger an error flag instead
+        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
+        var _trackSyncBlocks2 = (0, _trackSyncBlocks3.trackSyncBlocks)(function (node) {
+            return node.type.name === 'syncBlock';
+          }, tr, state),
+          syncBlockRemoved = _trackSyncBlocks2.removed,
+          syncBlockAdded = _trackSyncBlocks2.added;
         var errorFlag = false;
-        if (isConfirmedSyncBlockDeletion || removed.length > 0) {
+        if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
           errorFlag = _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
-        } else if (added.length > 0) {
+        } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
           errorFlag = _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
-        } else if ((0, _trackSyncBlocks2.hasEditInSyncBlock)(tr, state)) {
+        } else if ((0, _trackSyncBlocks3.hasEditInSyncBlock)(tr, state)) {
           errorFlag = _types.FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
         }
         if (errorFlag) {
-          api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
-            var tr = _ref2.tr;
-            tr.setMeta(syncedBlockPluginKey, {
-              showFlag: errorFlag
+          // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
+          setTimeout(function () {
+            api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+              var tr = _ref2.tr;
+              return tr.setMeta(syncedBlockPluginKey, {
+                showFlag: errorFlag
+              });
             });
-            return tr;
-          });
+          }, 0);
           return false;
         }
       }

package/dist/cjs/pm-plugins/utils/track-sync-blocks.js

@@ -9,9 +9,9 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 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; }
-var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
-  var sourceSyncBlockRemoved = {};
-  var sourceSyncBlockAdded = {};
+var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(predicate, tr, state) {
+  var removed = {};
+  var added = {};
 
   // and cast to specific step types
   var replaceSteps = tr.steps.filter(function (step) {
@@ -27,15 +27,16 @@ var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeMa
         if (oldStart !== oldEnd) {
           var deletedSlice = state.doc.slice(oldStart, oldEnd);
           deletedSlice.content.nodesBetween(0, deletedSlice.content.size, function (node) {
-            if (storeManager.isSourceBlock(node)) {
-              if (sourceSyncBlockAdded[node.attrs.localId]) {
+            if (predicate(node)) {
+              if (added[node.attrs.localId]) {
                 // If a source block added and then removed in the same transaction,
                 // we treat it as no-op.
-                delete sourceSyncBlockAdded[node.attrs.localId];
+                delete added[node.attrs.localId];
               } else {
-                sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+                removed[node.attrs.localId] = node.attrs;
               }
             }
+
             // we don't need to go deeper
             return false;
           });
@@ -47,13 +48,13 @@ var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeMa
     // if only one replace step, we have already checked the entire replaced range above
     if (step.slice.content.size > 0) {
       step.slice.content.nodesBetween(0, step.slice.content.size, function (node) {
-        if (storeManager.isSourceBlock(node)) {
-          if (sourceSyncBlockRemoved[node.attrs.localId]) {
+        if (predicate(node)) {
+          if (removed[node.attrs.localId]) {
             // If a source block is removed and added back in the same transaction,
             // we treat it as no-op.
-            delete sourceSyncBlockRemoved[node.attrs.localId];
+            delete removed[node.attrs.localId];
           } else {
-            sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            added[node.attrs.localId] = node.attrs;
           }
         }
         // we don't need to go deeper
@@ -62,8 +63,8 @@ var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeMa
     }
   });
   return {
-    removed: Object.values(sourceSyncBlockRemoved),
-    added: Object.values(sourceSyncBlockAdded)
+    removed: Object.values(removed),
+    added: Object.values(added)
   };
 };
 

package/dist/cjs/syncedBlockPlugin.js

@@ -99,7 +99,8 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
     },
     contentComponent: function contentComponent() {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SyncBlockRefresher.SyncBlockRefresher, {
-        syncBlockStoreManager: syncBlockStore
+        syncBlockStoreManager: syncBlockStore,
+        api: api
       }), /*#__PURE__*/_react.default.createElement(_DeleteConfirmationModal.DeleteConfirmationModal, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -12,7 +12,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
-var _compiled = require("@atlaskit/primitives/compiled");
 var _utils = require("../pm-plugins/utils/utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
@@ -60,6 +59,13 @@ var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
   var api = _ref2.api;
   var _useIntl2 = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl2.formatMessage;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (states) {
+      var _states$connectivityS2;
+      return {
+        mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+      };
+    }),
+    mode = _useSharedPluginState2.mode;
   var onClick = function onClick() {
     var _api$core3, _api$core4, _api$blockControls2;
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
@@ -71,23 +77,22 @@ var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SyncBlocksIcon, {
       label: ""
     }),
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
-    alignItems: "center",
-    gap: "space.050"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, formatMessage(_messages.blockMenuMessages.copySyncedBlock)), /*#__PURE__*/_react.default.createElement(_lozenge.default, {
-    appearance: "new"
-  }, formatMessage(_messages.blockMenuMessages.newLozenge))));
+    onClick: onClick,
+    isDisabled: mode === 'offline',
+    elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      appearance: "new"
+    }, formatMessage(_messages.blockMenuMessages.newLozenge))
+  }, formatMessage(_messages.blockMenuMessages.copySyncedBlock));
 };
 var CreateOrCopySyncedBlockDropdownItem = exports.CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref3) {
   var api = _ref3.api;
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
       var _states$blockControls3, _states$blockControls4;
       return {
         menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
       };
     }),
-    menuTriggerByNode = _useSharedPluginState2.menuTriggerByNode;
+    menuTriggerByNode = _useSharedPluginState3.menuTriggerByNode;
   if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
     return /*#__PURE__*/_react.default.createElement(CopySyncedBlockDropdownItem, {
       api: api

package/dist/cjs/ui/SyncBlockRefresher.js

@@ -5,23 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncBlockRefresher = exports.SYNC_BLOCK_FETCH_INTERVAL = void 0;
 var _react = require("react");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var SYNC_BLOCK_FETCH_INTERVAL = exports.SYNC_BLOCK_FETCH_INTERVAL = 3000;
 
 // Component that refreshes synced block subscriptions at regular intervals
 // this is a workaround for the subscription mechanism not being real-time
 var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefresher(_ref) {
-  var syncBlockStoreManager = _ref.syncBlockStoreManager;
+  var syncBlockStoreManager = _ref.syncBlockStoreManager,
+    api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (states) {
+      var _states$connectivityS;
+      return {
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      };
+    }),
+    mode = _useSharedPluginState.mode;
   (0, _react.useEffect)(function () {
-    var interval = window.setInterval(function () {
-      var _document;
-      // check if document is visible to avoid unnecessary refreshes
-      if (((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible') {
-        syncBlockStoreManager.refreshSubscriptions();
-      }
-    }, SYNC_BLOCK_FETCH_INTERVAL);
+    var interval = -1;
+    if (mode !== 'offline') {
+      interval = window.setInterval(function () {
+        var _document;
+        // check if document is visible to avoid unnecessary refreshes
+        if (((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible') {
+          syncBlockStoreManager.refreshSubscriptions();
+        }
+      }, SYNC_BLOCK_FETCH_INTERVAL);
+    } else if (interval !== -1) {
+      window.clearInterval(interval);
+    }
     return function () {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager]);
+  }, [syncBlockStoreManager, mode]);
   return null;
 };

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

@@ -107,19 +107,19 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         return true;
       }
       const {
-        removed,
-        added
-      } = trackSyncBlocks(syncBlockStore, tr, state);
+        removed: bodiedSyncBlockRemoved,
+        added: bodiedSyncBlockAdded
+      } = trackSyncBlocks(syncBlockStore.isSourceBlock, tr, state);
       if (!isOffline) {
-        if (removed.length > 0) {
+        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.
-          syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
+          syncBlockStore.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved);
           return false;
         }
-        if (added.length > 0) {
+        if (bodiedSyncBlockAdded.length > 0) {
           // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
           // 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
@@ -133,24 +133,30 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           return false;
         }
       } else {
-        // Disable node deletion/creation/edition in offline mode and trigger an error flag instead
+        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
+        const {
+          removed: syncBlockRemoved,
+          added: syncBlockAdded
+        } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
         let errorFlag = false;
-        if (isConfirmedSyncBlockDeletion || removed.length > 0) {
+        if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
           errorFlag = FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
-        } else if (added.length > 0) {
+        } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
           errorFlag = FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
         } else if (hasEditInSyncBlock(tr, state)) {
           errorFlag = FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
         }
         if (errorFlag) {
-          api === null || api === void 0 ? void 0 : api.core.actions.execute(({
-            tr
-          }) => {
-            tr.setMeta(syncedBlockPluginKey, {
-              showFlag: errorFlag
+          // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
+          setTimeout(() => {
+            api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+              tr
+            }) => {
+              return tr.setMeta(syncedBlockPluginKey, {
+                showFlag: errorFlag
+              });
             });
-            return tr;
-          });
+          }, 0);
           return false;
         }
       }

package/dist/es2019/pm-plugins/utils/track-sync-blocks.js

@@ -1,8 +1,8 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
-export const trackSyncBlocks = (storeManager, tr, state) => {
-  const sourceSyncBlockRemoved = {};
-  const sourceSyncBlockAdded = {};
+export const trackSyncBlocks = (predicate, tr, state) => {
+  const removed = {};
+  const added = {};
 
   // and cast to specific step types
   const replaceSteps = tr.steps.filter(step => step instanceof ReplaceStep || step instanceof ReplaceAroundStep);
@@ -18,15 +18,16 @@ export const trackSyncBlocks = (storeManager, tr, state) => {
         if (oldStart !== oldEnd) {
           const deletedSlice = state.doc.slice(oldStart, oldEnd);
           deletedSlice.content.nodesBetween(0, deletedSlice.content.size, node => {
-            if (storeManager.isSourceBlock(node)) {
-              if (sourceSyncBlockAdded[node.attrs.localId]) {
+            if (predicate(node)) {
+              if (added[node.attrs.localId]) {
                 // If a source block added and then removed in the same transaction,
                 // we treat it as no-op.
-                delete sourceSyncBlockAdded[node.attrs.localId];
+                delete added[node.attrs.localId];
               } else {
-                sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+                removed[node.attrs.localId] = node.attrs;
               }
             }
+
             // we don't need to go deeper
             return false;
           });
@@ -38,13 +39,13 @@ export const trackSyncBlocks = (storeManager, tr, state) => {
     // if only one replace step, we have already checked the entire replaced range above
     if (step.slice.content.size > 0) {
       step.slice.content.nodesBetween(0, step.slice.content.size, node => {
-        if (storeManager.isSourceBlock(node)) {
-          if (sourceSyncBlockRemoved[node.attrs.localId]) {
+        if (predicate(node)) {
+          if (removed[node.attrs.localId]) {
             // If a source block is removed and added back in the same transaction,
             // we treat it as no-op.
-            delete sourceSyncBlockRemoved[node.attrs.localId];
+            delete removed[node.attrs.localId];
           } else {
-            sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            added[node.attrs.localId] = node.attrs;
           }
         }
         // we don't need to go deeper
@@ -53,8 +54,8 @@ export const trackSyncBlocks = (storeManager, tr, state) => {
     }
   });
   return {
-    removed: Object.values(sourceSyncBlockRemoved),
-    added: Object.values(sourceSyncBlockAdded)
+    removed: Object.values(removed),
+    added: Object.values(added)
   };
 };
 

package/dist/es2019/syncedBlockPlugin.js

@@ -81,7 +81,8 @@ export const syncedBlockPlugin = ({
     },
     contentComponent: () => {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
-        syncBlockStoreManager: syncBlockStore
+        syncBlockStoreManager: syncBlockStore,
+        api: api
       }), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -4,7 +4,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
-import { Flex, Text } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 const CreateSyncedBlockDropdownItem = ({
   api
@@ -54,6 +53,14 @@ const CopySyncedBlockDropdownItem = ({
   const {
     formatMessage
   } = useIntl();
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], states => {
+    var _states$connectivityS2;
+    return {
+      mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+    };
+  });
   const onClick = () => {
     var _api$core3, _api$core4, _api$blockControls2, _api$blockControls2$c;
     api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
@@ -65,13 +72,12 @@ const CopySyncedBlockDropdownItem = ({
     elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
       label: ""
     }),
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    gap: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, null, formatMessage(blockMenuMessages.copySyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
-    appearance: "new"
-  }, formatMessage(blockMenuMessages.newLozenge))));
+    onClick: onClick,
+    isDisabled: mode === 'offline',
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(blockMenuMessages.newLozenge))
+  }, formatMessage(blockMenuMessages.copySyncedBlock));
 };
 export const CreateOrCopySyncedBlockDropdownItem = ({
   api

package/dist/es2019/ui/SyncBlockRefresher.js

@@ -1,22 +1,37 @@
 import { useEffect } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 export const SYNC_BLOCK_FETCH_INTERVAL = 3000;
 
 // Component that refreshes synced block subscriptions at regular intervals
 // this is a workaround for the subscription mechanism not being real-time
 export const SyncBlockRefresher = ({
-  syncBlockStoreManager
+  syncBlockStoreManager,
+  api
 }) => {
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], states => {
+    var _states$connectivityS;
+    return {
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+    };
+  });
   useEffect(() => {
-    const interval = window.setInterval(() => {
-      var _document;
-      // check if document is visible to avoid unnecessary refreshes
-      if (((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible') {
-        syncBlockStoreManager.refreshSubscriptions();
-      }
-    }, SYNC_BLOCK_FETCH_INTERVAL);
+    let interval = -1;
+    if (mode !== 'offline') {
+      interval = window.setInterval(() => {
+        var _document;
+        // check if document is visible to avoid unnecessary refreshes
+        if (((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible') {
+          syncBlockStoreManager.refreshSubscriptions();
+        }
+      }, SYNC_BLOCK_FETCH_INTERVAL);
+    } else if (interval !== -1) {
+      window.clearInterval(interval);
+    }
     return () => {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager]);
+  }, [syncBlockStoreManager, mode]);
   return null;
 };

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

@@ -107,19 +107,19 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isCommitSyncBlockCreation')) || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
-      var _trackSyncBlocks = trackSyncBlocks(syncBlockStore, tr, state),
-        removed = _trackSyncBlocks.removed,
-        added = _trackSyncBlocks.added;
+      var _trackSyncBlocks = trackSyncBlocks(syncBlockStore.isSourceBlock, tr, state),
+        bodiedSyncBlockRemoved = _trackSyncBlocks.removed,
+        bodiedSyncBlockAdded = _trackSyncBlocks.added;
       if (!isOffline) {
-        if (removed.length > 0) {
+        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.
-          syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
+          syncBlockStore.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved);
           return false;
         }
-        if (added.length > 0) {
+        if (bodiedSyncBlockAdded.length > 0) {
           // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
           // 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
@@ -133,23 +133,30 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return false;
         }
       } else {
-        // Disable node deletion/creation/edition in offline mode and trigger an error flag instead
+        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
+        var _trackSyncBlocks2 = trackSyncBlocks(function (node) {
+            return node.type.name === 'syncBlock';
+          }, tr, state),
+          syncBlockRemoved = _trackSyncBlocks2.removed,
+          syncBlockAdded = _trackSyncBlocks2.added;
         var errorFlag = false;
-        if (isConfirmedSyncBlockDeletion || removed.length > 0) {
+        if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
           errorFlag = FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
-        } else if (added.length > 0) {
+        } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
           errorFlag = FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
         } else if (hasEditInSyncBlock(tr, state)) {
           errorFlag = FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
         }
         if (errorFlag) {
-          api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
-            var tr = _ref2.tr;
-            tr.setMeta(syncedBlockPluginKey, {
-              showFlag: errorFlag
+          // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
+          setTimeout(function () {
+            api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+              var tr = _ref2.tr;
+              return tr.setMeta(syncedBlockPluginKey, {
+                showFlag: errorFlag
+              });
             });
-            return tr;
-          });
+          }, 0);
           return false;
         }
       }

package/dist/esm/pm-plugins/utils/track-sync-blocks.js

@@ -3,9 +3,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
-export var trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
-  var sourceSyncBlockRemoved = {};
-  var sourceSyncBlockAdded = {};
+export var trackSyncBlocks = function trackSyncBlocks(predicate, tr, state) {
+  var removed = {};
+  var added = {};
 
   // and cast to specific step types
   var replaceSteps = tr.steps.filter(function (step) {
@@ -21,15 +21,16 @@ export var trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
         if (oldStart !== oldEnd) {
           var deletedSlice = state.doc.slice(oldStart, oldEnd);
           deletedSlice.content.nodesBetween(0, deletedSlice.content.size, function (node) {
-            if (storeManager.isSourceBlock(node)) {
-              if (sourceSyncBlockAdded[node.attrs.localId]) {
+            if (predicate(node)) {
+              if (added[node.attrs.localId]) {
                 // If a source block added and then removed in the same transaction,
                 // we treat it as no-op.
-                delete sourceSyncBlockAdded[node.attrs.localId];
+                delete added[node.attrs.localId];
               } else {
-                sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+                removed[node.attrs.localId] = node.attrs;
               }
             }
+
             // we don't need to go deeper
             return false;
           });
@@ -41,13 +42,13 @@ export var trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
     // if only one replace step, we have already checked the entire replaced range above
     if (step.slice.content.size > 0) {
       step.slice.content.nodesBetween(0, step.slice.content.size, function (node) {
-        if (storeManager.isSourceBlock(node)) {
-          if (sourceSyncBlockRemoved[node.attrs.localId]) {
+        if (predicate(node)) {
+          if (removed[node.attrs.localId]) {
             // If a source block is removed and added back in the same transaction,
             // we treat it as no-op.
-            delete sourceSyncBlockRemoved[node.attrs.localId];
+            delete removed[node.attrs.localId];
           } else {
-            sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            added[node.attrs.localId] = node.attrs;
           }
         }
         // we don't need to go deeper
@@ -56,8 +57,8 @@ export var trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
     }
   });
   return {
-    removed: Object.values(sourceSyncBlockRemoved),
-    added: Object.values(sourceSyncBlockAdded)
+    removed: Object.values(removed),
+    added: Object.values(added)
   };
 };
 

package/dist/esm/syncedBlockPlugin.js

@@ -92,7 +92,8 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
     },
     contentComponent: function contentComponent() {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
-        syncBlockStoreManager: syncBlockStore
+        syncBlockStoreManager: syncBlockStore,
+        api: api
       }), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -4,7 +4,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
-import { Flex, Text } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
   var api = _ref.api;
@@ -51,6 +50,13 @@ var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
   var api = _ref2.api;
   var _useIntl2 = useIntl(),
     formatMessage = _useIntl2.formatMessage;
+  var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['connectivity'], function (states) {
+      var _states$connectivityS2;
+      return {
+        mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+      };
+    }),
+    mode = _useSharedPluginState2.mode;
   var onClick = function onClick() {
     var _api$core3, _api$core4, _api$blockControls2;
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
@@ -62,23 +68,22 @@ var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
     elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
       label: ""
     }),
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    gap: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, null, formatMessage(blockMenuMessages.copySyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
-    appearance: "new"
-  }, formatMessage(blockMenuMessages.newLozenge))));
+    onClick: onClick,
+    isDisabled: mode === 'offline',
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(blockMenuMessages.newLozenge))
+  }, formatMessage(blockMenuMessages.copySyncedBlock));
 };
 export var CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref3) {
   var api = _ref3.api;
-  var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
+  var _useSharedPluginState3 = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
       var _states$blockControls3, _states$blockControls4;
       return {
         menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
       };
     }),
-    menuTriggerByNode = _useSharedPluginState2.menuTriggerByNode;
+    menuTriggerByNode = _useSharedPluginState3.menuTriggerByNode;
   if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
     return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
       api: api

package/dist/esm/ui/SyncBlockRefresher.js

@@ -1,21 +1,35 @@
 import { useEffect } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 export var SYNC_BLOCK_FETCH_INTERVAL = 3000;
 
 // Component that refreshes synced block subscriptions at regular intervals
 // this is a workaround for the subscription mechanism not being real-time
 export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
-  var syncBlockStoreManager = _ref.syncBlockStoreManager;
+  var syncBlockStoreManager = _ref.syncBlockStoreManager,
+    api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (states) {
+      var _states$connectivityS;
+      return {
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      };
+    }),
+    mode = _useSharedPluginState.mode;
   useEffect(function () {
-    var interval = window.setInterval(function () {
-      var _document;
-      // check if document is visible to avoid unnecessary refreshes
-      if (((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible') {
-        syncBlockStoreManager.refreshSubscriptions();
-      }
-    }, SYNC_BLOCK_FETCH_INTERVAL);
+    var interval = -1;
+    if (mode !== 'offline') {
+      interval = window.setInterval(function () {
+        var _document;
+        // check if document is visible to avoid unnecessary refreshes
+        if (((_document = document) === null || _document === void 0 ? void 0 : _document.visibilityState) === 'visible') {
+          syncBlockStoreManager.refreshSubscriptions();
+        }
+      }, SYNC_BLOCK_FETCH_INTERVAL);
+    } else if (interval !== -1) {
+      window.clearInterval(interval);
+    }
     return function () {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager]);
+  }, [syncBlockStoreManager, mode]);
   return null;
 };

package/dist/types/pm-plugins/utils/track-sync-blocks.d.ts

@@ -1,7 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncBlockAttrs } from '../../syncedBlockPluginType';
-export declare const trackSyncBlocks: (storeManager: SyncBlockStoreManager, tr: Transaction, state: EditorState) => {
+export declare const trackSyncBlocks: (predicate: (node: PMNode) => boolean, tr: Transaction, state: EditorState) => {
     removed: SyncBlockAttrs[];
     added: SyncBlockAttrs[];
 };

package/dist/types/ui/SyncBlockRefresher.d.ts

@@ -1,5 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 export declare const SYNC_BLOCK_FETCH_INTERVAL = 3000;
-export declare const SyncBlockRefresher: ({ syncBlockStoreManager, }: {
+export declare const SyncBlockRefresher: ({ syncBlockStoreManager, api, }: {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     syncBlockStoreManager: SyncBlockStoreManager;
 }) => null;

package/dist/types-ts4.5/pm-plugins/utils/track-sync-blocks.d.ts

@@ -1,7 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncBlockAttrs } from '../../syncedBlockPluginType';
-export declare const trackSyncBlocks: (storeManager: SyncBlockStoreManager, tr: Transaction, state: EditorState) => {
+export declare const trackSyncBlocks: (predicate: (node: PMNode) => boolean, tr: Transaction, state: EditorState) => {
     removed: SyncBlockAttrs[];
     added: SyncBlockAttrs[];
 };

package/dist/types-ts4.5/ui/SyncBlockRefresher.d.ts

@@ -1,5 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 export declare const SYNC_BLOCK_FETCH_INTERVAL = 3000;
-export declare const SyncBlockRefresher: ({ syncBlockStoreManager, }: {
+export declare const SyncBlockRefresher: ({ syncBlockStoreManager, api, }: {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     syncBlockStoreManager: SyncBlockStoreManager;
 }) => null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.2.9",
+	"version": "4.2.10",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,7 +50,7 @@
 		"@atlaskit/modal-dialog": "^14.7.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/tokens": "8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tooltip": "^20.9.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"