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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.2.9
+
+### Patch Changes
+
+- [`b7d44770ef1bf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7d44770ef1bf) -
+  EDITOR-2913 fix error nodetype create cannot create text nodes by filtering out text nodes
+
+## 4.2.8
+
+### Patch Changes
+
+- [`63628e69e52e7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63628e69e52e7) -
+  [ux] [EDITOR-2557] Disable sync block creation, edition and deletion in offline mode
+- Updated dependencies
+
 ## 4.2.7
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -34,6 +34,9 @@
 		{
 			"path": "../../editor-plugin-block-menu/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-connectivity/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-cc/tsconfig.json"
 		},
@@ -55,6 +58,9 @@
 		{
 			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/flag/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
@@ -73,6 +79,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -2,7 +2,7 @@
 	"extends": "../../../../tsconfig.entry-points.jira.json",
 	"compilerOptions": {
 		"target": "es5",
-		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-synced-block/app",
+		"outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-synced-block/app",
 		"rootDir": "../",
 		"composite": true
 	},
@@ -34,6 +34,9 @@
 		{
 			"path": "../../editor-plugin-block-menu/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-connectivity/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-jira/tsconfig.json"
 		},
@@ -55,6 +58,9 @@
 		{
 			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/flag/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
@@ -73,6 +79,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tooltip/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -34,6 +34,9 @@
 		{
 			"path": "../../editor-plugin-block-menu/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-connectivity/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-decorations/afm-products/tsconfig.json"
 		},
@@ -55,6 +58,9 @@
 		{
 			"path": "../../editor-toolbar/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/flag/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-products/tsconfig.json"
 		},
@@ -73,6 +79,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tooltip/afm-products/tsconfig.json"
 		},

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -29,10 +29,25 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     (0, _classCallCheck2.default)(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;
   }
   (0, _inherits2.default)(BodiedSyncBlock, _ReactNodeView);
   return (0, _createClass2.default)(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');
@@ -62,13 +77,20 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       }
       return undefined;
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.cleanupConnectivityModeListener) {
+        this.cleanupConnectivityModeListener();
+      }
+    }
   }]);
 }(_reactNodeView.default);
-var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref) {
-  var pluginOptions = _ref.pluginOptions,
-    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api,
-    syncBlockStore = _ref.syncBlockStore;
+var bodiedSyncBlockNodeView = exports.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/cjs/pm-plugins/main.js

@@ -5,17 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncedBlockPluginKey = exports.createPlugin = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
 var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
 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");
-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 syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref = options || {},
@@ -30,25 +31,23 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         });
         syncBlockStore.fetchSyncBlocksData(syncBlockNodes);
         return {
-          decorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema)
+          selectionDecorationSet: (0, _selectionDecorations.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: (0, _selectionDecorations.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 = (0, _selectionDecorations.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: {
@@ -67,14 +66,34 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         })
       },
       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 : _view.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(_view.Decoration.node(pos, pos + node.nodeSize, {
+                class: _syncBlock.SyncBlockStateCssClassName.disabledClassName
+              }));
+            }
+          });
+        }
+        return selectionDecorationSet.add(doc, decorations);
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['bodiedSyncBlock'], function (target) {
         return !!target.closest(".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix));
       }, {
         useLongPressSelection: useLongPressSelection
-      })
+      }),
+      handleDOMEvents: {
+        mouseover: function mouseover(view, event) {
+          return (0, _ignoreDomEvent.shouldIgnoreDomEvent)(view, event, api);
+        },
+        mousedown: function mousedown(view, event) {
+          return (0, _ignoreDomEvent.shouldIgnoreDomEvent)(view, event, api);
+        }
+      }
     },
     view: function view(editorView) {
       syncBlockStore.setEditorView(editorView);
@@ -85,36 +104,61 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       };
     },
     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 = (0, _trackSyncBlocks2.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 = _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
+        } else if (added.length > 0) {
+          errorFlag = _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
+        } else if ((0, _trackSyncBlocks2.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
+            });
+            return tr;
+          });
+          return false;
+        }
       }
       return true;
     },

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldIgnoreDomEvent = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+/**
+ *
+ * @returns true if should ignore event happens within bodiedSyncBlock node when offline
+ */
+var shouldIgnoreDomEvent = exports.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 = (0, _utils.findParentNodeOfTypeClosestToPos)($pos, bodiedSyncBlock);
+  if (maybeNode) {
+    return true;
+  }
+};

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

@@ -3,8 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.trackSyncBlocks = void 0;
+exports.trackSyncBlocks = exports.hasEditInSyncBlock = void 0;
 var _transform = require("@atlaskit/editor-prosemirror/transform");
+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 = {};
@@ -61,4 +65,48 @@ var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeMa
     removed: Object.values(sourceSyncBlockRemoved),
     added: Object.values(sourceSyncBlockAdded)
   };
+};
+
+/**
+ *
+ * @returns true if steps modifies children node within bodiedSyncBlock
+ */
+var hasEditInSyncBlock = exports.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 ((0, _utils.findParentNodeOfTypeClosestToPos)(doc.resolve(newPos), bodiedSyncBlock)) {
+            return true;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
 };

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

@@ -78,8 +78,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 _model.Fragment.from(nodes);
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -16,6 +16,7 @@ var _editorCommands = require("./editor-commands");
 var _main = require("./pm-plugins/main");
 var _blockMenuComponents = require("./ui/block-menu-components");
 var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
+var _Flag = require("./ui/Flag");
 var _floatingToolbar = require("./ui/floating-toolbar");
 var _SyncBlockRefresher = require("./ui/SyncBlockRefresher");
 var _toolbarComponents = require("./ui/toolbar-components");
@@ -73,6 +74,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
           description: formatMessage(_messages.blockTypeMessages.syncedBlockDescription),
           priority: 800,
           keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block', 'auto', 'update', 'excerpt', 'connect'],
+          isDisabledOffline: true,
           keyshortcut: '',
           lozenge: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
             appearance: "new"
@@ -99,8 +101,21 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SyncBlockRefresher.SyncBlockRefresher, {
         syncBlockStoreManager: syncBlockStore
       }), /*#__PURE__*/_react.default.createElement(_DeleteConfirmationModal.DeleteConfirmationModal, {
-        syncBlockStoreManager: syncBlockStore
+        syncBlockStoreManager: syncBlockStore,
+        api: api
+      }), /*#__PURE__*/_react.default.createElement(_Flag.Flag, {
+        api: api
       }));
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      var _syncedBlockPluginKey = _main.syncedBlockPluginKey.getState(editorState),
+        showFlag = _syncedBlockPluginKey.showFlag;
+      return {
+        showFlag: showFlag
+      };
     }
   };
 };

package/dist/cjs/types/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FLAG_ID = void 0;
+var FLAG_ID = exports.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/cjs/ui/CreateSyncedBlockButton.js

@@ -17,16 +17,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
   var api = _ref.api;
   var intl = (0, _reactIntlNext.useIntl)();
-  var selection = (0, _hooks.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 = (0, _hooks.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 && (0, _utils.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 = (0, _react.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/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -19,15 +19,17 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection', 'blockControls'], function (states) {
-      var _states$selectionStat, _states$blockControls, _states$blockControls2;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.useMemo)(function () {
     return selection && (0, _utils.canBeConvertedToSyncBlock)(selection);
@@ -42,17 +44,17 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
       closeMenu: true
     }));
   };
+  var isOffline = mode === 'offline';
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     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.createSyncedBlock)), /*#__PURE__*/_react.default.createElement(_lozenge.default, {
-    appearance: "new"
-  }, formatMessage(_messages.blockMenuMessages.newLozenge))));
+    onClick: onClick,
+    isDisabled: isOffline,
+    elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      appearance: "new"
+    }, formatMessage(_messages.blockMenuMessages.newLozenge))
+  }, formatMessage(_messages.blockMenuMessages.createSyncedBlock));
 };
 var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
   var api = _ref2.api;