@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.
Files changed (86) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/element-browser/components/ViewMore.js +1 -1
  3. package/dist/cjs/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
  4. package/dist/cjs/extensibility/GeneratedContentReveal.js +1 -1
  5. package/dist/cjs/extensions/UnknownMacroPlaceholder.js +1 -1
  6. package/dist/cjs/icons/shared/PanelErrorIcon.js +1 -1
  7. package/dist/cjs/icons/shared/PanelInfoIcon.js +1 -1
  8. package/dist/cjs/icons/shared/PanelNoteIcon.js +1 -1
  9. package/dist/cjs/icons/shared/PanelSuccessIcon.js +1 -1
  10. package/dist/cjs/icons/shared/PanelWarningIcon.js +1 -1
  11. package/dist/cjs/media-inline/media-inline-image-card.js +9 -7
  12. package/dist/cjs/monitoring/error.js +1 -1
  13. package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.js +18 -4
  14. package/dist/cjs/quick-insert/QuickInsertHoverPreview.compiled.css +4 -0
  15. package/dist/cjs/quick-insert/QuickInsertHoverPreview.js +103 -0
  16. package/dist/cjs/quick-insert/QuickInsertMenuItem.js +2 -0
  17. package/dist/cjs/table/NewSortingIcon.js +1 -1
  18. package/dist/cjs/ui/DropList/index.js +1 -1
  19. package/dist/cjs/ui/Mention/mention-with-profilecard.js +2 -2
  20. package/dist/cjs/ui/Mention/mention-with-providers.js +3 -3
  21. package/dist/cjs/ui/Shortcut/index.js +1 -1
  22. package/dist/cjs/ui/Toolbar/ButtonGroup.js +1 -1
  23. package/dist/cjs/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
  24. package/dist/cjs/ui/Toolbar/DropdownWrapper.js +1 -1
  25. package/dist/cjs/ui/Toolbar/ExpandIcon.js +1 -1
  26. package/dist/cjs/ui/Toolbar/Separator.js +1 -1
  27. package/dist/cjs/utils/compareNodes.js +2 -5
  28. package/dist/es2019/element-browser/components/ViewMore.js +1 -1
  29. package/dist/es2019/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
  30. package/dist/es2019/extensibility/GeneratedContentReveal.js +1 -1
  31. package/dist/es2019/extensions/UnknownMacroPlaceholder.js +1 -1
  32. package/dist/es2019/icons/shared/PanelErrorIcon.js +1 -1
  33. package/dist/es2019/icons/shared/PanelInfoIcon.js +1 -1
  34. package/dist/es2019/icons/shared/PanelNoteIcon.js +1 -1
  35. package/dist/es2019/icons/shared/PanelSuccessIcon.js +1 -1
  36. package/dist/es2019/icons/shared/PanelWarningIcon.js +1 -1
  37. package/dist/es2019/media-inline/media-inline-image-card.js +3 -1
  38. package/dist/es2019/monitoring/error.js +1 -1
  39. package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.js +12 -4
  40. package/dist/es2019/quick-insert/QuickInsertHoverPreview.compiled.css +4 -0
  41. package/dist/es2019/quick-insert/QuickInsertHoverPreview.js +87 -0
  42. package/dist/es2019/quick-insert/QuickInsertMenuItem.js +2 -0
  43. package/dist/es2019/table/NewSortingIcon.js +1 -1
  44. package/dist/es2019/ui/DropList/index.js +1 -1
  45. package/dist/es2019/ui/Mention/mention-with-profilecard.js +1 -1
  46. package/dist/es2019/ui/Mention/mention-with-providers.js +1 -1
  47. package/dist/es2019/ui/Shortcut/index.js +1 -1
  48. package/dist/es2019/ui/Toolbar/ButtonGroup.js +1 -1
  49. package/dist/es2019/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
  50. package/dist/es2019/ui/Toolbar/DropdownWrapper.js +1 -1
  51. package/dist/es2019/ui/Toolbar/ExpandIcon.js +1 -1
  52. package/dist/es2019/ui/Toolbar/Separator.js +1 -1
  53. package/dist/es2019/utils/compareNodes.js +2 -5
  54. package/dist/esm/element-browser/components/ViewMore.js +1 -1
  55. package/dist/esm/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
  56. package/dist/esm/extensibility/GeneratedContentReveal.js +1 -1
  57. package/dist/esm/extensions/UnknownMacroPlaceholder.js +1 -1
  58. package/dist/esm/icons/shared/PanelErrorIcon.js +1 -1
  59. package/dist/esm/icons/shared/PanelInfoIcon.js +1 -1
  60. package/dist/esm/icons/shared/PanelNoteIcon.js +1 -1
  61. package/dist/esm/icons/shared/PanelSuccessIcon.js +1 -1
  62. package/dist/esm/icons/shared/PanelWarningIcon.js +1 -1
  63. package/dist/esm/media-inline/media-inline-image-card.js +3 -1
  64. package/dist/esm/monitoring/error.js +1 -1
  65. package/dist/esm/quick-insert/CompactQuickInsertMenuItem.js +16 -4
  66. package/dist/esm/quick-insert/QuickInsertHoverPreview.compiled.css +4 -0
  67. package/dist/esm/quick-insert/QuickInsertHoverPreview.js +94 -0
  68. package/dist/esm/quick-insert/QuickInsertMenuItem.js +2 -0
  69. package/dist/esm/table/NewSortingIcon.js +1 -1
  70. package/dist/esm/ui/DropList/index.js +1 -1
  71. package/dist/esm/ui/Mention/mention-with-profilecard.js +1 -1
  72. package/dist/esm/ui/Mention/mention-with-providers.js +1 -1
  73. package/dist/esm/ui/Shortcut/index.js +1 -1
  74. package/dist/esm/ui/Toolbar/ButtonGroup.js +1 -1
  75. package/dist/esm/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
  76. package/dist/esm/ui/Toolbar/DropdownWrapper.js +1 -1
  77. package/dist/esm/ui/Toolbar/ExpandIcon.js +1 -1
  78. package/dist/esm/ui/Toolbar/Separator.js +1 -1
  79. package/dist/esm/utils/compareNodes.js +2 -5
  80. package/dist/types/quick-insert/CompactQuickInsertMenuItem.d.ts +1 -1
  81. package/dist/types/quick-insert/QuickInsertHoverPreview.d.ts +8 -0
  82. package/dist/types/quick-insert/QuickInsertMenuItem.d.ts +6 -1
  83. package/dist/types/ui/EventHandlers/index.d.ts +1 -1
  84. package/dist/types/ui/Mention/mention-with-profilecard.d.ts +1 -1
  85. package/dist/types/ui/Mention/mention-with-providers.d.ts +1 -2
  86. package/package.json +2 -5
@@ -0,0 +1,4 @@
1
+ ._1e0c1ule{display:block}
2
+ ._1pby16oo{z-index:510}
3
+ ._3um015vq{visibility:hidden}
4
+ ._3um0ewfl{visibility:visible}
@@ -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
@@ -1,4 +1,4 @@
1
- /* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./NewSortingIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -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.0";
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 { ResourcedMention } from '@atlaskit/mention';
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 { ResourcedMention } from '@atlaskit/mention/element';
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
- /* index.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* index.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./index.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -1,4 +1,4 @@
1
- /* ButtonGroup.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* ButtonGroup.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./ButtonGroup.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -1,4 +1,4 @@
1
- /* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
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,4 @@
1
- /* DropdownWrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* DropdownWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./DropdownWrapper.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -1,4 +1,4 @@
1
- /* ExpandIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* ExpandIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./ExpandIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* Separator.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* Separator.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./Separator.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -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 (fg('platform_editor_fix_mixed_types_column_sort')) {
221
- if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
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
- /* ViewMore.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* ViewMore.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./ViewMore.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v3.0.1 */
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 */
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 */
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';
@@ -1,4 +1,4 @@
1
- /* PanelErrorIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* PanelErrorIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./PanelErrorIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* PanelInfoIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* PanelInfoIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./PanelInfoIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* PanelNoteIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* PanelNoteIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./PanelNoteIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* PanelSuccessIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* PanelSuccessIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./PanelSuccessIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* PanelWarningIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* PanelWarningIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./PanelWarningIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -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 { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
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.0";
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 */
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,4 @@
1
+ ._1e0c1ule{display:block}
2
+ ._1pby16oo{z-index:510}
3
+ ._3um015vq{visibility:hidden}
4
+ ._3um0ewfl{visibility:visible}
@@ -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
@@ -1,4 +1,4 @@
1
- /* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./NewSortingIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -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.0";
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 { ResourcedMention } from '@atlaskit/mention';
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 { ResourcedMention } from '@atlaskit/mention/element';
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
- /* index.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* index.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./index.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -1,4 +1,4 @@
1
- /* ButtonGroup.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* ButtonGroup.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./ButtonGroup.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -1,4 +1,4 @@
1
- /* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
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,4 @@
1
- /* DropdownWrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* DropdownWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./DropdownWrapper.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
@@ -1,4 +1,4 @@
1
- /* ExpandIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* ExpandIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./ExpandIcon.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* Separator.tsx generated by @compiled/babel-plugin v3.0.1 */
1
+ /* Separator.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./Separator.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -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 (fg('platform_editor_fix_mixed_types_column_sort')) {
227
- if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
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 {