@atlaskit/editor-plugin-card 7.2.1 → 7.2.3

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,24 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 7.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#190588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190588)
8
+ [`b22e308cfd320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b22e308cfd320) -
9
+ Replace experiment key platform_editor_useSharedPluginStateSelector with
10
+ platform_editor_useSharedPluginStateWithSelector
11
+ - Updated dependencies
12
+
13
+ ## 7.2.2
14
+
15
+ ### Patch Changes
16
+
17
+ - [#191381](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/191381)
18
+ [`efd66bb003bb4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/efd66bb003bb4) -
19
+ [ux] Show warning on embed option in smart link card appearance dropdown
20
+ - Updated dependencies
21
+
3
22
  ## 7.2.1
4
23
 
5
24
  ### Patch Changes
@@ -9,6 +9,7 @@ exports.InlineCardWithAwareness = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _hooks = require("@atlaskit/editor-common/hooks");
12
+ var _ui = require("@atlaskit/editor-common/ui");
12
13
  var _state = require("@atlaskit/editor-prosemirror/state");
13
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _smartCard = require("@atlaskit/smart-card");
@@ -16,7 +17,6 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
17
  var _actions = require("../pm-plugins/actions");
17
18
  var _pluginKey = require("../pm-plugins/plugin-key");
18
19
  var _AwarenessWrapper = require("../ui/AwarenessWrapper");
19
- var _HoverLinkOverlay = _interopRequireDefault(require("../ui/HoverLinkOverlay"));
20
20
  var _inlineCard = require("./inlineCard");
21
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
22
22
  var selector = function selector(states) {
@@ -97,10 +97,10 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
97
97
  var showHoverPreview = floatingToolbarNode !== node && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
98
98
  var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
99
99
  var _pluginInjectionApi$a;
100
- return /*#__PURE__*/_react.default.createElement(_HoverLinkOverlay.default, {
100
+ return /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
101
101
  isVisible: isResolvedViewRendered,
102
102
  url: node.attrs.url,
103
- editorAppearance: editorAppearance,
103
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
104
104
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
105
105
  view: view
106
106
  }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
@@ -164,10 +164,10 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
164
164
  });
165
165
  }
166
166
  };
167
- var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_HoverLinkOverlay.default, {
167
+ var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
168
168
  isVisible: isResolvedViewRendered,
169
169
  url: node.attrs.url,
170
- editorAppearance: editorAppearance,
170
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
171
171
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
172
172
  view: view,
173
173
  showPanelButton: !!isPanelAvailable,
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
9
9
  var _hooks = require("@atlaskit/editor-common/hooks");
10
10
  var _linkDatasource = require("@atlaskit/link-datasource");
11
11
  var _linkProvider = require("@atlaskit/link-provider");
12
- var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
13
  var _datasourceErrorBoundary = require("../datasourceErrorBoundary");
14
14
  var _index = require("./index");
15
15
  var selector = function selector(states) {
@@ -39,7 +39,7 @@ var ModalWithState = function ModalWithState(_ref) {
39
39
  cardState = _useSharedState.cardState,
40
40
  showDatasourceModal = _useSharedState.showDatasourceModal,
41
41
  datasourceModalType = _useSharedState.datasourceModalType;
42
- if (!cardState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
42
+ if (!cardState && (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
43
43
  return null;
44
44
  }
45
45
  if (!showDatasourceModal || !datasourceModalType) {
@@ -14,6 +14,7 @@ var _utils = require("@atlaskit/editor-common/utils");
14
14
  var _model = require("@atlaskit/editor-prosemirror/model");
15
15
  var _linkProvider = require("@atlaskit/link-provider");
16
16
  var _menu = require("@atlaskit/menu");
17
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
18
  var _doc = require("../pm-plugins/doc");
18
19
  var _DatasourceDropdownOption = require("./DatasourceDropdownOption");
19
20
  var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
@@ -30,8 +31,6 @@ var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMen
30
31
  allowBlockCards = _ref$allowBlockCards === void 0 ? true : _ref$allowBlockCards,
31
32
  allowDatasource = _ref.allowDatasource,
32
33
  editorAnalyticsApi = _ref.editorAnalyticsApi,
33
- _ref$showUpgradeDisco = _ref.showUpgradeDiscoverability,
34
- showUpgradeDiscoverability = _ref$showUpgradeDisco === void 0 ? true : _ref$showUpgradeDisco,
35
34
  isDatasourceView = _ref.isDatasourceView,
36
35
  dispatchCommand = _ref.dispatchCommand,
37
36
  settingsConfig = _ref.settingsConfig;
@@ -57,7 +56,8 @@ var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMen
57
56
  hidden: false,
58
57
  testId: 'embed-appearance',
59
58
  disabled: !isEmbedCardLinkSupportedInParent,
60
- tooltip: isEmbedCardLinkSupportedInParent ? undefined : (0, _LinkToolbarAppearance.getUnavailableMessage)(editorState, intl)
59
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : (0, _LinkToolbarAppearance.getUnavailableMessage)(editorState, intl),
60
+ description: (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? intl.formatMessage(_messages.cardMessages.embedToBlockCardWarning) : undefined
61
61
  };
62
62
  var blockCardOption = allowBlockCards && {
63
63
  appearance: 'block',
@@ -109,7 +109,9 @@ var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMen
109
109
  onClick: function onClick() {
110
110
  return option.onClick();
111
111
  },
112
- isSelected: option.selected
112
+ isSelected: option.selected,
113
+ description: option.description,
114
+ shouldDescriptionWrap: true
113
115
  }, option.title);
114
116
  }), /*#__PURE__*/_react.default.createElement(_DatasourceDropdownOption.DatasourceDropdownOption, {
115
117
  allowDatasource: allowDatasource,
@@ -1,5 +1,6 @@
1
1
  import React, { memo, useCallback, useMemo, useState } from 'react';
2
2
  import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
+ import { HoverLinkOverlay } from '@atlaskit/editor-common/ui';
3
4
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
@@ -7,7 +8,6 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
8
  import { registerRemoveOverlay } from '../pm-plugins/actions';
8
9
  import { pluginKey } from '../pm-plugins/plugin-key';
9
10
  import { AwarenessWrapper } from '../ui/AwarenessWrapper';
10
- import HoverLinkOverlay from '../ui/HoverLinkOverlay';
11
11
  import { InlineCard } from './inlineCard';
12
12
  const selector = states => {
13
13
  var _states$editorViewMod, _states$selectionStat;
@@ -80,7 +80,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
80
80
  return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
81
81
  isVisible: isResolvedViewRendered,
82
82
  url: node.attrs.url,
83
- editorAppearance: editorAppearance,
83
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
84
84
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
85
85
  view: view
86
86
  }, /*#__PURE__*/React.createElement(InlineCard, {
@@ -145,7 +145,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
145
145
  const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
146
146
  isVisible: isResolvedViewRendered,
147
147
  url: node.attrs.url,
148
- editorAppearance: editorAppearance,
148
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
149
149
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
150
150
  view: view,
151
151
  showPanelButton: !!isPanelAvailable,
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
4
4
  import { EditorSmartCardProviderValueGuard, useSmartLinkContext } from '@atlaskit/link-provider';
5
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
6
  import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
7
7
  import { DatasourceModal } from './index';
8
8
  const selector = states => {
@@ -35,7 +35,7 @@ const ModalWithState = ({
35
35
  showDatasourceModal,
36
36
  datasourceModalType
37
37
  } = useSharedState(api);
38
- if (!cardState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
38
+ if (!cardState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
39
39
  return null;
40
40
  }
41
41
  if (!showDatasourceModal || !datasourceModalType) {
@@ -6,6 +6,7 @@ import { isSupportedInParent } from '@atlaskit/editor-common/utils';
6
6
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
7
7
  import { useSmartCardContext } from '@atlaskit/link-provider';
8
8
  import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
9
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
10
  import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
10
11
  import { DatasourceDropdownOption, datasourceDisplayInformation } from './DatasourceDropdownOption';
11
12
  import { getUnavailableMessage } from './LinkToolbarAppearance';
@@ -18,7 +19,6 @@ export const LinkAppearanceMenu = ({
18
19
  allowBlockCards = true,
19
20
  allowDatasource,
20
21
  editorAnalyticsApi,
21
- showUpgradeDiscoverability = true,
22
22
  isDatasourceView,
23
23
  dispatchCommand,
24
24
  settingsConfig
@@ -44,7 +44,8 @@ export const LinkAppearanceMenu = ({
44
44
  hidden: false,
45
45
  testId: 'embed-appearance',
46
46
  disabled: !isEmbedCardLinkSupportedInParent,
47
- tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
47
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl),
48
+ description: expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? intl.formatMessage(messages.embedToBlockCardWarning) : undefined
48
49
  };
49
50
  const blockCardOption = allowBlockCards && {
50
51
  appearance: 'block',
@@ -93,7 +94,9 @@ export const LinkAppearanceMenu = ({
93
94
  key: option.title,
94
95
  iconBefore: option.icon,
95
96
  onClick: () => option.onClick(),
96
- isSelected: option.selected
97
+ isSelected: option.selected,
98
+ description: option.description,
99
+ shouldDescriptionWrap: true
97
100
  }, option.title);
98
101
  }), /*#__PURE__*/React.createElement(DatasourceDropdownOption, {
99
102
  allowDatasource: allowDatasource,
@@ -1,6 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { memo, useCallback, useMemo, useState } from 'react';
3
3
  import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
4
+ import { HoverLinkOverlay } from '@atlaskit/editor-common/ui';
4
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
5
6
  import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
@@ -8,7 +9,6 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
8
9
  import { registerRemoveOverlay } from '../pm-plugins/actions';
9
10
  import { pluginKey } from '../pm-plugins/plugin-key';
10
11
  import { AwarenessWrapper } from '../ui/AwarenessWrapper';
11
- import HoverLinkOverlay from '../ui/HoverLinkOverlay';
12
12
  import { InlineCard } from './inlineCard';
13
13
  var selector = function selector(states) {
14
14
  var _states$editorViewMod, _states$selectionStat;
@@ -91,7 +91,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
91
91
  return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
92
92
  isVisible: isResolvedViewRendered,
93
93
  url: node.attrs.url,
94
- editorAppearance: editorAppearance,
94
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
95
95
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
96
96
  view: view
97
97
  }, /*#__PURE__*/React.createElement(InlineCard, {
@@ -158,7 +158,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
158
158
  var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
159
159
  isVisible: isResolvedViewRendered,
160
160
  url: node.attrs.url,
161
- editorAppearance: editorAppearance,
161
+ compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
162
162
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
163
163
  view: view,
164
164
  showPanelButton: !!isPanelAvailable,
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
3
  import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
4
4
  import { EditorSmartCardProviderValueGuard, useSmartLinkContext } from '@atlaskit/link-provider';
5
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
6
  import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
7
7
  import { DatasourceModal } from './index';
8
8
  var selector = function selector(states) {
@@ -32,7 +32,7 @@ var ModalWithState = function ModalWithState(_ref) {
32
32
  cardState = _useSharedState.cardState,
33
33
  showDatasourceModal = _useSharedState.showDatasourceModal,
34
34
  datasourceModalType = _useSharedState.datasourceModalType;
35
- if (!cardState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
35
+ if (!cardState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
36
36
  return null;
37
37
  }
38
38
  if (!showDatasourceModal || !datasourceModalType) {
@@ -9,6 +9,7 @@ import { isSupportedInParent } from '@atlaskit/editor-common/utils';
9
9
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
10
10
  import { useSmartCardContext } from '@atlaskit/link-provider';
11
11
  import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
12
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
13
  import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
13
14
  import { DatasourceDropdownOption, datasourceDisplayInformation } from './DatasourceDropdownOption';
14
15
  import { getUnavailableMessage } from './LinkToolbarAppearance';
@@ -23,8 +24,6 @@ export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
23
24
  allowBlockCards = _ref$allowBlockCards === void 0 ? true : _ref$allowBlockCards,
24
25
  allowDatasource = _ref.allowDatasource,
25
26
  editorAnalyticsApi = _ref.editorAnalyticsApi,
26
- _ref$showUpgradeDisco = _ref.showUpgradeDiscoverability,
27
- showUpgradeDiscoverability = _ref$showUpgradeDisco === void 0 ? true : _ref$showUpgradeDisco,
28
27
  isDatasourceView = _ref.isDatasourceView,
29
28
  dispatchCommand = _ref.dispatchCommand,
30
29
  settingsConfig = _ref.settingsConfig;
@@ -50,7 +49,8 @@ export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
50
49
  hidden: false,
51
50
  testId: 'embed-appearance',
52
51
  disabled: !isEmbedCardLinkSupportedInParent,
53
- tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
52
+ tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl),
53
+ description: expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? intl.formatMessage(messages.embedToBlockCardWarning) : undefined
54
54
  };
55
55
  var blockCardOption = allowBlockCards && {
56
56
  appearance: 'block',
@@ -102,7 +102,9 @@ export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
102
102
  onClick: function onClick() {
103
103
  return option.onClick();
104
104
  },
105
- isSelected: option.selected
105
+ isSelected: option.selected,
106
+ description: option.description,
107
+ shouldDescriptionWrap: true
106
108
  }, option.title);
107
109
  }), /*#__PURE__*/React.createElement(DatasourceDropdownOption, {
108
110
  allowDatasource: allowDatasource,
@@ -6,7 +6,7 @@ type Props = LinkToolbarAppearanceProps & {
6
6
  settingsConfig: FloatingToolbarItem<Command>;
7
7
  allowDatasource?: boolean;
8
8
  };
9
- export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, dispatchCommand, settingsConfig, }: Props) => React.JSX.Element | null;
9
+ export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, isDatasourceView, dispatchCommand, settingsConfig, }: Props) => React.JSX.Element | null;
10
10
  export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
11
11
  settingsConfig: FloatingToolbarItem<Command>;
12
12
  allowDatasource?: boolean | undefined;
@@ -6,7 +6,7 @@ type Props = LinkToolbarAppearanceProps & {
6
6
  settingsConfig: FloatingToolbarItem<Command>;
7
7
  allowDatasource?: boolean;
8
8
  };
9
- export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, dispatchCommand, settingsConfig, }: Props) => React.JSX.Element | null;
9
+ export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, isDatasourceView, dispatchCommand, settingsConfig, }: Props) => React.JSX.Element | null;
10
10
  export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
11
11
  settingsConfig: FloatingToolbarItem<Command>;
12
12
  allowDatasource?: boolean | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "7.2.1",
3
+ "version": "7.2.3",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/link": "^3.2.0",
54
54
  "@atlaskit/link-analytics": "^10.0.0",
55
55
  "@atlaskit/link-client-extension": "^5.0.0",
56
- "@atlaskit/link-datasource": "^4.14.0",
56
+ "@atlaskit/link-datasource": "^4.15.0",
57
57
  "@atlaskit/linking-common": "^9.2.0",
58
58
  "@atlaskit/linking-types": "^14.0.0",
59
59
  "@atlaskit/menu": "^8.0.0",
@@ -62,7 +62,7 @@
62
62
  "@atlaskit/primitives": "^14.10.0",
63
63
  "@atlaskit/smart-card": "^40.5.0",
64
64
  "@atlaskit/theme": "^19.0.0",
65
- "@atlaskit/tmp-editor-statsig": "^9.12.0",
65
+ "@atlaskit/tmp-editor-statsig": "^9.14.0",
66
66
  "@atlaskit/tokens": "^5.6.0",
67
67
  "@babel/runtime": "^7.0.0",
68
68
  "@emotion/react": "^11.7.1",
@@ -1,199 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _react2 = require("@emotion/react");
12
- var _reactIntlNext = require("react-intl-next");
13
- var _analytics = require("@atlaskit/editor-common/analytics");
14
- var _messages = require("@atlaskit/editor-common/messages");
15
- var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
16
- var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
17
- var _primitives = require("@atlaskit/primitives");
18
- var _toolbar = require("../toolbar");
19
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
21
- /* eslint-disable @atlaskit/design-system/prefer-primitives */
22
- /**
23
- * @jsxRuntime classic
24
- * @jsx jsx
25
- */
26
-
27
- // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
28
-
29
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
30
-
31
- // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
32
-
33
- var containerStyles = (0, _react2.css)({
34
- position: 'relative'
35
- });
36
- var iconWrapperStyles = (0, _primitives.xcss)({
37
- display: 'inline-flex',
38
- justifyContent: 'center',
39
- alignItems: 'center',
40
- height: '17px',
41
- width: '17px'
42
- });
43
- var hiddenTextStyle = (0, _react2.css)({
44
- overflow: 'hidden',
45
- whiteSpace: 'nowrap',
46
- position: 'absolute',
47
- visibility: 'hidden'
48
- });
49
- var linkStyles = (0, _primitives.xcss)({
50
- position: 'absolute',
51
- left: 'space.025',
52
- top: '-1px',
53
- display: 'inline-flex',
54
- alignItems: 'center',
55
- verticalAlign: 'middle',
56
- paddingBlock: 'space.025',
57
- paddingInline: 'space.050',
58
- gap: 'space.025',
59
- overflow: 'hidden',
60
- zIndex: 'card',
61
- backgroundColor: 'color.background.accent.gray.subtlest',
62
- borderRadius: "var(--ds-border-radius, 3px)",
63
- color: 'color.text.subtle',
64
- textDecoration: 'none',
65
- whiteSpace: 'nowrap',
66
- ':hover': {
67
- backgroundColor: 'elevation.surface.hovered',
68
- color: 'color.text.subtle',
69
- textDecoration: 'none'
70
- }
71
- });
72
- var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
73
- var ICON_WIDTH = 16;
74
- var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
75
-
76
- var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
77
- var children = _ref.children,
78
- _ref$isVisible = _ref.isVisible,
79
- isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
80
- url = _ref.url,
81
- editorAppearance = _ref.editorAppearance,
82
- editorAnalyticsApi = _ref.editorAnalyticsApi,
83
- view = _ref.view,
84
- onClick = _ref.onClick,
85
- _ref$showPanelButton = _ref.showPanelButton,
86
- showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
87
- var _useIntl = (0, _reactIntlNext.useIntl)(),
88
- formatMessage = _useIntl.formatMessage;
89
- var label = showPanelButton ? formatMessage(_messages.cardMessages.panelButtonTitle) : formatMessage(_messages.cardMessages.openButtonTitle);
90
- var containerRef = (0, _react.useRef)(null);
91
- var hoverLinkButtonRef = (0, _react.useRef)(null);
92
- var hiddenTextRef = (0, _react.useRef)(null);
93
- var _useState = (0, _react.useState)(true),
94
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
95
- showLabel = _useState2[0],
96
- setShowLabel = _useState2[1];
97
- var _useState3 = (0, _react.useState)(false),
98
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
99
- isHovered = _useState4[0],
100
- setHovered = _useState4[1];
101
- var openTextWidthRef = (0, _react.useRef)(null);
102
- (0, _react.useLayoutEffect)(function () {
103
- var _containerRef$current, _hoverLinkButtonRef$c;
104
- if (!isVisible || !isHovered) {
105
- return;
106
- }
107
- var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
108
- var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
109
-
110
- // Get the hidden text width
111
- if (!openTextWidthRef.current) {
112
- var hiddenText = hiddenTextRef.current;
113
- if (hiddenText) {
114
- // Measure the width of the hidden text
115
- // Temporarily make the element visible to measure its width
116
- hiddenText.style.visibility = 'hidden';
117
- hiddenText.style.display = 'inline';
118
- openTextWidthRef.current = hiddenText.offsetWidth;
119
-
120
- // Reset the hiddenText's display property
121
- hiddenText.style.display = 'none';
122
- hiddenText.style.visibility = 'inherit';
123
- } else {
124
- openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
125
- }
126
- }
127
- if (!cardWidth || !openButtonWidth) {
128
- return;
129
- }
130
- var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
131
- var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
132
- setShowLabel(canShowLabel);
133
- }, [isVisible, isHovered]);
134
- var handleOverlayChange = function handleOverlayChange(isHovered) {
135
- setHovered(isHovered);
136
- };
137
- var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
138
- if (editorAnalyticsApi && view) {
139
- (0, _toolbar.visitCardLinkAnalytics)(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
140
- }
141
- };
142
- var handleDoubleClick = function handleDoubleClick() {
143
- if (!showPanelButton) {
144
- sendVisitLinkAnalytics(_analytics.INPUT_METHOD.DOUBLE_CLICK);
145
-
146
- // Double click opens the link in a new tab
147
- window.open(url, '_blank');
148
- }
149
- };
150
- var handleClick = function handleClick(event) {
151
- if (showPanelButton && onClick) {
152
- onClick(event);
153
- } else {
154
- sendVisitLinkAnalytics(_analytics.INPUT_METHOD.BUTTON);
155
- }
156
- };
157
- return (
158
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
159
- (0, _react2.jsx)("span", {
160
- ref: containerRef,
161
- css: containerStyles,
162
- onDoubleClick: handleDoubleClick,
163
- onMouseEnter: function onMouseEnter() {
164
- return handleOverlayChange(true);
165
- },
166
- onMouseLeave: function onMouseLeave() {
167
- return handleOverlayChange(false);
168
- }
169
- }, children, (0, _react2.jsx)("span", {
170
- css: hiddenTextStyle,
171
- "aria-hidden": "true"
172
- }, (0, _react2.jsx)(_primitives.Text, {
173
- ref: hiddenTextRef,
174
- size: "small",
175
- maxLines: 1
176
- }, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
177
- ref: hoverLinkButtonRef,
178
- xcss: linkStyles,
179
- href: url,
180
- target: "_blank",
181
- style: {
182
- paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
183
- },
184
- onClick: handleClick
185
- }, (0, _react2.jsx)(_primitives.Box, {
186
- xcss: iconWrapperStyles,
187
- "data-inlinecard-button-overlay": "icon-wrapper-line-height"
188
- }, showPanelButton ? (0, _react2.jsx)(_panelRight.default, {
189
- label: ""
190
- }) : (0, _react2.jsx)(_linkExternal.default, {
191
- label: ""
192
- })), showLabel && (0, _react2.jsx)(_primitives.Text, {
193
- size: "small",
194
- color: "color.text.subtle",
195
- maxLines: 1
196
- }, label)))
197
- );
198
- };
199
- var _default = exports.default = HoverLinkOverlay;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,174 +0,0 @@
1
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
2
- /* eslint-disable @atlaskit/design-system/prefer-primitives */
3
- /**
4
- * @jsxRuntime classic
5
- * @jsx jsx
6
- */
7
- import React, { useLayoutEffect, useRef, useState } from 'react';
8
- import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
9
- import { useIntl } from 'react-intl-next';
10
- import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
11
- import { cardMessages } from '@atlaskit/editor-common/messages';
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
- import LinkExternalIcon from '@atlaskit/icon/core/link-external';
14
- import PanelRightIcon from '@atlaskit/icon/core/panel-right';
15
- // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
16
- import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
17
- import { visitCardLinkAnalytics } from '../toolbar';
18
- const containerStyles = css({
19
- position: 'relative'
20
- });
21
- const iconWrapperStyles = xcss({
22
- display: 'inline-flex',
23
- justifyContent: 'center',
24
- alignItems: 'center',
25
- height: '17px',
26
- width: '17px'
27
- });
28
- const hiddenTextStyle = css({
29
- overflow: 'hidden',
30
- whiteSpace: 'nowrap',
31
- position: 'absolute',
32
- visibility: 'hidden'
33
- });
34
- const linkStyles = xcss({
35
- position: 'absolute',
36
- left: 'space.025',
37
- top: '-1px',
38
- display: 'inline-flex',
39
- alignItems: 'center',
40
- verticalAlign: 'middle',
41
- paddingBlock: 'space.025',
42
- paddingInline: 'space.050',
43
- gap: 'space.025',
44
- overflow: 'hidden',
45
- zIndex: 'card',
46
- backgroundColor: 'color.background.accent.gray.subtlest',
47
- borderRadius: "var(--ds-border-radius, 3px)",
48
- color: 'color.text.subtle',
49
- textDecoration: 'none',
50
- whiteSpace: 'nowrap',
51
- ':hover': {
52
- backgroundColor: 'elevation.surface.hovered',
53
- color: 'color.text.subtle',
54
- textDecoration: 'none'
55
- }
56
- });
57
- const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
58
- const ICON_WIDTH = 16;
59
- const DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
60
-
61
- const HoverLinkOverlay = ({
62
- children,
63
- isVisible = false,
64
- url,
65
- editorAppearance,
66
- editorAnalyticsApi,
67
- view,
68
- onClick,
69
- showPanelButton = false
70
- }) => {
71
- const {
72
- formatMessage
73
- } = useIntl();
74
- const label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
75
- const containerRef = useRef(null);
76
- const hoverLinkButtonRef = useRef(null);
77
- const hiddenTextRef = useRef(null);
78
- const [showLabel, setShowLabel] = useState(true);
79
- const [isHovered, setHovered] = useState(false);
80
- const openTextWidthRef = useRef(null);
81
- useLayoutEffect(() => {
82
- var _containerRef$current, _hoverLinkButtonRef$c;
83
- if (!isVisible || !isHovered) {
84
- return;
85
- }
86
- const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
87
- const openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
88
-
89
- // Get the hidden text width
90
- if (!openTextWidthRef.current) {
91
- const hiddenText = hiddenTextRef.current;
92
- if (hiddenText) {
93
- // Measure the width of the hidden text
94
- // Temporarily make the element visible to measure its width
95
- hiddenText.style.visibility = 'hidden';
96
- hiddenText.style.display = 'inline';
97
- openTextWidthRef.current = hiddenText.offsetWidth;
98
-
99
- // Reset the hiddenText's display property
100
- hiddenText.style.display = 'none';
101
- hiddenText.style.visibility = 'inherit';
102
- } else {
103
- openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
104
- }
105
- }
106
- if (!cardWidth || !openButtonWidth) {
107
- return;
108
- }
109
- const openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
110
- const canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
111
- setShowLabel(canShowLabel);
112
- }, [isVisible, isHovered]);
113
- const handleOverlayChange = isHovered => {
114
- setHovered(isHovered);
115
- };
116
- const sendVisitLinkAnalytics = inputMethod => {
117
- if (editorAnalyticsApi && view) {
118
- visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
119
- }
120
- };
121
- const handleDoubleClick = () => {
122
- if (!showPanelButton) {
123
- sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
124
-
125
- // Double click opens the link in a new tab
126
- window.open(url, '_blank');
127
- }
128
- };
129
- const handleClick = event => {
130
- if (showPanelButton && onClick) {
131
- onClick(event);
132
- } else {
133
- sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
134
- }
135
- };
136
- return (
137
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
138
- jsx("span", {
139
- ref: containerRef,
140
- css: containerStyles,
141
- onDoubleClick: handleDoubleClick,
142
- onMouseEnter: () => handleOverlayChange(true),
143
- onMouseLeave: () => handleOverlayChange(false)
144
- }, children, jsx("span", {
145
- css: hiddenTextStyle,
146
- "aria-hidden": "true"
147
- }, jsx(Text, {
148
- ref: hiddenTextRef,
149
- size: "small",
150
- maxLines: 1
151
- }, label)), isHovered && jsx(Anchor, {
152
- ref: hoverLinkButtonRef,
153
- xcss: linkStyles,
154
- href: url,
155
- target: "_blank",
156
- style: {
157
- paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
158
- },
159
- onClick: handleClick
160
- }, jsx(Box, {
161
- xcss: iconWrapperStyles,
162
- "data-inlinecard-button-overlay": "icon-wrapper-line-height"
163
- }, showPanelButton ? jsx(PanelRightIcon, {
164
- label: ""
165
- }) : jsx(LinkExternalIcon, {
166
- label: ""
167
- })), showLabel && jsx(Text, {
168
- size: "small",
169
- color: "color.text.subtle",
170
- maxLines: 1
171
- }, label)))
172
- );
173
- };
174
- export default HoverLinkOverlay;
@@ -1 +0,0 @@
1
- export {};
@@ -1,185 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /* eslint-disable @atlaskit/design-system/no-nested-styles */
3
- /* eslint-disable @atlaskit/design-system/prefer-primitives */
4
- /**
5
- * @jsxRuntime classic
6
- * @jsx jsx
7
- */
8
- import React, { useLayoutEffect, useRef, useState } from 'react';
9
- import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
10
- import { useIntl } from 'react-intl-next';
11
- import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
12
- import { cardMessages } from '@atlaskit/editor-common/messages';
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
- import LinkExternalIcon from '@atlaskit/icon/core/link-external';
15
- import PanelRightIcon from '@atlaskit/icon/core/panel-right';
16
- // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
17
- import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
18
- import { visitCardLinkAnalytics } from '../toolbar';
19
- var containerStyles = css({
20
- position: 'relative'
21
- });
22
- var iconWrapperStyles = xcss({
23
- display: 'inline-flex',
24
- justifyContent: 'center',
25
- alignItems: 'center',
26
- height: '17px',
27
- width: '17px'
28
- });
29
- var hiddenTextStyle = css({
30
- overflow: 'hidden',
31
- whiteSpace: 'nowrap',
32
- position: 'absolute',
33
- visibility: 'hidden'
34
- });
35
- var linkStyles = xcss({
36
- position: 'absolute',
37
- left: 'space.025',
38
- top: '-1px',
39
- display: 'inline-flex',
40
- alignItems: 'center',
41
- verticalAlign: 'middle',
42
- paddingBlock: 'space.025',
43
- paddingInline: 'space.050',
44
- gap: 'space.025',
45
- overflow: 'hidden',
46
- zIndex: 'card',
47
- backgroundColor: 'color.background.accent.gray.subtlest',
48
- borderRadius: "var(--ds-border-radius, 3px)",
49
- color: 'color.text.subtle',
50
- textDecoration: 'none',
51
- whiteSpace: 'nowrap',
52
- ':hover': {
53
- backgroundColor: 'elevation.surface.hovered',
54
- color: 'color.text.subtle',
55
- textDecoration: 'none'
56
- }
57
- });
58
- var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
59
- var ICON_WIDTH = 16;
60
- var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
61
-
62
- var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
63
- var children = _ref.children,
64
- _ref$isVisible = _ref.isVisible,
65
- isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
66
- url = _ref.url,
67
- editorAppearance = _ref.editorAppearance,
68
- editorAnalyticsApi = _ref.editorAnalyticsApi,
69
- view = _ref.view,
70
- onClick = _ref.onClick,
71
- _ref$showPanelButton = _ref.showPanelButton,
72
- showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
73
- var _useIntl = useIntl(),
74
- formatMessage = _useIntl.formatMessage;
75
- var label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
76
- var containerRef = useRef(null);
77
- var hoverLinkButtonRef = useRef(null);
78
- var hiddenTextRef = useRef(null);
79
- var _useState = useState(true),
80
- _useState2 = _slicedToArray(_useState, 2),
81
- showLabel = _useState2[0],
82
- setShowLabel = _useState2[1];
83
- var _useState3 = useState(false),
84
- _useState4 = _slicedToArray(_useState3, 2),
85
- isHovered = _useState4[0],
86
- setHovered = _useState4[1];
87
- var openTextWidthRef = useRef(null);
88
- useLayoutEffect(function () {
89
- var _containerRef$current, _hoverLinkButtonRef$c;
90
- if (!isVisible || !isHovered) {
91
- return;
92
- }
93
- var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
94
- var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
95
-
96
- // Get the hidden text width
97
- if (!openTextWidthRef.current) {
98
- var hiddenText = hiddenTextRef.current;
99
- if (hiddenText) {
100
- // Measure the width of the hidden text
101
- // Temporarily make the element visible to measure its width
102
- hiddenText.style.visibility = 'hidden';
103
- hiddenText.style.display = 'inline';
104
- openTextWidthRef.current = hiddenText.offsetWidth;
105
-
106
- // Reset the hiddenText's display property
107
- hiddenText.style.display = 'none';
108
- hiddenText.style.visibility = 'inherit';
109
- } else {
110
- openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
111
- }
112
- }
113
- if (!cardWidth || !openButtonWidth) {
114
- return;
115
- }
116
- var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
117
- var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
118
- setShowLabel(canShowLabel);
119
- }, [isVisible, isHovered]);
120
- var handleOverlayChange = function handleOverlayChange(isHovered) {
121
- setHovered(isHovered);
122
- };
123
- var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
124
- if (editorAnalyticsApi && view) {
125
- visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
126
- }
127
- };
128
- var handleDoubleClick = function handleDoubleClick() {
129
- if (!showPanelButton) {
130
- sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
131
-
132
- // Double click opens the link in a new tab
133
- window.open(url, '_blank');
134
- }
135
- };
136
- var handleClick = function handleClick(event) {
137
- if (showPanelButton && onClick) {
138
- onClick(event);
139
- } else {
140
- sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
141
- }
142
- };
143
- return (
144
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
145
- jsx("span", {
146
- ref: containerRef,
147
- css: containerStyles,
148
- onDoubleClick: handleDoubleClick,
149
- onMouseEnter: function onMouseEnter() {
150
- return handleOverlayChange(true);
151
- },
152
- onMouseLeave: function onMouseLeave() {
153
- return handleOverlayChange(false);
154
- }
155
- }, children, jsx("span", {
156
- css: hiddenTextStyle,
157
- "aria-hidden": "true"
158
- }, jsx(Text, {
159
- ref: hiddenTextRef,
160
- size: "small",
161
- maxLines: 1
162
- }, label)), isHovered && jsx(Anchor, {
163
- ref: hoverLinkButtonRef,
164
- xcss: linkStyles,
165
- href: url,
166
- target: "_blank",
167
- style: {
168
- paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
169
- },
170
- onClick: handleClick
171
- }, jsx(Box, {
172
- xcss: iconWrapperStyles,
173
- "data-inlinecard-button-overlay": "icon-wrapper-line-height"
174
- }, showPanelButton ? jsx(PanelRightIcon, {
175
- label: ""
176
- }) : jsx(LinkExternalIcon, {
177
- label: ""
178
- })), showLabel && jsx(Text, {
179
- size: "small",
180
- color: "color.text.subtle",
181
- maxLines: 1
182
- }, label)))
183
- );
184
- };
185
- export default HoverLinkOverlay;
@@ -1 +0,0 @@
1
- export {};
@@ -1,9 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { jsx } from '@emotion/react';
7
- import type { HoverLinkOverlayProps } from './types';
8
- declare const HoverLinkOverlay: ({ children, isVisible, url, editorAppearance, editorAnalyticsApi, view, onClick, showPanelButton, }: React.PropsWithChildren<HoverLinkOverlayProps>) => jsx.JSX.Element;
9
- export default HoverLinkOverlay;
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
- import type { EditorAppearance } from '@atlaskit/editor-common/types';
4
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
- export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
6
- isVisible?: boolean;
7
- url: string;
8
- editorAppearance?: EditorAppearance;
9
- editorAnalyticsApi?: EditorAnalyticsAPI;
10
- view?: EditorView;
11
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
12
- showPanelButton?: boolean;
13
- };
@@ -1,9 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { jsx } from '@emotion/react';
7
- import type { HoverLinkOverlayProps } from './types';
8
- declare const HoverLinkOverlay: ({ children, isVisible, url, editorAppearance, editorAnalyticsApi, view, onClick, showPanelButton, }: React.PropsWithChildren<HoverLinkOverlayProps>) => jsx.JSX.Element;
9
- export default HoverLinkOverlay;
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
- import type { EditorAppearance } from '@atlaskit/editor-common/types';
4
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
- export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
6
- isVisible?: boolean;
7
- url: string;
8
- editorAppearance?: EditorAppearance;
9
- editorAnalyticsApi?: EditorAnalyticsAPI;
10
- view?: EditorView;
11
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
12
- showPanelButton?: boolean;
13
- };