@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.
- package/CHANGELOG.md +38 -0
- package/dist/cjs/analytics/types/enums.js +2 -0
- package/dist/cjs/extensibility/extensionNodeView.js +1 -2
- package/dist/cjs/keymaps/index.js +3 -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/cjs/ui-color/ColorPalette/Color/index.js +11 -0
- package/dist/cjs/ui-color/ColorPalette/index.js +2 -0
- package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +18 -5
- package/dist/cjs/ui-menu/DropdownMenu/index.js +33 -11
- package/dist/es2019/analytics/types/enums.js +2 -0
- package/dist/es2019/extensibility/extensionNodeView.js +1 -2
- package/dist/es2019/keymaps/index.js +1 -0
- 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/es2019/ui-color/ColorPalette/Color/index.js +13 -0
- package/dist/es2019/ui-color/ColorPalette/index.js +2 -0
- package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +19 -6
- package/dist/es2019/ui-menu/DropdownMenu/index.js +34 -12
- package/dist/esm/analytics/types/enums.js +2 -0
- package/dist/esm/extensibility/extensionNodeView.js +1 -2
- package/dist/esm/keymaps/index.js +1 -0
- 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/esm/ui-color/ColorPalette/Color/index.js +11 -0
- package/dist/esm/ui-color/ColorPalette/index.js +2 -0
- package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +19 -6
- package/dist/esm/ui-menu/DropdownMenu/index.js +34 -12
- package/dist/types/analytics/types/enums.d.ts +3 -1
- package/dist/types/extensibility/extensionNodeView.d.ts +1 -2
- package/dist/types/keymaps/index.d.ts +1 -0
- 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/ui-color/ColorPalette/Color/index.d.ts +2 -1
- package/dist/types/ui-color/ColorPalette/index.d.ts +1 -0
- package/dist/types/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts +1 -1
- package/dist/types/ui-menu/ArrowKeyNavigationProvider/types.d.ts +1 -0
- package/dist/types/ui-menu/DropdownMenu/types.d.ts +4 -1
- 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/keymaps/index.d.ts +1 -0
- 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/dist/types-ts4.5/ui-color/ColorPalette/Color/index.d.ts +2 -1
- package/dist/types-ts4.5/ui-color/ColorPalette/index.d.ts +1 -0
- package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts +1 -1
- package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/types.d.ts +1 -0
- package/dist/types-ts4.5/ui-menu/DropdownMenu/types.d.ts +4 -1
- package/package.json +4 -6
- 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
|
@@ -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 {
|
|
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 (
|
|
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 (
|
|
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
|
-
|
|
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 (
|
|
198
|
-
if (!
|
|
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 &&
|
|
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:
|
|
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:
|
|
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":
|
|
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":
|
|
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
|
-
}
|
|
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
|
-
|
|
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.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
|
|
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.
|
|
@@ -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
|
|
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
|
|
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,
|
|
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,
|
|
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 = "
|
|
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,
|