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

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)))));
 };

package/dist/es2019/ui/Flag.js

@@ -0,0 +1,66 @@
+import React from 'react';
+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 { syncedBlockPluginKey } from '../pm-plugins/main';
+import { FLAG_ID } from '../types';
+const flagMap = {
+  [FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE]: {
+    title: messages.failToDeleteTitle,
+    description: messages.failToDeleteWhenOfflineDescription
+  },
+  [FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE]: {
+    title: messages.failToEditTitle,
+    description: messages.failToEditWhenOfflineDescription
+  },
+  [FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE]: {
+    title: messages.failToCreateTitle,
+    description: messages.failToCreateWhenOfflineDescription
+  }
+};
+export const Flag = ({
+  api
+}) => {
+  const {
+    showFlag
+  } = useSharedPluginStateWithSelector(api, ['syncedBlock'], states => {
+    var _states$syncedBlockSt;
+    return {
+      showFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.showFlag
+    };
+  });
+  const {
+    formatMessage
+  } = useIntl();
+  if (!showFlag) {
+    return;
+  }
+  const {
+    title,
+    description
+  } = flagMap[showFlag];
+  const onDismissed = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      tr.setMeta(syncedBlockPluginKey, {
+        showFlag: false
+      });
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  };
+  return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(AkFlag, {
+    onDismissed: onDismissed,
+    title: formatMessage(title),
+    description: formatMessage(description),
+    id: showFlag,
+    testId: showFlag,
+    icon: /*#__PURE__*/React.createElement(StatusErrorIcon, {
+      label: "",
+      color: "var(--ds-icon-danger, #C9372C)"
+    })
+  }));
+};

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

@@ -8,7 +8,7 @@ import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
-  var _api$decorations;
+  var _api$decorations, _api$connectivity, _api$connectivity$sha;
   const syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
   if (!syncBlockObject) {
     return;
@@ -89,6 +89,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
     nodeType,
     items,
     scrollable: true,
-    groupLabel: formatMessage(messages.syncBlockGroup)
+    groupLabel: formatMessage(messages.syncBlockGroup),
+    visible: (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'
   };
 };

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -22,10 +22,25 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     _classCallCheck(this, BodiedSyncBlock);
     _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.syncBlockStore = props.syncBlockStore;
+    _this.api = props.api;
+    _this.handleConnectivityModeChange();
     return _this;
   }
   _inherits(BodiedSyncBlock, _ReactNodeView);
   return _createClass(BodiedSyncBlock, [{
+    key: "handleConnectivityModeChange",
+    value: function handleConnectivityModeChange() {
+      var _this$api,
+        _this2 = this;
+      if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.connectivity) {
+        this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(function (_ref) {
+          var _this2$contentDOM;
+          var nextSharedState = _ref.nextSharedState;
+          (_this2$contentDOM = _this2.contentDOM) === null || _this2$contentDOM === void 0 || _this2$contentDOM.setAttribute('contenteditable', nextSharedState.mode === 'online' ? 'true' : 'false');
+        });
+      }
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
@@ -55,13 +70,20 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       }
       return undefined;
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.cleanupConnectivityModeListener) {
+        this.cleanupConnectivityModeListener();
+      }
+    }
   }]);
 }(ReactNodeView);
-export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref) {
-  var pluginOptions = _ref.pluginOptions,
-    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api,
-    syncBlockStore = _ref.syncBlockStore;
+export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref2) {
+  var pluginOptions = _ref2.pluginOptions,
+    pmPluginFactoryParams = _ref2.pmPluginFactoryParams,
+    api = _ref2.api,
+    syncBlockStore = _ref2.syncBlockStore;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;

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

@@ -1,14 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _readOnlyError from "@babel/runtime/helpers/readOnlyError";
 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 var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 export var createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref = options || {},
@@ -23,25 +24,23 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         });
         syncBlockStore.fetchSyncBlocksData(syncBlockNodes);
         return {
-          decorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema)
+          selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
+          showFlag: false
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState) {
+        var _meta$showFlag;
         var meta = tr.getMeta(syncedBlockPluginKey);
-        if (meta) {
-          return meta;
-        }
-        var newState = currentPluginState;
+        var showFlag = currentPluginState.showFlag,
+          selectionDecorationSet = currentPluginState.selectionDecorationSet;
+        var newDecorationSet = selectionDecorationSet.map(tr.mapping, tr.doc);
         if (!tr.selection.eq(oldEditorState.selection)) {
-          newState = _objectSpread(_objectSpread({}, newState), {}, {
-            decorationSet: calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema)
-          });
-        } else if (newState.decorationSet) {
-          newState = _objectSpread(_objectSpread({}, 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: {
@@ -60,14 +59,34 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         })
       },
       decorations: function decorations(state) {
-        var pluginState = syncedBlockPluginKey.getState(state);
-        return pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorationSet;
+        var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity;
+        var selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : DecorationSet.empty;
+        var doc = state.doc;
+        var decorations = [];
+        if ((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') {
+          state.doc.descendants(function (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'], function (target) {
         return !!target.closest(".".concat(BodiedSyncBlockSharedCssClassName.prefix));
       }, {
         useLongPressSelection: useLongPressSelection
-      })
+      }),
+      handleDOMEvents: {
+        mouseover: function mouseover(view, event) {
+          return shouldIgnoreDomEvent(view, event, api);
+        },
+        mousedown: function mousedown(view, event) {
+          return shouldIgnoreDomEvent(view, event, api);
+        }
+      }
     },
     view: function view(editorView) {
       syncBlockStore.setEditorView(editorView);
@@ -78,36 +97,61 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       };
     },
     filterTransaction: function filterTransaction(tr, state) {
+      var _api$connectivity2;
+      var isOffline = (api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode) === 'offline';
+      var 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;
       }
       var _trackSyncBlocks = trackSyncBlocks(syncBlockStore, tr, state),
         removed = _trackSyncBlocks.removed,
         added = _trackSyncBlocks.added;
-      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(function () {
-          var _api$core;
-          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
-            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(function () {
+            var _api$core;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
+              return tr.setMeta('isCommitSyncBlockCreation', true);
+            });
+            api === null || api === void 0 || api.core.actions.focus();
           });
-          api === null || api === void 0 || api.core.actions.focus();
-        });
-        return false;
+          return false;
+        }
+      } else {
+        // Disable node deletion/creation/edition in offline mode and trigger an error flag instead
+        var 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 || api.core.actions.execute(function (_ref2) {
+            var tr = _ref2.tr;
+            tr.setMeta(syncedBlockPluginKey, {
+              showFlag: errorFlag
+            });
+            return tr;
+          });
+          return false;
+        }
       }
       return true;
     },

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

@@ -0,0 +1,24 @@
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+/**
+ *
+ * @returns true if should ignore event happens within bodiedSyncBlock node when offline
+ */
+export var shouldIgnoreDomEvent = function shouldIgnoreDomEvent(view, event, api) {
+  var _api$connectivity, _view$posAtCoords;
+  if ((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') {
+    return;
+  }
+  var bodiedSyncBlock = view.state.schema.nodes.bodiedSyncBlock;
+  var 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;
+  }
+  var $pos = view.state.doc.resolve(pos);
+  var maybeNode = findParentNodeOfTypeClosestToPos($pos, bodiedSyncBlock);
+  if (maybeNode) {
+    return true;
+  }
+};

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

@@ -1,4 +1,8 @@
+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; }
 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 = {};
@@ -55,4 +59,48 @@ export var trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
     removed: Object.values(sourceSyncBlockRemoved),
     added: Object.values(sourceSyncBlockAdded)
   };
+};
+
+/**
+ *
+ * @returns true if steps modifies children node within bodiedSyncBlock
+ */
+export var hasEditInSyncBlock = function hasEditInSyncBlock(tr, state) {
+  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
+  var _iterator = _createForOfIteratorHelper(tr.steps),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var step = _step.value;
+      var map = step.getMap();
+      var doc = tr.doc;
+      var 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') {
+        var _ref = step,
+          from = _ref.from,
+          to = _ref.to;
+        positions.push(from, to);
+      } else if ('pos' in step && typeof step.pos === 'number') {
+        var _ref2 = step,
+          pos = _ref2.pos;
+        positions.push(pos);
+      }
+      for (var _i = 0, _positions = positions; _i < _positions.length; _i++) {
+        var _pos = _positions[_i];
+        var newPos = map.map(_pos);
+        if (newPos >= 0 && newPos <= doc.content.size) {
+          if (findParentNodeOfTypeClosestToPos(doc.resolve(newPos), bodiedSyncBlock)) {
+            return true;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
 };

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

@@ -72,8 +72,12 @@ var removeBreakoutMarks = function removeBreakoutMarks(content) {
     var filteredMarks = node.marks.filter(function (mark) {
       return mark.type.name !== 'breakout';
     });
-    var newNode = node.type.create(node.attrs, node.content, filteredMarks);
-    nodes.push(newNode);
+    if (node.isText) {
+      nodes.push(node);
+    } else {
+      var newNode = node.type.create(node.attrs, node.content, filteredMarks);
+      nodes.push(newNode);
+    }
   });
   return Fragment.from(nodes);
 };

package/dist/esm/syncedBlockPlugin.js

@@ -6,9 +6,10 @@ import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import Lozenge from '@atlaskit/lozenge';
 import { flushBodiedSyncBlocks as _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';
@@ -66,6 +67,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
           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"
@@ -92,8 +94,21 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       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: function getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      var _syncedBlockPluginKey = syncedBlockPluginKey.getState(editorState),
+        showFlag = _syncedBlockPluginKey.showFlag;
+      return {
+        showFlag: showFlag
+      };
     }
   };
 };

package/dist/esm/types/index.js

@@ -0,0 +1,6 @@
+export var 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/esm/ui/CreateSyncedBlockButton.js

@@ -8,16 +8,21 @@ import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
 export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
   var api = _ref.api;
   var intl = useIntl();
-  var selection = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
-    var _states$selectionStat;
-    return (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection;
-  });
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'connectivity'], function (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
+      };
+    }),
+    selection = _useSharedPluginState.selection,
+    mode = _useSharedPluginState.mode;
 
   // for toolbar button, we allow both creating a new synced block
   // and converting existing block to synced block
   var canBeConverted = Boolean(selection && canBeConvertedToSyncBlock(selection));
   var canInsertEmptyBlock = Boolean(selection === null || selection === void 0 ? void 0 : selection.empty);
-  var isDisabled = Boolean(!canBeConverted && !canInsertEmptyBlock);
+  var isDisabled = Boolean(mode === 'offline' || !canBeConverted && !canInsertEmptyBlock);
   var onClick = useCallback(function () {
     var _api$core, _api$core2;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -10,15 +10,17 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'blockControls'], function (states) {
-      var _states$selectionStat, _states$blockControls, _states$blockControls2;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['selection', 'blockControls', 'connectivity'], function (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
       };
     }),
     selection = _useSharedPluginState.selection,
-    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode;
+    menuTriggerByNode = _useSharedPluginState.menuTriggerByNode,
+    mode = _useSharedPluginState.mode;
   var isNested = menuTriggerByNode && menuTriggerByNode.rootPos !== menuTriggerByNode.pos;
   var canBeConverted = useMemo(function () {
     return selection && canBeConvertedToSyncBlock(selection);
@@ -33,17 +35,17 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
       closeMenu: true
     }));
   };
+  var 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));
 };
 var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
   var api = _ref2.api;