@atlaskit/editor-common 122.6.1 → 122.7.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 +17 -0
- package/dist/cjs/element-browser/components/ViewMore.js +1 -1
- package/dist/cjs/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
- package/dist/cjs/extensibility/GeneratedContentReveal.js +1 -1
- package/dist/cjs/extensions/UnknownMacroPlaceholder.js +1 -1
- package/dist/cjs/icons/shared/PanelErrorIcon.js +1 -1
- package/dist/cjs/icons/shared/PanelInfoIcon.js +1 -1
- package/dist/cjs/icons/shared/PanelNoteIcon.js +1 -1
- package/dist/cjs/icons/shared/PanelSuccessIcon.js +1 -1
- package/dist/cjs/icons/shared/PanelWarningIcon.js +1 -1
- package/dist/cjs/media-inline/media-inline-image-card.js +9 -7
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.js +18 -4
- package/dist/cjs/quick-insert/QuickInsertHoverPreview.compiled.css +4 -0
- package/dist/cjs/quick-insert/QuickInsertHoverPreview.js +103 -0
- package/dist/cjs/quick-insert/QuickInsertMenuItem.js +2 -0
- package/dist/cjs/table/NewSortingIcon.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui/Mention/mention-with-profilecard.js +2 -2
- package/dist/cjs/ui/Mention/mention-with-providers.js +3 -3
- package/dist/cjs/ui/Shortcut/index.js +1 -1
- package/dist/cjs/ui/Toolbar/ButtonGroup.js +1 -1
- package/dist/cjs/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
- package/dist/cjs/ui/Toolbar/DropdownWrapper.js +1 -1
- package/dist/cjs/ui/Toolbar/ExpandIcon.js +1 -1
- package/dist/cjs/ui/Toolbar/Separator.js +1 -1
- package/dist/cjs/utils/compareNodes.js +2 -5
- package/dist/es2019/element-browser/components/ViewMore.js +1 -1
- package/dist/es2019/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
- package/dist/es2019/extensibility/GeneratedContentReveal.js +1 -1
- package/dist/es2019/extensions/UnknownMacroPlaceholder.js +1 -1
- package/dist/es2019/icons/shared/PanelErrorIcon.js +1 -1
- package/dist/es2019/icons/shared/PanelInfoIcon.js +1 -1
- package/dist/es2019/icons/shared/PanelNoteIcon.js +1 -1
- package/dist/es2019/icons/shared/PanelSuccessIcon.js +1 -1
- package/dist/es2019/icons/shared/PanelWarningIcon.js +1 -1
- package/dist/es2019/media-inline/media-inline-image-card.js +3 -1
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.js +12 -4
- package/dist/es2019/quick-insert/QuickInsertHoverPreview.compiled.css +4 -0
- package/dist/es2019/quick-insert/QuickInsertHoverPreview.js +87 -0
- package/dist/es2019/quick-insert/QuickInsertMenuItem.js +2 -0
- package/dist/es2019/table/NewSortingIcon.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui/Mention/mention-with-profilecard.js +1 -1
- package/dist/es2019/ui/Mention/mention-with-providers.js +1 -1
- package/dist/es2019/ui/Shortcut/index.js +1 -1
- package/dist/es2019/ui/Toolbar/ButtonGroup.js +1 -1
- package/dist/es2019/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
- package/dist/es2019/ui/Toolbar/DropdownWrapper.js +1 -1
- package/dist/es2019/ui/Toolbar/ExpandIcon.js +1 -1
- package/dist/es2019/ui/Toolbar/Separator.js +1 -1
- package/dist/es2019/utils/compareNodes.js +2 -5
- package/dist/esm/element-browser/components/ViewMore.js +1 -1
- package/dist/esm/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
- package/dist/esm/extensibility/GeneratedContentReveal.js +1 -1
- package/dist/esm/extensions/UnknownMacroPlaceholder.js +1 -1
- package/dist/esm/icons/shared/PanelErrorIcon.js +1 -1
- package/dist/esm/icons/shared/PanelInfoIcon.js +1 -1
- package/dist/esm/icons/shared/PanelNoteIcon.js +1 -1
- package/dist/esm/icons/shared/PanelSuccessIcon.js +1 -1
- package/dist/esm/icons/shared/PanelWarningIcon.js +1 -1
- package/dist/esm/media-inline/media-inline-image-card.js +3 -1
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/quick-insert/CompactQuickInsertMenuItem.js +16 -4
- package/dist/esm/quick-insert/QuickInsertHoverPreview.compiled.css +4 -0
- package/dist/esm/quick-insert/QuickInsertHoverPreview.js +94 -0
- package/dist/esm/quick-insert/QuickInsertMenuItem.js +2 -0
- package/dist/esm/table/NewSortingIcon.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui/Mention/mention-with-profilecard.js +1 -1
- package/dist/esm/ui/Mention/mention-with-providers.js +1 -1
- package/dist/esm/ui/Shortcut/index.js +1 -1
- package/dist/esm/ui/Toolbar/ButtonGroup.js +1 -1
- package/dist/esm/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
- package/dist/esm/ui/Toolbar/DropdownWrapper.js +1 -1
- package/dist/esm/ui/Toolbar/ExpandIcon.js +1 -1
- package/dist/esm/ui/Toolbar/Separator.js +1 -1
- package/dist/esm/utils/compareNodes.js +2 -5
- package/dist/types/quick-insert/CompactQuickInsertMenuItem.d.ts +1 -1
- package/dist/types/quick-insert/QuickInsertHoverPreview.d.ts +8 -0
- package/dist/types/quick-insert/QuickInsertMenuItem.d.ts +6 -1
- package/dist/types/ui/EventHandlers/index.d.ts +1 -1
- package/dist/types/ui/Mention/mention-with-profilecard.d.ts +1 -1
- package/dist/types/ui/Mention/mention-with-providers.d.ts +1 -2
- package/package.json +2 -5
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
import "./QuickInsertHoverPreview.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
import { createPortal } from 'react-dom';
|
|
7
|
+
import { Popper } from '@atlaskit/popper/main';
|
|
8
|
+
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
|
|
9
|
+
const PREVIEW_WIDTH = 294;
|
|
10
|
+
const PREVIEW_OFFSET = [-4, 4];
|
|
11
|
+
const PREVIEW_MODIFIERS = [{
|
|
12
|
+
name: 'preventOverflow',
|
|
13
|
+
options: {
|
|
14
|
+
mainAxis: false
|
|
15
|
+
}
|
|
16
|
+
}];
|
|
17
|
+
const styles = {
|
|
18
|
+
image: "_1e0c1ule _1pby16oo",
|
|
19
|
+
hidden: "_3um015vq",
|
|
20
|
+
visible: "_3um0ewfl"
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
|
|
24
|
+
export const QuickInsertHoverPreview = ({
|
|
25
|
+
previewImageUrls,
|
|
26
|
+
referenceElement
|
|
27
|
+
}) => {
|
|
28
|
+
const {
|
|
29
|
+
colorMode
|
|
30
|
+
} = useThemeObserver();
|
|
31
|
+
const previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
|
|
32
|
+
return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
|
|
33
|
+
key: previewImageUrl,
|
|
34
|
+
previewImageUrl: previewImageUrl,
|
|
35
|
+
referenceElement: referenceElement
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
const QuickInsertHoverPreviewImage = ({
|
|
39
|
+
previewImageUrl,
|
|
40
|
+
referenceElement
|
|
41
|
+
}) => {
|
|
42
|
+
const [hasFailed, setHasFailed] = useState(false);
|
|
43
|
+
const [dimensions, setDimensions] = useState();
|
|
44
|
+
if (hasFailed) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
|
|
49
|
+
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
|
|
50
|
+
offset: PREVIEW_OFFSET,
|
|
51
|
+
placement: "right-start",
|
|
52
|
+
referenceElement: referenceElement,
|
|
53
|
+
strategy: "fixed",
|
|
54
|
+
shouldFitViewport: true,
|
|
55
|
+
modifiers: PREVIEW_MODIFIERS
|
|
56
|
+
}, ({
|
|
57
|
+
ref,
|
|
58
|
+
style
|
|
59
|
+
}) => /*#__PURE__*/React.createElement("img", {
|
|
60
|
+
ref: ref,
|
|
61
|
+
style: {
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Popper positioning and intrinsic image dimensions are runtime values.
|
|
63
|
+
...style,
|
|
64
|
+
height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
|
|
65
|
+
width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
|
|
66
|
+
},
|
|
67
|
+
"aria-hidden": "true",
|
|
68
|
+
"data-testid": "quick-insert-hover-preview",
|
|
69
|
+
src: previewImageUrl,
|
|
70
|
+
alt: "",
|
|
71
|
+
onLoad: event => {
|
|
72
|
+
const {
|
|
73
|
+
naturalHeight,
|
|
74
|
+
naturalWidth
|
|
75
|
+
} = event.currentTarget;
|
|
76
|
+
if (naturalWidth === 0) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
setDimensions({
|
|
80
|
+
height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
|
|
81
|
+
width: PREVIEW_WIDTH
|
|
82
|
+
});
|
|
83
|
+
},
|
|
84
|
+
onError: () => setHasFailed(true),
|
|
85
|
+
className: ax([styles.image, dimensions ? styles.visible : styles.hidden])
|
|
86
|
+
})), referenceElement.ownerDocument.body);
|
|
87
|
+
};
|
|
@@ -8,6 +8,7 @@ export const QuickInsertMenuItem = ({
|
|
|
8
8
|
iconBefore,
|
|
9
9
|
isDisabled,
|
|
10
10
|
onSelect,
|
|
11
|
+
previewImageUrls,
|
|
11
12
|
shortcut,
|
|
12
13
|
shouldWrapIcon,
|
|
13
14
|
title
|
|
@@ -30,6 +31,7 @@ export const QuickInsertMenuItem = ({
|
|
|
30
31
|
iconBefore: iconBefore,
|
|
31
32
|
isDisabled: isDisabled,
|
|
32
33
|
onSelect: onSelect,
|
|
34
|
+
previewImageUrls: previewImageUrls,
|
|
33
35
|
shortcut: shortcut,
|
|
34
36
|
shouldWrapIcon: shouldWrapIcon,
|
|
35
37
|
title: title
|
|
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
15
15
|
import Layer from '../Layer';
|
|
16
16
|
const packageName = "@atlaskit/editor-common";
|
|
17
|
-
const packageVersion = "122.6.
|
|
17
|
+
const packageVersion = "122.6.1";
|
|
18
18
|
const halfFocusRing = 1;
|
|
19
19
|
const dropOffset = '0, 8';
|
|
20
20
|
const fadeIn = keyframes({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
2
|
import Loadable from 'react-loadable';
|
|
3
|
-
import
|
|
3
|
+
import ResourcedMention from '@atlaskit/mention/resourced-mention';
|
|
4
4
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
6
6
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import ResourcedMention from '@atlaskit/mention/resourced-mention';
|
|
4
4
|
import ResourcedMentionWithProfilecard from './mention-with-profilecard';
|
|
5
5
|
const GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
|
|
6
6
|
const useMentionNodeData = ({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.
|
|
1
|
+
/* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
2
|
import "./DropdownTriggerWrapper.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
2
1
|
import { SortOrder } from '../types';
|
|
3
2
|
import { ContentType } from './ContentType';
|
|
4
3
|
function getLinkMark(node) {
|
|
@@ -217,10 +216,8 @@ function compareMetaFromNode(metaNodeA, metaNodeB) {
|
|
|
217
216
|
if (metaNodeA === null || metaNodeB === null) {
|
|
218
217
|
return metaNodeB === null ? -1 : 1;
|
|
219
218
|
}
|
|
220
|
-
if (
|
|
221
|
-
|
|
222
|
-
return compareValue(String(metaNodeA.value), String(metaNodeB.value));
|
|
223
|
-
}
|
|
219
|
+
if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
|
|
220
|
+
return compareValue(String(metaNodeA.value), String(metaNodeB.value));
|
|
224
221
|
}
|
|
225
222
|
if (metaNodeA.type !== metaNodeB.type) {
|
|
226
223
|
return metaNodeA.type > metaNodeB.type ? 1 : -1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v3.0.
|
|
1
|
+
/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
2
|
import "./ExtensionFloatingLabel.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* GeneratedContentReveal.tsx generated by @compiled/babel-plugin v3.0.
|
|
1
|
+
/* GeneratedContentReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./GeneratedContentReveal.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v3.0.
|
|
1
|
+
/* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./UnknownMacroPlaceholder.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -13,7 +13,9 @@ import { jsx } from '@emotion/react';
|
|
|
13
13
|
import ReactDOM from 'react-dom';
|
|
14
14
|
import { createIntl, injectIntl } from 'react-intl';
|
|
15
15
|
import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
|
|
16
|
-
import {
|
|
16
|
+
import { fireFailedOperationalEvent as fireFailedMediaInlineEvent } from '@atlaskit/media-card/inline/fire-failed-operational-event';
|
|
17
|
+
import { fireSucceededOperationalEvent as fireSucceededMediaInlineEvent } from '@atlaskit/media-card/inline/fire-succeeded-operational-event';
|
|
18
|
+
import { MediaCardError } from '@atlaskit/media-card/media-card-error';
|
|
17
19
|
import { FileFetcherError } from '@atlaskit/media-client';
|
|
18
20
|
import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
|
|
19
21
|
import { MediaViewer } from '@atlaskit/media-viewer';
|
|
@@ -19,7 +19,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
|
|
|
19
19
|
var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
|
|
20
20
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
21
21
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
22
|
-
var packageVersion = "122.6.
|
|
22
|
+
var packageVersion = "122.6.1";
|
|
23
23
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
24
24
|
// Remove URL as it has UGC
|
|
25
25
|
// Ignored via go/ees007
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
/* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.
|
|
1
|
+
/* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
import "./CompactQuickInsertMenuItem.compiled.css";
|
|
3
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import React from 'react';
|
|
5
|
+
import React, { useState } from 'react';
|
|
5
6
|
import ButtonItem from '@atlaskit/menu/button-item';
|
|
6
7
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
7
8
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
|
|
8
9
|
import { Pressable, xcss } from '@atlaskit/primitives';
|
|
9
10
|
import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
|
|
11
|
+
import { QuickInsertHoverPreview } from './QuickInsertHoverPreview';
|
|
10
12
|
import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
|
|
11
13
|
import { useQuickInsertContext } from './useQuickInsertContext';
|
|
12
14
|
var styles = {
|
|
@@ -74,6 +76,7 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
|
|
|
74
76
|
iconBefore = _ref.iconBefore,
|
|
75
77
|
isDisabled = _ref.isDisabled,
|
|
76
78
|
onSelect = _ref.onSelect,
|
|
79
|
+
previewImageUrls = _ref.previewImageUrls,
|
|
77
80
|
shortcut = _ref.shortcut,
|
|
78
81
|
_ref$shouldWrapIcon = _ref.shouldWrapIcon,
|
|
79
82
|
shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
|
|
@@ -87,6 +90,10 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
|
|
|
87
90
|
id = _ref2.id,
|
|
88
91
|
isSelected = _ref2.isSelected;
|
|
89
92
|
var handleClick = useQuickInsertMenuItemSelection(onSelect);
|
|
93
|
+
var _useState = useState(null),
|
|
94
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
95
|
+
referenceElement = _useState2[0],
|
|
96
|
+
setReferenceElement = _useState2[1];
|
|
90
97
|
if (!isExperimentEnabled('platform_editor_slash_command')) {
|
|
91
98
|
var _wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
|
|
92
99
|
xcss: styles.icon
|
|
@@ -111,7 +118,8 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
|
|
|
111
118
|
var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
|
|
112
119
|
xcss: styles.iconLarge
|
|
113
120
|
}, iconBefore) : iconBefore;
|
|
114
|
-
return /*#__PURE__*/React.createElement(Pressable, {
|
|
121
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
122
|
+
ref: setReferenceElement,
|
|
115
123
|
"aria-label": ariaLabel,
|
|
116
124
|
"aria-selected": isSelected,
|
|
117
125
|
id: id,
|
|
@@ -128,5 +136,9 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
|
|
|
128
136
|
}, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
|
|
129
137
|
as: "span",
|
|
130
138
|
xcss: styles.shortcut
|
|
131
|
-
}, shortcut)))
|
|
139
|
+
}, shortcut))), isSelected && !isDisabled && (previewImageUrls === null || previewImageUrls === void 0 ? void 0 : previewImageUrls.light) && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
|
|
140
|
+
key: previewImageUrls.light,
|
|
141
|
+
previewImageUrls: previewImageUrls,
|
|
142
|
+
referenceElement: referenceElement
|
|
143
|
+
}));
|
|
132
144
|
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
+
import "./QuickInsertHoverPreview.compiled.css";
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
|
+
import { useState } from 'react';
|
|
10
|
+
import { createPortal } from 'react-dom';
|
|
11
|
+
import { Popper } from '@atlaskit/popper/main';
|
|
12
|
+
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
|
|
13
|
+
var PREVIEW_WIDTH = 294;
|
|
14
|
+
var PREVIEW_OFFSET = [-4, 4];
|
|
15
|
+
var PREVIEW_MODIFIERS = [{
|
|
16
|
+
name: 'preventOverflow',
|
|
17
|
+
options: {
|
|
18
|
+
mainAxis: false
|
|
19
|
+
}
|
|
20
|
+
}];
|
|
21
|
+
var styles = {
|
|
22
|
+
image: "_1e0c1ule _1pby16oo",
|
|
23
|
+
hidden: "_3um015vq",
|
|
24
|
+
visible: "_3um0ewfl"
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
|
|
28
|
+
export var QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
|
|
29
|
+
var previewImageUrls = _ref.previewImageUrls,
|
|
30
|
+
referenceElement = _ref.referenceElement;
|
|
31
|
+
var _useThemeObserver = useThemeObserver(),
|
|
32
|
+
colorMode = _useThemeObserver.colorMode;
|
|
33
|
+
var previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
|
|
34
|
+
return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
|
|
35
|
+
key: previewImageUrl,
|
|
36
|
+
previewImageUrl: previewImageUrl,
|
|
37
|
+
referenceElement: referenceElement
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
var QuickInsertHoverPreviewImage = function QuickInsertHoverPreviewImage(_ref2) {
|
|
41
|
+
var previewImageUrl = _ref2.previewImageUrl,
|
|
42
|
+
referenceElement = _ref2.referenceElement;
|
|
43
|
+
var _useState = useState(false),
|
|
44
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
+
hasFailed = _useState2[0],
|
|
46
|
+
setHasFailed = _useState2[1];
|
|
47
|
+
var _useState3 = useState(),
|
|
48
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
49
|
+
dimensions = _useState4[0],
|
|
50
|
+
setDimensions = _useState4[1];
|
|
51
|
+
if (hasFailed) {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
|
|
56
|
+
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
|
|
57
|
+
offset: PREVIEW_OFFSET,
|
|
58
|
+
placement: "right-start",
|
|
59
|
+
referenceElement: referenceElement,
|
|
60
|
+
strategy: "fixed",
|
|
61
|
+
shouldFitViewport: true,
|
|
62
|
+
modifiers: PREVIEW_MODIFIERS
|
|
63
|
+
}, function (_ref3) {
|
|
64
|
+
var ref = _ref3.ref,
|
|
65
|
+
style = _ref3.style;
|
|
66
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
67
|
+
ref: ref,
|
|
68
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
69
|
+
height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
|
|
70
|
+
width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
|
|
71
|
+
}),
|
|
72
|
+
"aria-hidden": "true",
|
|
73
|
+
"data-testid": "quick-insert-hover-preview",
|
|
74
|
+
src: previewImageUrl,
|
|
75
|
+
alt: "",
|
|
76
|
+
onLoad: function onLoad(event) {
|
|
77
|
+
var _event$currentTarget = event.currentTarget,
|
|
78
|
+
naturalHeight = _event$currentTarget.naturalHeight,
|
|
79
|
+
naturalWidth = _event$currentTarget.naturalWidth;
|
|
80
|
+
if (naturalWidth === 0) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
setDimensions({
|
|
84
|
+
height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
|
|
85
|
+
width: PREVIEW_WIDTH
|
|
86
|
+
});
|
|
87
|
+
},
|
|
88
|
+
onError: function onError() {
|
|
89
|
+
return setHasFailed(true);
|
|
90
|
+
},
|
|
91
|
+
className: ax([styles.image, dimensions ? styles.visible : styles.hidden])
|
|
92
|
+
});
|
|
93
|
+
}), referenceElement.ownerDocument.body);
|
|
94
|
+
};
|
|
@@ -8,6 +8,7 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
|
|
|
8
8
|
iconBefore = _ref.iconBefore,
|
|
9
9
|
isDisabled = _ref.isDisabled,
|
|
10
10
|
onSelect = _ref.onSelect,
|
|
11
|
+
previewImageUrls = _ref.previewImageUrls,
|
|
11
12
|
shortcut = _ref.shortcut,
|
|
12
13
|
shouldWrapIcon = _ref.shouldWrapIcon,
|
|
13
14
|
title = _ref.title;
|
|
@@ -28,6 +29,7 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
|
|
|
28
29
|
iconBefore: iconBefore,
|
|
29
30
|
isDisabled: isDisabled,
|
|
30
31
|
onSelect: onSelect,
|
|
32
|
+
previewImageUrls: previewImageUrls,
|
|
31
33
|
shortcut: shortcut,
|
|
32
34
|
shouldWrapIcon: shouldWrapIcon,
|
|
33
35
|
title: title
|
|
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
21
21
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
22
22
|
import Layer from '../Layer';
|
|
23
23
|
var packageName = "@atlaskit/editor-common";
|
|
24
|
-
var packageVersion = "122.6.
|
|
24
|
+
var packageVersion = "122.6.1";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
2
|
import Loadable from 'react-loadable';
|
|
3
|
-
import
|
|
3
|
+
import ResourcedMention from '@atlaskit/mention/resourced-mention';
|
|
4
4
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
6
6
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
var _excluded = ["id", "mentionNodeDataProvider", "userType"];
|
|
5
5
|
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
6
|
-
import
|
|
6
|
+
import ResourcedMention from '@atlaskit/mention/resourced-mention';
|
|
7
7
|
import ResourcedMentionWithProfilecard from './mention-with-profilecard';
|
|
8
8
|
var GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
|
|
9
9
|
var useMentionNodeData = function useMentionNodeData(_ref) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.
|
|
1
|
+
/* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
2
|
import "./DropdownTriggerWrapper.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
3
2
|
import { SortOrder } from '../types';
|
|
4
3
|
import { ContentType } from './ContentType';
|
|
5
4
|
function getLinkMark(node) {
|
|
@@ -223,10 +222,8 @@ function compareMetaFromNode(metaNodeA, metaNodeB) {
|
|
|
223
222
|
if (metaNodeA === null || metaNodeB === null) {
|
|
224
223
|
return metaNodeB === null ? -1 : 1;
|
|
225
224
|
}
|
|
226
|
-
if (
|
|
227
|
-
|
|
228
|
-
return compareValue(String(metaNodeA.value), String(metaNodeB.value));
|
|
229
|
-
}
|
|
225
|
+
if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
|
|
226
|
+
return compareValue(String(metaNodeA.value), String(metaNodeB.value));
|
|
230
227
|
}
|
|
231
228
|
if (metaNodeA.type !== metaNodeB.type) {
|
|
232
229
|
return metaNodeA.type > metaNodeB.type ? 1 : -1;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { QuickInsertMenuItemProps } from './QuickInsertMenuItem';
|
|
3
|
-
export declare const CompactQuickInsertMenuItem: ({ ariaLabel, iconBefore, isDisabled, onSelect, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;
|
|
3
|
+
export declare const CompactQuickInsertMenuItem: ({ ariaLabel, iconBefore, isDisabled, onSelect, previewImageUrls, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
|
|
2
|
+
export declare const QuickInsertHoverPreview: ({ previewImageUrls, referenceElement, }: {
|
|
3
|
+
previewImageUrls: {
|
|
4
|
+
dark?: string;
|
|
5
|
+
light: string;
|
|
6
|
+
};
|
|
7
|
+
referenceElement: HTMLElement;
|
|
8
|
+
}) => React.JSX.Element;
|
|
@@ -14,8 +14,13 @@ export type QuickInsertMenuItemProps = {
|
|
|
14
14
|
iconBefore?: React.ReactNode;
|
|
15
15
|
isDisabled?: boolean;
|
|
16
16
|
onSelect: (context: OnSelectContext) => Transaction | false | void;
|
|
17
|
+
/** Approved preview images, loaded only while this slash-command item is selected. */
|
|
18
|
+
previewImageUrls?: {
|
|
19
|
+
dark?: string;
|
|
20
|
+
light: string;
|
|
21
|
+
} | null;
|
|
17
22
|
shortcut?: string;
|
|
18
23
|
shouldWrapIcon?: boolean;
|
|
19
24
|
title: string;
|
|
20
25
|
};
|
|
21
|
-
export declare const QuickInsertMenuItem: ({ ariaLabel, description, iconBefore, isDisabled, onSelect, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;
|
|
26
|
+
export declare const QuickInsertMenuItem: ({ ariaLabel, description, iconBefore, isDisabled, onSelect, previewImageUrls, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SyntheticEvent } from 'react';
|
|
2
|
-
import type { CardEvent, InlineCardEvent } from '@atlaskit/media-card';
|
|
2
|
+
import type { CardEvent, InlineCardEvent } from '@atlaskit/media-card/types';
|
|
3
3
|
import type { Identifier } from '@atlaskit/media-client';
|
|
4
4
|
export interface CardSurroundings {
|
|
5
5
|
collectionName: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { UserType as MentionUserType } from '@atlaskit/adf-schema/mention';
|
|
3
|
-
import type { MentionProvider } from '@atlaskit/mention';
|
|
3
|
+
import type { MentionProvider } from '@atlaskit/mention/types';
|
|
4
4
|
import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
|
|
5
5
|
import type { MentionEventHandler } from '../EventHandlers';
|
|
6
6
|
export interface Props {
|