@atlaskit/editor-common 125.3.0 → 125.4.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 +42 -0
- package/dist/cjs/extensions/buildMenuItem.js +6 -3
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.compiled.css +0 -1
- package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.js +22 -28
- package/dist/cjs/quick-insert/QuickInsertHoverPreview.compiled.css +42 -1
- package/dist/cjs/quick-insert/QuickInsertHoverPreview.js +147 -68
- package/dist/cjs/quick-insert/QuickInsertMenuItem.js +4 -0
- package/dist/cjs/quick-insert/QuickInsertMenuSection.js +11 -4
- package/dist/cjs/quick-insert/confluence-attribution-icon.js +18 -0
- package/dist/cjs/quick-insert/jira-attribution-icon.js +18 -0
- package/dist/cjs/quick-insert/messages.js +30 -0
- package/dist/cjs/quick-insert/preview.js +5 -0
- package/dist/cjs/quick-insert/snippetPreviewImageUrls.js +43 -43
- package/dist/cjs/quick-insert/use-menu-list-height.js +58 -0
- package/dist/cjs/quick-insert/use-menu-popup-sizing.js +60 -0
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui/Mention/mention-with-profilecard.js +8 -0
- package/dist/es2019/extensions/buildMenuItem.js +5 -1
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.compiled.css +0 -1
- package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.js +20 -29
- package/dist/es2019/quick-insert/QuickInsertHoverPreview.compiled.css +42 -1
- package/dist/es2019/quick-insert/QuickInsertHoverPreview.js +130 -55
- package/dist/es2019/quick-insert/QuickInsertMenuItem.js +4 -0
- package/dist/es2019/quick-insert/QuickInsertMenuSection.js +11 -4
- package/dist/es2019/quick-insert/confluence-attribution-icon.js +10 -0
- package/dist/es2019/quick-insert/jira-attribution-icon.js +10 -0
- package/dist/es2019/quick-insert/messages.js +30 -0
- package/dist/es2019/quick-insert/preview.js +1 -0
- package/dist/es2019/quick-insert/snippetPreviewImageUrls.js +43 -43
- package/dist/es2019/quick-insert/use-menu-list-height.js +37 -0
- package/dist/es2019/quick-insert/use-menu-popup-sizing.js +49 -0
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui/Mention/mention-with-profilecard.js +8 -0
- package/dist/esm/extensions/buildMenuItem.js +6 -3
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/quick-insert/CompactQuickInsertMenuItem.compiled.css +0 -1
- package/dist/esm/quick-insert/CompactQuickInsertMenuItem.js +23 -29
- package/dist/esm/quick-insert/QuickInsertHoverPreview.compiled.css +42 -1
- package/dist/esm/quick-insert/QuickInsertHoverPreview.js +150 -68
- package/dist/esm/quick-insert/QuickInsertMenuItem.js +4 -0
- package/dist/esm/quick-insert/QuickInsertMenuSection.js +11 -4
- package/dist/esm/quick-insert/confluence-attribution-icon.js +12 -0
- package/dist/esm/quick-insert/jira-attribution-icon.js +12 -0
- package/dist/esm/quick-insert/messages.js +30 -0
- package/dist/esm/quick-insert/preview.js +1 -0
- package/dist/esm/quick-insert/snippetPreviewImageUrls.js +43 -43
- package/dist/esm/quick-insert/use-menu-list-height.js +51 -0
- package/dist/esm/quick-insert/use-menu-popup-sizing.js +53 -0
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui/Mention/mention-with-profilecard.js +8 -0
- package/dist/types/extensions/types/extension-manifest.d.ts +5 -0
- package/dist/types/extensions/types/utils.d.ts +2 -0
- package/dist/types/provider-factory/profile-card-provider.d.ts +14 -1
- package/dist/types/provider-factory/quick-insert-provider.d.ts +3 -0
- package/dist/types/quick-insert/CompactQuickInsertMenuItem.d.ts +1 -1
- package/dist/types/quick-insert/QuickInsertHoverPreview.d.ts +7 -6
- package/dist/types/quick-insert/QuickInsertMenuItem.d.ts +7 -2
- package/dist/types/quick-insert/confluence-attribution-icon.d.ts +3 -0
- package/dist/types/quick-insert/jira-attribution-icon.d.ts +3 -0
- package/dist/types/quick-insert/messages.d.ts +5 -2
- package/dist/types/quick-insert/preview.d.ts +16 -0
- package/dist/types/quick-insert/use-menu-list-height.d.ts +6 -0
- package/dist/types/quick-insert/use-menu-popup-sizing.d.ts +11 -0
- package/package.json +4 -3
- package/quick-insert/confluence-attribution-icon/package.json +10 -0
- package/quick-insert/jira-attribution-icon/package.json +10 -0
- package/quick-insert/preview/package.json +10 -0
- package/quick-insert/use-menu-list-height/package.json +10 -0
- package/quick-insert/use-menu-popup-sizing/package.json +10 -0
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./CompactQuickInsertMenuItem.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
-
import React, { useState } from 'react';
|
|
6
|
-
import ButtonItem from '@atlaskit/menu/button-item';
|
|
7
|
-
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
5
|
+
import React, { useId, useMemo, useState } from 'react';
|
|
8
6
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
|
|
9
7
|
import { Pressable, xcss } from '@atlaskit/primitives';
|
|
10
8
|
import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
|
|
@@ -14,7 +12,6 @@ import { useQuickInsertContext } from './useQuickInsertContext';
|
|
|
14
12
|
var styles = {
|
|
15
13
|
iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
|
|
16
14
|
content: "_16jlkb7n _1o9zkb7n _i0dlidpf _1ul9idpf",
|
|
17
|
-
icon: "_2rko1qi0 _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
|
|
18
15
|
iconLarge: "_2rko1mok _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
|
|
19
16
|
shortcut: "_2rko12b0 _11c8wadc _1rjcv77o _18zr1b66 _bfhki8nm _syazazsu"
|
|
20
17
|
};
|
|
@@ -72,12 +69,17 @@ var disabledItemStyles = xcss({
|
|
|
72
69
|
width: '100%'
|
|
73
70
|
});
|
|
74
71
|
export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref) {
|
|
72
|
+
var _ref3, _resolvedPreview$imag, _resolvedPreview$imag2, _resolvedPreview$attr;
|
|
75
73
|
var ariaLabel = _ref.ariaLabel,
|
|
74
|
+
description = _ref.description,
|
|
76
75
|
iconBefore = _ref.iconBefore,
|
|
77
76
|
isDisabled = _ref.isDisabled,
|
|
78
77
|
onSelect = _ref.onSelect,
|
|
78
|
+
preview = _ref.preview,
|
|
79
79
|
previewImageUrls = _ref.previewImageUrls,
|
|
80
80
|
shortcut = _ref.shortcut,
|
|
81
|
+
_ref$shouldShowPrevie = _ref.shouldShowPreview,
|
|
82
|
+
shouldShowPreview = _ref$shouldShowPrevie === void 0 ? true : _ref$shouldShowPrevie,
|
|
81
83
|
_ref$shouldWrapIcon = _ref.shouldWrapIcon,
|
|
82
84
|
shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
|
|
83
85
|
title = _ref.title;
|
|
@@ -89,38 +91,27 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
|
|
|
89
91
|
},
|
|
90
92
|
id = _ref2.id,
|
|
91
93
|
isSelected = _ref2.isSelected;
|
|
94
|
+
var resolvedDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
|
|
95
|
+
var previewId = useId();
|
|
92
96
|
var handleClick = useQuickInsertMenuItemSelection(onSelect);
|
|
93
97
|
var _useState = useState(null),
|
|
94
98
|
_useState2 = _slicedToArray(_useState, 2),
|
|
95
99
|
referenceElement = _useState2[0],
|
|
96
100
|
setReferenceElement = _useState2[1];
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
iconBefore: _wrappedIcon,
|
|
105
|
-
id: id,
|
|
106
|
-
isDisabled: isDisabled,
|
|
107
|
-
isSelected: isSelected,
|
|
108
|
-
onClick: handleClick,
|
|
109
|
-
role: "option"
|
|
110
|
-
}, /*#__PURE__*/React.createElement(Inline, {
|
|
111
|
-
alignBlock: "center",
|
|
112
|
-
spread: "space-between"
|
|
113
|
-
}, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
|
|
114
|
-
as: "span",
|
|
115
|
-
xcss: styles.shortcut
|
|
116
|
-
}, shortcut)));
|
|
117
|
-
}
|
|
101
|
+
var resolvedPreview = useMemo(function () {
|
|
102
|
+
return preview !== null && preview !== void 0 ? preview : previewImageUrls ? {
|
|
103
|
+
image: previewImageUrls
|
|
104
|
+
} : {};
|
|
105
|
+
}, [preview, previewImageUrls]);
|
|
106
|
+
var shouldRenderPreview = shouldShowPreview && isSelected && !isDisabled;
|
|
107
|
+
var hasAccessiblePreview = Boolean(resolvedDescription || (resolvedPreview === null || resolvedPreview === void 0 ? void 0 : resolvedPreview.attribution));
|
|
118
108
|
var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
|
|
119
109
|
xcss: styles.iconLarge
|
|
120
110
|
}, iconBefore) : iconBefore;
|
|
121
111
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
122
112
|
ref: setReferenceElement,
|
|
123
113
|
"aria-label": ariaLabel,
|
|
114
|
+
"aria-describedby": shouldRenderPreview && hasAccessiblePreview ? previewId : undefined,
|
|
124
115
|
"aria-selected": isSelected,
|
|
125
116
|
id: id,
|
|
126
117
|
isDisabled: isDisabled,
|
|
@@ -136,9 +127,12 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
|
|
|
136
127
|
}, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
|
|
137
128
|
as: "span",
|
|
138
129
|
xcss: styles.shortcut
|
|
139
|
-
}, shortcut))),
|
|
140
|
-
key:
|
|
141
|
-
|
|
142
|
-
|
|
130
|
+
}, shortcut))), shouldRenderPreview && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
|
|
131
|
+
key: (_ref3 = (_resolvedPreview$imag = (_resolvedPreview$imag2 = resolvedPreview.image) === null || _resolvedPreview$imag2 === void 0 ? void 0 : _resolvedPreview$imag2.light) !== null && _resolvedPreview$imag !== void 0 ? _resolvedPreview$imag : (_resolvedPreview$attr = resolvedPreview.attribution) === null || _resolvedPreview$attr === void 0 ? void 0 : _resolvedPreview$attr.name) !== null && _ref3 !== void 0 ? _ref3 : title,
|
|
132
|
+
id: previewId,
|
|
133
|
+
description: resolvedDescription,
|
|
134
|
+
preview: resolvedPreview,
|
|
135
|
+
referenceElement: referenceElement,
|
|
136
|
+
title: title
|
|
143
137
|
}));
|
|
144
138
|
};
|
|
@@ -1,4 +1,45 @@
|
|
|
1
|
+
._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
+
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
+
._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
|
+
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
5
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
6
|
+
._zulp1b66{gap:var(--ds-space-050,4px)}
|
|
7
|
+
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
8
|
+
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
|
|
9
|
+
._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
|
|
10
|
+
._16jlidpf{flex-grow:0}
|
|
11
|
+
._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
12
|
+
._18m915vq{overflow-y:hidden}
|
|
13
|
+
._1bah1h6o{justify-content:center}
|
|
14
|
+
._1bsb1osq{width:100%}
|
|
15
|
+
._1bsb7vkz{width:1pc}
|
|
16
|
+
._1bsbncxg{width:264px}
|
|
17
|
+
._1bsbp3fh{width:15pc}
|
|
18
|
+
._1e0c1txw{display:flex}
|
|
1
19
|
._1e0c1ule{display:block}
|
|
20
|
+
._1e0ccj1k{display:-webkit-box}
|
|
21
|
+
._1i4qfg65{overflow-wrap:anywhere}
|
|
22
|
+
._1o9zidpf{flex-shrink:0}
|
|
2
23
|
._1pby16oo{z-index:510}
|
|
24
|
+
._1reo15vq{overflow-x:hidden}
|
|
25
|
+
._1yyjcs5v{-webkit-line-clamp:2}
|
|
26
|
+
._1yyjegat{-webkit-line-clamp:4}
|
|
27
|
+
._2lx21bp4{flex-direction:column}
|
|
3
28
|
._3um015vq{visibility:hidden}
|
|
4
|
-
.
|
|
29
|
+
._4cvr1h6o{align-items:center}
|
|
30
|
+
._4t3i1osq{height:100%}
|
|
31
|
+
._4t3i68cl{height:90pt}
|
|
32
|
+
._4t3i7vkz{height:1pc}
|
|
33
|
+
._5ral1f51{object-fit:contain}
|
|
34
|
+
._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
|
|
35
|
+
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
36
|
+
._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
|
|
37
|
+
._c71l1kw7{max-height:inherit}
|
|
38
|
+
._c71lk6is{max-height:calc(100vh - 1pc)}
|
|
39
|
+
._i0dlexct{flex-basis:16px}
|
|
40
|
+
._p12f1oec{max-width:calc(100vw - 1pc)}
|
|
41
|
+
._p12f1osq{max-width:100%}
|
|
42
|
+
._sudp1e54{-webkit-box-orient:vertical}
|
|
43
|
+
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
44
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
45
|
+
._vchhusvi{box-sizing:border-box}
|
|
@@ -1,94 +1,176 @@
|
|
|
1
1
|
/* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
3
|
import "./QuickInsertHoverPreview.compiled.css";
|
|
5
4
|
import * as React from 'react';
|
|
6
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
7
|
-
|
|
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';
|
|
6
|
+
import { useLayoutEffect, useState } from 'react';
|
|
10
7
|
import { createPortal } from 'react-dom';
|
|
11
|
-
|
|
8
|
+
|
|
9
|
+
// Viewport calculations and multiline clamping require styles outside @atlaskit/css's schema.
|
|
10
|
+
|
|
11
|
+
import { useIntl } from 'react-intl';
|
|
12
|
+
|
|
13
|
+
// Viewport clamping requires modifiers, which the top-layer adapter does not support.
|
|
14
|
+
import { Popper } from '@atlaskit/popper/react-popper';
|
|
15
|
+
import { Text } from '@atlaskit/primitives/compiled/text';
|
|
12
16
|
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
|
|
13
|
-
|
|
14
|
-
var PREVIEW_OFFSET = [-4, 4];
|
|
17
|
+
import { messages } from './messages';
|
|
15
18
|
var PREVIEW_MODIFIERS = [{
|
|
19
|
+
name: 'offset',
|
|
20
|
+
options: {
|
|
21
|
+
offset: [0, 4]
|
|
22
|
+
}
|
|
23
|
+
}, {
|
|
24
|
+
name: 'flip',
|
|
25
|
+
options: {
|
|
26
|
+
fallbackPlacements: ['left-start'],
|
|
27
|
+
// Choose the side by horizontal space; vertical overflow is shifted into view.
|
|
28
|
+
altAxis: false,
|
|
29
|
+
padding: 8,
|
|
30
|
+
rootBoundary: 'viewport'
|
|
31
|
+
}
|
|
32
|
+
}, {
|
|
16
33
|
name: 'preventOverflow',
|
|
17
34
|
options: {
|
|
18
|
-
mainAxis:
|
|
35
|
+
mainAxis: true,
|
|
36
|
+
altAxis: true,
|
|
37
|
+
tether: false,
|
|
38
|
+
padding: 8,
|
|
39
|
+
rootBoundary: 'viewport'
|
|
19
40
|
}
|
|
20
41
|
}];
|
|
21
42
|
var styles = {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
43
|
+
positioner: "_c71lk6is _p12f1oec _1pby16oo",
|
|
44
|
+
panel: "_2rko1qi0 _1reo15vq _18m915vq _1rjcutpp _18zrutpp _vchhusvi _bfhk1bhr _16qs130s _c71l1kw7 _p12f1osq _1bsbncxg",
|
|
45
|
+
content: "_zulpu2gc _1e0c1txw _2lx21bp4",
|
|
46
|
+
title: "_11c81qyo _1reo15vq _18m915vq _syazazsu _1i4qfg65 _1e0ccj1k _sudp1e54 _1yyjcs5v",
|
|
47
|
+
description: "_11c8fhey _1reo15vq _18m915vq _syazi7uo _1e0ccj1k _1i4qfg65 _sudp1e54 _1yyjegat",
|
|
48
|
+
imageArea: "_2rko12b0 _1reo15vq _18m915vq _bfhkhfxm _4t3i68cl _6rthu2gc _p12f1osq _1bsbp3fh",
|
|
49
|
+
image: "_1e0c1ule _4t3i1osq _5ral1f51 _1bsb1osq",
|
|
50
|
+
imageHidden: "_3um015vq",
|
|
51
|
+
attribution: "_11c8wadc _zulp1b66 _4cvr1h6o _syazazsu _1e0c1txw _1i4qfg65",
|
|
52
|
+
attributionIcon: "_16jlidpf _1o9zidpf _i0dlexct _4cvr1h6o _1e0c1txw _4t3i7vkz _1bah1h6o _1bsb7vkz"
|
|
25
53
|
};
|
|
26
54
|
|
|
27
|
-
/**
|
|
55
|
+
/** The selected item's description and attribution are announced through its aria-describedby. */
|
|
28
56
|
export var QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
|
|
29
|
-
var
|
|
30
|
-
|
|
57
|
+
var description = _ref.description,
|
|
58
|
+
id = _ref.id,
|
|
59
|
+
preview = _ref.preview,
|
|
60
|
+
referenceElement = _ref.referenceElement,
|
|
61
|
+
title = _ref.title;
|
|
31
62
|
var _useThemeObserver = useThemeObserver(),
|
|
32
63
|
colorMode = _useThemeObserver.colorMode;
|
|
33
|
-
var
|
|
34
|
-
|
|
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.
|
|
64
|
+
var imageUrl = preview.image ? colorMode === 'dark' && preview.image.dark ? preview.image.dark : preview.image.light : undefined;
|
|
65
|
+
var hasAccessibleContent = Boolean(description || preview.attribution);
|
|
56
66
|
return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
|
|
57
|
-
offset: PREVIEW_OFFSET,
|
|
58
67
|
placement: "right-start",
|
|
59
68
|
referenceElement: referenceElement,
|
|
60
69
|
strategy: "fixed",
|
|
61
|
-
shouldFitViewport: true,
|
|
62
70
|
modifiers: PREVIEW_MODIFIERS
|
|
63
|
-
}, function (
|
|
64
|
-
var ref =
|
|
65
|
-
style =
|
|
66
|
-
|
|
71
|
+
}, function (_ref2) {
|
|
72
|
+
var ref = _ref2.ref,
|
|
73
|
+
style = _ref2.style,
|
|
74
|
+
update = _ref2.update;
|
|
75
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
67
76
|
ref: ref,
|
|
68
|
-
style:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
});
|
|
77
|
+
style: style,
|
|
78
|
+
className: ax([styles.positioner])
|
|
79
|
+
}, /*#__PURE__*/React.createElement(QuickInsertPreviewPanel, {
|
|
80
|
+
description: description,
|
|
81
|
+
id: hasAccessibleContent ? id : undefined,
|
|
82
|
+
imageUrl: imageUrl,
|
|
83
|
+
preview: preview,
|
|
84
|
+
referenceElement: referenceElement,
|
|
85
|
+
title: title,
|
|
86
|
+
update: update
|
|
87
|
+
}));
|
|
93
88
|
}), referenceElement.ownerDocument.body);
|
|
89
|
+
};
|
|
90
|
+
var QuickInsertPreviewPanel = function QuickInsertPreviewPanel(_ref3) {
|
|
91
|
+
var _preview$attribution;
|
|
92
|
+
var description = _ref3.description,
|
|
93
|
+
id = _ref3.id,
|
|
94
|
+
imageUrl = _ref3.imageUrl,
|
|
95
|
+
preview = _ref3.preview,
|
|
96
|
+
referenceElement = _ref3.referenceElement,
|
|
97
|
+
title = _ref3.title,
|
|
98
|
+
update = _ref3.update;
|
|
99
|
+
var _useIntl = useIntl(),
|
|
100
|
+
formatMessage = _useIntl.formatMessage;
|
|
101
|
+
var _useState = useState(null),
|
|
102
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
103
|
+
panelElement = _useState2[0],
|
|
104
|
+
setPanelElement = _useState2[1];
|
|
105
|
+
var AttributionIcon = (_preview$attribution = preview.attribution) === null || _preview$attribution === void 0 ? void 0 : _preview$attribution.icon;
|
|
106
|
+
useLayoutEffect(function () {
|
|
107
|
+
var _referenceElement$own;
|
|
108
|
+
void update();
|
|
109
|
+
var ResizeObserverConstructor = (_referenceElement$own = referenceElement.ownerDocument.defaultView) === null || _referenceElement$own === void 0 ? void 0 : _referenceElement$own.ResizeObserver;
|
|
110
|
+
if (!panelElement || !ResizeObserverConstructor) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
var observer = new ResizeObserverConstructor(function () {
|
|
114
|
+
return void update();
|
|
115
|
+
});
|
|
116
|
+
observer.observe(panelElement);
|
|
117
|
+
return function () {
|
|
118
|
+
return observer.disconnect();
|
|
119
|
+
};
|
|
120
|
+
}, [panelElement, referenceElement, update]);
|
|
121
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
122
|
+
ref: setPanelElement,
|
|
123
|
+
id: id,
|
|
124
|
+
role: id ? 'tooltip' : undefined,
|
|
125
|
+
"data-testid": "quick-insert-preview-panel",
|
|
126
|
+
className: ax([styles.panel])
|
|
127
|
+
}, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
|
|
128
|
+
key: imageUrl,
|
|
129
|
+
imageUrl: imageUrl
|
|
130
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
131
|
+
className: ax([styles.content])
|
|
132
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
133
|
+
"aria-hidden": "true",
|
|
134
|
+
className: ax([styles.title])
|
|
135
|
+
}, title), description && /*#__PURE__*/React.createElement("div", {
|
|
136
|
+
className: ax([styles.description])
|
|
137
|
+
}, description), preview.attribution && /*#__PURE__*/React.createElement("div", {
|
|
138
|
+
className: ax([styles.attribution])
|
|
139
|
+
}, AttributionIcon && /*#__PURE__*/React.createElement("span", {
|
|
140
|
+
"aria-hidden": "true",
|
|
141
|
+
className: ax([styles.attributionIcon])
|
|
142
|
+
}, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement(Text, {
|
|
143
|
+
size: "small",
|
|
144
|
+
color: "color.text.subtle"
|
|
145
|
+
}, AttributionIcon ? preview.attribution.name : formatMessage(messages.previewAttributionBy, {
|
|
146
|
+
name: preview.attribution.name
|
|
147
|
+
})))));
|
|
148
|
+
};
|
|
149
|
+
var PreviewImage = function PreviewImage(_ref4) {
|
|
150
|
+
var imageUrl = _ref4.imageUrl;
|
|
151
|
+
var _useState3 = useState(false),
|
|
152
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
153
|
+
hasFailed = _useState4[0],
|
|
154
|
+
setHasFailed = _useState4[1];
|
|
155
|
+
var _useState5 = useState(false),
|
|
156
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
157
|
+
hasLoaded = _useState6[0],
|
|
158
|
+
setHasLoaded = _useState6[1];
|
|
159
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
160
|
+
"aria-hidden": "true",
|
|
161
|
+
"data-testid": "quick-insert-preview-image-area",
|
|
162
|
+
className: ax([styles.imageArea])
|
|
163
|
+
}, !hasFailed && /*#__PURE__*/React.createElement("img", {
|
|
164
|
+
"aria-hidden": "true",
|
|
165
|
+
"data-testid": "quick-insert-hover-preview",
|
|
166
|
+
src: imageUrl,
|
|
167
|
+
alt: "",
|
|
168
|
+
onLoad: function onLoad() {
|
|
169
|
+
return setHasLoaded(true);
|
|
170
|
+
},
|
|
171
|
+
onError: function onError() {
|
|
172
|
+
return setHasFailed(true);
|
|
173
|
+
},
|
|
174
|
+
className: ax([styles.image, !hasLoaded && styles.imageHidden])
|
|
175
|
+
}));
|
|
94
176
|
};
|
|
@@ -8,8 +8,10 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
|
|
|
8
8
|
iconBefore = _ref.iconBefore,
|
|
9
9
|
isDisabled = _ref.isDisabled,
|
|
10
10
|
onSelect = _ref.onSelect,
|
|
11
|
+
preview = _ref.preview,
|
|
11
12
|
previewImageUrls = _ref.previewImageUrls,
|
|
12
13
|
shortcut = _ref.shortcut,
|
|
14
|
+
shouldShowPreview = _ref.shouldShowPreview,
|
|
13
15
|
shouldWrapIcon = _ref.shouldWrapIcon,
|
|
14
16
|
title = _ref.title;
|
|
15
17
|
var _useQuickInsertContex = useQuickInsertContext(),
|
|
@@ -29,8 +31,10 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
|
|
|
29
31
|
iconBefore: iconBefore,
|
|
30
32
|
isDisabled: isDisabled,
|
|
31
33
|
onSelect: onSelect,
|
|
34
|
+
preview: preview,
|
|
32
35
|
previewImageUrls: previewImageUrls,
|
|
33
36
|
shortcut: shortcut,
|
|
37
|
+
shouldShowPreview: shouldShowPreview,
|
|
34
38
|
shouldWrapIcon: shouldWrapIcon,
|
|
35
39
|
title: title
|
|
36
40
|
});
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import HeadingItem from '@atlaskit/menu/heading-item';
|
|
3
|
+
import { Box } from '@atlaskit/primitives/compiled/box';
|
|
3
4
|
export var QuickInsertMenuSection = function QuickInsertMenuSection(_ref) {
|
|
4
5
|
var children = _ref.children,
|
|
5
6
|
title = _ref.title;
|
|
6
|
-
return /*#__PURE__*/React.createElement(
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
8
|
+
role: "group",
|
|
9
|
+
"aria-label": title
|
|
10
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
11
|
+
paddingBlockStart: "space.150",
|
|
12
|
+
paddingBlockEnd: "space.050"
|
|
13
|
+
}, /*#__PURE__*/React.createElement(HeadingItem, {
|
|
14
|
+
"aria-hidden": true
|
|
15
|
+
}, title)), children);
|
|
9
16
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { confluenceIcon } from '@atlaskit/logo/raw-icons';
|
|
3
|
+
|
|
4
|
+
/** Decorative product icon accompanying the localized Confluence attribution name. */
|
|
5
|
+
export var ConfluenceAttributionIcon = function ConfluenceAttributionIcon() {
|
|
6
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
7
|
+
src: confluenceIcon,
|
|
8
|
+
alt: "",
|
|
9
|
+
width: 16,
|
|
10
|
+
height: 16
|
|
11
|
+
});
|
|
12
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jiraIcon } from '@atlaskit/logo/raw-icons';
|
|
3
|
+
|
|
4
|
+
/** Decorative product icon accompanying the localized Jira attribution name. */
|
|
5
|
+
export var JiraAttributionIcon = function JiraAttributionIcon() {
|
|
6
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
7
|
+
src: jiraIcon,
|
|
8
|
+
alt: "",
|
|
9
|
+
width: 16,
|
|
10
|
+
height: 16
|
|
11
|
+
});
|
|
12
|
+
};
|
|
@@ -129,5 +129,35 @@ export var messages = defineMessages({
|
|
|
129
129
|
id: 'editor-common.quick-insert.categoryOther',
|
|
130
130
|
defaultMessage: 'Other',
|
|
131
131
|
description: 'Other items in the Quick Insert menu.'
|
|
132
|
+
},
|
|
133
|
+
previewAttributionBy: {
|
|
134
|
+
id: 'editor-common.quick-insert.previewAttributionBy',
|
|
135
|
+
defaultMessage: 'By {name}',
|
|
136
|
+
description: 'Attribution shown in a Quick Insert item preview.'
|
|
137
|
+
},
|
|
138
|
+
previewAttributionAtlassian: {
|
|
139
|
+
id: 'editor-common.quick-insert.previewAttributionAtlassian.ai-non-final',
|
|
140
|
+
defaultMessage: 'Atlassian',
|
|
141
|
+
description: 'Atlassian company name shown as the creator in a slash-command preview attribution.'
|
|
142
|
+
},
|
|
143
|
+
previewAttributionAssets: {
|
|
144
|
+
id: 'editor-common.quick-insert.previewAttributionAssets.ai-non-final',
|
|
145
|
+
defaultMessage: 'Assets',
|
|
146
|
+
description: 'Assets product name shown as the creator in a slash-command preview attribution.'
|
|
147
|
+
},
|
|
148
|
+
previewAttributionConfluence: {
|
|
149
|
+
id: 'editor-common.quick-insert.previewAttributionConfluence.ai-non-final',
|
|
150
|
+
defaultMessage: 'Confluence',
|
|
151
|
+
description: 'Confluence product name shown as the creator in a slash-command preview attribution.'
|
|
152
|
+
},
|
|
153
|
+
previewAttributionJira: {
|
|
154
|
+
id: 'editor-common.quick-insert.previewAttributionJira.ai-non-final',
|
|
155
|
+
defaultMessage: 'Jira',
|
|
156
|
+
description: 'Jira product name shown as the creator in a slash-command preview attribution.'
|
|
157
|
+
},
|
|
158
|
+
previewAttributionMicrosoft: {
|
|
159
|
+
id: 'editor-common.quick-insert.previewAttributionMicrosoft.ai-non-final',
|
|
160
|
+
defaultMessage: 'Microsoft',
|
|
161
|
+
description: 'Microsoft company name shown as the creator in a slash-command preview attribution.'
|
|
132
162
|
}
|
|
133
163
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|