@atlaskit/editor-common 84.5.1 → 85.1.0

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 (84) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/cjs/analytics/types/enums.js +2 -0
  3. package/dist/cjs/extensibility/extensionNodeView.js +1 -2
  4. package/dist/cjs/keymaps/index.js +3 -2
  5. package/dist/cjs/keymaps/keymap.js +25 -43
  6. package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js +34 -9
  7. package/dist/cjs/link/ConfigureLinkOverlay/index.js +15 -5
  8. package/dist/cjs/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +46 -0
  9. package/dist/cjs/monitoring/error.js +1 -1
  10. package/dist/cjs/react-node-view/getInlineNodeViewProducer.js +2 -4
  11. package/dist/cjs/react-node-view/index.js +4 -10
  12. package/dist/cjs/selection-based-node-view/SelectionBasedNodeView.js +2 -5
  13. package/dist/cjs/ui/DropList/index.js +1 -1
  14. package/dist/cjs/ui-color/ColorPalette/Color/index.js +11 -0
  15. package/dist/cjs/ui-color/ColorPalette/index.js +2 -0
  16. package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +18 -5
  17. package/dist/cjs/ui-menu/DropdownMenu/index.js +33 -11
  18. package/dist/es2019/analytics/types/enums.js +2 -0
  19. package/dist/es2019/extensibility/extensionNodeView.js +1 -2
  20. package/dist/es2019/keymaps/index.js +1 -0
  21. package/dist/es2019/keymaps/keymap.js +25 -43
  22. package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js +33 -7
  23. package/dist/es2019/link/ConfigureLinkOverlay/index.js +16 -5
  24. package/dist/es2019/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +39 -0
  25. package/dist/es2019/monitoring/error.js +1 -1
  26. package/dist/es2019/react-node-view/getInlineNodeViewProducer.js +2 -4
  27. package/dist/es2019/react-node-view/index.js +5 -7
  28. package/dist/es2019/selection-based-node-view/SelectionBasedNodeView.js +3 -2
  29. package/dist/es2019/ui/DropList/index.js +1 -1
  30. package/dist/es2019/ui-color/ColorPalette/Color/index.js +13 -0
  31. package/dist/es2019/ui-color/ColorPalette/index.js +2 -0
  32. package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +19 -6
  33. package/dist/es2019/ui-menu/DropdownMenu/index.js +34 -12
  34. package/dist/esm/analytics/types/enums.js +2 -0
  35. package/dist/esm/extensibility/extensionNodeView.js +1 -2
  36. package/dist/esm/keymaps/index.js +1 -0
  37. package/dist/esm/keymaps/keymap.js +25 -43
  38. package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js +34 -9
  39. package/dist/esm/link/ConfigureLinkOverlay/index.js +15 -5
  40. package/dist/esm/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +40 -0
  41. package/dist/esm/monitoring/error.js +1 -1
  42. package/dist/esm/react-node-view/getInlineNodeViewProducer.js +2 -4
  43. package/dist/esm/react-node-view/index.js +4 -10
  44. package/dist/esm/selection-based-node-view/SelectionBasedNodeView.js +3 -5
  45. package/dist/esm/ui/DropList/index.js +1 -1
  46. package/dist/esm/ui-color/ColorPalette/Color/index.js +11 -0
  47. package/dist/esm/ui-color/ColorPalette/index.js +2 -0
  48. package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +19 -6
  49. package/dist/esm/ui-menu/DropdownMenu/index.js +34 -12
  50. package/dist/types/analytics/types/enums.d.ts +3 -1
  51. package/dist/types/extensibility/extensionNodeView.d.ts +1 -2
  52. package/dist/types/keymaps/index.d.ts +1 -0
  53. package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts +5 -4
  54. package/dist/types/link/ConfigureLinkOverlay/index.d.ts +2 -2
  55. package/dist/types/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts +5 -0
  56. package/dist/types/react-node-view/index.d.ts +2 -5
  57. package/dist/types/selection-based-node-view/SelectionBasedNodeView.d.ts +1 -2
  58. package/dist/types/types/plugin-factory.d.ts +1 -2
  59. package/dist/types/ui-color/ColorPalette/Color/index.d.ts +2 -1
  60. package/dist/types/ui-color/ColorPalette/index.d.ts +1 -0
  61. package/dist/types/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts +1 -1
  62. package/dist/types/ui-menu/ArrowKeyNavigationProvider/types.d.ts +1 -0
  63. package/dist/types/ui-menu/DropdownMenu/types.d.ts +4 -1
  64. package/dist/types-ts4.5/analytics/types/enums.d.ts +3 -1
  65. package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts +1 -2
  66. package/dist/types-ts4.5/keymaps/index.d.ts +1 -0
  67. package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts +5 -4
  68. package/dist/types-ts4.5/link/ConfigureLinkOverlay/index.d.ts +2 -2
  69. package/dist/types-ts4.5/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts +5 -0
  70. package/dist/types-ts4.5/react-node-view/index.d.ts +2 -5
  71. package/dist/types-ts4.5/selection-based-node-view/SelectionBasedNodeView.d.ts +1 -2
  72. package/dist/types-ts4.5/types/plugin-factory.d.ts +1 -2
  73. package/dist/types-ts4.5/ui-color/ColorPalette/Color/index.d.ts +2 -1
  74. package/dist/types-ts4.5/ui-color/ColorPalette/index.d.ts +1 -0
  75. package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts +1 -1
  76. package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/types.d.ts +1 -0
  77. package/dist/types-ts4.5/ui-menu/DropdownMenu/types.d.ts +4 -1
  78. package/package.json +4 -6
  79. package/dist/cjs/ui/PortalProvider/index.js +0 -235
  80. package/dist/es2019/ui/PortalProvider/index.js +0 -171
  81. package/dist/esm/ui/PortalProvider/index.js +0 -229
  82. package/dist/types/ui/PortalProvider/index.d.ts +0 -48
  83. package/dist/types-ts4.5/ui/PortalProvider/index.d.ts +0 -48
  84. package/portal-provider/package.json +0 -15
@@ -6,7 +6,7 @@ import React, { PureComponent, useContext } from 'react';
6
6
  import { css, jsx } from '@emotion/react';
7
7
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
8
8
  import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
9
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { B100, N70, N900 } from '@atlaskit/theme/colors';
11
11
  import Tooltip from '@atlaskit/tooltip';
12
12
  import { DropdownMenuSharedCssClassName } from '../../styles';
@@ -106,7 +106,7 @@ export default class DropdownMenuWrapper extends PureComponent {
106
106
  _defineProperty(this, "handleCloseAndFocus", event => {
107
107
  var _this$state$target, _this$state$target$qu;
108
108
  (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
109
- if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
109
+ if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
110
110
  this.handleClose(event);
111
111
  } else {
112
112
  this.handleClose();
@@ -117,7 +117,7 @@ export default class DropdownMenuWrapper extends PureComponent {
117
117
  onOpenChange
118
118
  } = this.props;
119
119
  if (onOpenChange) {
120
- if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
120
+ if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
121
121
  onOpenChange({
122
122
  isOpen: false,
123
123
  event: event
@@ -149,7 +149,8 @@ export default class DropdownMenuWrapper extends PureComponent {
149
149
  onItemActivated,
150
150
  arrowKeyNavigationProviderOptions,
151
151
  section,
152
- isAllowEnterDefaultBehavior
152
+ allowEnterDefaultBehavior,
153
+ handleEscapeKeydown
153
154
  } = this.props;
154
155
  // Note that this onSelection function can't be refactored to useMemo for
155
156
  // performance gains as it is being used as a dependency in a useEffect in
@@ -192,10 +193,10 @@ export default class DropdownMenuWrapper extends PureComponent {
192
193
  shouldFitContainer: true,
193
194
  isTriggerNotTabbable: true,
194
195
  handleClickOutside: this.handleClose,
195
- handleEscapeKeydown: this.handleCloseAndFocus,
196
+ handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
196
197
  handleEnterKeydown: e => {
197
- if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
198
- if (!isAllowEnterDefaultBehavior) {
198
+ if (fg('platform.editor.a11y-table-context-menu_y4c9c') || fg('platform-editor-a11y-image-border-options-dropdown')) {
199
+ if (!allowEnterDefaultBehavior) {
199
200
  e.preventDefault();
200
201
  }
201
202
  } else {
@@ -253,7 +254,7 @@ export default class DropdownMenuWrapper extends PureComponent {
253
254
  key: 'ArrowDown',
254
255
  bubbles: true
255
256
  });
256
- if (mountTo && getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
257
+ if (mountTo && fg('platform.editor.a11y-main-toolbar-navigation_osrty')) {
257
258
  mountTo.dispatchEvent(keyboardEvent);
258
259
  return;
259
260
  }
@@ -302,15 +303,36 @@ export function DropdownMenuItem({
302
303
  const _handleSubmenuActive = event => {
303
304
  setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`)));
304
305
  };
306
+ let ariaLabel;
307
+ if (fg('platform-editor-a11y-image-border-options-dropdown')) {
308
+ ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
309
+ } else {
310
+ ariaLabel = item['aria-label'] || String(item.content);
311
+ }
312
+ let testId;
313
+ if (fg('platform-editor-a11y-image-border-options-dropdown')) {
314
+ testId = item['data-testid'] || `dropdown-item__${item.content}`;
315
+ } else {
316
+ testId = `dropdown-item__${String(item.content)}`;
317
+ }
318
+
319
+ // From time to time we don't want to have any tabIndex on item wrapper
320
+ // especially when we pass any interactive element as a item.content
321
+ let tabIndex;
322
+ if (fg('platform-editor-a11y-image-border-options-dropdown')) {
323
+ tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
324
+ } else {
325
+ tabIndex = -1;
326
+ }
305
327
  const dropListItem = jsx("div", {
306
328
  css: () => buttonStyles(item.isActive, submenuActive),
307
- tabIndex: -1,
329
+ tabIndex: tabIndex,
308
330
  "aria-disabled": item.isDisabled ? 'true' : 'false',
309
331
  onMouseDown: _handleSubmenuActive
310
332
  }, jsx(CustomItem, {
311
333
  item: item,
312
334
  key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
313
- testId: `dropdown-item__${String(item.content)}`,
335
+ testId: testId,
314
336
  role: shouldUseDefaultRole ? 'button' : 'menuitem',
315
337
  iconBefore: item.elemBefore,
316
338
  iconAfter: item.elemAfter,
@@ -318,7 +340,7 @@ export function DropdownMenuItem({
318
340
  onClick: () => onItemActivated && onItemActivated({
319
341
  item
320
342
  }),
321
- "aria-label": item['aria-label'] || String(item.content),
343
+ "aria-label": ariaLabel,
322
344
  "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
323
345
  "aria-keyshortcuts": item['aria-keyshortcuts'],
324
346
  onMouseDown: e => {
@@ -331,7 +353,7 @@ export function DropdownMenuItem({
331
353
  onMouseLeave: () => onMouseLeave && onMouseLeave({
332
354
  item
333
355
  }),
334
- "aria-expanded": getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
356
+ "aria-expanded": fg('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
335
357
  }, item.content));
336
358
  if (item.tooltipDescription) {
337
359
  var _item$key3;
@@ -235,6 +235,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
235
235
  ACTION_SUBJECT["DRAG"] = "drag";
236
236
  ACTION_SUBJECT["ELEMENT"] = "element";
237
237
  ACTION_SUBJECT["CONTEXT_MENU"] = "contextMenu";
238
+ ACTION_SUBJECT["INLINE_DIALOG"] = "inlineDialog";
238
239
  return ACTION_SUBJECT;
239
240
  }({});
240
241
  export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
@@ -349,6 +350,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
349
350
  ACTION_SUBJECT_ID["SAVE"] = "save";
350
351
  ACTION_SUBJECT_ID["SECTION"] = "section";
351
352
  ACTION_SUBJECT_ID["SMART_LINK"] = "smartLink";
353
+ ACTION_SUBJECT_ID["SMART_LINK_TOOLBAR"] = "smartLinkToolbar";
352
354
  ACTION_SUBJECT_ID["STATUS"] = "status";
353
355
  ACTION_SUBJECT_ID["SYMBOL"] = "symbol";
354
356
  ACTION_SUBJECT_ID["TABLE"] = "table";
@@ -74,13 +74,12 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
74
74
  }(ReactNodeView);
75
75
  export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags) {
76
76
  return function (node, view, getPos) {
77
- var hasIntlContext = true;
78
77
  return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
79
78
  providerFactory: providerFactory,
80
79
  extensionHandlers: extensionHandlers,
81
80
  extensionNodeViewOptions: extensionNodeViewOptions,
82
81
  pluginInjectionApi: pluginInjectionApi,
83
82
  macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
84
- }, undefined, undefined, undefined, hasIntlContext).init();
83
+ }).init();
85
84
  };
86
85
  }
@@ -99,6 +99,7 @@ export var toggleHighlightPalette = makeKeyMapWithCommon('Toggle Highlight Palet
99
99
  export var focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context menu trigger', 'Shift-F10');
100
100
  export var dragToMoveUp = makeKeyMapWithCommon('Move node up in the document', 'Ctrl-Alt-Shift-ArrowUp');
101
101
  export var dragToMoveDown = makeKeyMapWithCommon('Move node down in the document', 'Ctrl-Alt-Shift-ArrowDown');
102
+ export var showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Alt-Shift-a');
102
103
  var arrowKeysMap = {
103
104
  // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
104
105
  ARROWLEFT: "\u2190",
@@ -1,6 +1,5 @@
1
1
  import { base, keyName } from 'w3c-keyname';
2
2
  import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
3
  import { SafePlugin } from '../safe-plugin';
5
4
 
6
5
  /**
@@ -14,52 +13,35 @@ export function keymap(bindings) {
14
13
  return new SafePlugin({
15
14
  props: {
16
15
  handleKeyDown: function handleKeyDown(view, event) {
17
- if (getBooleanFF('platform.editor.text-alignment-keyboard-shortcuts')) {
18
- var name = keyName(event);
19
- var keyboardEvent = event;
16
+ var name = keyName(event);
17
+ var keyboardEvent = event;
20
18
 
21
- // We will try to bypass the keycode only if any of mod keys are pressed,
22
- // to allow users to use non-latin and Dead characters.
23
- var isModKeyPressed = event.ctrlKey || event.metaKey;
19
+ // We will try to bypass the keycode only if any of mod keys are pressed,
20
+ // to allow users to use non-latin and Dead characters.
21
+ var isModKeyPressed = event.ctrlKey || event.metaKey;
24
22
 
25
- // Check the unicode of the character to assert that it's not an ASCII character.
26
- // These are characters outside latin's range.
27
- var isNonLatinKey = name.length === 1 && /[^\u0000-\u007f]/.test(name);
23
+ // Check the unicode of the character to assert that it's not an ASCII character.
24
+ // These are characters outside latin's range.
25
+ var isNonLatinKey = name.length === 1 && /[^\u0000-\u007f]/.test(name);
28
26
 
29
- // The `Dead` key is a key that combines with a following key to produce a combined character.
30
- // It will have `even.key === 'Dead'` in some browsers but the `keyCode` will be the same as in a qwerty-keyboard.
31
- // See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key and https://en.wikipedia.org/wiki/Dead_key
32
- var isDeadKey = name === 'Dead';
33
- if (isModKeyPressed && (isNonLatinKey || isDeadKey)) {
34
- keyboardEvent = new KeyboardEvent(event.type, {
35
- // FIXME: The event.keyCode is deprecated (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode),
36
- // and could be removed in any time, but the w3c-keyname library doesn't provide a way to get
37
- // a key by event.code.
38
- key: base[event.keyCode],
39
- code: event.code,
40
- ctrlKey: event.ctrlKey,
41
- altKey: event.altKey,
42
- metaKey: event.metaKey,
43
- shiftKey: event.shiftKey
44
- });
45
- }
46
- return keydownHandler(bindings)(view, keyboardEvent);
47
- } else {
48
- var _name = keyName(event);
49
- var _keyboardEvent = event;
50
- if (event.ctrlKey && _name.length === 1 &&
51
- // Check the unicode of the character to
52
- // assert that its not an ASCII character.
53
- // These are characters outside Latin's range.
54
- /[^\u0000-\u007f]/.test(_name)) {
55
- _keyboardEvent = new KeyboardEvent('keydown', {
56
- key: base[event.keyCode],
57
- code: event.code,
58
- ctrlKey: true
59
- });
60
- }
61
- return keydownHandler(bindings)(view, _keyboardEvent);
27
+ // The `Dead` key is a key that combines with a following key to produce a combined character.
28
+ // It will have `even.key === 'Dead'` in some browsers but the `keyCode` will be the same as in a qwerty-keyboard.
29
+ // See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key and https://en.wikipedia.org/wiki/Dead_key
30
+ var isDeadKey = name === 'Dead';
31
+ if (isModKeyPressed && (isNonLatinKey || isDeadKey)) {
32
+ keyboardEvent = new KeyboardEvent(event.type, {
33
+ // FIXME: The event.keyCode is deprecated (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode),
34
+ // and could be removed in any time, but the w3c-keyname library doesn't provide a way to get
35
+ // a key by event.code.
36
+ key: base[event.keyCode],
37
+ code: event.code,
38
+ ctrlKey: event.ctrlKey,
39
+ altKey: event.altKey,
40
+ metaKey: event.metaKey,
41
+ shiftKey: event.shiftKey
42
+ });
62
43
  }
44
+ return keydownHandler(bindings)(view, keyboardEvent);
63
45
  }
64
46
  }
65
47
  });
@@ -1,32 +1,49 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["triggerRef"];
3
+ var _excluded = ["onClick", "triggerRef"];
4
4
  /** @jsx jsx */
5
5
  import { useCallback } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { jsx } from '@emotion/react';
9
9
  import { useIntl } from 'react-intl-next';
10
+ import { withAnalyticsContext } from '@atlaskit/analytics-next';
10
11
  import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
11
12
  import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
12
13
  import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
13
14
  import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
14
15
  import { cardMessages as messages } from '../../messages';
15
16
  import { StyledButton } from './StyledButton';
17
+ import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
18
+ var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
16
19
  var Dropdown = function Dropdown(_ref) {
17
- var testId = _ref.testId,
18
- onDropdownChange = _ref.onDropdownChange;
20
+ var onDropdownChange = _ref.onDropdownChange,
21
+ testId = _ref.testId;
19
22
  var _useIntl = useIntl(),
20
23
  formatMessage = _useIntl.formatMessage;
21
24
  var configureLinkLabel = formatMessage(messages.inlineConfigureLink);
22
25
  var goToLinkLabel = formatMessage(messages.inlineGoToLink);
26
+ var _useLinkOverlayAnalyt = useLinkOverlayAnalyticsEvents(),
27
+ fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent,
28
+ fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent,
29
+ fireToolbarViewEvent = _useLinkOverlayAnalyt.fireToolbarViewEvent;
23
30
  var onOpenChange = useCallback(function (_ref2) {
24
31
  var isOpen = _ref2.isOpen;
25
32
  onDropdownChange === null || onDropdownChange === void 0 || onDropdownChange(isOpen);
26
- }, [onDropdownChange]);
33
+ if (isOpen) {
34
+ fireToolbarViewEvent();
35
+ }
36
+ }, [fireToolbarViewEvent, onDropdownChange]);
37
+ var onGoToLinkClick = useCallback(function () {
38
+ fireActionClickEvent('goToLink');
39
+ }, [fireActionClickEvent]);
40
+ var onConfigureClick = useCallback(function () {
41
+ fireActionClickEvent('configureLink');
42
+ }, [fireActionClickEvent]);
27
43
  return jsx(DropdownMenu, {
28
44
  trigger: function trigger(_ref3) {
29
- var triggerRef = _ref3.triggerRef,
45
+ var _onClick = _ref3.onClick,
46
+ triggerRef = _ref3.triggerRef,
30
47
  props = _objectWithoutProperties(_ref3, _excluded);
31
48
  return jsx(StyledButton, _extends({
32
49
  innerRef: triggerRef
@@ -34,7 +51,11 @@ var Dropdown = function Dropdown(_ref) {
34
51
  iconBefore: jsx(ChevronDownIcon, {
35
52
  label: configureLinkLabel,
36
53
  size: 'small'
37
- })
54
+ }),
55
+ onClick: function onClick(e) {
56
+ _onClick === null || _onClick === void 0 || _onClick(e);
57
+ fireLinkClickEvent();
58
+ }
38
59
  }));
39
60
  },
40
61
  testId: "".concat(testId, "-dropdown"),
@@ -43,12 +64,16 @@ var Dropdown = function Dropdown(_ref) {
43
64
  elemBefore: jsx(ShortcutIcon, {
44
65
  label: goToLinkLabel,
45
66
  size: 'medium'
46
- })
67
+ }),
68
+ onClick: onGoToLinkClick
47
69
  }, goToLinkLabel), jsx(DropdownItem, {
48
70
  elemBefore: jsx(PreferencesIcon, {
49
71
  label: configureLinkLabel,
50
72
  size: 'medium'
51
- })
73
+ }),
74
+ onClick: onConfigureClick
52
75
  }, configureLinkLabel)));
53
76
  };
54
- export default Dropdown;
77
+ export default withAnalyticsContext({
78
+ source: SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE
79
+ })(Dropdown);
@@ -5,6 +5,7 @@ import { useCallback, useLayoutEffect, useState } from 'react';
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import { css, jsx } from '@emotion/react';
7
7
  import { useIntl } from 'react-intl-next';
8
+ import { withAnalyticsContext } from '@atlaskit/analytics-next';
8
9
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
9
10
  import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
10
11
  import { N0 } from '@atlaskit/theme/colors';
@@ -13,6 +14,7 @@ import Tooltip from '@atlaskit/tooltip';
13
14
  import { cardMessages } from '../../messages';
14
15
  import Dropdown from './Dropdown';
15
16
  import { StyledButton } from './StyledButton';
17
+ import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
16
18
  var buttonWrapperStyles = css({
17
19
  position: 'absolute',
18
20
  zIndex: layers.card(),
@@ -23,7 +25,7 @@ var buttonWrapperStyles = css({
23
25
  borderRadius: "var(--ds-border-radius, 3px)"
24
26
  });
25
27
  var showDropdownThresholdPx = 50;
26
- export var OverlayButton = function OverlayButton(_ref) {
28
+ export var OverlayButton = withAnalyticsContext()(function (_ref) {
27
29
  var _docNode$nodeSize;
28
30
  var editorView = _ref.editorView,
29
31
  _ref$testId = _ref.testId,
@@ -38,6 +40,9 @@ export var OverlayButton = function OverlayButton(_ref) {
38
40
  _useState2 = _slicedToArray(_useState, 2),
39
41
  showDropdown = _useState2[0],
40
42
  setShowDropdown = _useState2[1];
43
+ var _useLinkOverlayAnalyt = useLinkOverlayAnalyticsEvents(),
44
+ fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent,
45
+ fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent;
41
46
  useLayoutEffect(function () {
42
47
  var _domNode;
43
48
  var domNode = editorView.nodeDOM(targetElementPos);
@@ -55,7 +60,7 @@ export var OverlayButton = function OverlayButton(_ref) {
55
60
  var docNode = editorView.state.doc.nodeAt(targetElementPos);
56
61
  var nodeEnd = targetElementPos + ((_docNode$nodeSize = docNode === null || docNode === void 0 ? void 0 : docNode.nodeSize) !== null && _docNode$nodeSize !== void 0 ? _docNode$nodeSize : 0);
57
62
  var isText = docNode === null || docNode === void 0 ? void 0 : docNode.isText;
58
- var handleClick = useCallback(function () {
63
+ var handleConfigureClick = useCallback(function () {
59
64
  var tr = editorView.state.tr;
60
65
  if (isText) {
61
66
  tr.setSelection(TextSelection.create(tr.doc, targetElementPos, Math.min(nodeEnd, tr.doc.nodeSize)));
@@ -63,7 +68,12 @@ export var OverlayButton = function OverlayButton(_ref) {
63
68
  tr.setSelection(NodeSelection.create(tr.doc, targetElementPos));
64
69
  }
65
70
  editorView.dispatch(tr);
66
- }, [isText, editorView, nodeEnd, targetElementPos]);
71
+ }, [editorView, isText, targetElementPos, nodeEnd]);
72
+ var handleConfigureClickWithAnalytics = useCallback(function () {
73
+ fireLinkClickEvent();
74
+ fireActionClickEvent('configureLink');
75
+ handleConfigureClick();
76
+ }, [fireActionClickEvent, fireLinkClickEvent, handleConfigureClick]);
67
77
  var _editorView$state$sel = editorView.state.selection,
68
78
  from = _editorView$state$sel.from,
69
79
  to = _editorView$state$sel.to;
@@ -82,11 +92,11 @@ export var OverlayButton = function OverlayButton(_ref) {
82
92
  hideTooltipOnClick: true,
83
93
  testId: "".concat(testId, "-tooltip")
84
94
  }, jsx(StyledButton, {
85
- onClick: handleClick,
95
+ onClick: handleConfigureClickWithAnalytics,
86
96
  iconBefore: jsx(PreferencesIcon, {
87
97
  label: configureLinkLabel,
88
98
  size: "small",
89
99
  testId: "".concat(testId, "-configure-icon")
90
100
  })
91
101
  })));
92
- };
102
+ });
@@ -0,0 +1,40 @@
1
+ import { useMemo } from 'react';
2
+ import { FabricChannel } from '@atlaskit/analytics-listeners';
3
+ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
4
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
5
+ export var useLinkOverlayAnalyticsEvents = function useLinkOverlayAnalyticsEvents() {
6
+ var _useAnalyticsEvents = useAnalyticsEvents(),
7
+ createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
8
+ return useMemo(function () {
9
+ return {
10
+ fireActionClickEvent: function fireActionClickEvent(linkAction) {
11
+ createAnalyticsEvent({
12
+ action: ACTION.CLICKED,
13
+ actionSubject: ACTION_SUBJECT.BUTTON,
14
+ eventType: EVENT_TYPE.UI,
15
+ attributes: {
16
+ action: linkAction
17
+ }
18
+ }).fire(FabricChannel.media);
19
+ },
20
+ fireLinkClickEvent: function fireLinkClickEvent() {
21
+ createAnalyticsEvent({
22
+ action: ACTION.CLICKED,
23
+ actionSubject: ACTION_SUBJECT.LINK,
24
+ eventType: EVENT_TYPE.UI
25
+ }).fire(FabricChannel.media);
26
+ },
27
+ fireToolbarViewEvent: function fireToolbarViewEvent() {
28
+ createAnalyticsEvent({
29
+ action: ACTION.VIEWED,
30
+ actionSubject: ACTION_SUBJECT.INLINE_DIALOG,
31
+ actionSubjectId: ACTION_SUBJECT_ID.SMART_LINK_TOOLBAR,
32
+ eventType: EVENT_TYPE.SCREEN,
33
+ attributes: {
34
+ linkType: 'smallLink'
35
+ }
36
+ }).fire(FabricChannel.media);
37
+ }
38
+ };
39
+ }, [createAnalyticsEvent]);
40
+ };
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import { isFedRamp } from './environment';
8
8
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
9
9
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
10
- var packageVersion = "84.5.1";
10
+ var packageVersion = "85.1.0";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // TODO: Sanitise the URL instead of just removing it
@@ -60,9 +60,7 @@ function createNodeView(_ref) {
60
60
  nodeViewParams: nodeViewParams,
61
61
  Component: Component,
62
62
  extraComponentProps: extraComponentProps
63
- }), domRef, key, false,
64
- // node views should be rendered with intl context
65
- true);
63
+ }), domRef, key);
66
64
  }
67
65
  var _getPerformanceOption = getPerformanceOptions(nodeViewParams.view),
68
66
  samplingRate = _getPerformanceOption.samplingRate,
@@ -118,7 +116,7 @@ function createNodeView(_ref) {
118
116
  // When prosemirror destroys the node view, we need to clean up
119
117
  // what we have previously rendered using the editor portal
120
118
  // provider api.
121
- pmPluginFactoryParams.portalProviderAPI.remove(key, domRef);
119
+ pmPluginFactoryParams.portalProviderAPI.remove(key);
122
120
  // @ts-expect-error Expect an error as domRef is expected to be
123
121
  // of HTMLSpanElement type however once the node view has
124
122
  // been destroyed no other consumers should still be using it.
@@ -11,11 +11,8 @@ import { analyticsEventKey } from '../utils/analytics';
11
11
  import { generateUniqueNodeKey } from './generateUniqueNodeKey';
12
12
  export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
13
13
  var ReactNodeView = /*#__PURE__*/function () {
14
- function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
14
+ function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate) {
15
15
  var _this = this;
16
- var hasAnalyticsContext = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
17
- var viewShouldUpdate = arguments.length > 8 ? arguments[8] : undefined;
18
- var hasIntlContext = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
19
16
  _classCallCheck(this, ReactNodeView);
20
17
  _defineProperty(this, "decorations", []);
21
18
  _defineProperty(this, "handleRef", function (node) {
@@ -35,10 +32,8 @@ var ReactNodeView = /*#__PURE__*/function () {
35
32
  this.portalProviderAPI = portalProviderAPI;
36
33
  this.reactComponentProps = reactComponentProps || {};
37
34
  this.reactComponent = reactComponent;
38
- this.hasAnalyticsContext = hasAnalyticsContext;
39
35
  this._viewShouldUpdate = viewShouldUpdate;
40
36
  this.eventDispatcher = eventDispatcher;
41
- this.hasIntlContext = hasIntlContext;
42
37
  this.key = generateUniqueNodeKey();
43
38
  }
44
39
 
@@ -107,7 +102,7 @@ var ReactNodeView = /*#__PURE__*/function () {
107
102
  dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent
108
103
  }, component());
109
104
  };
110
- this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.key, this.hasAnalyticsContext, this.hasIntlContext);
105
+ this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.key);
111
106
  }
112
107
  }, {
113
108
  key: "createDomRef",
@@ -204,16 +199,15 @@ var ReactNodeView = /*#__PURE__*/function () {
204
199
  if (!this.domRef) {
205
200
  return;
206
201
  }
207
- this.portalProviderAPI.remove(this.key, this.domRef);
202
+ this.portalProviderAPI.remove(this.key);
208
203
  this.domRef = undefined;
209
204
  this.contentDOM = undefined;
210
205
  }
211
206
  }], [{
212
207
  key: "fromComponent",
213
208
  value: function fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate) {
214
- var hasIntlContext = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
215
209
  return function (node, view, getPos) {
216
- return new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, false, viewShouldUpdate, hasIntlContext).init();
210
+ return new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, viewShouldUpdate).init();
217
211
  };
218
212
  }
219
213
  }]);
@@ -8,6 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
8
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
9
9
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
10
10
  import ReactNodeView from '../react-node-view';
11
+
11
12
  /**
12
13
  * A ReactNodeView that handles React components sensitive
13
14
  * to selection changes.
@@ -35,13 +36,10 @@ import ReactNodeView from '../react-node-view';
35
36
  export var SelectionBasedNodeView = /*#__PURE__*/function (_ReactNodeView) {
36
37
  _inherits(SelectionBasedNodeView, _ReactNodeView);
37
38
  var _super = _createSuper(SelectionBasedNodeView);
38
- function SelectionBasedNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
39
+ function SelectionBasedNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate) {
39
40
  var _this;
40
- var hasContext = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
41
- var viewShouldUpdate = arguments.length > 8 ? arguments[8] : undefined;
42
- var hasIntlContext = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
43
41
  _classCallCheck(this, SelectionBasedNodeView);
44
- _this = _super.call(this, node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext, viewShouldUpdate, hasIntlContext);
42
+ _this = _super.call(this, node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate);
45
43
  _defineProperty(_assertThisInitialized(_this), "isSelectedNode", false);
46
44
  _defineProperty(_assertThisInitialized(_this), "isNodeInsideSelection", function (from, to, pos, posEnd) {
47
45
  var _this$getPositionsWit = _this.getPositionsWithDefault(pos, posEnd);
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
17
17
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
18
18
  import Layer from '../Layer';
19
19
  var packageName = "@atlaskit/editor-common";
20
- var packageVersion = "84.5.1";
20
+ var packageVersion = "85.1.0";
21
21
  var halfFocusRing = 1;
22
22
  var dropOffset = '0, 8';
23
23
  var DropList = /*#__PURE__*/function (_Component) {
@@ -29,6 +29,16 @@ var Color = function Color(props) {
29
29
  e.preventDefault();
30
30
  onClick(value, label);
31
31
  };
32
+ var onKeyDown = function onKeyDown(e) {
33
+ var onKeyDown = props.onKeyDown,
34
+ value = props.value,
35
+ label = props.label;
36
+ if (!onKeyDown) {
37
+ return undefined;
38
+ }
39
+ e.preventDefault();
40
+ onKeyDown(value, label, e);
41
+ };
32
42
  return jsx(Tooltip, {
33
43
  content: label
34
44
  }, jsx("span", {
@@ -42,6 +52,7 @@ var Color = function Color(props) {
42
52
  role: "radio",
43
53
  "aria-checked": isSelected,
44
54
  onClick: onClick,
55
+ onKeyDown: onKeyDown,
45
56
  onMouseDown: onMouseDown,
46
57
  tabIndex: tabIndex
47
58
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -41,6 +41,7 @@ var ColorPalette = function ColorPalette(props) {
41
41
  var _props$cols = props.cols,
42
42
  cols = _props$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
43
43
  onClick = props.onClick,
44
+ onKeyDown = props.onKeyDown,
44
45
  selectedColor = props.selectedColor,
45
46
  className = props.className,
46
47
  formatMessage = props.intl.formatMessage,
@@ -83,6 +84,7 @@ var ColorPalette = function ColorPalette(props) {
83
84
  borderColor: border,
84
85
  label: message ? formatMessage(message) : label,
85
86
  onClick: onClick,
87
+ onKeyDown: onKeyDown,
86
88
  isSelected: value === selectedColor,
87
89
  checkMarkColor: getCheckMarkColor(value, useIconToken),
88
90
  hexToPaletteColor: hexToPaletteColor,