@atlaskit/editor-plugin-synced-block 4.1.1 → 4.1.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.1.3
+
+### Patch Changes
+
+- [`7bb84f91500cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7bb84f91500cf) -
+  [ux] EDITOR-2442 update warning modal on source sync block deletion
+- Updated dependencies
+
+## 4.1.2
+
+### Patch Changes
+
+- [`5b03ddd528034`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5b03ddd528034) -
+  [EDITOR-2542] Save new bodiedSyncBlock to backend when creating the node, so that the node can be
+  copied and reference without page being published/updated
+- Updated dependencies
+
 ## 4.1.1
 
 ### Patch Changes

package/dist/cjs/editor-commands/index.js

@@ -1,17 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("../pm-plugins/utils/utils");
-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 createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
   var tr = _ref.tr,
     syncBlockStore = _ref.syncBlockStore,
@@ -22,12 +18,16 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    var storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
+    var attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
     var paragraphNode = paragraph.createAndFill({});
-    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
+    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
       return false;
     }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -38,15 +38,21 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     if (!conversionInfo) {
       // TODO: EDITOR-1665 - Raise an error analytics event
       return false;
-    } else {
-      var _storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
-      var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
-      if (!_newBodiedSyncBlockNode) {
-        return false;
-      }
-      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
     }
+    var _attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
+    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
+    if (!_newBodiedSyncBlockNode) {
+      return false;
+    }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(_attrs);
+    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
   }
+
+  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
+  // see filterTransaction for more details
   return tr;
 };
 var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {

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

@@ -61,11 +61,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       // 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()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
         return true;
       }
       var _trackSyncBlocks = (0, _trackSyncBlocks2.trackSyncBlocks)(syncBlockStore, tr, state),
-        removed = _trackSyncBlocks.removed;
+        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.
@@ -74,6 +75,19 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         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();
+        });
+        return false;
+      }
       return true;
     },
     appendTransaction: function appendTransaction(trs, _oldState, newState) {

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -8,8 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteConfirmationModal = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _messages = require("@atlaskit/editor-common/messages");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _compiled = require("@atlaskit/primitives/compiled");
 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 DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStoreManager;
@@ -17,6 +20,12 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    syncBlockCount = _useState4[0],
+    setSyncBlockCount = _useState4[1];
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var resolverRef = _react.default.useRef(undefined);
   var handleClose = (0, _react.useCallback)(function (confirm) {
     return function () {
@@ -27,8 +36,9 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       setIsOpen(false);
     };
   }, []);
-  var confirmationCallback = (0, _react.useCallback)(function () {
+  var confirmationCallback = (0, _react.useCallback)(function (syncBlockCount) {
     setIsOpen(true);
+    setSyncBlockCount(syncBlockCount);
     var confirmedPromise = new Promise(function (resolve) {
       resolverRef.current = resolve;
     });
@@ -44,12 +54,16 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     onClose: handleClose(false)
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
-  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, "Confirmation")), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", null, "Are you sure you want to delete this synced block?")), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDescription, {
+    syncBlockCount: syncBlockCount
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: handleClose(false)
-  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_new.default, {
-    appearance: "danger",
+  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalCancelButton)), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "warning",
     onClick: handleClose(true),
     autoFocus: true
-  }, "Delete"))));
+  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton)))));
 };

package/dist/es2019/editor-commands/index.js

@@ -18,14 +18,16 @@ export const createSyncedBlock = ({
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    const storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
+    const attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
     const paragraphNode = paragraph.createAndFill({});
-    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
-      ...storeSyncBlockNode.attrs
-    }, paragraphNode ? [paragraphNode] : []);
+    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
       return false;
     }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -36,17 +38,21 @@ export const createSyncedBlock = ({
     if (!conversionInfo) {
       // TODO: EDITOR-1665 - Raise an error analytics event
       return false;
-    } else {
-      const storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
-      const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
-        ...storeSyncBlockNode.attrs
-      }, conversionInfo.contentToInclude);
-      if (!newBodiedSyncBlockNode) {
-        return false;
-      }
-      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
     }
+    const attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
+    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude);
+    if (!newBodiedSyncBlockNode) {
+      return false;
+    }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
+    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
   }
+
+  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
+  // see filterTransaction for more details
   return tr;
 };
 export const copySyncedBlockReferenceToClipboard = api => (state, _dispatch, _view) => {

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

@@ -53,11 +53,12 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       // 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()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
         return true;
       }
       const {
-        removed
+        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,
@@ -67,6 +68,19 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         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;
+      }
       return true;
     },
     appendTransaction: (trs, _oldState, newState) => {

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -1,10 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+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
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [syncBlockCount, setSyncBlockCount] = useState(1);
+  const {
+    formatMessage
+  } = useIntl();
   const resolverRef = React.useRef(undefined);
   const handleClose = useCallback(confirm => () => {
     if (resolverRef.current) {
@@ -13,8 +20,9 @@ export const DeleteConfirmationModal = ({
     }
     setIsOpen(false);
   }, []);
-  const confirmationCallback = useCallback(() => {
+  const confirmationCallback = useCallback(syncBlockCount => {
     setIsOpen(true);
+    setSyncBlockCount(syncBlockCount);
     const confirmedPromise = new Promise(resolve => {
       resolverRef.current = resolve;
     });
@@ -30,12 +38,16 @@ export const DeleteConfirmationModal = ({
     onClose: handleClose(false)
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
-  }, /*#__PURE__*/React.createElement(ModalTitle, null, "Confirmation")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", null, "Are you sure you want to delete this synced block?")), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, formatMessage(messages.deleteConfirmationModalTitle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
+    syncBlockCount
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: handleClose(false)
-  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-    appearance: "danger",
+  }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
     onClick: handleClose(true),
     autoFocus: true
-  }, "Delete"))));
+  }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };

package/dist/esm/editor-commands/index.js

@@ -1,6 +1,3 @@
-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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
@@ -15,12 +12,16 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
-    var storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
+    var attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
     var paragraphNode = paragraph.createAndFill({});
-    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
+    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
       return false;
     }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(attrs);
     if (typeAheadInsert) {
       tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
@@ -31,15 +32,21 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     if (!conversionInfo) {
       // TODO: EDITOR-1665 - Raise an error analytics event
       return false;
-    } else {
-      var _storeSyncBlockNode = syncBlockStore.createBodiedSyncBlockNode();
-      var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
-      if (!_newBodiedSyncBlockNode) {
-        return false;
-      }
-      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
     }
+    var _attrs = syncBlockStore.generateBodiedSyncBlockAttrs();
+    var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
+    if (!_newBodiedSyncBlockNode) {
+      return false;
+    }
+
+    // Save the new node with empty content to backend
+    // This is so that the node can be copied and referenced without the source being saved/published
+    syncBlockStore.createBodiedSyncBlockNode(_attrs);
+    tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
   }
+
+  // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds
+  // see filterTransaction for more details
   return tr;
 };
 export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {

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

@@ -55,11 +55,12 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       // 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()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) && !syncBlockStore.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion')) || Boolean(tr.getMeta('isCommitSyncBlockCreation'))) {
         return true;
       }
       var _trackSyncBlocks = trackSyncBlocks(syncBlockStore, tr, state),
-        removed = _trackSyncBlocks.removed;
+        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.
@@ -68,6 +69,19 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         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();
+        });
+        return false;
+      }
       return true;
     },
     appendTransaction: function appendTransaction(trs, _oldState, newState) {

package/dist/esm/ui/DeleteConfirmationModal.js

@@ -1,13 +1,22 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
+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 var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStoreManager;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    syncBlockCount = _useState4[0],
+    setSyncBlockCount = _useState4[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var resolverRef = React.useRef(undefined);
   var handleClose = useCallback(function (confirm) {
     return function () {
@@ -18,8 +27,9 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       setIsOpen(false);
     };
   }, []);
-  var confirmationCallback = useCallback(function () {
+  var confirmationCallback = useCallback(function (syncBlockCount) {
     setIsOpen(true);
+    setSyncBlockCount(syncBlockCount);
     var confirmedPromise = new Promise(function (resolve) {
       resolverRef.current = resolve;
     });
@@ -35,12 +45,16 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     onClose: handleClose(false)
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
-  }, /*#__PURE__*/React.createElement(ModalTitle, null, "Confirmation")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", null, "Are you sure you want to delete this synced block?")), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, formatMessage(messages.deleteConfirmationModalTitle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
+    syncBlockCount: syncBlockCount
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: handleClose(false)
-  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
-    appearance: "danger",
+  }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
     onClick: handleClose(true),
     autoFocus: true
-  }, "Delete"))));
+  }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.1.1",
+	"version": "4.1.3",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.8.0",
-		"@atlaskit/editor-synced-block-provider": "^2.6.0",
+		"@atlaskit/editor-synced-block-provider": "^2.7.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.17.0",
 		"@atlaskit/icon": "28.5.3",