@atlaskit/editor-plugin-card 2.5.0 → 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.
Files changed (10) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/nodeviews/inlineCard.js +8 -1
  3. package/dist/cjs/ui/ConfigureOverlay/index.js +20 -4
  4. package/dist/es2019/nodeviews/inlineCard.js +5 -2
  5. package/dist/es2019/ui/ConfigureOverlay/index.js +22 -5
  6. package/dist/esm/nodeviews/inlineCard.js +9 -2
  7. package/dist/esm/ui/ConfigureOverlay/index.js +21 -5
  8. package/dist/types/ui/ConfigureOverlay/index.d.ts +3 -1
  9. package/dist/types-ts4.5/ui/ConfigureOverlay/index.d.ts +3 -1
  10. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
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
+
12
+ ## 2.5.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#119163](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119163)
17
+ [`45ae1b9a97c16`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45ae1b9a97c16) -
18
+ [ux] Added onDropdownChange prop to overlay in editor-common. Used this prop to keep link
19
+ configure overlay open when dropdown is open, and hide overlay when dropdown is hidden.
20
+ - Updated dependencies
21
+
3
22
  ## 2.5.0
4
23
 
5
24
  ### Minor Changes
package/dist/cjs/nodeviews/inlineCard.js CHANGED
@@ -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,
package/dist/cjs/ui/ConfigureOverlay/index.js CHANGED
@@ -21,24 +21,40 @@ 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],
28
29
  setShowConfigureButton = _useState2[1];
30
+ var _useState3 = (0, _react.useState)(false),
31
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
32
+ dropdownOpen = _useState4[0],
33
+ setDropdownOpen = _useState4[1];
34
+ var onDropdownChange = (0, _react.useCallback)(function (isOpen) {
35
+ setDropdownOpen(isOpen);
36
+ if (!isOpen) {
37
+ setShowConfigureButton(false);
38
+ }
39
+ }, []);
29
40
  return (0, _react2.jsx)("span", {
30
41
  onMouseEnter: function onMouseEnter() {
31
- return setShowConfigureButton(true);
42
+ setShowConfigureButton(true);
43
+ hoverCallback(true);
32
44
  },
33
45
  onMouseLeave: function onMouseLeave() {
34
- return setShowConfigureButton(false);
46
+ if (!dropdownOpen) {
47
+ setShowConfigureButton(false);
48
+ hoverCallback(false);
49
+ }
35
50
  },
36
51
  "data-testid": "inline-card-overlay-wrapper"
37
52
  }, (0, _react2.jsx)("span", {
38
53
  css: ConfigureOverlayWrapperStyles
39
54
  }, showConfigureButton && (0, _react2.jsx)(_link.OverlayButton, {
40
55
  editorView: view,
41
- targetElementPos: targetElementPos
56
+ targetElementPos: targetElementPos,
57
+ onDropdownChange: onDropdownChange
42
58
  })), children);
43
59
  };
44
60
  var _default = exports.default = OverlayWrapper;
package/dist/es2019/nodeviews/inlineCard.js CHANGED
@@ -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,
package/dist/es2019/ui/ConfigureOverlay/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { useState } from 'react';
2
+ import { useCallback, useState } from 'react';
3
3
 
4
4
  // not permitted to migrate atlaskit packages to compiled yet, see https://hello.atlassian.net/wiki/spaces/UAF/pages/3006969423/Migrating+AFM+platform+components+to+Compiled+a+guide
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
@@ -12,18 +12,35 @@ 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);
19
+ const [dropdownOpen, setDropdownOpen] = useState(false);
20
+ const onDropdownChange = useCallback(isOpen => {
21
+ setDropdownOpen(isOpen);
22
+ if (!isOpen) {
23
+ setShowConfigureButton(false);
24
+ }
25
+ }, []);
18
26
  return jsx("span", {
19
- onMouseEnter: () => setShowConfigureButton(true),
20
- onMouseLeave: () => setShowConfigureButton(false),
27
+ onMouseEnter: () => {
28
+ setShowConfigureButton(true);
29
+ hoverCallback(true);
30
+ },
31
+ onMouseLeave: () => {
32
+ if (!dropdownOpen) {
33
+ setShowConfigureButton(false);
34
+ hoverCallback(false);
35
+ }
36
+ },
21
37
  "data-testid": "inline-card-overlay-wrapper"
22
38
  }, jsx("span", {
23
39
  css: ConfigureOverlayWrapperStyles
24
40
  }, showConfigureButton && jsx(OverlayButton, {
25
41
  editorView: view,
26
- targetElementPos: targetElementPos
42
+ targetElementPos: targetElementPos,
43
+ onDropdownChange: onDropdownChange
27
44
  })), children);
28
45
  };
29
46
  export default OverlayWrapper;
package/dist/esm/nodeviews/inlineCard.js CHANGED
@@ -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,
package/dist/esm/ui/ConfigureOverlay/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  /** @jsx jsx */
3
- import { useState } from 'react';
3
+ import { useCallback, useState } from 'react';
4
4
 
5
5
  // not permitted to migrate atlaskit packages to compiled yet, see https://hello.atlassian.net/wiki/spaces/UAF/pages/3006969423/Migrating+AFM+platform+components+to+Compiled+a+guide
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
@@ -13,24 +13,40 @@ 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],
20
21
  setShowConfigureButton = _useState2[1];
22
+ var _useState3 = useState(false),
23
+ _useState4 = _slicedToArray(_useState3, 2),
24
+ dropdownOpen = _useState4[0],
25
+ setDropdownOpen = _useState4[1];
26
+ var onDropdownChange = useCallback(function (isOpen) {
27
+ setDropdownOpen(isOpen);
28
+ if (!isOpen) {
29
+ setShowConfigureButton(false);
30
+ }
31
+ }, []);
21
32
  return jsx("span", {
22
33
  onMouseEnter: function onMouseEnter() {
23
- return setShowConfigureButton(true);
34
+ setShowConfigureButton(true);
35
+ hoverCallback(true);
24
36
  },
25
37
  onMouseLeave: function onMouseLeave() {
26
- return setShowConfigureButton(false);
38
+ if (!dropdownOpen) {
39
+ setShowConfigureButton(false);
40
+ hoverCallback(false);
41
+ }
27
42
  },
28
43
  "data-testid": "inline-card-overlay-wrapper"
29
44
  }, jsx("span", {
30
45
  css: ConfigureOverlayWrapperStyles
31
46
  }, showConfigureButton && jsx(OverlayButton, {
32
47
  editorView: view,
33
- targetElementPos: targetElementPos
48
+ targetElementPos: targetElementPos,
49
+ onDropdownChange: onDropdownChange
34
50
  })), children);
35
51
  };
36
52
  export default OverlayWrapper;
package/dist/types/ui/ConfigureOverlay/index.d.ts CHANGED
@@ -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/dist/types-ts4.5/ui/ConfigureOverlay/index.d.ts CHANGED
@@ -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.0",
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,10 +34,10 @@
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
- "@atlaskit/editor-common": "^84.4.0",
40
+ "@atlaskit/editor-common": "^84.5.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^1.4.0",
42
42
  "@atlaskit/editor-plugin-decorations": "^1.1.0",
43
43
  "@atlaskit/editor-plugin-editor-disabled": "^1.1.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.9.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",