@atlaskit/editor-plugin-synced-block 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 2.2.0
+
+### Minor Changes
+
+- [`889f0cb60f68d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/889f0cb60f68d) -
+  EDITOR-1561 implement confirmation before deleting a source sync block
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-dev-agents/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-dev-agents/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-dev-agents/tsconfig.json"
 		}

package/afm-jira/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-jira/tsconfig.json"
 		}

package/afm-passionfruit/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-passionfruit/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
 		}

package/afm-post-office/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-post-office/tsconfig.json"
 		}

package/afm-rovo-extension/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-rovo-extension/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-rovo-extension/tsconfig.json"
 		}

package/afm-townsquare/tsconfig.json

@@ -22,12 +22,18 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-townsquare/tsconfig.json"
 		},
 		{
 			"path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/modal-dialog/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-townsquare/tsconfig.json"
 		}

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

@@ -7,22 +7,19 @@ exports.syncedBlockPluginKey = exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
+var _trackSyncBlocks2 = require("./utils/track-sync-blocks");
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, _syncBlockStore, api) {
+var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
       init: function init() {
         return {};
       },
-      apply: function apply(tr, currentPluginState) {
-        var meta = tr.getMeta(syncedBlockPluginKey);
-        if (meta) {
-          return meta;
-        }
+      apply: function apply(_tr, currentPluginState) {
         return currentPluginState;
       }
     },
@@ -34,6 +31,34 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           api: api
         })
       }
+    },
+    view: function view(editorView) {
+      syncBlockStore.setEditorView(editorView);
+      return {
+        destroy: function destroy() {
+          syncBlockStore.setEditorView(undefined);
+        }
+      };
+    },
+    filterTransaction: function filterTransaction(tr, state) {
+      // 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()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+        return true;
+      }
+      var _trackSyncBlocks = (0, _trackSyncBlocks2.trackSyncBlocks)(syncBlockStore, tr, state),
+        removed = _trackSyncBlocks.removed;
+      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;
+      }
+      return true;
     }
   });
 };

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.trackSyncBlocks = void 0;
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
+  var sourceSyncBlockRemoved = {};
+  var sourceSyncBlockAdded = {};
+  tr.steps.map(function (step) {
+    if (step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep) {
+      var from = step.from,
+        to = step.to;
+      // replaced a range, check for deleted syncBlock
+      if (from !== to) {
+        state.doc.nodesBetween(step.from, step.to, function (node) {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockAdded[node.attrs.localId]) {
+              // If a source block added and then removed in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockAdded[node.attrs.localId];
+            } else {
+              sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+
+      // replaced content, check for inserted syncBlock
+      if (step.slice.content.size > 0) {
+        step.slice.content.nodesBetween(0, step.slice.content.size, function (node) {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockRemoved[node.attrs.localId]) {
+              // If a source block is removed and added back in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockRemoved[node.attrs.localId];
+            } else {
+              sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+    }
+  });
+  return {
+    removed: Object.values(sourceSyncBlockRemoved),
+    added: Object.values(sourceSyncBlockAdded)
+  };
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -11,6 +11,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _smartLink = _interopRequireDefault(require("@atlaskit/icon/core/smart-link"));
 var _actions = require("./pm-plugins/actions");
 var _main = require("./pm-plugins/main");
+var _ContentComponent = require("./ui/ContentComponent");
 var _floatingToolbar = require("./ui/floating-toolbar");
 var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref) {
   var config = _ref.config,
@@ -54,6 +55,11 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return (0, _floatingToolbar.getToolbarConfig)(state, intl, config, providerFactory);
       }
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
+        syncBlockStoreManager: syncBlockStore
+      });
     }
   };
 };

package/dist/cjs/ui/ContentComponent.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentComponent = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+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 ContentComponent = exports.ContentComponent = function ContentComponent(_ref) {
+  var syncBlockStoreManager = _ref.syncBlockStoreManager;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var resolverRef = _react.default.useRef(undefined);
+  var handleClose = (0, _react.useCallback)(function (confirm) {
+    return function () {
+      if (resolverRef.current) {
+        resolverRef.current(confirm);
+        resolverRef.current = undefined;
+      }
+      setIsOpen(false);
+    };
+  }, []);
+  var confirmationCallback = (0, _react.useCallback)(function () {
+    setIsOpen(true);
+    var confirmedPromise = new Promise(function (resolve) {
+      resolverRef.current = resolve;
+    });
+    return confirmedPromise;
+  }, []);
+  (0, _react.useEffect)(function () {
+    var unregister = syncBlockStoreManager.registerConfirmationCallback(confirmationCallback);
+    return function () {
+      unregister();
+    };
+  }, [syncBlockStoreManager, confirmationCallback]);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    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, {
+    appearance: "subtle",
+    onClick: handleClose(false)
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "danger",
+    onClick: handleClose(true),
+    autoFocus: true
+  }, "Delete"))));
+};

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

@@ -1,22 +1,19 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { trackSyncBlocks } from './utils/track-sync-blocks';
 export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export const createPlugin = (options, pmPluginFactoryParams, _syncBlockStore, api) => {
+export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api) => {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
       init() {
         return {};
       },
-      apply: (tr, currentPluginState) => {
-        const meta = tr.getMeta(syncedBlockPluginKey);
-        if (meta) {
-          return meta;
-        }
+      apply: (_tr, currentPluginState) => {
         return currentPluginState;
       }
     },
@@ -28,6 +25,35 @@ export const createPlugin = (options, pmPluginFactoryParams, _syncBlockStore, ap
           api
         })
       }
+    },
+    view: editorView => {
+      syncBlockStore.setEditorView(editorView);
+      return {
+        destroy() {
+          syncBlockStore.setEditorView(undefined);
+        }
+      };
+    },
+    filterTransaction: (tr, state) => {
+      // 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()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+        return true;
+      }
+      const {
+        removed
+      } = trackSyncBlocks(syncBlockStore, tr, state);
+      if (removed.length > 0) {
+        // If there are source sync blocks being removed, and we need to confirm with user before deleting,
+        // we block the transaction here, and wait for user confirmation to proceed with deletion.
+        // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
+        // proceed with deletion.
+        syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
+        return false;
+      }
+      return true;
     }
   });
 };

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

@@ -0,0 +1,50 @@
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+export const trackSyncBlocks = (storeManager, tr, state) => {
+  const sourceSyncBlockRemoved = {};
+  const sourceSyncBlockAdded = {};
+  tr.steps.map(step => {
+    if (step instanceof ReplaceStep || step instanceof ReplaceAroundStep) {
+      const {
+        from,
+        to
+      } = step;
+      // replaced a range, check for deleted syncBlock
+      if (from !== to) {
+        state.doc.nodesBetween(step.from, step.to, node => {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockAdded[node.attrs.localId]) {
+              // If a source block added and then removed in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockAdded[node.attrs.localId];
+            } else {
+              sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+
+      // replaced content, check for inserted syncBlock
+      if (step.slice.content.size > 0) {
+        step.slice.content.nodesBetween(0, step.slice.content.size, node => {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockRemoved[node.attrs.localId]) {
+              // If a source block is removed and added back in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockRemoved[node.attrs.localId];
+            } else {
+              sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+    }
+  });
+  return {
+    removed: Object.values(sourceSyncBlockRemoved),
+    added: Object.values(sourceSyncBlockAdded)
+  };
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -4,6 +4,7 @@ import { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
 import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
+import { ContentComponent } from './ui/ContentComponent';
 import { getToolbarConfig } from './ui/floating-toolbar';
 export const syncedBlockPlugin = ({
   config,
@@ -40,6 +41,11 @@ export const syncedBlockPlugin = ({
         }
       }],
       floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory)
+    },
+    contentComponent: () => {
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        syncBlockStoreManager: syncBlockStore
+      });
     }
   };
 };

package/dist/es2019/ui/ContentComponent.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+export const ContentComponent = ({
+  syncBlockStoreManager
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const resolverRef = React.useRef(undefined);
+  const handleClose = useCallback(confirm => () => {
+    if (resolverRef.current) {
+      resolverRef.current(confirm);
+      resolverRef.current = undefined;
+    }
+    setIsOpen(false);
+  }, []);
+  const confirmationCallback = useCallback(() => {
+    setIsOpen(true);
+    const confirmedPromise = new Promise(resolve => {
+      resolverRef.current = resolve;
+    });
+    return confirmedPromise;
+  }, []);
+  useEffect(() => {
+    const unregister = syncBlockStoreManager.registerConfirmationCallback(confirmationCallback);
+    return () => {
+      unregister();
+    };
+  }, [syncBlockStoreManager, confirmationCallback]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    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, {
+    appearance: "subtle",
+    onClick: handleClose(false)
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    appearance: "danger",
+    onClick: handleClose(true),
+    autoFocus: true
+  }, "Delete"))));
+};

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

@@ -1,22 +1,19 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { trackSyncBlocks } from './utils/track-sync-blocks';
 export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export var createPlugin = function createPlugin(options, pmPluginFactoryParams, _syncBlockStore, api) {
+export var createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
       init: function init() {
         return {};
       },
-      apply: function apply(tr, currentPluginState) {
-        var meta = tr.getMeta(syncedBlockPluginKey);
-        if (meta) {
-          return meta;
-        }
+      apply: function apply(_tr, currentPluginState) {
         return currentPluginState;
       }
     },
@@ -28,6 +25,34 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           api: api
         })
       }
+    },
+    view: function view(editorView) {
+      syncBlockStore.setEditorView(editorView);
+      return {
+        destroy: function destroy() {
+          syncBlockStore.setEditorView(undefined);
+        }
+      };
+    },
+    filterTransaction: function filterTransaction(tr, state) {
+      // 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()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+        return true;
+      }
+      var _trackSyncBlocks = trackSyncBlocks(syncBlockStore, tr, state),
+        removed = _trackSyncBlocks.removed;
+      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;
+      }
+      return true;
     }
   });
 };

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

@@ -0,0 +1,48 @@
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+export var trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
+  var sourceSyncBlockRemoved = {};
+  var sourceSyncBlockAdded = {};
+  tr.steps.map(function (step) {
+    if (step instanceof ReplaceStep || step instanceof ReplaceAroundStep) {
+      var from = step.from,
+        to = step.to;
+      // replaced a range, check for deleted syncBlock
+      if (from !== to) {
+        state.doc.nodesBetween(step.from, step.to, function (node) {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockAdded[node.attrs.localId]) {
+              // If a source block added and then removed in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockAdded[node.attrs.localId];
+            } else {
+              sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+
+      // replaced content, check for inserted syncBlock
+      if (step.slice.content.size > 0) {
+        step.slice.content.nodesBetween(0, step.slice.content.size, function (node) {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockRemoved[node.attrs.localId]) {
+              // If a source block is removed and added back in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockRemoved[node.attrs.localId];
+            } else {
+              sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+    }
+  });
+  return {
+    removed: Object.values(sourceSyncBlockRemoved),
+    added: Object.values(sourceSyncBlockAdded)
+  };
+};

package/dist/esm/syncedBlockPlugin.js

@@ -4,6 +4,7 @@ import { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
 import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
+import { ContentComponent } from './ui/ContentComponent';
 import { getToolbarConfig } from './ui/floating-toolbar';
 export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
   var config = _ref.config,
@@ -47,6 +48,11 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         return getToolbarConfig(state, intl, config, providerFactory);
       }
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        syncBlockStoreManager: syncBlockStore
+      });
     }
   };
 };

package/dist/esm/ui/ContentComponent.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+export var ContentComponent = function ContentComponent(_ref) {
+  var syncBlockStoreManager = _ref.syncBlockStoreManager;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var resolverRef = React.useRef(undefined);
+  var handleClose = useCallback(function (confirm) {
+    return function () {
+      if (resolverRef.current) {
+        resolverRef.current(confirm);
+        resolverRef.current = undefined;
+      }
+      setIsOpen(false);
+    };
+  }, []);
+  var confirmationCallback = useCallback(function () {
+    setIsOpen(true);
+    var confirmedPromise = new Promise(function (resolve) {
+      resolverRef.current = resolve;
+    });
+    return confirmedPromise;
+  }, []);
+  useEffect(function () {
+    var unregister = syncBlockStoreManager.registerConfirmationCallback(confirmationCallback);
+    return function () {
+      unregister();
+    };
+  }, [syncBlockStoreManager, confirmationCallback]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    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, {
+    appearance: "subtle",
+    onClick: handleClose(false)
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    appearance: "danger",
+    onClick: handleClose(true),
+    autoFocus: true
+  }, "Delete"))));
+};

package/dist/types/pm-plugins/main.d.ts

@@ -5,5 +5,5 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {};
-export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, _syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
+export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

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

@@ -0,0 +1,7 @@
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { SyncBlockAttrs } from '../../syncedBlockPluginType';
+export declare const trackSyncBlocks: (storeManager: SyncBlockStoreManager, tr: Transaction, state: EditorState) => {
+    removed: SyncBlockAttrs[];
+    added: SyncBlockAttrs[];
+};

package/dist/types/syncedBlockPluginType.d.ts

@@ -39,3 +39,7 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
     dependencies: [SelectionPlugin];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;
+export type SyncBlockAttrs = {
+    localId: string;
+    resourceId: string;
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+export declare const ContentComponent: ({ syncBlockStoreManager, }: {
+    syncBlockStoreManager: SyncBlockStoreManager;
+}) => React.JSX.Element;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -5,5 +5,5 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {};
-export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, _syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
+export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

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

@@ -0,0 +1,7 @@
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { SyncBlockAttrs } from '../../syncedBlockPluginType';
+export declare const trackSyncBlocks: (storeManager: SyncBlockStoreManager, tr: Transaction, state: EditorState) => {
+    removed: SyncBlockAttrs[];
+    added: SyncBlockAttrs[];
+};

package/dist/types-ts4.5/syncedBlockPluginType.d.ts

@@ -41,3 +41,7 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
     ];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;
+export type SyncBlockAttrs = {
+    localId: string;
+    resourceId: string;
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+export declare const ContentComponent: ({ syncBlockStoreManager, }: {
+    syncBlockStoreManager: SyncBlockStoreManager;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "2.1.1",
+	"version": "2.2.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,15 +29,17 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.1.2",
+		"@atlaskit/button": "23.4.9",
 		"@atlaskit/editor-plugin-selection": "^5.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "28.2.1",
+		"@atlaskit/modal-dialog": "^14.3.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.10.0",
+		"@atlaskit/editor-common": "^109.12.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {