@atlaskit/editor-plugin-card 7.0.10 → 7.2.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.
- package/CHANGELOG.md +30 -0
- package/dist/cjs/nodeviews/genericCard.js +2 -19
- package/dist/cjs/nodeviews/inlineCard.js +1 -45
- package/dist/cjs/nodeviews/inlineCardWithAwareness.js +34 -18
- package/dist/cjs/pm-plugins/main.js +4 -24
- package/dist/cjs/ui/{OpenButtonOverlay → HoverLinkOverlay}/index.js +26 -14
- package/dist/es2019/nodeviews/genericCard.js +2 -19
- package/dist/es2019/nodeviews/inlineCard.js +2 -42
- package/dist/es2019/nodeviews/inlineCardWithAwareness.js +34 -18
- package/dist/es2019/pm-plugins/main.js +1 -23
- package/dist/es2019/ui/{OpenButtonOverlay → HoverLinkOverlay}/index.js +25 -14
- package/dist/esm/nodeviews/genericCard.js +2 -19
- package/dist/esm/nodeviews/inlineCard.js +2 -46
- package/dist/esm/nodeviews/inlineCardWithAwareness.js +34 -18
- package/dist/esm/pm-plugins/main.js +3 -23
- package/dist/esm/ui/{OpenButtonOverlay → HoverLinkOverlay}/index.js +26 -14
- package/dist/types/index.d.ts +1 -1
- package/dist/types/nodeviews/inlineCard.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +0 -2
- package/dist/types/ui/HoverLinkOverlay/index.d.ts +9 -0
- package/dist/types/ui/{OpenButtonOverlay → HoverLinkOverlay}/types.d.ts +3 -1
- package/dist/types/ui/datasourceErrorBoundary.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/inlineCard.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +0 -2
- package/dist/types-ts4.5/ui/HoverLinkOverlay/index.d.ts +9 -0
- package/dist/types-ts4.5/ui/{OpenButtonOverlay → HoverLinkOverlay}/types.d.ts +3 -1
- package/dist/types-ts4.5/ui/datasourceErrorBoundary.d.ts +1 -1
- package/package.json +9 -12
- package/dist/cjs/ui/PanelButtonOverlay/index.js +0 -171
- package/dist/cjs/ui/PanelButtonOverlay/types.js +0 -5
- package/dist/es2019/ui/PanelButtonOverlay/index.js +0 -148
- package/dist/esm/ui/OpenButtonOverlay/types.js +0 -1
- package/dist/esm/ui/PanelButtonOverlay/index.js +0 -158
- package/dist/esm/ui/PanelButtonOverlay/types.js +0 -1
- package/dist/types/ui/OpenButtonOverlay/index.d.ts +0 -9
- package/dist/types/ui/PanelButtonOverlay/index.d.ts +0 -9
- package/dist/types/ui/PanelButtonOverlay/types.d.ts +0 -7
- package/dist/types-ts4.5/ui/OpenButtonOverlay/index.d.ts +0 -9
- package/dist/types-ts4.5/ui/PanelButtonOverlay/index.d.ts +0 -9
- package/dist/types-ts4.5/ui/PanelButtonOverlay/types.d.ts +0 -7
- /package/dist/cjs/ui/{OpenButtonOverlay → HoverLinkOverlay}/types.js +0 -0
- /package/dist/es2019/ui/{OpenButtonOverlay → HoverLinkOverlay}/types.js +0 -0
- /package/dist/{es2019/ui/PanelButtonOverlay → esm/ui/HoverLinkOverlay}/types.js +0 -0
|
@@ -12,6 +12,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
|
12
12
|
import { cardMessages } from '@atlaskit/editor-common/messages';
|
|
13
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
14
|
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
|
|
15
|
+
import PanelRightIcon from '@atlaskit/icon/core/panel-right';
|
|
15
16
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
16
17
|
import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
|
|
17
18
|
import { visitCardLinkAnalytics } from '../toolbar';
|
|
@@ -58,19 +59,22 @@ var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
|
|
|
58
59
|
var ICON_WIDTH = 16;
|
|
59
60
|
var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
|
|
60
61
|
|
|
61
|
-
var
|
|
62
|
+
var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
|
|
62
63
|
var children = _ref.children,
|
|
63
64
|
_ref$isVisible = _ref.isVisible,
|
|
64
65
|
isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
|
|
65
66
|
url = _ref.url,
|
|
66
67
|
editorAppearance = _ref.editorAppearance,
|
|
67
68
|
editorAnalyticsApi = _ref.editorAnalyticsApi,
|
|
68
|
-
view = _ref.view
|
|
69
|
+
view = _ref.view,
|
|
70
|
+
onClick = _ref.onClick,
|
|
71
|
+
_ref$showPanelButton = _ref.showPanelButton,
|
|
72
|
+
showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
|
|
69
73
|
var _useIntl = useIntl(),
|
|
70
74
|
formatMessage = _useIntl.formatMessage;
|
|
71
|
-
var label = formatMessage(cardMessages.openButtonTitle);
|
|
75
|
+
var label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
|
|
72
76
|
var containerRef = useRef(null);
|
|
73
|
-
var
|
|
77
|
+
var hoverLinkButtonRef = useRef(null);
|
|
74
78
|
var hiddenTextRef = useRef(null);
|
|
75
79
|
var _useState = useState(true),
|
|
76
80
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -82,12 +86,12 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
|
|
|
82
86
|
setHovered = _useState4[1];
|
|
83
87
|
var openTextWidthRef = useRef(null);
|
|
84
88
|
useLayoutEffect(function () {
|
|
85
|
-
var _containerRef$current,
|
|
89
|
+
var _containerRef$current, _hoverLinkButtonRef$c;
|
|
86
90
|
if (!isVisible || !isHovered) {
|
|
87
91
|
return;
|
|
88
92
|
}
|
|
89
93
|
var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
|
|
90
|
-
var openButtonWidth = (
|
|
94
|
+
var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
|
|
91
95
|
|
|
92
96
|
// Get the hidden text width
|
|
93
97
|
if (!openTextWidthRef.current) {
|
|
@@ -122,13 +126,19 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
|
|
|
122
126
|
}
|
|
123
127
|
};
|
|
124
128
|
var handleDoubleClick = function handleDoubleClick() {
|
|
125
|
-
|
|
129
|
+
if (!showPanelButton) {
|
|
130
|
+
sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
|
|
126
131
|
|
|
127
|
-
|
|
128
|
-
|
|
132
|
+
// Double click opens the link in a new tab
|
|
133
|
+
window.open(url, '_blank');
|
|
134
|
+
}
|
|
129
135
|
};
|
|
130
|
-
var handleClick = function handleClick() {
|
|
131
|
-
|
|
136
|
+
var handleClick = function handleClick(event) {
|
|
137
|
+
if (showPanelButton && onClick) {
|
|
138
|
+
onClick(event);
|
|
139
|
+
} else {
|
|
140
|
+
sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
|
|
141
|
+
}
|
|
132
142
|
};
|
|
133
143
|
return (
|
|
134
144
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
@@ -150,7 +160,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
|
|
|
150
160
|
size: "small",
|
|
151
161
|
maxLines: 1
|
|
152
162
|
}, label)), isHovered && jsx(Anchor, {
|
|
153
|
-
ref:
|
|
163
|
+
ref: hoverLinkButtonRef,
|
|
154
164
|
xcss: linkStyles,
|
|
155
165
|
href: url,
|
|
156
166
|
target: "_blank",
|
|
@@ -161,7 +171,9 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
|
|
|
161
171
|
}, jsx(Box, {
|
|
162
172
|
xcss: iconWrapperStyles,
|
|
163
173
|
"data-inlinecard-button-overlay": "icon-wrapper-line-height"
|
|
164
|
-
}, jsx(
|
|
174
|
+
}, showPanelButton ? jsx(PanelRightIcon, {
|
|
175
|
+
label: ""
|
|
176
|
+
}) : jsx(LinkExternalIcon, {
|
|
165
177
|
label: ""
|
|
166
178
|
})), showLabel && jsx(Text, {
|
|
167
179
|
size: "small",
|
|
@@ -170,4 +182,4 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
|
|
|
170
182
|
}, label)))
|
|
171
183
|
);
|
|
172
184
|
};
|
|
173
|
-
export default
|
|
185
|
+
export default HoverLinkOverlay;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
5
5
|
import type { SmartCardProps } from './genericCard';
|
|
6
6
|
import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
|
|
7
7
|
export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick: propsOnClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, pluginInjectionApi, }: SmartCardProps) => React.JSX.Element | null>;
|
|
8
|
-
export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '
|
|
8
|
+
export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
|
|
9
9
|
/**
|
|
10
10
|
*
|
|
11
11
|
* @param props
|
|
@@ -2,6 +2,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { cardPlugin } from '../index';
|
|
4
4
|
import type { CardPluginOptions, CardPluginState } from '../types';
|
|
5
|
-
export declare const ALLOW_EVENTS_CLASSNAME = "card-plugin-element-allow-events";
|
|
6
|
-
export declare const stopEvent: (event: Event) => boolean;
|
|
7
5
|
export declare const createPlugin: (options: CardPluginOptions, pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<CardPluginState>;
|
|
@@ -0,0 +1,9 @@
|
|
|
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;
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { EditorAppearance } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
export type
|
|
5
|
+
export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
6
6
|
isVisible?: boolean;
|
|
7
7
|
url: string;
|
|
8
8
|
editorAppearance?: EditorAppearance;
|
|
9
9
|
editorAnalyticsApi?: EditorAnalyticsAPI;
|
|
10
10
|
view?: EditorView;
|
|
11
|
+
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
12
|
+
showPanelButton?: boolean;
|
|
11
13
|
};
|
|
@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
|
|
|
20
20
|
error: Error | APIError;
|
|
21
21
|
};
|
|
22
22
|
componentDidCatch(error: Error | APIError): void;
|
|
23
|
-
render(): string | number | boolean |
|
|
23
|
+
render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
|
|
24
24
|
}
|
|
@@ -5,7 +5,7 @@ import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
5
5
|
import type { SmartCardProps } from './genericCard';
|
|
6
6
|
import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
|
|
7
7
|
export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick: propsOnClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, pluginInjectionApi, }: SmartCardProps) => React.JSX.Element | null>;
|
|
8
|
-
export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '
|
|
8
|
+
export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
|
|
9
9
|
/**
|
|
10
10
|
*
|
|
11
11
|
* @param props
|
|
@@ -2,6 +2,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { cardPlugin } from '../index';
|
|
4
4
|
import type { CardPluginOptions, CardPluginState } from '../types';
|
|
5
|
-
export declare const ALLOW_EVENTS_CLASSNAME = "card-plugin-element-allow-events";
|
|
6
|
-
export declare const stopEvent: (event: Event) => boolean;
|
|
7
5
|
export declare const createPlugin: (options: CardPluginOptions, pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<CardPluginState>;
|
|
@@ -0,0 +1,9 @@
|
|
|
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;
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { EditorAppearance } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
export type
|
|
5
|
+
export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
6
6
|
isVisible?: boolean;
|
|
7
7
|
url: string;
|
|
8
8
|
editorAppearance?: EditorAppearance;
|
|
9
9
|
editorAnalyticsApi?: EditorAnalyticsAPI;
|
|
10
10
|
view?: EditorView;
|
|
11
|
+
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
12
|
+
showPanelButton?: boolean;
|
|
11
13
|
};
|
|
@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
|
|
|
20
20
|
error: Error | APIError;
|
|
21
21
|
};
|
|
22
22
|
componentDidCatch(error: Error | APIError): void;
|
|
23
|
-
render(): string | number | boolean |
|
|
23
|
+
render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
|
|
24
24
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-card",
|
|
3
|
-
"version": "7.0
|
|
3
|
+
"version": "7.2.0",
|
|
4
4
|
"description": "Card plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
"@atlaskit/button": "^23.2.0",
|
|
38
38
|
"@atlaskit/custom-steps": "^0.11.0",
|
|
39
39
|
"@atlaskit/editor-plugin-analytics": "^3.0.0",
|
|
40
|
-
"@atlaskit/editor-plugin-base": "^4.
|
|
41
|
-
"@atlaskit/editor-plugin-connectivity": "^3.
|
|
40
|
+
"@atlaskit/editor-plugin-base": "^4.1.0",
|
|
41
|
+
"@atlaskit/editor-plugin-connectivity": "^3.1.0",
|
|
42
42
|
"@atlaskit/editor-plugin-decorations": "^3.0.0",
|
|
43
43
|
"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
|
|
44
44
|
"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
|
|
45
45
|
"@atlaskit/editor-plugin-feature-flags": "^2.0.0",
|
|
46
|
-
"@atlaskit/editor-plugin-floating-toolbar": "^5.
|
|
47
|
-
"@atlaskit/editor-plugin-grid": "^3.
|
|
46
|
+
"@atlaskit/editor-plugin-floating-toolbar": "^5.1.0",
|
|
47
|
+
"@atlaskit/editor-plugin-grid": "^3.1.0",
|
|
48
48
|
"@atlaskit/editor-plugin-width": "^4.0.0",
|
|
49
49
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
50
50
|
"@atlaskit/editor-shared-styles": "^3.5.0",
|
|
51
51
|
"@atlaskit/frontend-utilities": "^3.1.0",
|
|
52
|
-
"@atlaskit/icon": "^27.
|
|
52
|
+
"@atlaskit/icon": "^27.6.0",
|
|
53
53
|
"@atlaskit/link": "^3.2.0",
|
|
54
54
|
"@atlaskit/link-analytics": "^10.0.0",
|
|
55
55
|
"@atlaskit/link-client-extension": "^5.0.0",
|
|
@@ -59,9 +59,9 @@
|
|
|
59
59
|
"@atlaskit/menu": "^8.0.0",
|
|
60
60
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
61
61
|
"@atlaskit/primitives": "^14.10.0",
|
|
62
|
-
"@atlaskit/smart-card": "^40.
|
|
62
|
+
"@atlaskit/smart-card": "^40.5.0",
|
|
63
63
|
"@atlaskit/theme": "^19.0.0",
|
|
64
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
64
|
+
"@atlaskit/tmp-editor-statsig": "^9.10.0",
|
|
65
65
|
"@atlaskit/tokens": "^5.6.0",
|
|
66
66
|
"@babel/runtime": "^7.0.0",
|
|
67
67
|
"@emotion/react": "^11.7.1",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"uuid": "^3.1.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
|
-
"@atlaskit/editor-common": "^107.
|
|
74
|
+
"@atlaskit/editor-common": "^107.11.0",
|
|
75
75
|
"@atlaskit/link-provider": "^3.4.0",
|
|
76
76
|
"react": "^18.2.0",
|
|
77
77
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -116,9 +116,6 @@
|
|
|
116
116
|
"editor_inline_comments_paste_insert_nodes": {
|
|
117
117
|
"type": "boolean"
|
|
118
118
|
},
|
|
119
|
-
"linking_platform_smart_links_in_live_pages": {
|
|
120
|
-
"type": "boolean"
|
|
121
|
-
},
|
|
122
119
|
"confluence-issue-terminology-refresh": {
|
|
123
120
|
"type": "boolean"
|
|
124
121
|
},
|
|
@@ -1,171 +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 _messages = require("@atlaskit/editor-common/messages");
|
|
14
|
-
var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
|
|
15
|
-
var _primitives = require("@atlaskit/primitives");
|
|
16
|
-
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); }
|
|
17
|
-
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
18
|
-
/* eslint-disable @atlaskit/design-system/prefer-primitives */
|
|
19
|
-
/**
|
|
20
|
-
* @jsxRuntime classic
|
|
21
|
-
* @jsx jsx
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
25
|
-
|
|
26
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
27
|
-
|
|
28
|
-
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
29
|
-
|
|
30
|
-
var containerStyles = (0, _react2.css)({
|
|
31
|
-
position: 'relative'
|
|
32
|
-
});
|
|
33
|
-
var iconWrapperStyles = (0, _primitives.xcss)({
|
|
34
|
-
display: 'inline-flex',
|
|
35
|
-
justifyContent: 'center',
|
|
36
|
-
alignItems: 'center',
|
|
37
|
-
height: '17px',
|
|
38
|
-
width: '17px'
|
|
39
|
-
});
|
|
40
|
-
var hiddenTextStyle = (0, _react2.css)({
|
|
41
|
-
overflow: 'hidden',
|
|
42
|
-
whiteSpace: 'nowrap',
|
|
43
|
-
position: 'absolute',
|
|
44
|
-
visibility: 'hidden'
|
|
45
|
-
});
|
|
46
|
-
var iconAndLabelWrapperStyles = (0, _primitives.xcss)({
|
|
47
|
-
position: 'absolute',
|
|
48
|
-
left: 'space.025',
|
|
49
|
-
top: '-1px',
|
|
50
|
-
cursor: 'pointer',
|
|
51
|
-
display: 'inline-flex',
|
|
52
|
-
alignItems: 'center',
|
|
53
|
-
verticalAlign: 'middle',
|
|
54
|
-
paddingInline: 'space.050',
|
|
55
|
-
gap: 'space.025',
|
|
56
|
-
overflow: 'hidden',
|
|
57
|
-
zIndex: 'card',
|
|
58
|
-
backgroundColor: 'color.background.accent.gray.subtlest',
|
|
59
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
60
|
-
color: 'color.text.subtle',
|
|
61
|
-
textDecoration: 'none',
|
|
62
|
-
whiteSpace: 'nowrap',
|
|
63
|
-
':hover': {
|
|
64
|
-
backgroundColor: 'elevation.surface.hovered',
|
|
65
|
-
color: 'color.text.subtle',
|
|
66
|
-
textDecoration: 'none'
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
|
|
70
|
-
var ICON_WIDTH = 16;
|
|
71
|
-
var DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
|
|
72
|
-
|
|
73
|
-
var PanelButtonOverlay = function PanelButtonOverlay(_ref) {
|
|
74
|
-
var children = _ref.children,
|
|
75
|
-
_ref$isVisible = _ref.isVisible,
|
|
76
|
-
isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
|
|
77
|
-
editorAppearance = _ref.editorAppearance,
|
|
78
|
-
onClick = _ref.onClick;
|
|
79
|
-
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
80
|
-
formatMessage = _useIntl.formatMessage;
|
|
81
|
-
var label = formatMessage(_messages.cardMessages.panelButtonTitle);
|
|
82
|
-
var containerRef = (0, _react.useRef)(null);
|
|
83
|
-
var panelButtonRef = (0, _react.useRef)(null);
|
|
84
|
-
var hiddenTextRef = (0, _react.useRef)(null);
|
|
85
|
-
var _useState = (0, _react.useState)(true),
|
|
86
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
87
|
-
showLabel = _useState2[0],
|
|
88
|
-
setShowLabel = _useState2[1];
|
|
89
|
-
var _useState3 = (0, _react.useState)(false),
|
|
90
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
91
|
-
isHovered = _useState4[0],
|
|
92
|
-
setHovered = _useState4[1];
|
|
93
|
-
var panelTextWidthRef = (0, _react.useRef)(null);
|
|
94
|
-
(0, _react.useLayoutEffect)(function () {
|
|
95
|
-
var _containerRef$current, _panelButtonRef$curre;
|
|
96
|
-
if (!isVisible || !isHovered) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
|
|
100
|
-
var panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
|
|
101
|
-
|
|
102
|
-
// Get the hidden text width
|
|
103
|
-
if (!panelTextWidthRef.current) {
|
|
104
|
-
var hiddenText = hiddenTextRef.current;
|
|
105
|
-
if (hiddenText) {
|
|
106
|
-
// Measure the width of the hidden text
|
|
107
|
-
// Temporarily make the element visible to measure its width
|
|
108
|
-
hiddenText.style.visibility = 'hidden';
|
|
109
|
-
hiddenText.style.display = 'inline';
|
|
110
|
-
panelTextWidthRef.current = hiddenText.offsetWidth;
|
|
111
|
-
|
|
112
|
-
// Reset the hiddenText's display property
|
|
113
|
-
hiddenText.style.display = 'none';
|
|
114
|
-
hiddenText.style.visibility = 'inherit';
|
|
115
|
-
} else {
|
|
116
|
-
panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
if (!cardWidth || !panelButtonWidth) {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
var panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
|
|
123
|
-
var canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
|
|
124
|
-
setShowLabel(canShowLabel);
|
|
125
|
-
}, [isVisible, isHovered]);
|
|
126
|
-
var handleOverlayChange = function handleOverlayChange(isHovered) {
|
|
127
|
-
setHovered(isHovered);
|
|
128
|
-
};
|
|
129
|
-
var handleClick = function handleClick() {
|
|
130
|
-
if (onClick) {
|
|
131
|
-
onClick();
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
return (
|
|
135
|
-
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
136
|
-
(0, _react2.jsx)("span", {
|
|
137
|
-
ref: containerRef,
|
|
138
|
-
css: containerStyles,
|
|
139
|
-
onMouseEnter: function onMouseEnter() {
|
|
140
|
-
return handleOverlayChange(true);
|
|
141
|
-
},
|
|
142
|
-
onMouseLeave: function onMouseLeave() {
|
|
143
|
-
return handleOverlayChange(false);
|
|
144
|
-
}
|
|
145
|
-
}, children, (0, _react2.jsx)("span", {
|
|
146
|
-
css: hiddenTextStyle,
|
|
147
|
-
"aria-hidden": "true"
|
|
148
|
-
}, (0, _react2.jsx)(_primitives.Text, {
|
|
149
|
-
ref: hiddenTextRef,
|
|
150
|
-
size: "small",
|
|
151
|
-
maxLines: 1
|
|
152
|
-
}, label)), isHovered && (0, _react2.jsx)(_primitives.Pressable, {
|
|
153
|
-
ref: panelButtonRef,
|
|
154
|
-
xcss: iconAndLabelWrapperStyles,
|
|
155
|
-
style: {
|
|
156
|
-
paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
|
|
157
|
-
},
|
|
158
|
-
onClick: handleClick
|
|
159
|
-
}, (0, _react2.jsx)(_primitives.Box, {
|
|
160
|
-
xcss: iconWrapperStyles,
|
|
161
|
-
"data-inlinecard-button-overlay": "icon-wrapper-line-height"
|
|
162
|
-
}, (0, _react2.jsx)(_panelRight.default, {
|
|
163
|
-
label: ""
|
|
164
|
-
})), showLabel && (0, _react2.jsx)(_primitives.Text, {
|
|
165
|
-
size: "small",
|
|
166
|
-
color: "color.text.subtle",
|
|
167
|
-
maxLines: 1
|
|
168
|
-
}, label)))
|
|
169
|
-
);
|
|
170
|
-
};
|
|
171
|
-
var _default = exports.default = PanelButtonOverlay;
|
|
@@ -1,148 +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
|
-
|
|
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 { cardMessages } from '@atlaskit/editor-common/messages';
|
|
12
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
13
|
-
import PanelRightIcon from '@atlaskit/icon/core/panel-right';
|
|
14
|
-
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
15
|
-
import { Box, Pressable, Text, xcss } from '@atlaskit/primitives';
|
|
16
|
-
const containerStyles = css({
|
|
17
|
-
position: 'relative'
|
|
18
|
-
});
|
|
19
|
-
const iconWrapperStyles = xcss({
|
|
20
|
-
display: 'inline-flex',
|
|
21
|
-
justifyContent: 'center',
|
|
22
|
-
alignItems: 'center',
|
|
23
|
-
height: '17px',
|
|
24
|
-
width: '17px'
|
|
25
|
-
});
|
|
26
|
-
const hiddenTextStyle = css({
|
|
27
|
-
overflow: 'hidden',
|
|
28
|
-
whiteSpace: 'nowrap',
|
|
29
|
-
position: 'absolute',
|
|
30
|
-
visibility: 'hidden'
|
|
31
|
-
});
|
|
32
|
-
const iconAndLabelWrapperStyles = xcss({
|
|
33
|
-
position: 'absolute',
|
|
34
|
-
left: 'space.025',
|
|
35
|
-
top: '-1px',
|
|
36
|
-
cursor: 'pointer',
|
|
37
|
-
display: 'inline-flex',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
verticalAlign: 'middle',
|
|
40
|
-
paddingInline: 'space.050',
|
|
41
|
-
gap: 'space.025',
|
|
42
|
-
overflow: 'hidden',
|
|
43
|
-
zIndex: 'card',
|
|
44
|
-
backgroundColor: 'color.background.accent.gray.subtlest',
|
|
45
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
46
|
-
color: 'color.text.subtle',
|
|
47
|
-
textDecoration: 'none',
|
|
48
|
-
whiteSpace: 'nowrap',
|
|
49
|
-
':hover': {
|
|
50
|
-
backgroundColor: 'elevation.surface.hovered',
|
|
51
|
-
color: 'color.text.subtle',
|
|
52
|
-
textDecoration: 'none'
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
|
|
56
|
-
const ICON_WIDTH = 16;
|
|
57
|
-
const DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
|
|
58
|
-
|
|
59
|
-
const PanelButtonOverlay = ({
|
|
60
|
-
children,
|
|
61
|
-
isVisible = false,
|
|
62
|
-
editorAppearance,
|
|
63
|
-
onClick
|
|
64
|
-
}) => {
|
|
65
|
-
const {
|
|
66
|
-
formatMessage
|
|
67
|
-
} = useIntl();
|
|
68
|
-
const label = formatMessage(cardMessages.panelButtonTitle);
|
|
69
|
-
const containerRef = useRef(null);
|
|
70
|
-
const panelButtonRef = useRef(null);
|
|
71
|
-
const hiddenTextRef = useRef(null);
|
|
72
|
-
const [showLabel, setShowLabel] = useState(true);
|
|
73
|
-
const [isHovered, setHovered] = useState(false);
|
|
74
|
-
const panelTextWidthRef = useRef(null);
|
|
75
|
-
useLayoutEffect(() => {
|
|
76
|
-
var _containerRef$current, _panelButtonRef$curre;
|
|
77
|
-
if (!isVisible || !isHovered) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
|
|
81
|
-
const panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
|
|
82
|
-
|
|
83
|
-
// Get the hidden text width
|
|
84
|
-
if (!panelTextWidthRef.current) {
|
|
85
|
-
const hiddenText = hiddenTextRef.current;
|
|
86
|
-
if (hiddenText) {
|
|
87
|
-
// Measure the width of the hidden text
|
|
88
|
-
// Temporarily make the element visible to measure its width
|
|
89
|
-
hiddenText.style.visibility = 'hidden';
|
|
90
|
-
hiddenText.style.display = 'inline';
|
|
91
|
-
panelTextWidthRef.current = hiddenText.offsetWidth;
|
|
92
|
-
|
|
93
|
-
// Reset the hiddenText's display property
|
|
94
|
-
hiddenText.style.display = 'none';
|
|
95
|
-
hiddenText.style.visibility = 'inherit';
|
|
96
|
-
} else {
|
|
97
|
-
panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
if (!cardWidth || !panelButtonWidth) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
const panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
|
|
104
|
-
const canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
|
|
105
|
-
setShowLabel(canShowLabel);
|
|
106
|
-
}, [isVisible, isHovered]);
|
|
107
|
-
const handleOverlayChange = isHovered => {
|
|
108
|
-
setHovered(isHovered);
|
|
109
|
-
};
|
|
110
|
-
const handleClick = () => {
|
|
111
|
-
if (onClick) {
|
|
112
|
-
onClick();
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
return (
|
|
116
|
-
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
117
|
-
jsx("span", {
|
|
118
|
-
ref: containerRef,
|
|
119
|
-
css: containerStyles,
|
|
120
|
-
onMouseEnter: () => handleOverlayChange(true),
|
|
121
|
-
onMouseLeave: () => handleOverlayChange(false)
|
|
122
|
-
}, children, jsx("span", {
|
|
123
|
-
css: hiddenTextStyle,
|
|
124
|
-
"aria-hidden": "true"
|
|
125
|
-
}, jsx(Text, {
|
|
126
|
-
ref: hiddenTextRef,
|
|
127
|
-
size: "small",
|
|
128
|
-
maxLines: 1
|
|
129
|
-
}, label)), isHovered && jsx(Pressable, {
|
|
130
|
-
ref: panelButtonRef,
|
|
131
|
-
xcss: iconAndLabelWrapperStyles,
|
|
132
|
-
style: {
|
|
133
|
-
paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
|
|
134
|
-
},
|
|
135
|
-
onClick: handleClick
|
|
136
|
-
}, jsx(Box, {
|
|
137
|
-
xcss: iconWrapperStyles,
|
|
138
|
-
"data-inlinecard-button-overlay": "icon-wrapper-line-height"
|
|
139
|
-
}, jsx(PanelRightIcon, {
|
|
140
|
-
label: ""
|
|
141
|
-
})), showLabel && jsx(Text, {
|
|
142
|
-
size: "small",
|
|
143
|
-
color: "color.text.subtle",
|
|
144
|
-
maxLines: 1
|
|
145
|
-
}, label)))
|
|
146
|
-
);
|
|
147
|
-
};
|
|
148
|
-
export default PanelButtonOverlay;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|