@atlaskit/editor-common 84.5.0 → 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 +34 -0
- package/afm-jira/tsconfig.json +3 -0
- package/dist/cjs/analytics/types/enums.js +2 -0
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +27 -91
- 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/messages/table.js +30 -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/element-browser/components/ElementList/ElementList.js +7 -70
- 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/messages/table.js +30 -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/element-browser/components/ElementList/ElementList.js +27 -91
- 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/messages/table.js +30 -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/messages/table.d.ts +30 -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/messages/table.d.ts +30 -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 +6 -14
- 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
|
@@ -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";
|
|
@@ -10,12 +10,10 @@ import { css, jsx } from '@emotion/react';
|
|
|
10
10
|
import { Grid } from 'react-virtualized';
|
|
11
11
|
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
|
|
12
12
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
13
|
-
import { Collection } from 'react-virtualized/dist/commonjs/Collection';
|
|
14
13
|
import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
15
14
|
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
16
15
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
17
16
|
import { ButtonItem } from '@atlaskit/menu';
|
|
18
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
17
|
import { B100, N200 } from '@atlaskit/theme/colors';
|
|
20
18
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
21
19
|
import Tooltip from '@atlaskit/tooltip';
|
|
@@ -25,7 +23,6 @@ import { ELEMENT_ITEM_HEIGHT, ELEMENT_ITEM_PADDING, ELEMENT_LIST_PADDING, SCROLL
|
|
|
25
23
|
import useContainerWidth from '../../hooks/use-container-width';
|
|
26
24
|
import useFocus from '../../hooks/use-focus';
|
|
27
25
|
import { Modes } from '../../types';
|
|
28
|
-
import cellSizeAndPositionGetter from './cellSizeAndPositionGetter';
|
|
29
26
|
import EmptyState from './EmptyState';
|
|
30
27
|
import { getColumnCount, getScrollbarWidth } from './utils';
|
|
31
28
|
export var ICON_HEIGHT = 40;
|
|
@@ -113,58 +110,11 @@ function ElementList(_ref) {
|
|
|
113
110
|
};
|
|
114
111
|
var cellRenderer = useMemo(function () {
|
|
115
112
|
return function (_ref3) {
|
|
116
|
-
var
|
|
113
|
+
var columnIndex = _ref3.columnIndex,
|
|
117
114
|
key = _ref3.key,
|
|
115
|
+
parent = _ref3.parent,
|
|
116
|
+
rowIndex = _ref3.rowIndex,
|
|
118
117
|
style = _ref3.style;
|
|
119
|
-
if (items[index] == null) {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
return jsx("div", {
|
|
123
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
124
|
-
style: style,
|
|
125
|
-
key: key
|
|
126
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
127
|
-
,
|
|
128
|
-
className: "element-item-wrapper",
|
|
129
|
-
css: elementItemWrapper,
|
|
130
|
-
onKeyDown: function onKeyDown(e) {
|
|
131
|
-
if (e.key === 'Tab') {
|
|
132
|
-
if (e.shiftKey && index === 0) {
|
|
133
|
-
if (setFocusedCategoryIndex) {
|
|
134
|
-
if (!!selectedCategoryIndex) {
|
|
135
|
-
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
136
|
-
} else {
|
|
137
|
-
setFocusedCategoryIndex(0);
|
|
138
|
-
}
|
|
139
|
-
e.preventDefault();
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
// before focus jumps from elements list we need to rerender react-virtualized collection.
|
|
143
|
-
// Otherwise on the next render 'scrollToCell' will have same cached value
|
|
144
|
-
// and collection will not be scrolled to top.
|
|
145
|
-
// So Tab press on category will not work anymore due to invisible 1-t element.
|
|
146
|
-
else if (index === items.length - 2) {
|
|
147
|
-
setFocusedItemIndex(items.length - 1);
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}, jsx(MemoizedElementItem, _extends({
|
|
152
|
-
inlineMode: !fullMode,
|
|
153
|
-
index: index,
|
|
154
|
-
item: items[index],
|
|
155
|
-
selected: selectedItemIndex === index,
|
|
156
|
-
focus: focusedItemIndex === index,
|
|
157
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
158
|
-
}, props)));
|
|
159
|
-
};
|
|
160
|
-
}, [items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
|
|
161
|
-
var gridCellRenderer = useMemo(function () {
|
|
162
|
-
return function (_ref4) {
|
|
163
|
-
var columnIndex = _ref4.columnIndex,
|
|
164
|
-
key = _ref4.key,
|
|
165
|
-
parent = _ref4.parent,
|
|
166
|
-
rowIndex = _ref4.rowIndex,
|
|
167
|
-
style = _ref4.style;
|
|
168
118
|
var index = rowIndex * columnCount + columnIndex;
|
|
169
119
|
if (items[index] == null) {
|
|
170
120
|
return;
|
|
@@ -195,9 +145,9 @@ function ElementList(_ref) {
|
|
|
195
145
|
e.preventDefault();
|
|
196
146
|
}
|
|
197
147
|
}
|
|
198
|
-
// before focus jumps from elements list we need to rerender react-virtualized
|
|
148
|
+
// before focus jumps from elements list we need to rerender react-virtualized grid.
|
|
199
149
|
// Otherwise on the next render 'scrollToCell' will have same cached value
|
|
200
|
-
// and
|
|
150
|
+
// and grid will not be scrolled to top.
|
|
201
151
|
// So Tab press on category will not work anymore due to invisible 1-t element.
|
|
202
152
|
else if (index === items.length - 2) {
|
|
203
153
|
setFocusedItemIndex(items.length - 1);
|
|
@@ -231,10 +181,10 @@ function ElementList(_ref) {
|
|
|
231
181
|
onExternalLinkClick: onExternalLinkClick
|
|
232
182
|
}) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
233
183
|
disableWidth: true
|
|
234
|
-
}, function (
|
|
235
|
-
var height =
|
|
236
|
-
return
|
|
237
|
-
cellRenderer:
|
|
184
|
+
}, function (_ref4) {
|
|
185
|
+
var height = _ref4.height;
|
|
186
|
+
return jsx(Grid, _extends({
|
|
187
|
+
cellRenderer: cellRenderer,
|
|
238
188
|
height: height,
|
|
239
189
|
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
240
190
|
/**
|
|
@@ -251,33 +201,19 @@ function ElementList(_ref) {
|
|
|
251
201
|
deferredMeasurementCache: cache
|
|
252
202
|
}, selectedItemIndex !== undefined && {
|
|
253
203
|
scrollToRow: Math.floor(selectedItemIndex / columnCount)
|
|
254
|
-
}))
|
|
255
|
-
cellCount: items.length,
|
|
256
|
-
cellRenderer: cellRenderer,
|
|
257
|
-
cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth - ELEMENT_LIST_PADDING * 2, scrollbarWidth),
|
|
258
|
-
height: height,
|
|
259
|
-
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
260
|
-
/**
|
|
261
|
-
* Refresh Collection on WidthObserver value change.
|
|
262
|
-
* Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
|
|
263
|
-
* scroll position after updating the data. If new data has different number of cells, a re-render
|
|
264
|
-
* is forced to prevent the scroll position render bug.
|
|
265
|
-
*/,
|
|
266
|
-
key: containerWidth + items.length,
|
|
267
|
-
scrollToCell: selectedItemIndex
|
|
268
|
-
});
|
|
204
|
+
}));
|
|
269
205
|
}))));
|
|
270
206
|
}
|
|
271
207
|
var MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
|
|
272
208
|
MemoizedElementItem.displayName = 'MemoizedElementItem';
|
|
273
|
-
export function ElementItem(
|
|
274
|
-
var inlineMode =
|
|
275
|
-
selected =
|
|
276
|
-
item =
|
|
277
|
-
index =
|
|
278
|
-
onInsertItem =
|
|
279
|
-
focus =
|
|
280
|
-
setFocusedItemIndex =
|
|
209
|
+
export function ElementItem(_ref5) {
|
|
210
|
+
var inlineMode = _ref5.inlineMode,
|
|
211
|
+
selected = _ref5.selected,
|
|
212
|
+
item = _ref5.item,
|
|
213
|
+
index = _ref5.index,
|
|
214
|
+
onInsertItem = _ref5.onInsertItem,
|
|
215
|
+
focus = _ref5.focus,
|
|
216
|
+
setFocusedItemIndex = _ref5.setFocusedItemIndex;
|
|
281
217
|
var ref = useFocus(focus);
|
|
282
218
|
|
|
283
219
|
/**
|
|
@@ -342,17 +278,17 @@ export function ElementItem(_ref6) {
|
|
|
342
278
|
var itemStyleOverrides = {
|
|
343
279
|
alignItems: 'flex-start'
|
|
344
280
|
};
|
|
345
|
-
var ElementBefore = /*#__PURE__*/memo(function (
|
|
346
|
-
var icon =
|
|
347
|
-
title =
|
|
281
|
+
var ElementBefore = /*#__PURE__*/memo(function (_ref6) {
|
|
282
|
+
var icon = _ref6.icon,
|
|
283
|
+
title = _ref6.title;
|
|
348
284
|
return jsx("div", {
|
|
349
285
|
css: [itemIcon, itemIconStyle]
|
|
350
286
|
}, icon ? icon() : jsx(IconFallback, null));
|
|
351
287
|
});
|
|
352
|
-
var ItemContent = /*#__PURE__*/memo(function (
|
|
353
|
-
var title =
|
|
354
|
-
description =
|
|
355
|
-
keyshortcut =
|
|
288
|
+
var ItemContent = /*#__PURE__*/memo(function (_ref7) {
|
|
289
|
+
var title = _ref7.title,
|
|
290
|
+
description = _ref7.description,
|
|
291
|
+
keyshortcut = _ref7.keyshortcut;
|
|
356
292
|
return (
|
|
357
293
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
358
294
|
jsx("div", {
|
|
@@ -381,7 +317,7 @@ var elementItemsWrapper = css({
|
|
|
381
317
|
overflow: 'hidden',
|
|
382
318
|
padding: "var(--ds-space-025, 2px)",
|
|
383
319
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
384
|
-
'.
|
|
320
|
+
'.ReactVirtualized__Grid': {
|
|
385
321
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
386
322
|
borderRadius: '3px',
|
|
387
323
|
outline: 'none',
|
|
@@ -391,7 +327,7 @@ var elementItemsWrapper = css({
|
|
|
391
327
|
}
|
|
392
328
|
},
|
|
393
329
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
394
|
-
'.
|
|
330
|
+
'.ReactVirtualized__Grid__innerScrollContainer': {
|
|
395
331
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
396
332
|
"div[class='element-item-wrapper']:last-child": {
|
|
397
333
|
paddingBottom: "var(--ds-space-050, 4px)"
|
|
@@ -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
|
+
};
|
|
@@ -125,6 +125,21 @@ export var messages = defineMessages({
|
|
|
125
125
|
defaultMessage: '{count, plural, one {The row has been} other {{count} rows have been}} removed',
|
|
126
126
|
description: 'Assistive message following the removal of row(s)'
|
|
127
127
|
},
|
|
128
|
+
rowSelected: {
|
|
129
|
+
id: 'fabric.editor.rowSelected',
|
|
130
|
+
defaultMessage: 'Row {index} of {total} selected',
|
|
131
|
+
description: 'Assistive message following the selection of a row'
|
|
132
|
+
},
|
|
133
|
+
rowMovedUp: {
|
|
134
|
+
id: 'fabric.editor.rowMovedUp',
|
|
135
|
+
defaultMessage: 'Row moved up to {index} of {total}',
|
|
136
|
+
description: 'Assistive message following the upward movement of a row'
|
|
137
|
+
},
|
|
138
|
+
rowMovedDown: {
|
|
139
|
+
id: 'fabric.editor.rowMovedDown',
|
|
140
|
+
defaultMessage: 'Row moved down to {index} of {total}',
|
|
141
|
+
description: 'Assistive message following the downward movement of a row'
|
|
142
|
+
},
|
|
128
143
|
columnsAreInserted: {
|
|
129
144
|
id: 'fabric.editor.columnsAreInserted',
|
|
130
145
|
defaultMessage: '{count, plural, one {A column has been} other {{count} columns have been}} inserted',
|
|
@@ -135,6 +150,21 @@ export var messages = defineMessages({
|
|
|
135
150
|
defaultMessage: '{count, plural, one {The column has been} other {{count} columns have been}} removed',
|
|
136
151
|
description: 'Assistive message following the removal of column(s)'
|
|
137
152
|
},
|
|
153
|
+
columnSelected: {
|
|
154
|
+
id: 'fabric.editor.columnSelected',
|
|
155
|
+
defaultMessage: 'Column {index} of {total} selected',
|
|
156
|
+
description: 'Assistive message following the selection of a column'
|
|
157
|
+
},
|
|
158
|
+
columnMovedLeft: {
|
|
159
|
+
id: 'fabric.editor.columnMovedLeft',
|
|
160
|
+
defaultMessage: 'Column moved left to {index} of {total}',
|
|
161
|
+
description: 'Assistive message following the left movement of a column'
|
|
162
|
+
},
|
|
163
|
+
columnMovedRight: {
|
|
164
|
+
id: 'fabric.editor.columnMovedRight',
|
|
165
|
+
defaultMessage: 'Column moved right to {index} of {total}',
|
|
166
|
+
description: 'Assistive message following the right movement of a column'
|
|
167
|
+
},
|
|
138
168
|
cellOptions: {
|
|
139
169
|
id: 'fabric.editor.cellOptions',
|
|
140
170
|
defaultMessage: 'Cell options',
|
|
@@ -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.
|