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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
+
+- [`7846d87959f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7846d87959f7a) -
+  Initial implementation of the floating toolbar
+- Updated dependencies
+
 ## 2.1.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -22,9 +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,9 +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,9 +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,9 +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,9 +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,9 +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,9 +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/nodeviews/syncedBlock.js

@@ -1,108 +1,118 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.syncBlockNodeView = exports.defaultSyncBlockDocument = exports.SyncBlockPluginComponent = void 0;
+exports.syncBlockNodeView = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
-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 _state = require("@atlaskit/editor-prosemirror/state");
+var _SyncBlockEditorWrapper = require("../ui/SyncBlockEditorWrapper");
+var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; } /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
-var defaultSyncBlockDocument = exports.defaultSyncBlockDocument = {
+function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+var defaultSyncBlockEditorDocument = {
   version: 1,
   type: 'doc',
   content: [{
     type: 'paragraph',
     content: [{
       type: 'text',
-      text: 'This is a synced block. Edit the source to update the content.'
+      text: 'This is a source sync block. Edit me to update the content.'
     }]
   }]
 };
-var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
-var SyncBlockPluginComponent = exports.SyncBlockPluginComponent = function SyncBlockPluginComponent(_ref) {
-  var config = _ref.config,
-    dom = _ref.dom;
-  var innerEditorView = (0, _react.useRef)(null);
-
-  /* Tmp solution to demonstrate the synced block renderer */
-  var _useState = (0, _react.useState)(defaultSyncBlockDocument),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    rendererDocument = _useState2[0],
-    setRendererDocument = _useState2[1];
-  var onChange = function onChange(editorView, _meta) {
-    var content = editorView.state.doc.toJSON().content;
-    var rendererDocument = {
-      version: 1,
-      type: 'doc',
-      content: content
-    };
-    setRendererDocument(rendererDocument);
-  };
-  var onEditorReady = function onEditorReady(_ref2) {
-    var editorView = _ref2.editorView;
-    innerEditorView.current = editorView || null;
-  };
-  var boundariesElement = (0, _react.useMemo)(function () {
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return dom.closest('.fabric-editor-popup-scroll-parent');
-  }, [dom]);
-  if (!boundariesElement || !(boundariesElement instanceof HTMLElement)) {
-    return null;
-  }
-  if (!(config !== null && config !== void 0 && config.getSyncedBlockEditor) || !(config !== null && config !== void 0 && config.getSyncedBlockRenderer)) {
-    return null;
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": SyncBlockEditorWrapperDataId
-  }, config.getSyncedBlockEditor({
-    boundariesElement: boundariesElement,
-    defaultDocument: defaultSyncBlockDocument,
-    mountPoint: dom,
-    onChange: onChange,
-    onEditorReady: onEditorReady
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: '100%',
-      height: '1px',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: 'purple'
-    }
-  }), config.getSyncedBlockRenderer({
-    docNode: rendererDocument
-  }));
+var defaultSyncBlockRendererDocument = {
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{
+      type: 'text',
+      text: 'This is a reference sync block. Stay tuned for updates...'
+    }]
+  }]
 };
 var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
-  function SyncBlock() {
+  function SyncBlock(props) {
+    var _this;
     (0, _classCallCheck2.default)(this, SyncBlock);
-    return _callSuper(this, SyncBlock, arguments);
+    _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    var _props$node$attrs = props.node.attrs,
+      resourceId = _props$node$attrs.resourceId,
+      localId = _props$node$attrs.localId;
+    // Temporary solution to identify the source
+    _this.isSource = resourceId === localId;
+    _this.options = props.options;
+    return _this;
   }
   (0, _inherits2.default)(SyncBlock, _ReactNodeView);
   return (0, _createClass2.default)(SyncBlock, [{
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
-      domRef.setAttribute('style', 'border: purple solid 1px;');
       return domRef;
     }
+  }, {
+    key: "handleContentChanges",
+    value: function handleContentChanges(_updatedDoc) {
+      // write data
+    }
+  }, {
+    key: "setInnerEditorView",
+    value: function setInnerEditorView(_editorView) {
+      // set inner editor view
+    }
+  }, {
+    key: "renderEditor",
+    value: function renderEditor() {
+      var _this$options, _this$options2;
+      var popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
+      if (!(popupsBoundariesElement instanceof HTMLElement)) {
+        return null;
+      }
+      if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_SyncBlockEditorWrapper.SyncBlockEditorWrapper, {
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: this.dom,
+        defaultDocument: defaultSyncBlockEditorDocument,
+        handleContentChanges: this.handleContentChanges,
+        setInnerEditorView: this.setInnerEditorView,
+        getSyncedBlockEditor: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockEditor
+      });
+    }
+  }, {
+    key: "renderRenderer",
+    value: function renderRenderer() {
+      var _this$options3, _this$options4;
+      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.getSyncedBlockRenderer)) {
+        return null;
+      }
+
+      // get document node from data provider
+      var docNode = defaultSyncBlockRendererDocument;
+      return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
+        docNode: docNode,
+        getSyncedBlockRenderer: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockRenderer
+      });
+    }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(SyncBlockPluginComponent, {
-        config: this.reactComponentProps.config,
-        dom: this.dom
-      });
+      if (this.isSource) {
+        return this.renderEditor();
+      }
+      return this.renderRenderer();
     }
   }, {
     key: "stopEvent",
@@ -112,7 +122,17 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!target) {
         return false;
       }
-      return ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-testid=\"".concat(SyncBlockEditorWrapperDataId, "\"]"))) != null;
+      var isInNestedEditor = ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-testid=\"".concat(_SyncBlockEditorWrapper.SyncBlockEditorWrapperDataId, "\"]"))) != null;
+      if (isInNestedEditor) {
+        this.selectNode();
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "selectNode",
+    value: function selectNode() {
+      this.selectSyncBlockNode(undefined);
     }
   }, {
     key: "destroy",
@@ -121,17 +141,40 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }
+  }, {
+    key: "selectSyncBlockNode",
+    value: function selectSyncBlockNode(relativeSelectionPos) {
+      var _this$reactComponentP;
+      var getPos = typeof this.getPos === 'function' ? this.getPos() : 0;
+      var selectionAPI = (_this$reactComponentP = this.reactComponentProps.api) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.selection) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.actions;
+      if (!selectionAPI) {
+        return;
+      }
+      var tr = selectionAPI.selectNearNode({
+        selectionRelativeToNode: relativeSelectionPos,
+        selection: _state.NodeSelection.create(this.view.state.doc, getPos !== null && getPos !== void 0 ? getPos : 0)
+      })(this.view.state);
+      if (tr) {
+        this.view.dispatch(tr);
+      }
+    }
   }]);
 }(_reactNodeView.default);
-var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref3) {
-  var config = _ref3.config,
-    pmPluginFactoryParams = _ref3.pmPluginFactoryParams;
+var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {
+  var options = _ref.options,
+    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
+    api = _ref.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
-    var reactComponentProps = {
-      config: config
-    };
-    return new SyncBlock(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+    return new SyncBlock({
+      api: api,
+      options: options,
+      node: node,
+      view: view,
+      getPos: getPos,
+      portalProviderAPI: portalProviderAPI,
+      eventDispatcher: eventDispatcher
+    }).init();
   };
 };

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

@@ -1,25 +1,39 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSyncedBlock = void 0;
+exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
+var _uuid = _interopRequireDefault(require("uuid"));
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var getRandomId = function getRandomId() {
-  if (!globalThis.crypto || typeof globalThis.crypto.randomUUID !== 'function') {
-    return new Date().toISOString();
-  }
-  return globalThis.crypto.randomUUID();
-};
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(state) {
+  var id = (0, _uuid.default)();
   var tr = state.tr;
   // const { breakout } = state.schema.marks;
   var node = state.schema.nodes.syncBlock.createChecked({
-    resourceId: getRandomId(),
-    localId: getRandomId()
+    resourceId: id,
+    localId: id
   }, null
   // [breakout.create({ mode: 'wide' })],
   );
   (0, _utils.safeInsert)(node)(tr);
   return tr;
+};
+var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(state, _dispatch, _view) {
+  var schema = state.schema,
+    selection = state.selection;
+  if (selection instanceof _state.NodeSelection) {
+    var nodeType = selection.node.type;
+    var domNode = (0, _copyButton.toDOM)(selection.node, schema);
+    // clear local-id
+    if (domNode instanceof HTMLElement) {
+      domNode.setAttribute('data-local-id', '');
+    }
+    (0, _copyButton.copyDomNode)(domNode, nodeType, selection);
+    return true;
+  }
+  return false;
 };

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

@@ -7,32 +7,58 @@ 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(config, pmPluginFactoryParams, _syncBlockStore) {
+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;
       }
     },
     props: {
       nodeViews: {
         syncBlock: (0, _lazySyncedBlock.lazySyncBlockView)({
-          config: config,
-          pmPluginFactoryParams: pmPluginFactoryParams
+          options: options,
+          pmPluginFactoryParams: 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 = (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/pm-plugins/utils/utils.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSyncBlock = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var findSyncBlock = exports.findSyncBlock = function findSyncBlock(state, selection) {
+  var syncBlock = state.schema.nodes.syncBlock;
+  return (0, _utils.findSelectedNodeOfType)(syncBlock)(selection || state.selection) || (0, _utils.findParentNodeOfType)(syncBlock)(selection || state.selection);
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -11,9 +11,11 @@ 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;
+  var config = _ref.config,
+    api = _ref.api;
   var syncBlockStore = new _syncBlock.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
   return {
     name: 'syncedBlock',
@@ -27,7 +29,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       return [{
         name: 'syncedBlockPlugin',
         plugin: function plugin(params) {
-          return (0, _main.createPlugin)(config, params, syncBlockStore);
+          return (0, _main.createPlugin)(config, params, syncBlockStore, api);
         }
       }];
     },
@@ -50,7 +52,14 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
           }
         }];
       },
-      floatingToolbar: (0, _floatingToolbar.getToolbarConfig)()
+      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
+      });
     }
   };
 };