@atlaskit/editor-plugin-card 2.3.8 → 2.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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/nodeviews/inlineCard.js +17 -4
  3. package/dist/es2019/nodeviews/inlineCard.js +17 -4
  4. package/dist/esm/nodeviews/inlineCard.js +17 -4
  5. package/dist/types/nodeviews/genericCard.d.ts +2 -0
  6. package/dist/types/nodeviews/inlineCard.d.ts +1 -1
  7. package/dist/types-ts4.5/nodeviews/genericCard.d.ts +2 -0
  8. package/dist/types-ts4.5/nodeviews/inlineCard.d.ts +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 2.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#117451](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117451)
8
+ [`0ecc0082a92e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ecc0082a92e6) -
9
+ [ux] Enable hover cards for inline links in live pages behind ff
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 2.3.8
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/nodeviews/inlineCard.js CHANGED
@@ -10,6 +10,7 @@ exports.InlineCardNodeView = InlineCardNodeView;
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
13
+ var _hooks = require("@atlaskit/editor-common/hooks");
13
14
  var _ui = require("@atlaskit/editor-common/ui");
14
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _smartCard = require("@atlaskit/smart-card");
@@ -30,7 +31,9 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
30
31
  getPos = _ref.getPos,
31
32
  onClick = _ref.onClick,
32
33
  onRes = _ref.onResolve,
33
- isHovered = _ref.isHovered;
34
+ isHovered = _ref.isHovered,
35
+ showHoverPreview = _ref.showHoverPreview,
36
+ hoverPreviewOptions = _ref.hoverPreviewOptions;
34
37
  var _node$attrs = node.attrs,
35
38
  url = _node$attrs.url,
36
39
  data = _node$attrs.data;
@@ -84,9 +87,11 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
84
87
  inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
85
88
  actionOptions: actionOptions,
86
89
  showServerActions: showServerActions,
87
- isHovered: isHovered
90
+ isHovered: isHovered,
91
+ showHoverPreview: showHoverPreview,
92
+ hoverPreviewOptions: hoverPreviewOptions
88
93
  });
89
- }, [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
94
+ }, [url, data, onClick, scrollContainer, onResolve, onError, useAlternativePreloader, actionOptions, showServerActions, isHovered, showHoverPreview, hoverPreviewOptions]);
90
95
 
91
96
  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
92
97
  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -97,6 +102,7 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
97
102
  var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
98
103
  var WrappedInlineCard = (0, _genericCard.Card)(InlineCard, _ui.UnsupportedInline);
99
104
  function InlineCardNodeView(props) {
105
+ var _useSharedPluginState;
100
106
  var useAlternativePreloader = props.useAlternativePreloader,
101
107
  node = props.node,
102
108
  view = props.view,
@@ -108,7 +114,10 @@ function InlineCardNodeView(props) {
108
114
  enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
109
115
  pluginInjectionApi = props.pluginInjectionApi,
110
116
  onClickCallback = props.onClickCallback;
117
+ var floatingToolbarNode = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.node;
111
118
  if ((0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
119
+ var showHoverPreview = floatingToolbarNode !== node;
120
+ var livePagesHoverCardFadeInDelay = 800;
112
121
  return /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
113
122
  targetElementPos: getPos(),
114
123
  view: view
@@ -119,7 +128,11 @@ function InlineCardNodeView(props) {
119
128
  actionOptions: actionOptions,
120
129
  showServerActions: showServerActions,
121
130
  useAlternativePreloader: useAlternativePreloader,
122
- onClickCallback: onClickCallback
131
+ onClickCallback: onClickCallback,
132
+ showHoverPreview: showHoverPreview,
133
+ hoverPreviewOptions: {
134
+ fadeInDelay: livePagesHoverCardFadeInDelay
135
+ }
123
136
  }));
124
137
  }
125
138
  return /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
package/dist/es2019/nodeviews/inlineCard.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { memo, useCallback, useMemo } from 'react';
3
3
  import rafSchedule from 'raf-schd';
4
+ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
4
5
  import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
5
6
  import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { Card as SmartCard } from '@atlaskit/smart-card';
@@ -19,7 +20,9 @@ export const InlineCard = /*#__PURE__*/memo(({
19
20
  getPos,
20
21
  onClick,
21
22
  onResolve: onRes,
22
- isHovered
23
+ isHovered,
24
+ showHoverPreview,
25
+ hoverPreviewOptions
23
26
  }) => {
24
27
  const {
25
28
  url,
@@ -76,8 +79,10 @@ export const InlineCard = /*#__PURE__*/memo(({
76
79
  inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
77
80
  actionOptions: actionOptions,
78
81
  showServerActions: showServerActions,
79
- isHovered: isHovered
80
- }), [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
82
+ isHovered: isHovered,
83
+ showHoverPreview: showHoverPreview,
84
+ hoverPreviewOptions: hoverPreviewOptions
85
+ }), [url, data, onClick, scrollContainer, onResolve, onError, useAlternativePreloader, actionOptions, showServerActions, isHovered, showHoverPreview, hoverPreviewOptions]);
81
86
 
82
87
  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
83
88
  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -88,6 +93,7 @@ export const InlineCard = /*#__PURE__*/memo(({
88
93
  const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
89
94
  const WrappedInlineCard = Card(InlineCard, UnsupportedInline);
90
95
  export function InlineCardNodeView(props) {
96
+ var _useSharedPluginState, _useSharedPluginState2;
91
97
  const {
92
98
  useAlternativePreloader,
93
99
  node,
@@ -101,7 +107,10 @@ export function InlineCardNodeView(props) {
101
107
  pluginInjectionApi,
102
108
  onClickCallback
103
109
  } = props;
110
+ const floatingToolbarNode = (_useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.node;
104
111
  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
112
+ const showHoverPreview = floatingToolbarNode !== node;
113
+ const livePagesHoverCardFadeInDelay = 800;
105
114
  return /*#__PURE__*/React.createElement(OverlayWrapper, {
106
115
  targetElementPos: getPos(),
107
116
  view: view
@@ -112,7 +121,11 @@ export function InlineCardNodeView(props) {
112
121
  actionOptions: actionOptions,
113
122
  showServerActions: showServerActions,
114
123
  useAlternativePreloader: useAlternativePreloader,
115
- onClickCallback: onClickCallback
124
+ onClickCallback: onClickCallback,
125
+ showHoverPreview: showHoverPreview,
126
+ hoverPreviewOptions: {
127
+ fadeInDelay: livePagesHoverCardFadeInDelay
128
+ }
116
129
  }));
117
130
  }
118
131
  return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
package/dist/esm/nodeviews/inlineCard.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { memo, useCallback, useMemo } from 'react';
3
3
  import rafSchedule from 'raf-schd';
4
+ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
4
5
  import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
5
6
  import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { Card as SmartCard } from '@atlaskit/smart-card';
@@ -19,7 +20,9 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
19
20
  getPos = _ref.getPos,
20
21
  onClick = _ref.onClick,
21
22
  onRes = _ref.onResolve,
22
- isHovered = _ref.isHovered;
23
+ isHovered = _ref.isHovered,
24
+ showHoverPreview = _ref.showHoverPreview,
25
+ hoverPreviewOptions = _ref.hoverPreviewOptions;
23
26
  var _node$attrs = node.attrs,
24
27
  url = _node$attrs.url,
25
28
  data = _node$attrs.data;
@@ -73,9 +76,11 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
73
76
  inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
74
77
  actionOptions: actionOptions,
75
78
  showServerActions: showServerActions,
76
- isHovered: isHovered
79
+ isHovered: isHovered,
80
+ showHoverPreview: showHoverPreview,
81
+ hoverPreviewOptions: hoverPreviewOptions
77
82
  });
78
- }, [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
83
+ }, [url, data, onClick, scrollContainer, onResolve, onError, useAlternativePreloader, actionOptions, showServerActions, isHovered, showHoverPreview, hoverPreviewOptions]);
79
84
 
80
85
  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
81
86
  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
@@ -86,6 +91,7 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
86
91
  var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
87
92
  var WrappedInlineCard = Card(InlineCard, UnsupportedInline);
88
93
  export function InlineCardNodeView(props) {
94
+ var _useSharedPluginState;
89
95
  var useAlternativePreloader = props.useAlternativePreloader,
90
96
  node = props.node,
91
97
  view = props.view,
@@ -97,7 +103,10 @@ export function InlineCardNodeView(props) {
97
103
  enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
98
104
  pluginInjectionApi = props.pluginInjectionApi,
99
105
  onClickCallback = props.onClickCallback;
106
+ var floatingToolbarNode = (_useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.node;
100
107
  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
108
+ var showHoverPreview = floatingToolbarNode !== node;
109
+ var livePagesHoverCardFadeInDelay = 800;
101
110
  return /*#__PURE__*/React.createElement(OverlayWrapper, {
102
111
  targetElementPos: getPos(),
103
112
  view: view
@@ -108,7 +117,11 @@ export function InlineCardNodeView(props) {
108
117
  actionOptions: actionOptions,
109
118
  showServerActions: showServerActions,
110
119
  useAlternativePreloader: useAlternativePreloader,
111
- onClickCallback: onClickCallback
120
+ onClickCallback: onClickCallback,
121
+ showHoverPreview: showHoverPreview,
122
+ hoverPreviewOptions: {
123
+ fadeInDelay: livePagesHoverCardFadeInDelay
124
+ }
112
125
  }));
113
126
  }
114
127
  return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
package/dist/types/nodeviews/genericCard.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface CardProps extends CardNodeViewProps {
40
40
  actionOptions?: BaseCardProps['actionOptions'];
41
41
  pluginInjectionApi?: ExtractInjectionAPI<typeof cardPlugin>;
42
42
  onClickCallback?: OnClickCallback;
43
+ showHoverPreview?: BaseCardProps['showHoverPreview'];
44
+ hoverPreviewOptions?: BaseCardProps['hoverPreviewOptions'];
43
45
  }
44
46
  export interface SmartCardProps extends CardProps {
45
47
  pluginInjectionApi?: ExtractInjectionAPI<typeof cardPlugin>;
package/dist/types/nodeviews/inlineCard.d.ts CHANGED
@@ -2,6 +2,6 @@ import React from 'react';
2
2
  import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
3
3
  import type { SmartCardProps } from './genericCard';
4
4
  import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
5
- export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, showServerActions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, }: SmartCardProps) => JSX.Element | null>;
5
+ export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, showServerActions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => JSX.Element | null>;
6
6
  export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'showServerActions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback'>;
7
7
  export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): JSX.Element;
package/dist/types-ts4.5/nodeviews/genericCard.d.ts CHANGED
@@ -40,6 +40,8 @@ export interface CardProps extends CardNodeViewProps {
40
40
  actionOptions?: BaseCardProps['actionOptions'];
41
41
  pluginInjectionApi?: ExtractInjectionAPI<typeof cardPlugin>;
42
42
  onClickCallback?: OnClickCallback;
43
+ showHoverPreview?: BaseCardProps['showHoverPreview'];
44
+ hoverPreviewOptions?: BaseCardProps['hoverPreviewOptions'];
43
45
  }
44
46
  export interface SmartCardProps extends CardProps {
45
47
  pluginInjectionApi?: ExtractInjectionAPI<typeof cardPlugin>;
package/dist/types-ts4.5/nodeviews/inlineCard.d.ts CHANGED
@@ -2,6 +2,6 @@ import React from 'react';
2
2
  import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
3
3
  import type { SmartCardProps } from './genericCard';
4
4
  import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
5
- export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, showServerActions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, }: SmartCardProps) => JSX.Element | null>;
5
+ export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, showServerActions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => JSX.Element | null>;
6
6
  export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'showServerActions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback'>;
7
7
  export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "2.3.8",
3
+ "version": "2.4.0",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -58,7 +58,7 @@
58
58
  "@atlaskit/menu": "2.7.0",
59
59
  "@atlaskit/platform-feature-flags": "^0.3.0",
60
60
  "@atlaskit/primitives": "^10.0.0",
61
- "@atlaskit/smart-card": "^27.8.0",
61
+ "@atlaskit/smart-card": "^27.9.0",
62
62
  "@atlaskit/theme": "^12.11.0",
63
63
  "@atlaskit/tokens": "^1.53.0",
64
64
  "@atlaskit/tooltip": "^18.5.0",