@atlaskit/editor-plugin-card 2.5.1 → 2.5.2
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 +9 -0
- package/dist/cjs/nodeviews/inlineCard.js +8 -1
- package/dist/cjs/ui/ConfigureOverlay/index.js +5 -2
- package/dist/es2019/nodeviews/inlineCard.js +5 -2
- package/dist/es2019/ui/ConfigureOverlay/index.js +7 -2
- package/dist/esm/nodeviews/inlineCard.js +9 -2
- package/dist/esm/ui/ConfigureOverlay/index.js +5 -2
- package/dist/types/ui/ConfigureOverlay/index.d.ts +3 -1
- package/dist/types-ts4.5/ui/ConfigureOverlay/index.d.ts +3 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 2.5.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#119704](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119704)
|
|
8
|
+
[`2308f93f42b1a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2308f93f42b1a) -
|
|
9
|
+
EDM-10361 Show highlighted border on hover of inline card configure overlay
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 2.5.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.InlineCard = void 0;
|
|
9
9
|
exports.InlineCardNodeView = InlineCardNodeView;
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
13
|
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
13
14
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
@@ -114,14 +115,20 @@ function InlineCardNodeView(props) {
|
|
|
114
115
|
enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
|
|
115
116
|
pluginInjectionApi = props.pluginInjectionApi,
|
|
116
117
|
onClickCallback = props.onClickCallback;
|
|
118
|
+
var _useState = (0, _react.useState)(false),
|
|
119
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
120
|
+
isOverlayHovered = _useState2[0],
|
|
121
|
+
setIsOverlayHovered = _useState2[1];
|
|
117
122
|
var floatingToolbarNode = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.node;
|
|
118
123
|
if ((0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
|
|
119
124
|
var showHoverPreview = floatingToolbarNode !== node;
|
|
120
125
|
var livePagesHoverCardFadeInDelay = 800;
|
|
121
126
|
return /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
|
|
122
127
|
targetElementPos: getPos(),
|
|
123
|
-
view: view
|
|
128
|
+
view: view,
|
|
129
|
+
isHoveredCallback: setIsOverlayHovered
|
|
124
130
|
}, /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
|
|
131
|
+
isHovered: isOverlayHovered,
|
|
125
132
|
node: node,
|
|
126
133
|
view: view,
|
|
127
134
|
getPos: getPos,
|
|
@@ -21,7 +21,8 @@ var ConfigureOverlayWrapperStyles = (0, _react2.css)({
|
|
|
21
21
|
var OverlayWrapper = function OverlayWrapper(_ref) {
|
|
22
22
|
var view = _ref.view,
|
|
23
23
|
targetElementPos = _ref.targetElementPos,
|
|
24
|
-
children = _ref.children
|
|
24
|
+
children = _ref.children,
|
|
25
|
+
hoverCallback = _ref.isHoveredCallback;
|
|
25
26
|
var _useState = (0, _react.useState)(false),
|
|
26
27
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
27
28
|
showConfigureButton = _useState2[0],
|
|
@@ -38,11 +39,13 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
|
|
|
38
39
|
}, []);
|
|
39
40
|
return (0, _react2.jsx)("span", {
|
|
40
41
|
onMouseEnter: function onMouseEnter() {
|
|
41
|
-
|
|
42
|
+
setShowConfigureButton(true);
|
|
43
|
+
hoverCallback(true);
|
|
42
44
|
},
|
|
43
45
|
onMouseLeave: function onMouseLeave() {
|
|
44
46
|
if (!dropdownOpen) {
|
|
45
47
|
setShowConfigureButton(false);
|
|
48
|
+
hoverCallback(false);
|
|
46
49
|
}
|
|
47
50
|
},
|
|
48
51
|
"data-testid": "inline-card-overlay-wrapper"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React, { memo, useCallback, useMemo } from 'react';
|
|
2
|
+
import React, { memo, useCallback, useMemo, useState } from 'react';
|
|
3
3
|
import rafSchedule from 'raf-schd';
|
|
4
4
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
5
5
|
import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
|
|
@@ -107,14 +107,17 @@ export function InlineCardNodeView(props) {
|
|
|
107
107
|
pluginInjectionApi,
|
|
108
108
|
onClickCallback
|
|
109
109
|
} = props;
|
|
110
|
+
const [isOverlayHovered, setIsOverlayHovered] = useState(false);
|
|
110
111
|
const floatingToolbarNode = (_useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.node;
|
|
111
112
|
if (fg('platform.linking-platform.smart-links-in-live-pages')) {
|
|
112
113
|
const showHoverPreview = floatingToolbarNode !== node;
|
|
113
114
|
const livePagesHoverCardFadeInDelay = 800;
|
|
114
115
|
return /*#__PURE__*/React.createElement(OverlayWrapper, {
|
|
115
116
|
targetElementPos: getPos(),
|
|
116
|
-
view: view
|
|
117
|
+
view: view,
|
|
118
|
+
isHoveredCallback: setIsOverlayHovered
|
|
117
119
|
}, /*#__PURE__*/React.createElement(WrappedInlineCard, {
|
|
120
|
+
isHovered: isOverlayHovered,
|
|
118
121
|
node: node,
|
|
119
122
|
view: view,
|
|
120
123
|
getPos: getPos,
|
|
@@ -12,7 +12,8 @@ const ConfigureOverlayWrapperStyles = css({
|
|
|
12
12
|
const OverlayWrapper = ({
|
|
13
13
|
view,
|
|
14
14
|
targetElementPos,
|
|
15
|
-
children
|
|
15
|
+
children,
|
|
16
|
+
isHoveredCallback: hoverCallback
|
|
16
17
|
}) => {
|
|
17
18
|
const [showConfigureButton, setShowConfigureButton] = useState(false);
|
|
18
19
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
@@ -23,10 +24,14 @@ const OverlayWrapper = ({
|
|
|
23
24
|
}
|
|
24
25
|
}, []);
|
|
25
26
|
return jsx("span", {
|
|
26
|
-
onMouseEnter: () =>
|
|
27
|
+
onMouseEnter: () => {
|
|
28
|
+
setShowConfigureButton(true);
|
|
29
|
+
hoverCallback(true);
|
|
30
|
+
},
|
|
27
31
|
onMouseLeave: () => {
|
|
28
32
|
if (!dropdownOpen) {
|
|
29
33
|
setShowConfigureButton(false);
|
|
34
|
+
hoverCallback(false);
|
|
30
35
|
}
|
|
31
36
|
},
|
|
32
37
|
"data-testid": "inline-card-overlay-wrapper"
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import React, { memo, useCallback, useMemo, useState } from 'react';
|
|
3
4
|
import rafSchedule from 'raf-schd';
|
|
4
5
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
5
6
|
import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
|
|
@@ -103,14 +104,20 @@ export function InlineCardNodeView(props) {
|
|
|
103
104
|
enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
|
|
104
105
|
pluginInjectionApi = props.pluginInjectionApi,
|
|
105
106
|
onClickCallback = props.onClickCallback;
|
|
107
|
+
var _useState = useState(false),
|
|
108
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
109
|
+
isOverlayHovered = _useState2[0],
|
|
110
|
+
setIsOverlayHovered = _useState2[1];
|
|
106
111
|
var floatingToolbarNode = (_useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.node;
|
|
107
112
|
if (fg('platform.linking-platform.smart-links-in-live-pages')) {
|
|
108
113
|
var showHoverPreview = floatingToolbarNode !== node;
|
|
109
114
|
var livePagesHoverCardFadeInDelay = 800;
|
|
110
115
|
return /*#__PURE__*/React.createElement(OverlayWrapper, {
|
|
111
116
|
targetElementPos: getPos(),
|
|
112
|
-
view: view
|
|
117
|
+
view: view,
|
|
118
|
+
isHoveredCallback: setIsOverlayHovered
|
|
113
119
|
}, /*#__PURE__*/React.createElement(WrappedInlineCard, {
|
|
120
|
+
isHovered: isOverlayHovered,
|
|
114
121
|
node: node,
|
|
115
122
|
view: view,
|
|
116
123
|
getPos: getPos,
|
|
@@ -13,7 +13,8 @@ var ConfigureOverlayWrapperStyles = css({
|
|
|
13
13
|
var OverlayWrapper = function OverlayWrapper(_ref) {
|
|
14
14
|
var view = _ref.view,
|
|
15
15
|
targetElementPos = _ref.targetElementPos,
|
|
16
|
-
children = _ref.children
|
|
16
|
+
children = _ref.children,
|
|
17
|
+
hoverCallback = _ref.isHoveredCallback;
|
|
17
18
|
var _useState = useState(false),
|
|
18
19
|
_useState2 = _slicedToArray(_useState, 2),
|
|
19
20
|
showConfigureButton = _useState2[0],
|
|
@@ -30,11 +31,13 @@ var OverlayWrapper = function OverlayWrapper(_ref) {
|
|
|
30
31
|
}, []);
|
|
31
32
|
return jsx("span", {
|
|
32
33
|
onMouseEnter: function onMouseEnter() {
|
|
33
|
-
|
|
34
|
+
setShowConfigureButton(true);
|
|
35
|
+
hoverCallback(true);
|
|
34
36
|
},
|
|
35
37
|
onMouseLeave: function onMouseLeave() {
|
|
36
38
|
if (!dropdownOpen) {
|
|
37
39
|
setShowConfigureButton(false);
|
|
40
|
+
hoverCallback(false);
|
|
38
41
|
}
|
|
39
42
|
},
|
|
40
43
|
"data-testid": "inline-card-overlay-wrapper"
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
3
|
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
declare const OverlayWrapper: ({ view, targetElementPos, children, }: {
|
|
4
|
+
declare const OverlayWrapper: ({ view, targetElementPos, children, isHoveredCallback: hoverCallback, }: {
|
|
5
5
|
view: EditorView;
|
|
6
6
|
targetElementPos: number | undefined;
|
|
7
7
|
children: JSX.Element;
|
|
8
|
+
/** Fired when the mouse enters or leaves the overlay button */
|
|
9
|
+
isHoveredCallback: (isHovered: boolean) => void;
|
|
8
10
|
}) => jsx.JSX.Element;
|
|
9
11
|
export default OverlayWrapper;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
3
|
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
-
declare const OverlayWrapper: ({ view, targetElementPos, children, }: {
|
|
4
|
+
declare const OverlayWrapper: ({ view, targetElementPos, children, isHoveredCallback: hoverCallback, }: {
|
|
5
5
|
view: EditorView;
|
|
6
6
|
targetElementPos: number | undefined;
|
|
7
7
|
children: JSX.Element;
|
|
8
|
+
/** Fired when the mouse enters or leaves the overlay button */
|
|
9
|
+
isHoveredCallback: (isHovered: boolean) => void;
|
|
8
10
|
}) => jsx.JSX.Element;
|
|
9
11
|
export default OverlayWrapper;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-card",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.2",
|
|
4
4
|
"description": "Card plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^39.0.3",
|
|
36
36
|
"@atlaskit/analytics-next": "^9.3.0",
|
|
37
|
-
"@atlaskit/button": "^18.
|
|
37
|
+
"@atlaskit/button": "^18.4.0",
|
|
38
38
|
"@atlaskit/custom-steps": "^0.4.0",
|
|
39
39
|
"@atlaskit/dropdown-menu": "^12.14.0",
|
|
40
40
|
"@atlaskit/editor-common": "^84.5.0",
|
|
@@ -54,13 +54,13 @@
|
|
|
54
54
|
"@atlaskit/link-client-extension": "^1.9.0",
|
|
55
55
|
"@atlaskit/link-datasource": "^2.5.0",
|
|
56
56
|
"@atlaskit/linking-common": "^5.7.0",
|
|
57
|
-
"@atlaskit/linking-types": "^8.
|
|
57
|
+
"@atlaskit/linking-types": "^8.11.0",
|
|
58
58
|
"@atlaskit/menu": "2.7.4",
|
|
59
59
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
60
60
|
"@atlaskit/primitives": "^11.0.0",
|
|
61
61
|
"@atlaskit/smart-card": "^27.9.0",
|
|
62
62
|
"@atlaskit/theme": "^12.11.0",
|
|
63
|
-
"@atlaskit/tokens": "^1.
|
|
63
|
+
"@atlaskit/tokens": "^1.54.0",
|
|
64
64
|
"@atlaskit/tooltip": "^18.5.0",
|
|
65
65
|
"@babel/runtime": "^7.0.0",
|
|
66
66
|
"@emotion/react": "^11.7.1",
|