@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.
Files changed (71) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/cjs/extensions/buildMenuItem.js +6 -3
  3. package/dist/cjs/monitoring/error.js +1 -1
  4. package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.compiled.css +0 -1
  5. package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.js +22 -28
  6. package/dist/cjs/quick-insert/QuickInsertHoverPreview.compiled.css +42 -1
  7. package/dist/cjs/quick-insert/QuickInsertHoverPreview.js +147 -68
  8. package/dist/cjs/quick-insert/QuickInsertMenuItem.js +4 -0
  9. package/dist/cjs/quick-insert/QuickInsertMenuSection.js +11 -4
  10. package/dist/cjs/quick-insert/confluence-attribution-icon.js +18 -0
  11. package/dist/cjs/quick-insert/jira-attribution-icon.js +18 -0
  12. package/dist/cjs/quick-insert/messages.js +30 -0
  13. package/dist/cjs/quick-insert/preview.js +5 -0
  14. package/dist/cjs/quick-insert/snippetPreviewImageUrls.js +43 -43
  15. package/dist/cjs/quick-insert/use-menu-list-height.js +58 -0
  16. package/dist/cjs/quick-insert/use-menu-popup-sizing.js +60 -0
  17. package/dist/cjs/ui/DropList/index.js +1 -1
  18. package/dist/cjs/ui/Mention/mention-with-profilecard.js +8 -0
  19. package/dist/es2019/extensions/buildMenuItem.js +5 -1
  20. package/dist/es2019/monitoring/error.js +1 -1
  21. package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.compiled.css +0 -1
  22. package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.js +20 -29
  23. package/dist/es2019/quick-insert/QuickInsertHoverPreview.compiled.css +42 -1
  24. package/dist/es2019/quick-insert/QuickInsertHoverPreview.js +130 -55
  25. package/dist/es2019/quick-insert/QuickInsertMenuItem.js +4 -0
  26. package/dist/es2019/quick-insert/QuickInsertMenuSection.js +11 -4
  27. package/dist/es2019/quick-insert/confluence-attribution-icon.js +10 -0
  28. package/dist/es2019/quick-insert/jira-attribution-icon.js +10 -0
  29. package/dist/es2019/quick-insert/messages.js +30 -0
  30. package/dist/es2019/quick-insert/preview.js +1 -0
  31. package/dist/es2019/quick-insert/snippetPreviewImageUrls.js +43 -43
  32. package/dist/es2019/quick-insert/use-menu-list-height.js +37 -0
  33. package/dist/es2019/quick-insert/use-menu-popup-sizing.js +49 -0
  34. package/dist/es2019/ui/DropList/index.js +1 -1
  35. package/dist/es2019/ui/Mention/mention-with-profilecard.js +8 -0
  36. package/dist/esm/extensions/buildMenuItem.js +6 -3
  37. package/dist/esm/monitoring/error.js +1 -1
  38. package/dist/esm/quick-insert/CompactQuickInsertMenuItem.compiled.css +0 -1
  39. package/dist/esm/quick-insert/CompactQuickInsertMenuItem.js +23 -29
  40. package/dist/esm/quick-insert/QuickInsertHoverPreview.compiled.css +42 -1
  41. package/dist/esm/quick-insert/QuickInsertHoverPreview.js +150 -68
  42. package/dist/esm/quick-insert/QuickInsertMenuItem.js +4 -0
  43. package/dist/esm/quick-insert/QuickInsertMenuSection.js +11 -4
  44. package/dist/esm/quick-insert/confluence-attribution-icon.js +12 -0
  45. package/dist/esm/quick-insert/jira-attribution-icon.js +12 -0
  46. package/dist/esm/quick-insert/messages.js +30 -0
  47. package/dist/esm/quick-insert/preview.js +1 -0
  48. package/dist/esm/quick-insert/snippetPreviewImageUrls.js +43 -43
  49. package/dist/esm/quick-insert/use-menu-list-height.js +51 -0
  50. package/dist/esm/quick-insert/use-menu-popup-sizing.js +53 -0
  51. package/dist/esm/ui/DropList/index.js +1 -1
  52. package/dist/esm/ui/Mention/mention-with-profilecard.js +8 -0
  53. package/dist/types/extensions/types/extension-manifest.d.ts +5 -0
  54. package/dist/types/extensions/types/utils.d.ts +2 -0
  55. package/dist/types/provider-factory/profile-card-provider.d.ts +14 -1
  56. package/dist/types/provider-factory/quick-insert-provider.d.ts +3 -0
  57. package/dist/types/quick-insert/CompactQuickInsertMenuItem.d.ts +1 -1
  58. package/dist/types/quick-insert/QuickInsertHoverPreview.d.ts +7 -6
  59. package/dist/types/quick-insert/QuickInsertMenuItem.d.ts +7 -2
  60. package/dist/types/quick-insert/confluence-attribution-icon.d.ts +3 -0
  61. package/dist/types/quick-insert/jira-attribution-icon.d.ts +3 -0
  62. package/dist/types/quick-insert/messages.d.ts +5 -2
  63. package/dist/types/quick-insert/preview.d.ts +16 -0
  64. package/dist/types/quick-insert/use-menu-list-height.d.ts +6 -0
  65. package/dist/types/quick-insert/use-menu-popup-sizing.d.ts +11 -0
  66. package/package.json +4 -3
  67. package/quick-insert/confluence-attribution-icon/package.json +10 -0
  68. package/quick-insert/jira-attribution-icon/package.json +10 -0
  69. package/quick-insert/preview/package.json +10 -0
  70. package/quick-insert/use-menu-list-height/package.json +10 -0
  71. 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
- if (!isExperimentEnabled('platform_editor_slash_command')) {
98
- var _wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
99
- xcss: styles.icon
100
- }, iconBefore) : iconBefore;
101
- return /*#__PURE__*/React.createElement(ButtonItem, {
102
- "aria-label": ariaLabel,
103
- "aria-selected": isSelected,
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))), 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
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
- ._3um0ewfl{visibility:visible}
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
- 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';
6
+ import { useLayoutEffect, useState } from 'react';
10
7
  import { createPortal } from 'react-dom';
11
- import { Popper } from '@atlaskit/popper/main';
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
- var PREVIEW_WIDTH = 294;
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: false
35
+ mainAxis: true,
36
+ altAxis: true,
37
+ tether: false,
38
+ padding: 8,
39
+ rootBoundary: 'viewport'
19
40
  }
20
41
  }];
21
42
  var styles = {
22
- image: "_1e0c1ule _1pby16oo",
23
- hidden: "_3um015vq",
24
- visible: "_3um0ewfl"
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
- /** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
55
+ /** The selected item's description and attribution are announced through its aria-describedby. */
28
56
  export var QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
29
- var previewImageUrls = _ref.previewImageUrls,
30
- referenceElement = _ref.referenceElement;
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 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.
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 (_ref3) {
64
- var ref = _ref3.ref,
65
- style = _ref3.style;
66
- return /*#__PURE__*/React.createElement("img", {
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: _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
- });
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 Section from '@atlaskit/menu/section';
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(Section, {
7
- title: title
8
- }, children);
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 {};