@atlaskit/editor-plugin-synced-block 6.0.11 → 6.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/pm-plugins/menu-and-toolbar-experiences.js +43 -25
  3. package/dist/es2019/pm-plugins/menu-and-toolbar-experiences.js +47 -26
  4. package/dist/esm/pm-plugins/menu-and-toolbar-experiences.js +44 -26
  5. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-synced-block
2
2
 
3
+ ## 6.0.13
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 6.0.12
10
+
11
+ ### Patch Changes
12
+
13
+ - [`10827e937e450`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10827e937e450) -
14
+ [EDITOR-5750] Fix instrumentation issues with sync block experience tracking
15
+ - Updated dependencies
16
+
3
17
  ## 6.0.11
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/pm-plugins/menu-and-toolbar-experiences.js CHANGED
@@ -11,6 +11,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
11
11
  var _experiences = require("@atlaskit/editor-common/experiences");
12
12
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
13
13
  var _state = require("@atlaskit/editor-prosemirror/state");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _types = require("../types");
15
16
  var TIMEOUT_DURATION = 30000;
16
17
  var pluginKey = new _state.PluginKey('syncedBlockMenuAndToolbarExperience');
@@ -21,10 +22,13 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
21
22
  var refs = _ref.refs,
22
23
  dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
23
24
  var popupsTargetEl;
24
- var editorViewEl;
25
+ var editorViewRef = {
26
+ current: undefined
27
+ };
25
28
  var getPopupsTarget = function getPopupsTarget() {
26
29
  if (!popupsTargetEl) {
27
- popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
30
+ var _editorViewRef$curren;
31
+ popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || (0, _experiences.getPopupContainerFromEditorView)(editorViewRef === null || editorViewRef === void 0 || (_editorViewRef$curren = editorViewRef.current) === null || _editorViewRef$curren === void 0 ? void 0 : _editorViewRef$curren.dom);
28
32
  }
29
33
  return popupsTargetEl;
30
34
  };
@@ -34,7 +38,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
34
38
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
35
39
  checks: [new _experiences.ExperienceCheckTimeout({
36
40
  durationMs: TIMEOUT_DURATION
37
- }), syncedBlockAddedToDomCheck(refs)]
41
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
38
42
  });
39
43
  var createSourceBlockMenuExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
40
44
  action: _analytics.ACTION.SYNCED_BLOCK_CREATE,
@@ -42,7 +46,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
42
46
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
43
47
  checks: [new _experiences.ExperienceCheckTimeout({
44
48
  durationMs: TIMEOUT_DURATION
45
- }), syncedBlockAddedToDomCheck(refs)]
49
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
46
50
  });
47
51
  var createSourceQuickInsertMenuExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
48
52
  action: _analytics.ACTION.SYNCED_BLOCK_CREATE,
@@ -50,7 +54,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
50
54
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
51
55
  checks: [new _experiences.ExperienceCheckTimeout({
52
56
  durationMs: TIMEOUT_DURATION
53
- }), syncedBlockAddedToDomCheck(refs)]
57
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
54
58
  });
55
59
  var deleteReferenceSyncedBlockExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
56
60
  action: _analytics.ACTION.REFERENCE_SYNCED_BLOCK_DELETE,
@@ -58,7 +62,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
58
62
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
59
63
  checks: [new _experiences.ExperienceCheckTimeout({
60
64
  durationMs: TIMEOUT_DURATION
61
- }), referenceSyncBlockRemovedFromDomCheck(refs)]
65
+ }), referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef)]
62
66
  });
63
67
  var unsyncReferenceSyncedBlockExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
64
68
  action: _analytics.ACTION.REFERENCE_SYNCED_BLOCK_UNSYNC,
@@ -66,7 +70,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
66
70
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
67
71
  checks: [new _experiences.ExperienceCheckTimeout({
68
72
  durationMs: TIMEOUT_DURATION
69
- }), referenceSyncBlockRemovedFromDomCheck(refs)]
73
+ }), referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef)]
70
74
  });
71
75
  var unsyncSourceSyncedBlockExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
72
76
  action: _analytics.ACTION.SYNCED_BLOCK_UNSYNC,
@@ -74,7 +78,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
74
78
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
75
79
  checks: [new _experiences.ExperienceCheckTimeout({
76
80
  durationMs: TIMEOUT_DURATION
77
- }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
81
+ }), syncBlockDeleteConfirmationModalAddedCheck()]
78
82
  });
79
83
  var deleteSourceSyncedBlockExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
80
84
  action: _analytics.ACTION.SYNCED_BLOCK_DELETE,
@@ -82,7 +86,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
82
86
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
83
87
  checks: [new _experiences.ExperienceCheckTimeout({
84
88
  durationMs: TIMEOUT_DURATION
85
- }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
89
+ }), syncBlockDeleteConfirmationModalAddedCheck()]
86
90
  });
87
91
  var syncedLocationsExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
88
92
  action: _analytics.ACTION.SYNCED_BLOCK_VIEW_SYNCED_LOCATIONS,
@@ -90,7 +94,7 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
90
94
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
91
95
  checks: [new _experiences.ExperienceCheckTimeout({
92
96
  durationMs: TIMEOUT_DURATION
93
- }), syncedLocationsDropdownOpenedCheck(refs)]
97
+ }), syncedLocationsDropdownOpenedCheck()]
94
98
  });
95
99
  var unbindClickListener = (0, _bindEventListener.bind)(document, {
96
100
  type: 'click',
@@ -135,11 +139,11 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
135
139
  if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
136
140
  return;
137
141
  }
138
- var firstItem = typeaheadPopup.querySelector('[role="option"]');
139
- if (!firstItem || !(firstItem instanceof HTMLElement)) {
142
+ var targetElement = (0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
143
+ if (!targetElement || !(targetElement instanceof HTMLElement)) {
140
144
  return;
141
145
  }
142
- var testId = firstItem.dataset.testid;
146
+ var testId = targetElement.dataset.testid;
143
147
  if (testId === _types.SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
144
148
  createSourceQuickInsertMenuExperience.start();
145
149
  }
@@ -151,8 +155,8 @@ var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlu
151
155
  });
152
156
  return new _safePlugin.SafePlugin({
153
157
  key: pluginKey,
154
- view: function view(editorView) {
155
- editorViewEl = editorView.dom;
158
+ view: function view(_view) {
159
+ editorViewRef.current = _view;
156
160
  return {
157
161
  destroy: function destroy() {
158
162
  createSourcePrimaryToolbarExperience.abort({
@@ -266,7 +270,7 @@ var getTarget = function getTarget(containerElement) {
266
270
  }
267
271
  return targetEl;
268
272
  };
269
- var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs) {
273
+ var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs, editorViewRef) {
270
274
  return new _experiences.ExperienceCheckDomMutation({
271
275
  onDomMutation: function onDomMutation(_ref3) {
272
276
  var mutations = _ref3.mutations;
@@ -278,12 +282,19 @@ var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs) {
278
282
  return undefined;
279
283
  },
280
284
  observeConfig: function observeConfig() {
281
- return {
282
- target: getTarget(refs.containerElement),
285
+ var _editorViewRef$curren2;
286
+ return [{
287
+ target: (0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? editorViewRef === null || editorViewRef === void 0 || (_editorViewRef$curren2 = editorViewRef.current) === null || _editorViewRef$curren2 === void 0 ? void 0 : _editorViewRef$curren2.dom : getTarget(refs.containerElement),
283
288
  options: {
284
289
  childList: true
285
290
  }
286
- };
291
+ }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? [{
292
+ target: (0, _experiences.getSelectionAncestorDOM)(editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current),
293
+ options: {
294
+ childList: true,
295
+ subtree: true
296
+ }
297
+ }] : []));
287
298
  }
288
299
  });
289
300
  };
@@ -295,7 +306,7 @@ var isBodiedSyncBlockAddedInMutation = function isBodiedSyncBlockAddedInMutation
295
306
  var isBodiedSyncBlockWithinNode = function isBodiedSyncBlockWithinNode(node) {
296
307
  return (0, _experiences.getNodeQuery)('[data-prosemirror-node-name="bodiedSyncBlock"]')(node);
297
308
  };
298
- var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFromDomCheck(refs) {
309
+ var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef) {
299
310
  return new _experiences.ExperienceCheckDomMutation({
300
311
  onDomMutation: function onDomMutation(_ref5) {
301
312
  var mutations = _ref5.mutations;
@@ -307,12 +318,19 @@ var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFr
307
318
  return undefined;
308
319
  },
309
320
  observeConfig: function observeConfig() {
310
- return {
311
- target: getTarget(refs.containerElement),
321
+ var _editorViewRef$curren3;
322
+ return [{
323
+ target: (0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? editorViewRef === null || editorViewRef === void 0 || (_editorViewRef$curren3 = editorViewRef.current) === null || _editorViewRef$curren3 === void 0 ? void 0 : _editorViewRef$curren3.dom : getTarget(refs.containerElement),
312
324
  options: {
313
325
  childList: true
314
326
  }
315
- };
327
+ }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_synced_block_fix_experience_tracking') ? [{
328
+ target: (0, _experiences.getSelectionAncestorDOM)(editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current),
329
+ options: {
330
+ childList: true,
331
+ subtree: true
332
+ }
333
+ }] : []));
316
334
  }
317
335
  });
318
336
  };
@@ -324,7 +342,7 @@ var isSyncBlockRemovedInMutation = function isSyncBlockRemovedInMutation(_ref6)
324
342
  var isSyncBlockWithinNode = function isSyncBlockWithinNode(node) {
325
343
  return (0, _experiences.getNodeQuery)('[data-prosemirror-node-name="syncBlock"]')(node);
326
344
  };
327
- var syncBlockDeleteConfirmationModalAddedCheck = function syncBlockDeleteConfirmationModalAddedCheck(refs) {
345
+ var syncBlockDeleteConfirmationModalAddedCheck = function syncBlockDeleteConfirmationModalAddedCheck() {
328
346
  return new _experiences.ExperienceCheckDomMutation({
329
347
  onDomMutation: function onDomMutation(_ref7) {
330
348
  var mutations = _ref7.mutations;
@@ -354,7 +372,7 @@ var isDeleteConfirmationModalAddedInMutation = function isDeleteConfirmationModa
354
372
  var isDeleteConfirmationModalWithinNode = function isDeleteConfirmationModalWithinNode(node) {
355
373
  return (0, _experiences.getNodeQuery)('[data-testid="sync-block-delete-confirmation"]')(node);
356
374
  };
357
- var syncedLocationsDropdownOpenedCheck = function syncedLocationsDropdownOpenedCheck(refs) {
375
+ var syncedLocationsDropdownOpenedCheck = function syncedLocationsDropdownOpenedCheck() {
358
376
  return new _experiences.ExperienceCheckDomMutation({
359
377
  onDomMutation: function onDomMutation(_ref9) {
360
378
  var mutations = _ref9.mutations;
package/dist/es2019/pm-plugins/menu-and-toolbar-experiences.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { bind } from 'bind-event-listener';
2
2
  import { ACTION, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
3
- import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getNodeQuery, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
3
+ import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getNodeQuery, getPopupContainerFromEditorView, popupWithNestedElement, getSelectionAncestorDOM } from '@atlaskit/editor-common/experiences';
4
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
5
5
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
7
8
  const TIMEOUT_DURATION = 30000;
8
9
  const pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
@@ -14,10 +15,13 @@ export const getMenuAndToolbarExperiencesPlugin = ({
14
15
  dispatchAnalyticsEvent
15
16
  }) => {
16
17
  let popupsTargetEl;
17
- let editorViewEl;
18
+ const editorViewRef = {
19
+ current: undefined
20
+ };
18
21
  const getPopupsTarget = () => {
19
22
  if (!popupsTargetEl) {
20
- popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewEl);
23
+ var _editorViewRef$curren;
24
+ popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewRef === null || editorViewRef === void 0 ? void 0 : (_editorViewRef$curren = editorViewRef.current) === null || _editorViewRef$curren === void 0 ? void 0 : _editorViewRef$curren.dom);
21
25
  }
22
26
  return popupsTargetEl;
23
27
  };
@@ -27,7 +31,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
27
31
  dispatchAnalyticsEvent,
28
32
  checks: [new ExperienceCheckTimeout({
29
33
  durationMs: TIMEOUT_DURATION
30
- }), syncedBlockAddedToDomCheck(refs)]
34
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
31
35
  });
32
36
  const createSourceBlockMenuExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
33
37
  action: ACTION.SYNCED_BLOCK_CREATE,
@@ -35,7 +39,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
35
39
  dispatchAnalyticsEvent,
36
40
  checks: [new ExperienceCheckTimeout({
37
41
  durationMs: TIMEOUT_DURATION
38
- }), syncedBlockAddedToDomCheck(refs)]
42
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
39
43
  });
40
44
  const createSourceQuickInsertMenuExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
41
45
  action: ACTION.SYNCED_BLOCK_CREATE,
@@ -43,7 +47,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
43
47
  dispatchAnalyticsEvent,
44
48
  checks: [new ExperienceCheckTimeout({
45
49
  durationMs: TIMEOUT_DURATION
46
- }), syncedBlockAddedToDomCheck(refs)]
50
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
47
51
  });
48
52
  const deleteReferenceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
49
53
  action: ACTION.REFERENCE_SYNCED_BLOCK_DELETE,
@@ -51,7 +55,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
51
55
  dispatchAnalyticsEvent,
52
56
  checks: [new ExperienceCheckTimeout({
53
57
  durationMs: TIMEOUT_DURATION
54
- }), referenceSyncBlockRemovedFromDomCheck(refs)]
58
+ }), referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef)]
55
59
  });
56
60
  const unsyncReferenceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
57
61
  action: ACTION.REFERENCE_SYNCED_BLOCK_UNSYNC,
@@ -59,7 +63,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
59
63
  dispatchAnalyticsEvent,
60
64
  checks: [new ExperienceCheckTimeout({
61
65
  durationMs: TIMEOUT_DURATION
62
- }), referenceSyncBlockRemovedFromDomCheck(refs)]
66
+ }), referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef)]
63
67
  });
64
68
  const unsyncSourceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
65
69
  action: ACTION.SYNCED_BLOCK_UNSYNC,
@@ -67,7 +71,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
67
71
  dispatchAnalyticsEvent,
68
72
  checks: [new ExperienceCheckTimeout({
69
73
  durationMs: TIMEOUT_DURATION
70
- }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
74
+ }), syncBlockDeleteConfirmationModalAddedCheck()]
71
75
  });
72
76
  const deleteSourceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
73
77
  action: ACTION.SYNCED_BLOCK_DELETE,
@@ -75,7 +79,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
75
79
  dispatchAnalyticsEvent,
76
80
  checks: [new ExperienceCheckTimeout({
77
81
  durationMs: TIMEOUT_DURATION
78
- }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
82
+ }), syncBlockDeleteConfirmationModalAddedCheck()]
79
83
  });
80
84
  const syncedLocationsExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
81
85
  action: ACTION.SYNCED_BLOCK_VIEW_SYNCED_LOCATIONS,
@@ -83,7 +87,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
83
87
  dispatchAnalyticsEvent,
84
88
  checks: [new ExperienceCheckTimeout({
85
89
  durationMs: TIMEOUT_DURATION
86
- }), syncedLocationsDropdownOpenedCheck(refs)]
90
+ }), syncedLocationsDropdownOpenedCheck()]
87
91
  });
88
92
  const unbindClickListener = bind(document, {
89
93
  type: 'click',
@@ -128,11 +132,11 @@ export const getMenuAndToolbarExperiencesPlugin = ({
128
132
  if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
129
133
  return;
130
134
  }
131
- const firstItem = typeaheadPopup.querySelector('[role="option"]');
132
- if (!firstItem || !(firstItem instanceof HTMLElement)) {
135
+ const targetElement = fg('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
136
+ if (!targetElement || !(targetElement instanceof HTMLElement)) {
133
137
  return;
134
138
  }
135
- const testId = firstItem.dataset.testid;
139
+ const testId = targetElement.dataset.testid;
136
140
  if (testId === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
137
141
  createSourceQuickInsertMenuExperience.start();
138
142
  }
@@ -144,8 +148,8 @@ export const getMenuAndToolbarExperiencesPlugin = ({
144
148
  });
145
149
  return new SafePlugin({
146
150
  key: pluginKey,
147
- view: editorView => {
148
- editorViewEl = editorView.dom;
151
+ view: view => {
152
+ editorViewRef.current = view;
149
153
  return {
150
154
  destroy: () => {
151
155
  createSourcePrimaryToolbarExperience.abort({
@@ -260,7 +264,7 @@ const getTarget = containerElement => {
260
264
  }
261
265
  return targetEl;
262
266
  };
263
- const syncedBlockAddedToDomCheck = refs => new ExperienceCheckDomMutation({
267
+ const syncedBlockAddedToDomCheck = (refs, editorViewRef) => new ExperienceCheckDomMutation({
264
268
  onDomMutation: ({
265
269
  mutations
266
270
  }) => {
@@ -272,12 +276,22 @@ const syncedBlockAddedToDomCheck = refs => new ExperienceCheckDomMutation({
272
276
  return undefined;
273
277
  },
274
278
  observeConfig: () => {
275
- return {
276
- target: getTarget(refs.containerElement),
279
+ var _editorViewRef$curren2;
280
+ return [{
281
+ target: fg('platform_synced_block_fix_experience_tracking') ? editorViewRef === null || editorViewRef === void 0 ? void 0 : (_editorViewRef$curren2 = editorViewRef.current) === null || _editorViewRef$curren2 === void 0 ? void 0 : _editorViewRef$curren2.dom : getTarget(refs.containerElement),
277
282
  options: {
278
283
  childList: true
279
284
  }
280
- };
285
+ },
286
+ // When wrapping a node with breakout mark with sync block, breakout dom is reused
287
+ // hence we need to observe subtree to catch sync block mutation
288
+ ...(fg('platform_synced_block_fix_experience_tracking') ? [{
289
+ target: getSelectionAncestorDOM(editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current),
290
+ options: {
291
+ childList: true,
292
+ subtree: true
293
+ }
294
+ }] : [])];
281
295
  }
282
296
  });
283
297
  const isBodiedSyncBlockAddedInMutation = ({
@@ -287,7 +301,7 @@ const isBodiedSyncBlockAddedInMutation = ({
287
301
  return type === 'childList' && [...addedNodes].some(isBodiedSyncBlockWithinNode);
288
302
  };
289
303
  const isBodiedSyncBlockWithinNode = node => getNodeQuery('[data-prosemirror-node-name="bodiedSyncBlock"]')(node);
290
- const referenceSyncBlockRemovedFromDomCheck = refs => new ExperienceCheckDomMutation({
304
+ const referenceSyncBlockRemovedFromDomCheck = (refs, editorViewRef) => new ExperienceCheckDomMutation({
291
305
  onDomMutation: ({
292
306
  mutations
293
307
  }) => {
@@ -299,12 +313,19 @@ const referenceSyncBlockRemovedFromDomCheck = refs => new ExperienceCheckDomMuta
299
313
  return undefined;
300
314
  },
301
315
  observeConfig: () => {
302
- return {
303
- target: getTarget(refs.containerElement),
316
+ var _editorViewRef$curren3;
317
+ return [{
318
+ target: fg('platform_synced_block_fix_experience_tracking') ? editorViewRef === null || editorViewRef === void 0 ? void 0 : (_editorViewRef$curren3 = editorViewRef.current) === null || _editorViewRef$curren3 === void 0 ? void 0 : _editorViewRef$curren3.dom : getTarget(refs.containerElement),
304
319
  options: {
305
320
  childList: true
306
321
  }
307
- };
322
+ }, ...(fg('platform_synced_block_fix_experience_tracking') ? [{
323
+ target: getSelectionAncestorDOM(editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current),
324
+ options: {
325
+ childList: true,
326
+ subtree: true
327
+ }
328
+ }] : [])];
308
329
  }
309
330
  });
310
331
  const isSyncBlockRemovedInMutation = ({
@@ -314,7 +335,7 @@ const isSyncBlockRemovedInMutation = ({
314
335
  return type === 'childList' && [...removedNodes].some(isSyncBlockWithinNode);
315
336
  };
316
337
  const isSyncBlockWithinNode = node => getNodeQuery('[data-prosemirror-node-name="syncBlock"]')(node);
317
- const syncBlockDeleteConfirmationModalAddedCheck = refs => new ExperienceCheckDomMutation({
338
+ const syncBlockDeleteConfirmationModalAddedCheck = () => new ExperienceCheckDomMutation({
318
339
  onDomMutation: ({
319
340
  mutations
320
341
  }) => {
@@ -342,7 +363,7 @@ const isDeleteConfirmationModalAddedInMutation = ({
342
363
  return type === 'childList' && [...addedNodes].some(isDeleteConfirmationModalWithinNode);
343
364
  };
344
365
  const isDeleteConfirmationModalWithinNode = node => getNodeQuery('[data-testid="sync-block-delete-confirmation"]')(node);
345
- const syncedLocationsDropdownOpenedCheck = refs => new ExperienceCheckDomMutation({
366
+ const syncedLocationsDropdownOpenedCheck = () => new ExperienceCheckDomMutation({
346
367
  onDomMutation: ({
347
368
  mutations
348
369
  }) => {
package/dist/esm/pm-plugins/menu-and-toolbar-experiences.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import { bind } from 'bind-event-listener';
3
3
  import { ACTION, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
4
- import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getNodeQuery, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
4
+ import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getNodeQuery, getPopupContainerFromEditorView, popupWithNestedElement, getSelectionAncestorDOM } from '@atlaskit/editor-common/experiences';
5
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
6
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
8
9
  var TIMEOUT_DURATION = 30000;
9
10
  var pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
@@ -14,10 +15,13 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
14
15
  var refs = _ref.refs,
15
16
  dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
16
17
  var popupsTargetEl;
17
- var editorViewEl;
18
+ var editorViewRef = {
19
+ current: undefined
20
+ };
18
21
  var getPopupsTarget = function getPopupsTarget() {
19
22
  if (!popupsTargetEl) {
20
- popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewEl);
23
+ var _editorViewRef$curren;
24
+ popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewRef === null || editorViewRef === void 0 || (_editorViewRef$curren = editorViewRef.current) === null || _editorViewRef$curren === void 0 ? void 0 : _editorViewRef$curren.dom);
21
25
  }
22
26
  return popupsTargetEl;
23
27
  };
@@ -27,7 +31,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
27
31
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
28
32
  checks: [new ExperienceCheckTimeout({
29
33
  durationMs: TIMEOUT_DURATION
30
- }), syncedBlockAddedToDomCheck(refs)]
34
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
31
35
  });
32
36
  var createSourceBlockMenuExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
33
37
  action: ACTION.SYNCED_BLOCK_CREATE,
@@ -35,7 +39,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
35
39
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
36
40
  checks: [new ExperienceCheckTimeout({
37
41
  durationMs: TIMEOUT_DURATION
38
- }), syncedBlockAddedToDomCheck(refs)]
42
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
39
43
  });
40
44
  var createSourceQuickInsertMenuExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
41
45
  action: ACTION.SYNCED_BLOCK_CREATE,
@@ -43,7 +47,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
43
47
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
44
48
  checks: [new ExperienceCheckTimeout({
45
49
  durationMs: TIMEOUT_DURATION
46
- }), syncedBlockAddedToDomCheck(refs)]
50
+ }), syncedBlockAddedToDomCheck(refs, editorViewRef)]
47
51
  });
48
52
  var deleteReferenceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
49
53
  action: ACTION.REFERENCE_SYNCED_BLOCK_DELETE,
@@ -51,7 +55,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
51
55
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
52
56
  checks: [new ExperienceCheckTimeout({
53
57
  durationMs: TIMEOUT_DURATION
54
- }), referenceSyncBlockRemovedFromDomCheck(refs)]
58
+ }), referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef)]
55
59
  });
56
60
  var unsyncReferenceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
57
61
  action: ACTION.REFERENCE_SYNCED_BLOCK_UNSYNC,
@@ -59,7 +63,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
59
63
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
60
64
  checks: [new ExperienceCheckTimeout({
61
65
  durationMs: TIMEOUT_DURATION
62
- }), referenceSyncBlockRemovedFromDomCheck(refs)]
66
+ }), referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef)]
63
67
  });
64
68
  var unsyncSourceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
65
69
  action: ACTION.SYNCED_BLOCK_UNSYNC,
@@ -67,7 +71,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
67
71
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
68
72
  checks: [new ExperienceCheckTimeout({
69
73
  durationMs: TIMEOUT_DURATION
70
- }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
74
+ }), syncBlockDeleteConfirmationModalAddedCheck()]
71
75
  });
72
76
  var deleteSourceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
73
77
  action: ACTION.SYNCED_BLOCK_DELETE,
@@ -75,7 +79,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
75
79
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
76
80
  checks: [new ExperienceCheckTimeout({
77
81
  durationMs: TIMEOUT_DURATION
78
- }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
82
+ }), syncBlockDeleteConfirmationModalAddedCheck()]
79
83
  });
80
84
  var syncedLocationsExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
81
85
  action: ACTION.SYNCED_BLOCK_VIEW_SYNCED_LOCATIONS,
@@ -83,7 +87,7 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
83
87
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
84
88
  checks: [new ExperienceCheckTimeout({
85
89
  durationMs: TIMEOUT_DURATION
86
- }), syncedLocationsDropdownOpenedCheck(refs)]
90
+ }), syncedLocationsDropdownOpenedCheck()]
87
91
  });
88
92
  var unbindClickListener = bind(document, {
89
93
  type: 'click',
@@ -128,11 +132,11 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
128
132
  if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
129
133
  return;
130
134
  }
131
- var firstItem = typeaheadPopup.querySelector('[role="option"]');
132
- if (!firstItem || !(firstItem instanceof HTMLElement)) {
135
+ var targetElement = fg('platform_synced_block_fix_experience_tracking') ? typeaheadPopup.querySelector('[role="option"][aria-selected="true"]') : typeaheadPopup.querySelector('[role="option"]');
136
+ if (!targetElement || !(targetElement instanceof HTMLElement)) {
133
137
  return;
134
138
  }
135
- var testId = firstItem.dataset.testid;
139
+ var testId = targetElement.dataset.testid;
136
140
  if (testId === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
137
141
  createSourceQuickInsertMenuExperience.start();
138
142
  }
@@ -144,8 +148,8 @@ export var getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperi
144
148
  });
145
149
  return new SafePlugin({
146
150
  key: pluginKey,
147
- view: function view(editorView) {
148
- editorViewEl = editorView.dom;
151
+ view: function view(_view) {
152
+ editorViewRef.current = _view;
149
153
  return {
150
154
  destroy: function destroy() {
151
155
  createSourcePrimaryToolbarExperience.abort({
@@ -259,7 +263,7 @@ var getTarget = function getTarget(containerElement) {
259
263
  }
260
264
  return targetEl;
261
265
  };
262
- var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs) {
266
+ var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs, editorViewRef) {
263
267
  return new ExperienceCheckDomMutation({
264
268
  onDomMutation: function onDomMutation(_ref3) {
265
269
  var mutations = _ref3.mutations;
@@ -271,12 +275,19 @@ var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs) {
271
275
  return undefined;
272
276
  },
273
277
  observeConfig: function observeConfig() {
274
- return {
275
- target: getTarget(refs.containerElement),
278
+ var _editorViewRef$curren2;
279
+ return [{
280
+ target: fg('platform_synced_block_fix_experience_tracking') ? editorViewRef === null || editorViewRef === void 0 || (_editorViewRef$curren2 = editorViewRef.current) === null || _editorViewRef$curren2 === void 0 ? void 0 : _editorViewRef$curren2.dom : getTarget(refs.containerElement),
276
281
  options: {
277
282
  childList: true
278
283
  }
279
- };
284
+ }].concat(_toConsumableArray(fg('platform_synced_block_fix_experience_tracking') ? [{
285
+ target: getSelectionAncestorDOM(editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current),
286
+ options: {
287
+ childList: true,
288
+ subtree: true
289
+ }
290
+ }] : []));
280
291
  }
281
292
  });
282
293
  };
@@ -288,7 +299,7 @@ var isBodiedSyncBlockAddedInMutation = function isBodiedSyncBlockAddedInMutation
288
299
  var isBodiedSyncBlockWithinNode = function isBodiedSyncBlockWithinNode(node) {
289
300
  return getNodeQuery('[data-prosemirror-node-name="bodiedSyncBlock"]')(node);
290
301
  };
291
- var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFromDomCheck(refs) {
302
+ var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFromDomCheck(refs, editorViewRef) {
292
303
  return new ExperienceCheckDomMutation({
293
304
  onDomMutation: function onDomMutation(_ref5) {
294
305
  var mutations = _ref5.mutations;
@@ -300,12 +311,19 @@ var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFr
300
311
  return undefined;
301
312
  },
302
313
  observeConfig: function observeConfig() {
303
- return {
304
- target: getTarget(refs.containerElement),
314
+ var _editorViewRef$curren3;
315
+ return [{
316
+ target: fg('platform_synced_block_fix_experience_tracking') ? editorViewRef === null || editorViewRef === void 0 || (_editorViewRef$curren3 = editorViewRef.current) === null || _editorViewRef$curren3 === void 0 ? void 0 : _editorViewRef$curren3.dom : getTarget(refs.containerElement),
305
317
  options: {
306
318
  childList: true
307
319
  }
308
- };
320
+ }].concat(_toConsumableArray(fg('platform_synced_block_fix_experience_tracking') ? [{
321
+ target: getSelectionAncestorDOM(editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current),
322
+ options: {
323
+ childList: true,
324
+ subtree: true
325
+ }
326
+ }] : []));
309
327
  }
310
328
  });
311
329
  };
@@ -317,7 +335,7 @@ var isSyncBlockRemovedInMutation = function isSyncBlockRemovedInMutation(_ref6)
317
335
  var isSyncBlockWithinNode = function isSyncBlockWithinNode(node) {
318
336
  return getNodeQuery('[data-prosemirror-node-name="syncBlock"]')(node);
319
337
  };
320
- var syncBlockDeleteConfirmationModalAddedCheck = function syncBlockDeleteConfirmationModalAddedCheck(refs) {
338
+ var syncBlockDeleteConfirmationModalAddedCheck = function syncBlockDeleteConfirmationModalAddedCheck() {
321
339
  return new ExperienceCheckDomMutation({
322
340
  onDomMutation: function onDomMutation(_ref7) {
323
341
  var mutations = _ref7.mutations;
@@ -347,7 +365,7 @@ var isDeleteConfirmationModalAddedInMutation = function isDeleteConfirmationModa
347
365
  var isDeleteConfirmationModalWithinNode = function isDeleteConfirmationModalWithinNode(node) {
348
366
  return getNodeQuery('[data-testid="sync-block-delete-confirmation"]')(node);
349
367
  };
350
- var syncedLocationsDropdownOpenedCheck = function syncedLocationsDropdownOpenedCheck(refs) {
368
+ var syncedLocationsDropdownOpenedCheck = function syncedLocationsDropdownOpenedCheck() {
351
369
  return new ExperienceCheckDomMutation({
352
370
  onDomMutation: function onDomMutation(_ref9) {
353
371
  var mutations = _ref9.mutations;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-synced-block",
3
- "version": "6.0.11",
3
+ "version": "6.0.13",
4
4
  "description": "SyncedBlock plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,7 +28,7 @@
28
28
  "sideEffects": false,
29
29
  "atlaskit:src": "src/index.ts",
30
30
  "dependencies": {
31
- "@atlaskit/adf-schema": "^52.3.0",
31
+ "@atlaskit/adf-schema": "^52.4.0",
32
32
  "@atlaskit/button": "23.10.3",
33
33
  "@atlaskit/dropdown-menu": "16.7.1",
34
34
  "@atlaskit/editor-json-transformer": "^8.31.0",
@@ -43,10 +43,10 @@
43
43
  "@atlaskit/editor-plugin-user-intent": "^6.0.0",
44
44
  "@atlaskit/editor-prosemirror": "^7.3.0",
45
45
  "@atlaskit/editor-shared-styles": "^3.10.0",
46
- "@atlaskit/editor-synced-block-provider": "^4.0.0",
46
+ "@atlaskit/editor-synced-block-provider": "^4.1.0",
47
47
  "@atlaskit/editor-toolbar": "^0.20.0",
48
48
  "@atlaskit/flag": "^17.8.0",
49
- "@atlaskit/icon": "33.0.0",
49
+ "@atlaskit/icon": "33.0.1",
50
50
  "@atlaskit/icon-lab": "^6.0.0",
51
51
  "@atlaskit/logo": "^19.10.0",
52
52
  "@atlaskit/lozenge": "^13.5.0",
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/platform-feature-flags": "^1.1.0",
55
55
  "@atlaskit/primitives": "^18.0.0",
56
56
  "@atlaskit/spinner": "19.0.11",
57
- "@atlaskit/tmp-editor-statsig": "^40.3.0",
57
+ "@atlaskit/tmp-editor-statsig": "^40.5.0",
58
58
  "@atlaskit/tokens": "11.1.1",
59
59
  "@atlaskit/tooltip": "^20.14.0",
60
60
  "@atlaskit/visually-hidden": "^3.0.0",
@@ -65,7 +65,7 @@
65
65
  "react-intl-next": "npm:react-intl@^5.18.1"
66
66
  },
67
67
  "peerDependencies": {
68
- "@atlaskit/editor-common": "^112.4.0",
68
+ "@atlaskit/editor-common": "^112.5.0",
69
69
  "react": "^18.2.0"
70
70
  },
71
71
  "devDependencies": {
@@ -116,6 +116,9 @@
116
116
  },
117
117
  "confluence_fronend_labels_categorization_migration": {
118
118
  "type": "boolean"
119
+ },
120
+ "platform_synced_block_fix_experience_tracking": {
121
+ "type": "boolean"
119
122
  }
120
123
  }
121
124
  }