@atlaskit/editor-plugin-synced-block 4.2.7 → 4.2.8

package/dist/cjs/ui/Flag.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Flag = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
+var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
+var _main = require("../pm-plugins/main");
+var _types = require("../types");
+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 flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
+  title: _messages.syncBlockMessages.failToDeleteTitle,
+  description: _messages.syncBlockMessages.failToDeleteWhenOfflineDescription
+}), _types.FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE, {
+  title: _messages.syncBlockMessages.failToEditTitle,
+  description: _messages.syncBlockMessages.failToEditWhenOfflineDescription
+}), _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE, {
+  title: _messages.syncBlockMessages.failToCreateTitle,
+  description: _messages.syncBlockMessages.failToCreateWhenOfflineDescription
+});
+var Flag = exports.Flag = function Flag(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock'], function (states) {
+      var _states$syncedBlockSt;
+      return {
+        showFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.showFlag
+      };
+    }),
+    showFlag = _useSharedPluginState.showFlag;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  if (!showFlag) {
+    return;
+  }
+  var _flagMap$showFlag = flagMap[showFlag],
+    title = _flagMap$showFlag.title,
+    description = _flagMap$showFlag.description;
+  var onDismissed = function onDismissed() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(_main.syncedBlockPluginKey, {
+        showFlag: false
+      });
+      return tr;
+    });
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, /*#__PURE__*/_react.default.createElement(_flag.default, {
+    onDismissed: onDismissed,
+    title: formatMessage(title),
+    description: formatMessage(description),
+    id: showFlag,
+    testId: showFlag,
+    icon: /*#__PURE__*/_react.default.createElement(_statusError.default, {
+      label: "",
+      color: "var(--ds-icon-danger, #C9372C)"
+    })
+  }));
+};

package/dist/cjs/ui/floating-toolbar.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
-  var _api$decorations;
+  var _api$decorations, _api$connectivity;
   var syncBlockObject = (0, _utils2.findSyncBlockOrBodiedSyncBlock)(state.schema, state.selection);
   if (!syncBlockObject) {
     return;
@@ -92,6 +92,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     nodeType: nodeType,
     items: items,
     scrollable: true,
-    groupLabel: formatMessage(_messages.syncBlockMessages.syncBlockGroup)
+    groupLabel: formatMessage(_messages.syncBlockMessages.syncBlockGroup),
+    visible: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) !== 'offline'
   };
 };

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -11,6 +11,19 @@ class BodiedSyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.syncBlockStore = props.syncBlockStore;
+    this.api = props.api;
+    this.handleConnectivityModeChange();
+  }
+  handleConnectivityModeChange() {
+    var _this$api;
+    if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.connectivity) {
+      this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(({
+        nextSharedState
+      }) => {
+        var _this$contentDOM;
+        (_this$contentDOM = this.contentDOM) === null || _this$contentDOM === void 0 ? void 0 : _this$contentDOM.setAttribute('contenteditable', nextSharedState.mode === 'online' ? 'true' : 'false');
+      });
+    }
   }
   createDomRef() {
     const domRef = document.createElement('div');
@@ -37,6 +50,11 @@ class BodiedSyncBlock extends ReactNodeView {
     }
     return undefined;
   }
+  destroy() {
+    if (this.cleanupConnectivityModeListener) {
+      this.cleanupConnectivityModeListener();
+    }
+  }
 }
 export const bodiedSyncBlockNodeView = ({
   pluginOptions,

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

@@ -1,11 +1,14 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
-import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { FLAG_ID } from '../types';
+import { shouldIgnoreDomEvent } from './utils/ignore-dom-event';
 import { calculateDecorations } from './utils/selection-decorations';
-import { trackSyncBlocks } from './utils/track-sync-blocks';
+import { hasEditInSyncBlock, trackSyncBlocks } from './utils/track-sync-blocks';
 export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api) => {
   const {
@@ -18,27 +21,25 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         const syncBlockNodes = instance.doc.children.filter(node => node.type.name === 'syncBlock');
         syncBlockStore.fetchSyncBlocksData(syncBlockNodes);
         return {
-          decorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema)
+          selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
+          showFlag: false
         };
       },
       apply: (tr, currentPluginState, oldEditorState) => {
+        var _meta$showFlag;
         const meta = tr.getMeta(syncedBlockPluginKey);
-        if (meta) {
-          return meta;
-        }
-        let newState = currentPluginState;
+        const {
+          showFlag,
+          selectionDecorationSet
+        } = currentPluginState;
+        let newDecorationSet = selectionDecorationSet.map(tr.mapping, tr.doc);
         if (!tr.selection.eq(oldEditorState.selection)) {
-          newState = {
-            ...newState,
-            decorationSet: calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema)
-          };
-        } else if (newState.decorationSet) {
-          newState = {
-            ...newState,
-            decorationSet: newState.decorationSet.map(tr.mapping, tr.doc)
-          };
+          newDecorationSet = calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema);
         }
-        return newState;
+        return {
+          showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : showFlag,
+          selectionDecorationSet: newDecorationSet
+        };
       }
     },
     props: {
@@ -57,12 +58,34 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         })
       },
       decorations: state => {
-        const pluginState = syncedBlockPluginKey.getState(state);
-        return pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorationSet;
+        var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$connectivity$sha;
+        const selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : DecorationSet.empty;
+        const {
+          doc
+        } = state;
+        const decorations = [];
+        if ((api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState.currentState()) === null || _api$connectivity$sha === void 0 ? void 0 : _api$connectivity$sha.mode) === 'offline') {
+          state.doc.descendants((node, pos) => {
+            if (node.type.name === 'bodiedSyncBlock') {
+              decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                class: SyncBlockStateCssClassName.disabledClassName
+              }));
+            }
+          });
+        }
+        return selectionDecorationSet.add(doc, decorations);
       },
       handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], target => !!target.closest(`.${BodiedSyncBlockSharedCssClassName.prefix}`), {
         useLongPressSelection
-      })
+      }),
+      handleDOMEvents: {
+        mouseover(view, event) {
+          return shouldIgnoreDomEvent(view, event, api);
+        },
+        mousedown(view, event) {
+          return shouldIgnoreDomEvent(view, event, api);
+        }
+      }
     },
     view: editorView => {
       syncBlockStore.setEditorView(editorView);
@@ -73,37 +96,63 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       };
     },
     filterTransaction: (tr, state) => {
+      var _api$connectivity2, _api$connectivity2$sh;
+      const isOffline = (api === null || api === void 0 ? void 0 : (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 ? void 0 : (_api$connectivity2$sh = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2$sh === void 0 ? void 0 : _api$connectivity2$sh.mode) === 'offline';
+      const isConfirmedSyncBlockDeletion = Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'));
       // Ignore transactions that don't change the document
       // or are from remote (collab) or already confirmed sync block deletion
       // We only care about local changes that change the document
       // and are not yet confirmed for sync block deletion
-      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isCommitSyncBlockCreation')) || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
       const {
         removed,
         added
       } = trackSyncBlocks(syncBlockStore, tr, state);
-      if (removed.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);
-        return false;
-      }
-      if (added.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
-        syncBlockStore.registerCreationCallback(() => {
-          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);
+      if (!isOffline) {
+        if (removed.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);
+          return false;
+        }
+        if (added.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
+          syncBlockStore.registerCreationCallback(() => {
+            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();
+          });
+          return false;
+        }
+      } else {
+        // Disable node deletion/creation/edition in offline mode and trigger an error flag instead
+        let errorFlag = false;
+        if (isConfirmedSyncBlockDeletion || removed.length > 0) {
+          errorFlag = FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
+        } else if (added.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
+            });
+            return tr;
           });
-          api === null || api === void 0 ? void 0 : api.core.actions.focus();
-        });
-        return false;
+          return false;
+        }
       }
       return true;
     },

package/dist/es2019/pm-plugins/utils/ignore-dom-event.js

@@ -0,0 +1,26 @@
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+/**
+ *
+ * @returns true if should ignore event happens within bodiedSyncBlock node when offline
+ */
+export const shouldIgnoreDomEvent = (view, event, api) => {
+  var _api$connectivity, _api$connectivity$sha, _view$posAtCoords;
+  if ((api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState.currentState()) === null || _api$connectivity$sha === void 0 ? void 0 : _api$connectivity$sha.mode) !== 'offline') {
+    return;
+  }
+  const {
+    bodiedSyncBlock
+  } = view.state.schema.nodes;
+  const pos = (_view$posAtCoords = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY
+  })) === null || _view$posAtCoords === void 0 ? void 0 : _view$posAtCoords.pos;
+  if (pos === undefined) {
+    return;
+  }
+  const $pos = view.state.doc.resolve(pos);
+  const maybeNode = findParentNodeOfTypeClosestToPos($pos, bodiedSyncBlock);
+  if (maybeNode) {
+    return true;
+  }
+};

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

@@ -1,4 +1,5 @@
 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 = {};
@@ -55,4 +56,44 @@ export const trackSyncBlocks = (storeManager, tr, state) => {
     removed: Object.values(sourceSyncBlockRemoved),
     added: Object.values(sourceSyncBlockAdded)
   };
+};
+
+/**
+ *
+ * @returns true if steps modifies children node within bodiedSyncBlock
+ */
+export const hasEditInSyncBlock = (tr, state) => {
+  const {
+    bodiedSyncBlock
+  } = state.schema.nodes;
+  for (const step of tr.steps) {
+    const map = step.getMap();
+    const {
+      doc
+    } = tr;
+    const positions = [];
+
+    // Extract positions from steps dynamically based on applicable properties
+    if ('from' in step && typeof step.from === 'number' && 'to' in step && typeof step.to === 'number') {
+      const {
+        from,
+        to
+      } = step;
+      positions.push(from, to);
+    } else if ('pos' in step && typeof step.pos === 'number') {
+      const {
+        pos
+      } = step;
+      positions.push(pos);
+    }
+    for (const pos of positions) {
+      const newPos = map.map(pos);
+      if (newPos >= 0 && newPos <= doc.content.size) {
+        if (findParentNodeOfTypeClosestToPos(doc.resolve(newPos), bodiedSyncBlock)) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
 };

package/dist/es2019/syncedBlockPlugin.js

@@ -6,9 +6,10 @@ import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import Lozenge from '@atlaskit/lozenge';
 import { flushBodiedSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
-import { createPlugin } from './pm-plugins/main';
+import { createPlugin, syncedBlockPluginKey } from './pm-plugins/main';
 import { getBlockMenuComponents } from './ui/block-menu-components';
 import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
+import { Flag } from './ui/Flag';
 import { getToolbarConfig } from './ui/floating-toolbar';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
 import { getToolbarComponents } from './ui/toolbar-components';
@@ -60,6 +61,7 @@ export const syncedBlockPlugin = ({
         description: formatMessage(blockTypeMessages.syncedBlockDescription),
         priority: 800,
         keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
+        isDisabledOffline: true,
         keyshortcut: '',
         lozenge: /*#__PURE__*/React.createElement(Lozenge, {
           appearance: "new"
@@ -81,8 +83,22 @@ export const syncedBlockPlugin = ({
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
         syncBlockStoreManager: syncBlockStore
       }), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
-        syncBlockStoreManager: syncBlockStore
+        syncBlockStoreManager: syncBlockStore,
+        api: api
+      }), /*#__PURE__*/React.createElement(Flag, {
+        api: api
       }));
+    },
+    getSharedState: editorState => {
+      if (!editorState) {
+        return;
+      }
+      const {
+        showFlag
+      } = syncedBlockPluginKey.getState(editorState);
+      return {
+        showFlag
+      };
     }
   };
 };

package/dist/es2019/types/index.js

@@ -0,0 +1,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";
+  return FLAG_ID;
+}({});

package/dist/es2019/ui/CreateSyncedBlockButton.js

@@ -9,16 +9,22 @@ export const CreateSyncedBlockButton = ({
   api
 }) => {
   const intl = useIntl();
-  const selection = useSharedPluginStateWithSelector(api, ['selection'], states => {
-    var _states$selectionStat;
-    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  const {
+    selection,
+    mode
+  } = useSharedPluginStateWithSelector(api, ['selection', 'connectivity'], states => {
+    var _states$selectionStat, _states$connectivityS;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+    };
   });
 
   // for toolbar button, we allow both creating a new synced block
   // and converting existing block to synced block
   const canBeConverted = Boolean(selection && canBeConvertedToSyncBlock(selection));
   const canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
-  const isDisabled = Boolean(!canBeConverted && !canInsertEmptyBlock);
+  const isDisabled = Boolean(mode === 'offline' || !canBeConverted && !canInsertEmptyBlock);
   const onClick = useCallback(() => {
     var _api$core, _api$core2;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -14,12 +14,14 @@ const CreateSyncedBlockDropdownItem = ({
   } = useIntl();
   const {
     selection,
-    menuTriggerByNode
-  } = useSharedPluginStateWithSelector(api, ['selection', 'blockControls'], states => {
-    var _states$selectionStat, _states$blockControls, _states$blockControls2;
+    menuTriggerByNode,
+    mode
+  } = useSharedPluginStateWithSelector(api, ['selection', 'blockControls', 'connectivity'], states => {
+    var _states$selectionStat, _states$blockControls, _states$blockControls2, _states$connectivityS;
     return {
       selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
-      menuTriggerByNode: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode) !== null && _states$blockControls !== void 0 ? _states$blockControls : undefined
+      menuTriggerByNode: (_states$blockControls = (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.menuTriggerByNode) !== null && _states$blockControls !== void 0 ? _states$blockControls : undefined,
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
     };
   });
   const isNested = menuTriggerByNode && menuTriggerByNode.rootPos !== menuTriggerByNode.pos;
@@ -34,17 +36,17 @@ const CreateSyncedBlockDropdownItem = ({
       closeMenu: true
     }));
   };
+  const isOffline = mode === 'offline';
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
       label: ""
     }),
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    gap: "space.050"
-  }, /*#__PURE__*/React.createElement(Text, null, formatMessage(blockMenuMessages.createSyncedBlock)), /*#__PURE__*/React.createElement(Lozenge, {
-    appearance: "new"
-  }, formatMessage(blockMenuMessages.newLozenge))));
+    onClick: onClick,
+    isDisabled: isOffline,
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(blockMenuMessages.newLozenge))
+  }, formatMessage(blockMenuMessages.createSyncedBlock));
 };
 const CopySyncedBlockDropdownItem = ({
   api

package/dist/es2019/ui/CreateSyncedBlockItem.js

@@ -5,17 +5,24 @@ import { syncBlockMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
 import Lozenge from '@atlaskit/lozenge';
-import { Flex } from '@atlaskit/primitives/compiled';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export const CreateSyncedBlockItem = ({
   api
 }) => {
-  const intl = useIntl();
-  const selection = useSharedPluginStateWithSelector(api, ['selection'], states => {
-    var _states$selectionStat;
-    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    selection,
+    mode
+  } = useSharedPluginStateWithSelector(api, ['selection', 'connectivity'], states => {
+    var _states$selectionStat, _states$connectivityS;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection,
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+    };
   });
-  const isDisabled = Boolean(!selection || !canBeConvertedToSyncBlock(selection));
+  const isDisabled = Boolean(!selection || !canBeConvertedToSyncBlock(selection) || mode === 'offline');
   const onClick = useCallback(() => {
     var _api$core, _api$core2;
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
@@ -25,18 +32,15 @@ export const CreateSyncedBlockItem = ({
     }));
     api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
   }, [api]);
-  const message = intl.formatMessage(syncBlockMessages.createSyncBlockLabel);
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: onClick,
     isDisabled: isDisabled,
     elemBefore: /*#__PURE__*/React.createElement(BlockSyncedIcon, {
       size: "small",
       label: ""
-    })
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    gap: "space.050"
-  }, message, /*#__PURE__*/React.createElement(Lozenge, {
-    appearance: "new"
-  }, intl.formatMessage(syncBlockMessages.newLozenge))));
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(syncBlockMessages.newLozenge))
+  }, formatMessage(syncBlockMessages.createSyncBlockLabel));
 };

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -1,14 +1,24 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+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';
 export const DeleteConfirmationModal = ({
-  syncBlockStoreManager
+  syncBlockStoreManager,
+  api
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [syncBlockCount, setSyncBlockCount] = useState(1);
+  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
+    };
+  });
   const {
     formatMessage
   } = useIntl();
@@ -48,6 +58,7 @@ export const DeleteConfirmationModal = ({
   }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
     appearance: "warning",
     onClick: handleClose(true),
-    autoFocus: true
+    autoFocus: true,
+    isDisabled: mode === 'offline'
   }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };