@atlaskit/editor-plugin-synced-block 5.0.0 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.1.1
+
+### Patch Changes
+
+- [`656adaeec9d0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/656adaeec9d0b) -
+  [ux] EDITOR-1665 add experience tracking for create sync block
+- Updated dependencies
+
+## 5.1.0
+
+### Minor Changes
+
+- [`bf49041938d1a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf49041938d1a) -
+  EDITOR-2257 editor synced blocks ssr part 1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.0
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../design-system/modal-dialog/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../design-system/modal-dialog/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../design-system/modal-dialog/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},

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

@@ -8,6 +8,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../pm-plugins/utils/utils");
 var _types = require("../types");
@@ -39,7 +40,12 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
   } else {
     var conversionInfo = (0, _utils2.canBeConvertedToSyncBlock)(tr.selection);
     if (!conversionInfo) {
-      // TODO: EDITOR-1665 - Raise an error analytics event
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+        var _syncBlockStore$sourc;
+        (_syncBlockStore$sourc = syncBlockStore.sourceManager.createExperience) === null || _syncBlockStore$sourc === void 0 || _syncBlockStore$sourc.failure({
+          reason: 'Selection is not allowed to be converted to sync block'
+        });
+      }
       return false;
     }
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();

package/dist/cjs/nodeviews/syncedBlock.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.syncBlockNodeView = void 0;
+exports.syncBlockNodeView = exports.SyncBlock = 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"));
@@ -15,17 +15,19 @@ var _react = _interopRequireDefault(require("react"));
 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");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
-var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
+var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function SyncBlock(props) {
     var _this;
     (0, _classCallCheck2.default)(this, SyncBlock);
     _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.options = props.options;
     _this.api = props.api;
+    _this.syncBlockStore = props.syncBlockStore;
     return _this;
   }
   (0, _inherits2.default)(SyncBlock, _ReactNodeView);
@@ -40,6 +42,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var _this$options,
+        _this$api$syncedBlock,
         _this$api,
         _this$options2,
         _this2 = this;
@@ -52,7 +55,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!resourceId || !localId) {
         return null;
       }
-      var syncBlockStore = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore;
+      var initialSyncBlockStore = (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? this.syncBlockStore : undefined;
+      var syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : initialSyncBlockStore;
       if (!syncBlockStore) {
         return null;
       }

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

@@ -0,0 +1,113 @@
+"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 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'
+};
+
+/**
+ * This experience tracks when a reference sync block is inserted.
+ *
+ * Start: When user pastes a sync block from editor and createSyncedBlock is called
+ * Success: When the sync block is added to the DOM within 500ms of start
+ * Failure: When 500ms passes without the reference sync block being added to the DOM
+ */
+var getCreateReferenceExperiencePlugin = exports.getCreateReferenceExperiencePlugin = function getCreateReferenceExperiencePlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var experience = getCreateReferenceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+        }
+      };
+    },
+    props: {
+      handlePaste: function handlePaste(_view, rawEvent, slice) {
+        var _event$clipboardData;
+        var event = rawEvent;
+        var html = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text/html');
+
+        // do not start on paste from renderer, because this flattens the content and does not create a reference block
+        if (isPastedFromFabricEditor(html)) {
+          slice.content.forEach(function (node) {
+            if (node.type.name === 'syncBlock' || node.type.name === 'bodiedSyncBlock') {
+              experience.start({
+                method: START_METHOD.PASTE
+              });
+            }
+          });
+        }
+      }
+    }
+  });
+};
+var getCreateReferenceExperience = function getCreateReferenceExperience(_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_CREATE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 500
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref3) {
+        var mutations = _ref3.mutations;
+        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+        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,
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+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

@@ -0,0 +1,185 @@
+"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 pluginKey = new _state.PluginKey('createSourceSyncBlockExperience');
+var ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+var START_METHOD = {
+  BLOCK_MENU: 'block-menu',
+  PINNED_TOOLBAR: 'pinned-toolbar',
+  QUICK_INSERT: 'quick-insert'
+};
+var SYNCED_BLOCK_CREATE_BUTTON_IDS = ['create-synced-block-toolbar-btn', 'create-synced-block-block-menu-btn', 'create-synced-block-quick-insert-btn'];
+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
+ */
+var getCreateSourceExperiencePlugin = exports.getCreateSourceExperiencePlugin = function getCreateSourceExperiencePlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  var popupsTargetEl;
+  var editorViewEl;
+  var getPopupsTarget = function getPopupsTarget() {
+    if (!popupsTargetEl) {
+      popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
+    }
+    return popupsTargetEl;
+  };
+  var experience = getCreateSourceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    syncBlockStore: syncBlockStore
+  });
+  syncBlockStore.sourceManager.setCreateExperience(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 (!isSyncedBlockCreateButtonId(testId)) {
+        return;
+      }
+      handleButtonClick(testId, experience);
+    }
+  });
+  var unbindKeydownListener = (0, _bindEventListener.bind)(document, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (isEnterKey(event.key)) {
+        var typeaheadPopup = (0, _experiences.popupWithNestedElement)(getPopupsTarget(), '.fabric-editor-typeahead');
+        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+          return;
+        }
+        var firstItem = typeaheadPopup.querySelector('[role="option"]');
+        if (!firstItem || !(firstItem instanceof HTMLElement)) {
+          return;
+        }
+        var testId = firstItem.dataset.testid;
+        if (testId === 'create-synced-block-quick-insert-btn') {
+          experience.start({
+            method: START_METHOD.QUICK_INSERT
+          });
+        }
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};
+var getCreateSourceExperience = function getCreateSourceExperience(_ref2) {
+  var refs = _ref2.refs,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref3) {
+        var mutations = _ref3.mutations;
+        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+        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,
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+var isSyncedBlockCreateButtonId = function isSyncedBlockCreateButtonId(value) {
+  return !!value && syncedBlockCreateButtonIds.has(value);
+};
+var handleButtonClick = function handleButtonClick(testId, experience) {
+  switch (testId) {
+    case 'create-synced-block-toolbar-btn':
+      experience.start({
+        method: START_METHOD.PINNED_TOOLBAR
+      });
+      break;
+    case 'create-synced-block-block-menu-btn':
+      experience.start({
+        method: START_METHOD.BLOCK_MENU
+      });
+      break;
+    case 'create-synced-block-quick-insert-btn':
+      experience.start({
+        method: START_METHOD.QUICK_INSERT
+      });
+      break;
+    default:
+      {
+        // Exhaustiveness check: if a new SyncedBlockToolbarButtonId is added
+        // but not handled above, TypeScript will error here.
+        var _exhaustiveCheck = testId;
+        return _exhaustiveCheck;
+      }
+  }
+};
+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/get-experience-tracking-plugins.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExperienceTrackingPlugins = void 0;
+var _createReferenceExperience = require("./create-reference-experience");
+var _createSourceExperience = require("./create-source-experience");
+var getExperienceTrackingPlugins = exports.getExperienceTrackingPlugins = function getExperienceTrackingPlugins(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  return [{
+    name: 'createReferenceSyncedBlockExperiencePlugin',
+    plugin: function plugin() {
+      return (0, _createReferenceExperience.getCreateReferenceExperiencePlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      });
+    }
+  }, {
+    name: 'createSourceSyncedBlockExperiencePlugin',
+    plugin: function plugin() {
+      return (0, _createSourceExperience.getCreateSourceExperiencePlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        syncBlockStore: syncBlockStore
+      });
+    }
+  }];
+};

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

@@ -14,8 +14,10 @@ var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
 var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
+var _syncedBlock = require("../nodeviews/syncedBlock");
 var _types = require("../types");
 var _handleBodiedSyncBlockRemoval = require("./utils/handle-bodied-sync-block-removal");
 var _ignoreDomEvent = require("./utils/ignore-dom-event");
@@ -84,7 +86,22 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
     },
     props: {
       nodeViews: {
-        syncBlock: (0, _lazySyncedBlock.lazySyncBlockView)({
+        syncBlock: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? function (node, view, getPos, _decorations) {
+          // To support SSR, pass `syncBlockStore` here
+          // and do not use lazy loading.
+          // We cannot start rendering and then load `syncBlockStore` asynchronously,
+          // because obtaining it is asynchronous (sharedPluginState.currentState() is delayed).
+          return new _syncedBlock.SyncBlock({
+            api: api,
+            options: options,
+            node: node,
+            view: view,
+            getPos: getPos,
+            portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
+            eventDispatcher: pmPluginFactoryParams.eventDispatcher,
+            syncBlockStore: syncBlockStore
+          }).init();
+        } : (0, _lazySyncedBlock.lazySyncBlockView)({
           options: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
           api: api

package/dist/cjs/syncedBlockPlugin.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncedBlockPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
+var _getExperienceTrackingPlugins = require("./pm-plugins/experience-tracking/get-experience-tracking-plugins");
 var _main = require("./pm-plugins/main");
 var _blockMenuComponents = require("./ui/block-menu-components");
 var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
@@ -24,6 +27,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
   var _api$analytics, _api$blockMenu, _config$enableSourceC, _api$toolbar, _config$enableSourceC2;
   var config = _ref.config,
     api = _ref.api;
+  var refs = {};
   var syncBlockStore = new _editorSyncedBlockProvider.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider);
   syncBlockStore.setFireAnalyticsEvent(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent);
   api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents((0, _blockMenuComponents.getBlockMenuComponents)(api, (_config$enableSourceC = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC !== void 0 ? _config$enableSourceC : false));
@@ -45,7 +49,14 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         plugin: function plugin(params) {
           return (0, _main.createPlugin)(config, params, syncBlockStore, api);
         }
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? (0, _getExperienceTrackingPlugins.getExperienceTrackingPlugins)({
+        refs: refs,
+        dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
+          var _api$analytics2;
+          return api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent(payload);
+        },
+        syncBlockStore: syncBlockStore
+      }) : []));
     },
     commands: {
       copySyncedBlockReferenceToClipboard: function copySyncedBlockReferenceToClipboard() {
@@ -100,14 +111,21 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
               syncBlockStore: syncBlockStore,
               typeAheadInsert: insert
             });
-          }
+          },
+          testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'create-synced-block-quick-insert-btn' : undefined
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl) {
         return (0, _floatingToolbar.getToolbarConfig)(state, intl, api, syncBlockStore);
       }
     },
-    contentComponent: function contentComponent() {
+    contentComponent: function contentComponent(_ref4) {
+      var containerElement = _ref4.containerElement,
+        wrapperElement = _ref4.wrapperElement,
+        popupsMountPoint = _ref4.popupsMountPoint;
+      refs.containerElement = containerElement || undefined;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
+      refs.wrapperElement = wrapperElement || undefined;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SyncBlockRefresher.SyncBlockRefresher, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/cjs/ui/CreateSyncedBlockButton.js

@@ -53,6 +53,7 @@ var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateS
       label: ""
     }),
     isDisabled: isDisabled,
+    testId: "create-synced-block-toolbar-btn",
     onClick: onClick
   }));
 };

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -51,6 +51,7 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
     }),
     onClick: onClick,
     isDisabled: isOffline,
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
       appearance: "new"
     }, formatMessage(_messages.blockMenuMessages.newLozenge))

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

@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { FLAG_ID } from '../types';
@@ -39,7 +40,12 @@ export const createSyncedBlock = ({
   } else {
     const conversionInfo = canBeConvertedToSyncBlock(tr.selection);
     if (!conversionInfo) {
-      // TODO: EDITOR-1665 - Raise an error analytics event
+      if (fg('platform_synced_block_dogfooding')) {
+        var _syncBlockStore$sourc;
+        (_syncBlockStore$sourc = syncBlockStore.sourceManager.createExperience) === null || _syncBlockStore$sourc === void 0 ? void 0 : _syncBlockStore$sourc.failure({
+          reason: 'Selection is not allowed to be converted to sync block'
+        });
+      }
       return false;
     }
     const attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();

package/dist/es2019/nodeviews/syncedBlock.js

@@ -2,12 +2,14 @@ import React from 'react';
 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';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
-class SyncBlock extends ReactNodeView {
+export class SyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.options = props.options;
     this.api = props.api;
+    this.syncBlockStore = props.syncBlockStore;
   }
   createDomRef() {
     const domRef = document.createElement('div');
@@ -15,7 +17,7 @@ class SyncBlock extends ReactNodeView {
     return domRef;
   }
   render() {
-    var _this$options, _this$api, _this$api$syncedBlock, _this$api$syncedBlock2, _this$options2;
+    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$options2;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
     }
@@ -26,7 +28,8 @@ class SyncBlock extends ReactNodeView {
     if (!resourceId || !localId) {
       return null;
     }
-    const syncBlockStore = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock = _this$api.syncedBlock) === null || _this$api$syncedBlock === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api$syncedBlock.sharedState.currentState()) === null || _this$api$syncedBlock2 === void 0 ? void 0 : _this$api$syncedBlock2.syncBlockStore;
+    const initialSyncBlockStore = fg('platform_synced_block_dogfooding') ? this.syncBlockStore : undefined;
+    const syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api.syncedBlock) === null || _this$api$syncedBlock2 === void 0 ? void 0 : (_this$api$syncedBlock3 = _this$api$syncedBlock2.sharedState.currentState()) === null || _this$api$syncedBlock3 === void 0 ? void 0 : _this$api$syncedBlock3.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : initialSyncBlockStore;
     if (!syncBlockStore) {
       return null;
     }