@atlaskit/editor-plugin-synced-block 5.1.9 → 5.1.11

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.1.11
+
+### Patch Changes
+
+- [`1f4c761b661e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1f4c761b661e1) -
+  [ux] EDITOR-4174 wrap synced block and bodied sync block with sentry error boundaries
+- Updated dependencies
+
+## 5.1.10
+
+### Patch Changes
+
+- [`c975226c67ed8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c975226c67ed8) -
+  [ux] [EDITOR-4472] Update tooltip copy for copy sync block button
+- [`98a4415c99228`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98a4415c99228) -
+  [ux] Set selection to the start of the previous selection when creating new synced block
+- [`fff45a651440a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fff45a651440a) -
+  EDITOR-1665 add experience tracking analytics for sync block save, fetch and delete
+- [`e3856219900ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3856219900ac) -
+  Revert removal of 'copy synced block' from block menu
+- Updated dependencies
+
 ## 5.1.9
 
 ### Patch Changes

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

@@ -59,8 +59,8 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     syncBlockStore.sourceManager.createBodiedSyncBlockNode(_attrs);
     tr.replaceWith(conversionInfo.from > 0 ? conversionInfo.from - 1 : 0, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
 
-    // set selection to the end of the previous selection + 1 for the position taken up by the start of the new synced block
-    tr.setSelection(_state.TextSelection.create(tr.doc, conversionInfo.to + 1));
+    // set selection to the start of the previous selection for the position taken up by the start of the new synced block
+    tr.setSelection(_state.TextSelection.create(tr.doc, conversionInfo.from));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -11,10 +11,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
 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; })(); }
@@ -89,12 +92,20 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
-      var _this$api5;
+      var _this$api5, _this$api6;
       var syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.syncedBlock.sharedState) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.currentState()) === null || _this$api5 === void 0 ? void 0 : _this$api5.syncBlockStore;
       if (!syncBlockStore) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_BodiedSyncBlockWrapper.BodiedSyncBlockWrapper, {
+      return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+        component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        dispatchAnalyticsEvent: (_this$api6 = this.api) === null || _this$api6 === void 0 || (_this$api6 = _this$api6.analytics) === null || _this$api6 === void 0 ? void 0 : _this$api6.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/_react.default.createElement(_BodiedSyncBlockWrapper.BodiedSyncBlockWrapper, {
+        ref: forwardRef,
+        syncBlockStore: syncBlockStore,
+        node: this.node
+      })) : /*#__PURE__*/_react.default.createElement(_BodiedSyncBlockWrapper.BodiedSyncBlockWrapper, {
         ref: forwardRef,
         syncBlockStore: syncBlockStore,
         node: this.node

package/dist/cjs/nodeviews/syncedBlock.js

@@ -12,6 +12,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
@@ -44,8 +46,10 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var _this$options,
         _this$api$syncedBlock,
         _this$api,
+        _this$api2,
         _this$options2,
-        _this2 = this;
+        _this2 = this,
+        _this$options3;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
         return null;
       }
@@ -62,7 +66,11 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       }
 
       // get document node from data provider
-      return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
+      return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+        component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions.fireAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
@@ -73,6 +81,17 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStore, resourceId, localId, (_this2$api = _this2.api) === null || _this2$api === void 0 || (_this2$api = _this2$api.analytics) === null || _this2$api === void 0 || (_this2$api = _this2$api.actions) === null || _this2$api === void 0 ? void 0 : _this2$api.fireAnalyticsEvent);
         },
         api: this.api
+      })) : /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
+        localId: this.node.attrs.localId,
+        syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
+        useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
+          return (0, _editorSyncedBlockProvider.useFetchSyncBlockTitle)(syncBlockStore, _this2.node);
+        },
+        useFetchSyncBlockData: function useFetchSyncBlockData() {
+          var _this2$api2;
+          return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStore, resourceId, localId, (_this2$api2 = _this2.api) === null || _this2$api2 === void 0 || (_this2$api2 = _this2$api2.analytics) === null || _this2$api2 === void 0 || (_this2$api2 = _this2$api2.actions) === null || _this2$api2 === void 0 ? void 0 : _this2$api2.fireAnalyticsEvent);
+        },
+        api: this.api
       });
     }
   }, {

package/dist/cjs/pm-plugins/experience-tracking/create-reference-experience.js

@@ -1,24 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCreateReferenceExperiencePlugin = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _experiences = require("@atlaskit/editor-common/experiences");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../../types");
+var _experienceTrackingUtils = require("../utils/experience-tracking-utils");
 var isPastedFromFabricEditor = function isPastedFromFabricEditor(html) {
   return !!html && html.indexOf('data-pm-slice="') >= 0;
 };
 var pluginKey = new _state.PluginKey('createReferenceSyncBlockExperience');
 var START_METHOD = {
-  PASTE: 'paste'
-};
-var ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
+  PASTE: 'paste',
+  UNDO: 'undo',
+  REDO: 'redo'
 };
 
 /**
@@ -41,7 +40,7 @@ var getCreateReferenceExperiencePlugin = exports.getCreateReferenceExperiencePlu
       return {
         destroy: function destroy() {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
         }
       };
@@ -63,6 +62,19 @@ var getCreateReferenceExperiencePlugin = exports.getCreateReferenceExperiencePlu
           });
         }
       }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      transactions.forEach(function (tr) {
+        var _wasSyncBlockDeletedO = (0, _experienceTrackingUtils.wasSyncBlockDeletedOrAddedByHistory)(tr, oldState, newState),
+          hasAddedSyncBlock = _wasSyncBlockDeletedO.hasAddedSyncBlock,
+          isUndo = _wasSyncBlockDeletedO.isUndo;
+        if (hasAddedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
     }
   });
 };
@@ -77,21 +89,20 @@ var getCreateReferenceExperience = function getCreateReferenceExperience(_ref2)
     }), new _experiences.ExperienceCheckDomMutation({
       onDomMutation: function onDomMutation(_ref3) {
         var mutations = _ref3.mutations;
-        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+        var insertedResourceIds = (0, _experienceTrackingUtils.getAddedResourceIds)(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (insertedResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              insertedResourceIds: insertedResourceIds
+            }
           };
         }
         return undefined;
       },
       observeConfig: function observeConfig() {
-        var _refs$containerElemen;
-        var proseMirrorElement = (_refs$containerElemen = refs.containerElement) === null || _refs$containerElemen === void 0 ? void 0 : _refs$containerElemen.querySelector('.ProseMirror');
-        if (!proseMirrorElement || !(proseMirrorElement instanceof HTMLElement)) {
-          return null;
-        }
         return {
-          target: proseMirrorElement,
+          target: (0, _experienceTrackingUtils.getTarget)(refs.containerElement),
           options: {
             childList: true
           }
@@ -99,15 +110,4 @@ var getCreateReferenceExperience = function getCreateReferenceExperience(_ref2)
       }
     })]
   });
-};
-var isReferenceSyncBlockAddedInMutation = function isReferenceSyncBlockAddedInMutation(_ref4) {
-  var type = _ref4.type,
-    addedNodes = _ref4.addedNodes;
-  return type === 'childList' && (0, _toConsumableArray2.default)(addedNodes).some(isReferenceSyncBlockNode);
-};
-var isReferenceSyncBlockNode = function isReferenceSyncBlockNode(node) {
-  if (!(node instanceof HTMLElement)) {
-    return false;
-  }
-  return !!node.querySelector('[data-prosemirror-node-name="syncBlock"]');
 };

package/dist/cjs/pm-plugins/experience-tracking/create-source-experience.js

@@ -1,20 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCreateSourceExperiencePlugin = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _bindEventListener = require("bind-event-listener");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _experiences = require("@atlaskit/editor-common/experiences");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../../types");
+var _experienceTrackingUtils = require("../utils/experience-tracking-utils");
 var pluginKey = new _state.PluginKey('createSourceSyncBlockExperience');
-var ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
-};
 var START_METHOD = {
   BLOCK_MENU: 'block-menu',
   PINNED_TOOLBAR: 'pinned-toolbar',
@@ -27,8 +24,8 @@ var syncedBlockCreateButtonIds = new Set(SYNCED_BLOCK_CREATE_BUTTON_IDS);
  * This experience tracks when a source sync block is inserted.
  *
  * Start: When user inserts a sync block via block menu, quick insert or pinned toolbar
- * Success: When the sync block is added to the DOM within 2000ms of start
- * Failure: When 500ms passes without the source sync block being added to the DOM
+ * Success: When the sync block is added to the DOM within 3000ms of start
+ * Failure: When 3000ms passes without the source sync block being added to the DOM
  */
 var getCreateSourceExperiencePlugin = exports.getCreateSourceExperiencePlugin = function getCreateSourceExperiencePlugin(_ref) {
   var refs = _ref.refs,
@@ -44,8 +41,7 @@ var getCreateSourceExperiencePlugin = exports.getCreateSourceExperiencePlugin =
   };
   var experience = getCreateSourceExperience({
     refs: refs,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    syncBlockStore: syncBlockStore
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
   });
   syncBlockStore.sourceManager.setCreateExperience(experience);
   var unbindClickListener = (0, _bindEventListener.bind)(document, {
@@ -97,7 +93,7 @@ var getCreateSourceExperiencePlugin = exports.getCreateSourceExperiencePlugin =
       return {
         destroy: function destroy() {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
           unbindClickListener();
           unbindKeydownListener();
@@ -113,25 +109,24 @@ var getCreateSourceExperience = function getCreateSourceExperience(_ref2) {
     actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     checks: [new _experiences.ExperienceCheckTimeout({
-      durationMs: 2000
+      durationMs: 3000
     }), new _experiences.ExperienceCheckDomMutation({
       onDomMutation: function onDomMutation(_ref3) {
         var mutations = _ref3.mutations;
-        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+        var createdResourceIds = (0, _experienceTrackingUtils.getAddedResourceIds)(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (createdResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              createdResourceIds: createdResourceIds
+            }
           };
         }
         return undefined;
       },
       observeConfig: function observeConfig() {
-        var _refs$containerElemen;
-        var proseMirrorElement = (_refs$containerElemen = refs.containerElement) === null || _refs$containerElemen === void 0 ? void 0 : _refs$containerElemen.querySelector('.ProseMirror');
-        if (!proseMirrorElement || !(proseMirrorElement instanceof HTMLElement)) {
-          return null;
-        }
         return {
-          target: proseMirrorElement,
+          target: (0, _experienceTrackingUtils.getTarget)(refs.containerElement),
           options: {
             childList: true
           }
@@ -171,15 +166,4 @@ var handleButtonClick = function handleButtonClick(testId, experience) {
 };
 var isEnterKey = function isEnterKey(key) {
   return key === 'Enter';
-};
-var isSourceSyncBlockAddedInMutation = function isSourceSyncBlockAddedInMutation(_ref4) {
-  var type = _ref4.type,
-    addedNodes = _ref4.addedNodes;
-  return type === 'childList' && (0, _toConsumableArray2.default)(addedNodes).some(isSourceSyncBlockNode);
-};
-var isSourceSyncBlockNode = function isSourceSyncBlockNode(node) {
-  if (!(node instanceof HTMLElement)) {
-    return false;
-  }
-  return !!node.querySelector('[data-prosemirror-node-name="bodiedSyncBlock"]');
 };

package/dist/cjs/pm-plugins/experience-tracking/delete-reference-experience.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDeleteReferenceExperiencePlugin = exports.getDeleteReferenceExperience = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../../types");
+var _experienceTrackingUtils = require("../utils/experience-tracking-utils");
+var pluginKey = new _state.PluginKey('deleteReferenceSyncBlockExperience');
+var START_METHOD = {
+  ELEMENT_TOOLBAR: 'element-toolbar',
+  DELETE: 'delete',
+  TYPED_OVER: 'typed-over',
+  CUT: 'cut',
+  UNDO: 'undo',
+  REDO: 'redo'
+};
+
+/**
+ * This experience tracks when a reference sync block is deleted.
+ *
+ * Start: When user deletes ref sync block from toolbar, presses delete when cursor is in front of ref sync block,
+ * presses any key with a ref sync block selected, cuts with a ref sync block selected, triggers undo/redo that deletes a ref sync block
+ * Success: When the sync block is removed from the DOM within 2000ms of start
+ * Failure: When 2000ms passes without the reference sync block being removed from the DOM
+ */
+var getDeleteReferenceExperiencePlugin = exports.getDeleteReferenceExperiencePlugin = function getDeleteReferenceExperiencePlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  var experience = getDeleteReferenceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setDeleteExperience(experience);
+  var unbindClickListener = (0, _bindEventListener.bind)(document, {
+    type: 'click',
+    listener: function listener(event) {
+      var target = event.target;
+      if (!target) {
+        return;
+      }
+      var button = target.closest('button[data-testid]');
+      if (!button || !(button instanceof HTMLButtonElement)) {
+        return;
+      }
+      var testId = button.dataset.testid;
+      if (isReferenceSyncedBlockDeleteButtonId(testId)) {
+        experience.start({
+          method: START_METHOD.ELEMENT_TOOLBAR
+        });
+      }
+    }
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        cut: function cut(view) {
+          var state = view.state;
+          if (hasSyncBlockInSelection(state.selection)) {
+            experience.start({
+              method: START_METHOD.CUT
+            });
+          }
+          return false;
+        },
+        keydown: function keydown(view, event) {
+          var state = view.state;
+          var hasSelection = hasSyncBlockInSelection(state.selection);
+          var hasAdjacent = hasSyncBlockBeforeCursor(state.selection);
+          if (hasSelection) {
+            experience.start({
+              method: START_METHOD.TYPED_OVER
+            });
+          }
+          if (isDeleteKey(event.key) && hasAdjacent) {
+            experience.start({
+              method: START_METHOD.DELETE
+            });
+          }
+          return false;
+        }
+      }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      transactions.forEach(function (tr) {
+        var _wasSyncBlockDeletedO = (0, _experienceTrackingUtils.wasSyncBlockDeletedOrAddedByHistory)(tr, oldState, newState),
+          hasDeletedSyncBlock = _wasSyncBlockDeletedO.hasDeletedSyncBlock,
+          isUndo = _wasSyncBlockDeletedO.isUndo;
+        if (hasDeletedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
+    },
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+        }
+      };
+    }
+  });
+};
+var getDeleteReferenceExperience = exports.getDeleteReferenceExperience = function getDeleteReferenceExperience(_ref2) {
+  var refs = _ref2.refs,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref3) {
+        var mutations = _ref3.mutations;
+        var deletedResourceIds = (0, _experienceTrackingUtils.getRemovedResourceIds)(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (deletedResourceIds.length > 0) {
+          return {
+            status: 'success',
+            metadata: {
+              deletedResourceIds: deletedResourceIds
+            }
+          };
+        }
+        return undefined;
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: (0, _experienceTrackingUtils.getTarget)(refs.containerElement),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+var isReferenceSyncedBlockDeleteButtonId = function isReferenceSyncedBlockDeleteButtonId(testId) {
+  return testId === 'reference-synced-block-delete-button';
+};
+var isDeleteKey = function isDeleteKey(key) {
+  return key === 'Delete' || key === 'Backspace';
+};
+var hasSyncBlockInSelection = function hasSyncBlockInSelection(selection) {
+  var syncBlock = selection.$from.doc.type.schema.nodes.syncBlock;
+  var found = false;
+  selection.$from.doc.nodesBetween(selection.from, selection.to, function (node) {
+    if (node.type === syncBlock) {
+      found = true;
+      return false;
+    }
+    // sync block nodes can only be found at the top level
+    return false;
+  });
+  return found;
+};
+var hasSyncBlockBeforeCursor = function hasSyncBlockBeforeCursor(selection) {
+  if (!selection.empty) {
+    return false;
+  }
+  var syncBlock = selection.$from.doc.type.schema.nodes.syncBlock;
+  var nodeBefore = selection.$from.nodeBefore;
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type) === syncBlock;
+};

package/dist/cjs/pm-plugins/experience-tracking/delete-source-experience.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDeleteSourceExperiencePlugin = exports.getDeleteSourceExperience = void 0;
+var _bindEventListener = require("bind-event-listener");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../../types");
+var _experienceTrackingUtils = require("../utils/experience-tracking-utils");
+var pluginKey = new _state.PluginKey('deleteSourceSyncBlockExperience');
+var START_METHOD = {
+  DELETE_CONFIRM_BUTTON: 'delete-confirm-button'
+};
+
+/**
+ * This experience tracks when a source sync block is deleted.
+ *
+ * Start: When user clicks the delete button in the delete modal
+ * Success: When the sync block is removed from the DOM within 2000ms of start
+ * Failure: When 2000ms passes without the source sync block being removed from the DOM
+ */
+var getDeleteSourceExperiencePlugin = exports.getDeleteSourceExperiencePlugin = function getDeleteSourceExperiencePlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  var experience = getDeleteSourceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setDeleteExperience(experience);
+  var unbindClickListener = (0, _bindEventListener.bind)(document, {
+    type: 'click',
+    listener: function listener(event) {
+      var target = event.target;
+      if (!target) {
+        return;
+      }
+      var button = target.closest('button[data-testid]');
+      if (!button || !(button instanceof HTMLButtonElement)) {
+        return;
+      }
+      var testId = button.dataset.testid;
+      if (isSyncedBlockDeleteButtonId(testId)) {
+        experience.start({
+          method: START_METHOD.DELETE_CONFIRM_BUTTON
+        });
+      }
+    }
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+        }
+      };
+    }
+  });
+};
+var getDeleteSourceExperience = exports.getDeleteSourceExperience = function getDeleteSourceExperience(_ref2) {
+  var refs = _ref2.refs,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_DELETE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref3) {
+        var mutations = _ref3.mutations;
+        var deletedResourceIds = (0, _experienceTrackingUtils.getRemovedResourceIds)(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (deletedResourceIds.length > 0) {
+          return {
+            status: 'success',
+            metadata: {
+              deletedResourceIds: deletedResourceIds
+            }
+          };
+        }
+        return undefined;
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: (0, _experienceTrackingUtils.getTarget)(refs.containerElement),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+var isSyncedBlockDeleteButtonId = function isSyncedBlockDeleteButtonId(testId) {
+  return testId === 'synced-block-delete-confirmation-modal-delete-button';
+};

package/dist/cjs/pm-plugins/experience-tracking/get-experience-tracking-plugins.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.getExperienceTrackingPlugins = void 0;
 var _createReferenceExperience = require("./create-reference-experience");
 var _createSourceExperience = require("./create-source-experience");
+var _deleteReferenceExperience = require("./delete-reference-experience");
+var _deleteSourceExperience = require("./delete-source-experience");
+var _providerOnlyExperiences = require("./provider-only-experiences");
 var getExperienceTrackingPlugins = exports.getExperienceTrackingPlugins = function getExperienceTrackingPlugins(_ref) {
   var refs = _ref.refs,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -27,5 +30,32 @@ var getExperienceTrackingPlugins = exports.getExperienceTrackingPlugins = functi
         syncBlockStore: syncBlockStore
       });
     }
+  }, {
+    name: 'deleteSourceExperiencePlugin',
+    plugin: function plugin() {
+      return (0, _deleteSourceExperience.getDeleteSourceExperiencePlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        syncBlockStore: syncBlockStore
+      });
+    }
+  }, {
+    name: 'deleteReferenceExperiencePlugin',
+    plugin: function plugin() {
+      return (0, _deleteReferenceExperience.getDeleteReferenceExperiencePlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        syncBlockStore: syncBlockStore
+      });
+    }
+  }, {
+    name: 'providerOnlySyncedBlockExperiencesPlugin',
+    plugin: function plugin() {
+      return (0, _providerOnlyExperiences.getProviderOnlyExperiencesPlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        syncBlockStore: syncBlockStore
+      });
+    }
   }];
 };