@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 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
- return setShowConfigureButton(true);
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: () => setShowConfigureButton(true),
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 React, { memo, useCallback, useMemo } from 'react';
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
- return setShowConfigureButton(true);
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.1",
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.3.0",
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.10.0",
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.53.0",
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",