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

package/dist/cjs/pm-plugins/experience-tracking/provider-only-experiences.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getProviderOnlyExperiencesPlugin = void 0;
+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 pluginKey = new _state.PluginKey('providerOnlySyncBlockExperiences');
+var getProviderOnlyExperiencesPlugin = exports.getProviderOnlyExperiencesPlugin = function getProviderOnlyExperiencesPlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  var saveSourceExperience = getSaveSourceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setSaveExperience(saveSourceExperience);
+  var saveReferenceExperience = getSaveReferenceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  var fetchExperience = getFetchExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  var fetchSourceInfoExperience = getFetchSourceInfoExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  syncBlockStore.referenceManager.setExperiences(fetchExperience, fetchSourceInfoExperience, saveReferenceExperience);
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          saveSourceExperience.abort({
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          saveReferenceExperience.abort({
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          fetchExperience.abort({
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          fetchSourceInfoExperience.abort({
+            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+        }
+      };
+    }
+  });
+};
+
+/**
+ * This experience tracks when a source sync block is saved to the BE.
+ *
+ * Start: When the flush source sync block function is called.
+ * Success: When the sync block save is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the sync block being successfully saved
+ */
+var getSaveSourceExperience = function getSaveSourceExperience(_ref2) {
+  var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_UPDATE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block is saved to the BE.
+ *
+ * Start: When the flush sync block function is called.
+ * Success: When the sync block save is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the sync block being successfully saved
+ */
+var getSaveReferenceExperience = function getSaveReferenceExperience(_ref3) {
+  var dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_UPDATE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block data is fetched from the BE.
+ *
+ * Start: When the fetchNodesData function is called.
+ * Success: When the fetching the data is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the data being successfully fetched, or the fetch fails
+ */
+var getFetchExperience = function getFetchExperience(_ref4) {
+  var dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_FETCH,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block source info data (title, url) is fetched from the BE.
+ *
+ * Start: When the fetchSourceInfo function is called.
+ * Success: When the fetching the data is successful within 2500ms of start.
+ * Failure: When 2500ms passes without the data being successfully fetched, or the fetch fails
+ */
+var getFetchSourceInfoExperience = function getFetchSourceInfoExperience(_ref5) {
+  var dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_GET_SOURCE_INFO,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 2500
+    })]
+  });
+};

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wasSyncBlockDeletedOrAddedByHistory = exports.getTarget = exports.getRemovedResourceIds = exports.getAddedResourceIds = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var targetEl;
+var getTarget = exports.getTarget = function getTarget(containerElement) {
+  if (!targetEl) {
+    var element = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('.ProseMirror');
+    if (!element || !(element instanceof HTMLElement)) {
+      return null;
+    }
+    targetEl = element;
+  }
+  return targetEl;
+};
+var wasSyncBlockDeletedOrAddedByHistory = exports.wasSyncBlockDeletedOrAddedByHistory = function wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState) {
+  var historyMeta = tr.getMeta(_utils.pmHistoryPluginKey);
+  if (!Boolean(historyMeta)) {
+    return {};
+  }
+  var syncBlock = newState.schema.nodes.syncBlock;
+  var oldSyncBlockNodes = (0, _utils2.findChildren)(oldState.doc, function (node) {
+    return node.type === syncBlock;
+  });
+  var newSyncBlockNodes = (0, _utils2.findChildren)(newState.doc, function (node) {
+    return node.type === syncBlock;
+  });
+  var oldSyncBlockIds = new Set(oldSyncBlockNodes.map(function (nodeWithPos) {
+    return nodeWithPos.node.attrs.localId;
+  }).filter(function (localId) {
+    return Boolean(localId);
+  }));
+  var newSyncBlockIds = new Set(newSyncBlockNodes.map(function (nodeWithPos) {
+    return nodeWithPos.node.attrs.localId;
+  }).filter(function (localId) {
+    return Boolean(localId);
+  }));
+  var hasDeletedSyncBlock = Array.from(oldSyncBlockIds).some(function (localId) {
+    return !newSyncBlockIds.has(localId);
+  });
+  var hasAddedSyncBlock = Array.from(newSyncBlockIds).some(function (localId) {
+    return !oldSyncBlockIds.has(localId);
+  });
+  return {
+    hasDeletedSyncBlock: hasDeletedSyncBlock,
+    hasAddedSyncBlock: hasAddedSyncBlock,
+    isUndo: historyMeta.redo === false
+  };
+};
+var getResourceIds = function getResourceIds(nodes, resourceIds, query) {
+  nodes.forEach(function (node) {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    var syncBlockElements = node.querySelectorAll(query);
+    syncBlockElements.forEach(function (element) {
+      var resourceId = element.getAttribute('resourceid');
+      if (resourceId) {
+        resourceIds.push(resourceId);
+      }
+    });
+  });
+};
+var getAddedResourceIds = exports.getAddedResourceIds = function getAddedResourceIds(mutations, query) {
+  var resourceIds = [];
+  mutations.forEach(function (mutation) {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.addedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};
+var getRemovedResourceIds = exports.getRemovedResourceIds = function getRemovedResourceIds(mutations, query) {
+  var resourceIds = [];
+  mutations.forEach(function (mutation) {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.removedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};

package/dist/cjs/types/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FLAG_ID = void 0;
+exports.FLAG_ID = exports.EXPERIENCE_ABORT_REASON = void 0;
 var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["CANNOT_DELETE_WHEN_OFFLINE"] = "cannot-delete-when-offline";
   FLAG_ID["CANNOT_EDIT_WHEN_OFFLINE"] = "cannot-edit-when-offline";
@@ -11,4 +11,7 @@ var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["FAIL_TO_DELETE"] = "fail-to-delete";
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   return FLAG_ID;
-}({});
+}({});
+var EXPERIENCE_ABORT_REASON = exports.EXPERIENCE_ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -51,24 +51,56 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
     }),
     onClick: onClick,
     isDisabled: isOffline,
-    testId: 'create-synced-block-block-menu-btn',
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
       appearance: "new"
     }, formatMessage(_messages.blockMenuMessages.newLozenge))
   }, formatMessage(_messages.blockMenuMessages.createSyncedBlock));
 };
-var CreateOrCopySyncedBlockDropdownItem = exports.CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref2) {
-  var _menuTriggerByNode$no;
-  var api = _ref2.api,
-    enableSourceSyncedBlockCreation = _ref2.enableSourceSyncedBlockCreation;
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
+  var api = _ref2.api;
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (states) {
+      var _states$connectivityS2;
+      return {
+        mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+      };
+    }),
+    mode = _useSharedPluginState2.mode;
+  var onClick = function onClick() {
+    var _api$core3, _api$core4, _api$blockControls2;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
+    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.toggleBlockMenu({
+      closeMenu: true
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick,
+    isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      appearance: "new"
+    }, formatMessage(_messages.blockMenuMessages.newLozenge))
+  }, formatMessage(_messages.blockMenuMessages.copySyncedBlock));
+};
+var CreateOrCopySyncedBlockDropdownItem = exports.CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref3) {
+  var api = _ref3.api,
+    enableSourceSyncedBlockCreation = _ref3.enableSourceSyncedBlockCreation;
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
       var _states$blockControls3, _states$blockControls4;
       return {
         menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
       };
     }),
-    menuTriggerByNode = _useSharedPluginState2.menuTriggerByNode;
-  if (!['syncBlock', 'bodiedSyncBlock'].includes((_menuTriggerByNode$no = menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) !== null && _menuTriggerByNode$no !== void 0 ? _menuTriggerByNode$no : '') && enableSourceSyncedBlockCreation) {
+    menuTriggerByNode = _useSharedPluginState3.menuTriggerByNode;
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
+    return /*#__PURE__*/_react.default.createElement(CopySyncedBlockDropdownItem, {
+      api: api
+    });
+  } else if (enableSourceSyncedBlockCreation) {
     return /*#__PURE__*/_react.default.createElement(CreateSyncedBlockDropdownItem, {
       api: api
     });

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -14,6 +14,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _main = require("../pm-plugins/main");
 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); }
@@ -117,6 +118,7 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
+    testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
   }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton)))));
 };

package/dist/cjs/ui/floating-toolbar.js

@@ -15,6 +15,7 @@ var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorCommands = require("../editor-commands");
 var _utils2 = require("../pm-plugins/utils/utils");
 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); }
@@ -47,7 +48,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       type: 'button',
       title: formatMessage(_messages.default.delete),
       onClick: (0, _editorCommands.removeSyncedBlock)(api),
-      icon: _delete.default
+      icon: _delete.default,
+      testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'reference-synced-block-delete-button' : undefined
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(deleteButton);
   } else {
@@ -58,7 +60,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       icon: _copy.default,
       title: formatMessage(_messages.syncBlockMessages.copySyncBlockLabel),
       showTitle: false,
-      tooltipContent: formatMessage(_messages.syncBlockMessages.copySyncBlockTooltip),
+      tooltipContent: formatMessage(_messages.syncBlockMessages.copySyncedBlockTooltip),
       onClick: (0, _editorCommands.copySyncedBlockReferenceToClipboard)(syncBlockStore, api)
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(copyButton);

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

@@ -59,8 +59,8 @@ export const 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(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(TextSelection.create(tr.doc, conversionInfo.from));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 const toDOM = () => ['div', {
   class: BodiedSyncBlockSharedCssClassName.content,
@@ -60,12 +63,20 @@ class BodiedSyncBlock extends ReactNodeView {
     return domRef;
   }
   render(_props, forwardRef) {
-    var _this$api5, _this$api5$syncedBloc, _this$api5$syncedBloc2;
+    var _this$api5, _this$api5$syncedBloc, _this$api5$syncedBloc2, _this$api6, _this$api6$analytics;
     const syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$syncedBloc = _this$api5.syncedBlock.sharedState) === null || _this$api5$syncedBloc === void 0 ? void 0 : (_this$api5$syncedBloc2 = _this$api5$syncedBloc.currentState()) === null || _this$api5$syncedBloc2 === void 0 ? void 0 : _this$api5$syncedBloc2.syncBlockStore;
     if (!syncBlockStore) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+    return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+      component: ACTION_SUBJECT.SYNCED_BLOCK,
+      dispatchAnalyticsEvent: (_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions.fireAnalyticsEvent,
+      fallbackComponent: null
+    }, /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+      ref: forwardRef,
+      syncBlockStore: syncBlockStore,
+      node: this.node
+    })) : /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
       ref: forwardRef,
       syncBlockStore: syncBlockStore,
       node: this.node

package/dist/es2019/nodeviews/syncedBlock.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
@@ -17,7 +19,7 @@ export class SyncBlock extends ReactNodeView {
     return domRef;
   }
   render() {
-    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$options2;
+    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2, _this$options3;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
     }
@@ -35,13 +37,26 @@ export class SyncBlock extends ReactNodeView {
     }
 
     // get document node from data provider
-    return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+    return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+      component: ACTION_SUBJECT.SYNCED_BLOCK,
+      dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions.fireAnalyticsEvent,
+      fallbackComponent: null
+    }, /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
       localId: this.node.attrs.localId,
       syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
       useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
       useFetchSyncBlockData: () => {
-        var _this$api2, _this$api2$analytics, _this$api2$analytics$;
-        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : (_this$api2$analytics$ = _this$api2$analytics.actions) === null || _this$api2$analytics$ === void 0 ? void 0 : _this$api2$analytics$.fireAnalyticsEvent);
+        var _this$api3, _this$api3$analytics, _this$api3$analytics$;
+        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : (_this$api3$analytics$ = _this$api3$analytics.actions) === null || _this$api3$analytics$ === void 0 ? void 0 : _this$api3$analytics$.fireAnalyticsEvent);
+      },
+      api: this.api
+    })) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+      localId: this.node.attrs.localId,
+      syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
+      useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
+      useFetchSyncBlockData: () => {
+        var _this$api4, _this$api4$analytics, _this$api4$analytics$;
+        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : (_this$api4$analytics$ = _this$api4$analytics.actions) === null || _this$api4$analytics$ === void 0 ? void 0 : _this$api4$analytics$.fireAnalyticsEvent);
       },
       api: this.api
     });

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

@@ -2,13 +2,14 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analy
 import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getAddedResourceIds, wasSyncBlockDeletedOrAddedByHistory, getTarget } from '../utils/experience-tracking-utils';
 const isPastedFromFabricEditor = html => !!html && html.indexOf('data-pm-slice="') >= 0;
 const pluginKey = new PluginKey('createReferenceSyncBlockExperience');
 const START_METHOD = {
-  PASTE: 'paste'
-};
-const ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
+  PASTE: 'paste',
+  UNDO: 'undo',
+  REDO: 'redo'
 };
 
 /**
@@ -32,7 +33,7 @@ export const getCreateReferenceExperiencePlugin = ({
       return {
         destroy: () => {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
         }
       };
@@ -54,6 +55,20 @@ export const getCreateReferenceExperiencePlugin = ({
           });
         }
       }
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      transactions.forEach(tr => {
+        const {
+          hasAddedSyncBlock,
+          isUndo
+        } = wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState);
+        if (hasAddedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
     }
   });
 };
@@ -70,21 +85,20 @@ const getCreateReferenceExperience = ({
       onDomMutation: ({
         mutations
       }) => {
-        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+        const insertedResourceIds = getAddedResourceIds(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (insertedResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              insertedResourceIds
+            }
           };
         }
         return undefined;
       },
       observeConfig: () => {
-        var _refs$containerElemen;
-        const 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: getTarget(refs.containerElement),
           options: {
             childList: true
           }
@@ -92,14 +106,4 @@ const getCreateReferenceExperience = ({
       }
     })]
   });
-};
-const isReferenceSyncBlockAddedInMutation = ({
-  type,
-  addedNodes
-}) => type === 'childList' && [...addedNodes].some(isReferenceSyncBlockNode);
-const isReferenceSyncBlockNode = node => {
-  if (!(node instanceof HTMLElement)) {
-    return false;
-  }
-  return !!node.querySelector('[data-prosemirror-node-name="syncBlock"]');
 };

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

@@ -3,10 +3,9 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analy
 import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getAddedResourceIds, getTarget } from '../utils/experience-tracking-utils';
 const pluginKey = new PluginKey('createSourceSyncBlockExperience');
-const ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
-};
 const START_METHOD = {
   BLOCK_MENU: 'block-menu',
   PINNED_TOOLBAR: 'pinned-toolbar',
@@ -19,8 +18,8 @@ const 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
  */
 export const getCreateSourceExperiencePlugin = ({
   refs,
@@ -37,8 +36,7 @@ export const getCreateSourceExperiencePlugin = ({
   };
   const experience = getCreateSourceExperience({
     refs,
-    dispatchAnalyticsEvent,
-    syncBlockStore
+    dispatchAnalyticsEvent
   });
   syncBlockStore.sourceManager.setCreateExperience(experience);
   const unbindClickListener = bind(document, {
@@ -90,7 +88,7 @@ export const getCreateSourceExperiencePlugin = ({
       return {
         destroy: () => {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
           unbindClickListener();
           unbindKeydownListener();
@@ -107,26 +105,25 @@ const getCreateSourceExperience = ({
     actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
     dispatchAnalyticsEvent,
     checks: [new ExperienceCheckTimeout({
-      durationMs: 2000
+      durationMs: 3000
     }), new ExperienceCheckDomMutation({
       onDomMutation: ({
         mutations
       }) => {
-        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+        const createdResourceIds = getAddedResourceIds(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (createdResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              createdResourceIds
+            }
           };
         }
         return undefined;
       },
       observeConfig: () => {
-        var _refs$containerElemen;
-        const 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: getTarget(refs.containerElement),
           options: {
             childList: true
           }
@@ -166,14 +163,4 @@ const handleButtonClick = (testId, experience) => {
 };
 const isEnterKey = key => {
   return key === 'Enter';
-};
-const isSourceSyncBlockAddedInMutation = ({
-  type,
-  addedNodes
-}) => type === 'childList' && [...addedNodes].some(isSourceSyncBlockNode);
-const isSourceSyncBlockNode = node => {
-  if (!(node instanceof HTMLElement)) {
-    return false;
-  }
-  return !!node.querySelector('[data-prosemirror-node-name="bodiedSyncBlock"]');
 };