@atlaskit/editor-common 84.5.1 → 85.0.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 (57) hide show
  1. package/CHANGELOG.md +22 -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/keymap.js +25 -43
  5. package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js +34 -9
  6. package/dist/cjs/link/ConfigureLinkOverlay/index.js +15 -5
  7. package/dist/cjs/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +46 -0
  8. package/dist/cjs/monitoring/error.js +1 -1
  9. package/dist/cjs/react-node-view/getInlineNodeViewProducer.js +2 -4
  10. package/dist/cjs/react-node-view/index.js +4 -10
  11. package/dist/cjs/selection-based-node-view/SelectionBasedNodeView.js +2 -5
  12. package/dist/cjs/ui/DropList/index.js +1 -1
  13. package/dist/es2019/analytics/types/enums.js +2 -0
  14. package/dist/es2019/extensibility/extensionNodeView.js +1 -2
  15. package/dist/es2019/keymaps/keymap.js +25 -43
  16. package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js +33 -7
  17. package/dist/es2019/link/ConfigureLinkOverlay/index.js +16 -5
  18. package/dist/es2019/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +39 -0
  19. package/dist/es2019/monitoring/error.js +1 -1
  20. package/dist/es2019/react-node-view/getInlineNodeViewProducer.js +2 -4
  21. package/dist/es2019/react-node-view/index.js +5 -7
  22. package/dist/es2019/selection-based-node-view/SelectionBasedNodeView.js +3 -2
  23. package/dist/es2019/ui/DropList/index.js +1 -1
  24. package/dist/esm/analytics/types/enums.js +2 -0
  25. package/dist/esm/extensibility/extensionNodeView.js +1 -2
  26. package/dist/esm/keymaps/keymap.js +25 -43
  27. package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js +34 -9
  28. package/dist/esm/link/ConfigureLinkOverlay/index.js +15 -5
  29. package/dist/esm/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +40 -0
  30. package/dist/esm/monitoring/error.js +1 -1
  31. package/dist/esm/react-node-view/getInlineNodeViewProducer.js +2 -4
  32. package/dist/esm/react-node-view/index.js +4 -10
  33. package/dist/esm/selection-based-node-view/SelectionBasedNodeView.js +3 -5
  34. package/dist/esm/ui/DropList/index.js +1 -1
  35. package/dist/types/analytics/types/enums.d.ts +3 -1
  36. package/dist/types/extensibility/extensionNodeView.d.ts +1 -2
  37. package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts +5 -4
  38. package/dist/types/link/ConfigureLinkOverlay/index.d.ts +2 -2
  39. package/dist/types/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts +5 -0
  40. package/dist/types/react-node-view/index.d.ts +2 -5
  41. package/dist/types/selection-based-node-view/SelectionBasedNodeView.d.ts +1 -2
  42. package/dist/types/types/plugin-factory.d.ts +1 -2
  43. package/dist/types-ts4.5/analytics/types/enums.d.ts +3 -1
  44. package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts +1 -2
  45. package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts +5 -4
  46. package/dist/types-ts4.5/link/ConfigureLinkOverlay/index.d.ts +2 -2
  47. package/dist/types-ts4.5/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts +5 -0
  48. package/dist/types-ts4.5/react-node-view/index.d.ts +2 -5
  49. package/dist/types-ts4.5/selection-based-node-view/SelectionBasedNodeView.d.ts +1 -2
  50. package/dist/types-ts4.5/types/plugin-factory.d.ts +1 -2
  51. package/package.json +3 -8
  52. package/dist/cjs/ui/PortalProvider/index.js +0 -235
  53. package/dist/es2019/ui/PortalProvider/index.js +0 -171
  54. package/dist/esm/ui/PortalProvider/index.js +0 -229
  55. package/dist/types/ui/PortalProvider/index.d.ts +0 -48
  56. package/dist/types-ts4.5/ui/PortalProvider/index.d.ts +0 -48
  57. package/portal-provider/package.json +0 -15
@@ -5,28 +5,46 @@ import { useCallback } from 'react';
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import { jsx } from '@emotion/react';
7
7
  import { useIntl } from 'react-intl-next';
8
+ import { withAnalyticsContext } from '@atlaskit/analytics-next';
8
9
  import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
9
10
  import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
10
11
  import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
11
12
  import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
12
13
  import { cardMessages as messages } from '../../messages';
13
14
  import { StyledButton } from './StyledButton';
15
+ import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
16
+ const SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
14
17
  const Dropdown = ({
15
- testId,
16
- onDropdownChange
18
+ onDropdownChange,
19
+ testId
17
20
  }) => {
18
21
  const {
19
22
  formatMessage
20
23
  } = useIntl();
21
24
  const configureLinkLabel = formatMessage(messages.inlineConfigureLink);
22
25
  const goToLinkLabel = formatMessage(messages.inlineGoToLink);
26
+ const {
27
+ fireActionClickEvent,
28
+ fireLinkClickEvent,
29
+ fireToolbarViewEvent
30
+ } = useLinkOverlayAnalyticsEvents();
23
31
  const onOpenChange = useCallback(({
24
32
  isOpen
25
33
  }) => {
26
34
  onDropdownChange === null || onDropdownChange === void 0 ? void 0 : onDropdownChange(isOpen);
27
- }, [onDropdownChange]);
35
+ if (isOpen) {
36
+ fireToolbarViewEvent();
37
+ }
38
+ }, [fireToolbarViewEvent, onDropdownChange]);
39
+ const onGoToLinkClick = useCallback(() => {
40
+ fireActionClickEvent('goToLink');
41
+ }, [fireActionClickEvent]);
42
+ const onConfigureClick = useCallback(() => {
43
+ fireActionClickEvent('configureLink');
44
+ }, [fireActionClickEvent]);
28
45
  return jsx(DropdownMenu, {
29
46
  trigger: ({
47
+ onClick,
30
48
  triggerRef,
31
49
  ...props
32
50
  }) => jsx(StyledButton, _extends({
@@ -35,7 +53,11 @@ const Dropdown = ({
35
53
  iconBefore: jsx(ChevronDownIcon, {
36
54
  label: configureLinkLabel,
37
55
  size: 'small'
38
- })
56
+ }),
57
+ onClick: e => {
58
+ onClick === null || onClick === void 0 ? void 0 : onClick(e);
59
+ fireLinkClickEvent();
60
+ }
39
61
  })),
40
62
  testId: `${testId}-dropdown`,
41
63
  onOpenChange: onOpenChange
@@ -43,12 +65,16 @@ const Dropdown = ({
43
65
  elemBefore: jsx(ShortcutIcon, {
44
66
  label: goToLinkLabel,
45
67
  size: 'medium'
46
- })
68
+ }),
69
+ onClick: onGoToLinkClick
47
70
  }, goToLinkLabel), jsx(DropdownItem, {
48
71
  elemBefore: jsx(PreferencesIcon, {
49
72
  label: configureLinkLabel,
50
73
  size: 'medium'
51
- })
74
+ }),
75
+ onClick: onConfigureClick
52
76
  }, configureLinkLabel)));
53
77
  };
54
- export default Dropdown;
78
+ export default withAnalyticsContext({
79
+ source: SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE
80
+ })(Dropdown);
@@ -4,6 +4,7 @@ import { useCallback, useLayoutEffect, useState } from 'react';
4
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import { useIntl } from 'react-intl-next';
7
+ import { withAnalyticsContext } from '@atlaskit/analytics-next';
7
8
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
8
9
  import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
9
10
  import { N0 } from '@atlaskit/theme/colors';
@@ -12,6 +13,7 @@ import Tooltip from '@atlaskit/tooltip';
12
13
  import { cardMessages } from '../../messages';
13
14
  import Dropdown from './Dropdown';
14
15
  import { StyledButton } from './StyledButton';
16
+ import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
15
17
  const buttonWrapperStyles = css({
16
18
  position: 'absolute',
17
19
  zIndex: layers.card(),
@@ -22,7 +24,7 @@ const buttonWrapperStyles = css({
22
24
  borderRadius: "var(--ds-border-radius, 3px)"
23
25
  });
24
26
  const showDropdownThresholdPx = 50;
25
- export const OverlayButton = ({
27
+ export const OverlayButton = withAnalyticsContext()(({
26
28
  editorView,
27
29
  testId = 'link-configure-overlay-button',
28
30
  targetElementPos = 0,
@@ -34,6 +36,10 @@ export const OverlayButton = ({
34
36
  } = useIntl();
35
37
  const configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
36
38
  const [showDropdown, setShowDropdown] = useState(false);
39
+ const {
40
+ fireLinkClickEvent,
41
+ fireActionClickEvent
42
+ } = useLinkOverlayAnalyticsEvents();
37
43
  useLayoutEffect(() => {
38
44
  var _domNode;
39
45
  let domNode = editorView.nodeDOM(targetElementPos);
@@ -52,7 +58,7 @@ export const OverlayButton = ({
52
58
  const docNode = editorView.state.doc.nodeAt(targetElementPos);
53
59
  const nodeEnd = targetElementPos + ((_docNode$nodeSize = docNode === null || docNode === void 0 ? void 0 : docNode.nodeSize) !== null && _docNode$nodeSize !== void 0 ? _docNode$nodeSize : 0);
54
60
  const isText = docNode === null || docNode === void 0 ? void 0 : docNode.isText;
55
- const handleClick = useCallback(() => {
61
+ const handleConfigureClick = useCallback(() => {
56
62
  const tr = editorView.state.tr;
57
63
  if (isText) {
58
64
  tr.setSelection(TextSelection.create(tr.doc, targetElementPos, Math.min(nodeEnd, tr.doc.nodeSize)));
@@ -60,7 +66,12 @@ export const OverlayButton = ({
60
66
  tr.setSelection(NodeSelection.create(tr.doc, targetElementPos));
61
67
  }
62
68
  editorView.dispatch(tr);
63
- }, [isText, editorView, nodeEnd, targetElementPos]);
69
+ }, [editorView, isText, targetElementPos, nodeEnd]);
70
+ const handleConfigureClickWithAnalytics = useCallback(() => {
71
+ fireLinkClickEvent();
72
+ fireActionClickEvent('configureLink');
73
+ handleConfigureClick();
74
+ }, [fireActionClickEvent, fireLinkClickEvent, handleConfigureClick]);
64
75
  const {
65
76
  from,
66
77
  to
@@ -80,11 +91,11 @@ export const OverlayButton = ({
80
91
  hideTooltipOnClick: true,
81
92
  testId: `${testId}-tooltip`
82
93
  }, jsx(StyledButton, {
83
- onClick: handleClick,
94
+ onClick: handleConfigureClickWithAnalytics,
84
95
  iconBefore: jsx(PreferencesIcon, {
85
96
  label: configureLinkLabel,
86
97
  size: "small",
87
98
  testId: `${testId}-configure-icon`
88
99
  })
89
100
  })));
90
- };
101
+ });
@@ -0,0 +1,39 @@
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 const useLinkOverlayAnalyticsEvents = () => {
6
+ const {
7
+ createAnalyticsEvent
8
+ } = useAnalyticsEvents();
9
+ return useMemo(() => ({
10
+ 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: () => {
21
+ createAnalyticsEvent({
22
+ action: ACTION.CLICKED,
23
+ actionSubject: ACTION_SUBJECT.LINK,
24
+ eventType: EVENT_TYPE.UI
25
+ }).fire(FabricChannel.media);
26
+ },
27
+ 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
+ }), [createAnalyticsEvent]);
39
+ };
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "84.5.1";
4
+ const packageVersion = "85.0.0";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // TODO: Sanitise the URL instead of just removing it
@@ -58,9 +58,7 @@ function createNodeView({
58
58
  nodeViewParams,
59
59
  Component,
60
60
  extraComponentProps
61
- }), domRef, key, false,
62
- // node views should be rendered with intl context
63
- true);
61
+ }), domRef, key);
64
62
  }
65
63
  const {
66
64
  samplingRate,
@@ -117,7 +115,7 @@ function createNodeView({
117
115
  // When prosemirror destroys the node view, we need to clean up
118
116
  // what we have previously rendered using the editor portal
119
117
  // provider api.
120
- pmPluginFactoryParams.portalProviderAPI.remove(key, domRef);
118
+ pmPluginFactoryParams.portalProviderAPI.remove(key);
121
119
  // @ts-expect-error Expect an error as domRef is expected to be
122
120
  // of HTMLSpanElement type however once the node view has
123
121
  // been destroyed no other consumers should still be using it.
@@ -9,7 +9,7 @@ import { analyticsEventKey } from '../utils/analytics';
9
9
  import { generateUniqueNodeKey } from './generateUniqueNodeKey';
10
10
  export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
11
11
  export default class ReactNodeView {
12
- constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasAnalyticsContext = false, viewShouldUpdate, hasIntlContext = false) {
12
+ constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate) {
13
13
  _defineProperty(this, "decorations", []);
14
14
  _defineProperty(this, "handleRef", node => this._handleRef(node));
15
15
  _defineProperty(this, "dispatchAnalyticsEvent", payload => {
@@ -26,10 +26,8 @@ export default class ReactNodeView {
26
26
  this.portalProviderAPI = portalProviderAPI;
27
27
  this.reactComponentProps = reactComponentProps || {};
28
28
  this.reactComponent = reactComponent;
29
- this.hasAnalyticsContext = hasAnalyticsContext;
30
29
  this._viewShouldUpdate = viewShouldUpdate;
31
30
  this.eventDispatcher = eventDispatcher;
32
- this.hasIntlContext = hasIntlContext;
33
31
  this.key = generateUniqueNodeKey();
34
32
  }
35
33
 
@@ -92,7 +90,7 @@ export default class ReactNodeView {
92
90
  dispatchAnalyticsEvent: this.dispatchAnalyticsEvent
93
91
  }, component());
94
92
  };
95
- this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.key, this.hasAnalyticsContext, this.hasIntlContext);
93
+ this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.key);
96
94
  }
97
95
  createDomRef() {
98
96
  if (!this.node.isInline) {
@@ -165,11 +163,11 @@ export default class ReactNodeView {
165
163
  if (!this.domRef) {
166
164
  return;
167
165
  }
168
- this.portalProviderAPI.remove(this.key, this.domRef);
166
+ this.portalProviderAPI.remove(this.key);
169
167
  this.domRef = undefined;
170
168
  this.contentDOM = undefined;
171
169
  }
172
- static fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate, hasIntlContext = false) {
173
- return (node, view, getPos) => new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, false, viewShouldUpdate, hasIntlContext).init();
170
+ static fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate) {
171
+ return (node, view, getPos) => new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, viewShouldUpdate).init();
174
172
  }
175
173
  }
@@ -1,5 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import ReactNodeView from '../react-node-view';
3
+
3
4
  /**
4
5
  * A ReactNodeView that handles React components sensitive
5
6
  * to selection changes.
@@ -25,8 +26,8 @@ import ReactNodeView from '../react-node-view';
25
26
  */
26
27
 
27
28
  export class SelectionBasedNodeView extends ReactNodeView {
28
- constructor(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext = false, viewShouldUpdate, hasIntlContext = false) {
29
- super(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasContext, viewShouldUpdate, hasIntlContext);
29
+ constructor(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate) {
30
+ super(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, viewShouldUpdate);
30
31
  _defineProperty(this, "isSelectedNode", false);
31
32
  _defineProperty(this, "isNodeInsideSelection", (from, to, pos, posEnd) => {
32
33
  ({
@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
9
9
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
10
10
  import Layer from '../Layer';
11
11
  const packageName = "@atlaskit/editor-common";
12
- const packageVersion = "84.5.1";
12
+ const packageVersion = "85.0.0";
13
13
  const halfFocusRing = 1;
14
14
  const dropOffset = '0, 8';
15
15
  class DropList extends Component {
@@ -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
  }
@@ -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.0.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.