@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.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/analytics/types/enums.js +2 -0
- package/dist/cjs/extensibility/extensionNodeView.js +1 -2
- package/dist/cjs/keymaps/keymap.js +25 -43
- package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js +34 -9
- package/dist/cjs/link/ConfigureLinkOverlay/index.js +15 -5
- package/dist/cjs/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +46 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/react-node-view/getInlineNodeViewProducer.js +2 -4
- package/dist/cjs/react-node-view/index.js +4 -10
- package/dist/cjs/selection-based-node-view/SelectionBasedNodeView.js +2 -5
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/analytics/types/enums.js +2 -0
- package/dist/es2019/extensibility/extensionNodeView.js +1 -2
- package/dist/es2019/keymaps/keymap.js +25 -43
- package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js +33 -7
- package/dist/es2019/link/ConfigureLinkOverlay/index.js +16 -5
- package/dist/es2019/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +39 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/react-node-view/getInlineNodeViewProducer.js +2 -4
- package/dist/es2019/react-node-view/index.js +5 -7
- package/dist/es2019/selection-based-node-view/SelectionBasedNodeView.js +3 -2
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/analytics/types/enums.js +2 -0
- package/dist/esm/extensibility/extensionNodeView.js +1 -2
- package/dist/esm/keymaps/keymap.js +25 -43
- package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js +34 -9
- package/dist/esm/link/ConfigureLinkOverlay/index.js +15 -5
- package/dist/esm/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js +40 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/react-node-view/getInlineNodeViewProducer.js +2 -4
- package/dist/esm/react-node-view/index.js +4 -10
- package/dist/esm/selection-based-node-view/SelectionBasedNodeView.js +3 -5
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/analytics/types/enums.d.ts +3 -1
- package/dist/types/extensibility/extensionNodeView.d.ts +1 -2
- package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts +5 -4
- package/dist/types/link/ConfigureLinkOverlay/index.d.ts +2 -2
- package/dist/types/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts +5 -0
- package/dist/types/react-node-view/index.d.ts +2 -5
- package/dist/types/selection-based-node-view/SelectionBasedNodeView.d.ts +1 -2
- package/dist/types/types/plugin-factory.d.ts +1 -2
- package/dist/types-ts4.5/analytics/types/enums.d.ts +3 -1
- package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts +1 -2
- package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts +5 -4
- package/dist/types-ts4.5/link/ConfigureLinkOverlay/index.d.ts +2 -2
- package/dist/types-ts4.5/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts +5 -0
- package/dist/types-ts4.5/react-node-view/index.d.ts +2 -5
- package/dist/types-ts4.5/selection-based-node-view/SelectionBasedNodeView.d.ts +1 -2
- package/dist/types-ts4.5/types/plugin-factory.d.ts +1 -2
- package/package.json +3 -8
- package/dist/cjs/ui/PortalProvider/index.js +0 -235
- package/dist/es2019/ui/PortalProvider/index.js +0 -171
- package/dist/esm/ui/PortalProvider/index.js +0 -229
- package/dist/types/ui/PortalProvider/index.d.ts +0 -48
- package/dist/types-ts4.5/ui/PortalProvider/index.d.ts +0 -48
- 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
|
-
|
|
16
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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,
|
|
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:
|
|
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 = "
|
|
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
|
|
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
|
|
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,
|
|
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
|
|
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
|
|
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
|
|
173
|
-
return (node, view, getPos) => new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component,
|
|
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,
|
|
29
|
-
super(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent,
|
|
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 = "
|
|
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
|
-
}
|
|
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
|
-
|
|
18
|
-
|
|
19
|
-
var keyboardEvent = event;
|
|
16
|
+
var name = keyName(event);
|
|
17
|
+
var keyboardEvent = event;
|
|
20
18
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
|
18
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
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:
|
|
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 = "
|
|
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
|
|
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
|
|
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.
|