@atlaskit/editor-common 84.0.4 → 84.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/afm-cc/tsconfig.json +3 -0
- package/dist/cjs/analytics/types/context-menu-events.js +5 -0
- package/dist/cjs/analytics/types/enums.js +1 -0
- package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js +56 -0
- package/dist/cjs/link/ConfigureLinkOverlay/StyledButton.js +38 -0
- package/dist/cjs/link/ConfigureLinkOverlay/{OverlayButton.js → index.js} +29 -22
- package/dist/cjs/link/index.js +2 -2
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/resizer/Resizer.js +23 -45
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui-color/ColorPalette/Color/index.js +1 -2
- package/dist/cjs/ui-color/ColorPalette/Palettes/highlightColorPalette.js +6 -11
- package/dist/cjs/ui-color/ColorPalette/Palettes/textColorPalette.js +2 -11
- package/dist/cjs/ui-color/index.js +0 -12
- package/dist/es2019/analytics/types/context-menu-events.js +1 -0
- package/dist/es2019/analytics/types/enums.js +1 -0
- package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js +45 -0
- package/dist/es2019/link/ConfigureLinkOverlay/StyledButton.js +30 -0
- package/dist/es2019/link/ConfigureLinkOverlay/{OverlayButton.js → index.js} +28 -24
- package/dist/es2019/link/index.js +1 -1
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/resizer/Resizer.js +26 -54
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui-color/ColorPalette/Color/index.js +1 -2
- package/dist/es2019/ui-color/ColorPalette/Palettes/highlightColorPalette.js +2 -7
- package/dist/es2019/ui-color/ColorPalette/Palettes/textColorPalette.js +2 -7
- package/dist/es2019/ui-color/index.js +2 -2
- package/dist/esm/analytics/types/context-menu-events.js +1 -0
- package/dist/esm/analytics/types/enums.js +1 -0
- package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js +46 -0
- package/dist/esm/link/ConfigureLinkOverlay/StyledButton.js +31 -0
- package/dist/esm/link/ConfigureLinkOverlay/{OverlayButton.js → index.js} +31 -24
- package/dist/esm/link/index.js +1 -1
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/resizer/Resizer.js +23 -45
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui-color/ColorPalette/Color/index.js +1 -2
- package/dist/esm/ui-color/ColorPalette/Palettes/highlightColorPalette.js +1 -10
- package/dist/esm/ui-color/ColorPalette/Palettes/textColorPalette.js +1 -10
- package/dist/esm/ui-color/index.js +2 -2
- package/dist/types/analytics/types/context-menu-events.d.ts +11 -0
- package/dist/types/analytics/types/enums.d.ts +2 -1
- package/dist/types/analytics/types/events.d.ts +2 -1
- package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts +7 -0
- package/dist/types/link/ConfigureLinkOverlay/StyledButton.d.ts +7 -0
- package/dist/types/link/index.d.ts +2 -2
- package/dist/types/ui-color/ColorPalette/Palettes/highlightColorPalette.d.ts +0 -1
- package/dist/types/ui-color/ColorPalette/Palettes/textColorPalette.d.ts +1 -2
- package/dist/types/ui-color/index.d.ts +2 -2
- package/dist/types-ts4.5/analytics/types/context-menu-events.d.ts +11 -0
- package/dist/types-ts4.5/analytics/types/enums.d.ts +2 -1
- package/dist/types-ts4.5/analytics/types/events.d.ts +2 -1
- package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts +7 -0
- package/dist/types-ts4.5/link/ConfigureLinkOverlay/StyledButton.d.ts +7 -0
- package/dist/types-ts4.5/link/index.d.ts +2 -2
- package/dist/types-ts4.5/ui-color/ColorPalette/Palettes/highlightColorPalette.d.ts +0 -1
- package/dist/types-ts4.5/ui-color/ColorPalette/Palettes/textColorPalette.d.ts +1 -2
- package/dist/types-ts4.5/ui-color/index.d.ts +2 -2
- package/package.json +5 -10
- /package/dist/types/link/ConfigureLinkOverlay/{OverlayButton.d.ts → index.d.ts} +0 -0
- /package/dist/types-ts4.5/link/ConfigureLinkOverlay/{OverlayButton.d.ts → index.d.ts} +0 -0
|
@@ -1,29 +1,17 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import { useCallback } from 'react';
|
|
2
|
+
import { useCallback, useLayoutEffect, useState } from 'react';
|
|
3
3
|
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import { useIntl } from 'react-intl-next';
|
|
7
|
-
import Button from '@atlaskit/button';
|
|
8
7
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
8
|
import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
|
|
10
|
-
import { N0
|
|
9
|
+
import { N0 } from '@atlaskit/theme/colors';
|
|
11
10
|
import { layers } from '@atlaskit/theme/constants';
|
|
12
11
|
import Tooltip from '@atlaskit/tooltip';
|
|
13
12
|
import { cardMessages } from '../../messages';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
background: `var(--ds-background-neutral, ${N30A})`,
|
|
17
|
-
color: `var(--ds-icon, ${N700})`,
|
|
18
|
-
'&:hover': {
|
|
19
|
-
background: `var(--ds-background-neutral-hovered, ${N40A})`
|
|
20
|
-
},
|
|
21
|
-
'&:active': {
|
|
22
|
-
background: `var(--ds-background-neutral-pressed, ${N60A})`
|
|
23
|
-
},
|
|
24
|
-
width: '1.375rem',
|
|
25
|
-
height: '1.25rem'
|
|
26
|
-
});
|
|
13
|
+
import Dropdown from './Dropdown';
|
|
14
|
+
import { StyledButton } from './StyledButton';
|
|
27
15
|
const buttonWrapperStyles = css({
|
|
28
16
|
position: 'absolute',
|
|
29
17
|
zIndex: layers.card(),
|
|
@@ -33,6 +21,7 @@ const buttonWrapperStyles = css({
|
|
|
33
21
|
background: `var(--ds-surface-raised, ${N0})`,
|
|
34
22
|
borderRadius: "var(--ds-border-radius, 3px)"
|
|
35
23
|
});
|
|
24
|
+
const showDropdownThresholdPx = 50;
|
|
36
25
|
export const OverlayButton = ({
|
|
37
26
|
editorView,
|
|
38
27
|
testId = 'link-configure-overlay-button',
|
|
@@ -42,6 +31,23 @@ export const OverlayButton = ({
|
|
|
42
31
|
const {
|
|
43
32
|
formatMessage
|
|
44
33
|
} = useIntl();
|
|
34
|
+
const configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
|
|
35
|
+
const [showDropdown, setShowDropdown] = useState(false);
|
|
36
|
+
useLayoutEffect(() => {
|
|
37
|
+
var _domNode;
|
|
38
|
+
let domNode = editorView.nodeDOM(targetElementPos);
|
|
39
|
+
if (((_domNode = domNode) === null || _domNode === void 0 ? void 0 : _domNode.nodeType) === Node.TEXT_NODE) {
|
|
40
|
+
domNode = domNode.parentElement;
|
|
41
|
+
}
|
|
42
|
+
if (domNode instanceof HTMLElement) {
|
|
43
|
+
const {
|
|
44
|
+
width
|
|
45
|
+
} = domNode.getBoundingClientRect();
|
|
46
|
+
if (width < showDropdownThresholdPx) {
|
|
47
|
+
setShowDropdown(true);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}, [editorView, targetElementPos]);
|
|
45
51
|
const docNode = editorView.state.doc.nodeAt(targetElementPos);
|
|
46
52
|
const nodeEnd = targetElementPos + ((_docNode$nodeSize = docNode === null || docNode === void 0 ? void 0 : docNode.nodeSize) !== null && _docNode$nodeSize !== void 0 ? _docNode$nodeSize : 0);
|
|
47
53
|
const isText = docNode === null || docNode === void 0 ? void 0 : docNode.isText;
|
|
@@ -62,18 +68,16 @@ export const OverlayButton = ({
|
|
|
62
68
|
if (!targetElementPos || isSelected) {
|
|
63
69
|
return null;
|
|
64
70
|
}
|
|
65
|
-
const configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
|
|
66
71
|
return jsx("span", {
|
|
67
|
-
css: buttonWrapperStyles
|
|
68
|
-
|
|
72
|
+
css: buttonWrapperStyles,
|
|
73
|
+
"data-testid": testId
|
|
74
|
+
}, showDropdown ? jsx(Dropdown, {
|
|
75
|
+
testId: testId
|
|
76
|
+
}) : jsx(Tooltip, {
|
|
69
77
|
content: configureLinkLabel,
|
|
70
78
|
hideTooltipOnClick: true,
|
|
71
79
|
testId: `${testId}-tooltip`
|
|
72
|
-
}, jsx(
|
|
73
|
-
testId: testId
|
|
74
|
-
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
|
|
75
|
-
,
|
|
76
|
-
css: buttonStyles,
|
|
80
|
+
}, jsx(StyledButton, {
|
|
77
81
|
onClick: handleClick,
|
|
78
82
|
iconBefore: jsx(PreferencesIcon, {
|
|
79
83
|
label: configureLinkLabel,
|
|
@@ -10,4 +10,4 @@ export { default as HyperlinkLinkAddToolbar, HyperlinkLinkAddToolbarWithIntl, RE
|
|
|
10
10
|
export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
|
|
11
11
|
export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
|
|
12
12
|
export { stagingLinkPreferencesUrl, productionLinkPreferencesUrl } from './constants';
|
|
13
|
-
export { OverlayButton } from './ConfigureLinkOverlay
|
|
13
|
+
export { OverlayButton } from './ConfigureLinkOverlay';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isFedRamp } from './environment';
|
|
2
2
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
3
3
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
4
|
-
const packageVersion = "84.0
|
|
4
|
+
const packageVersion = "84.2.0";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Resizable } from 're-resizable';
|
|
5
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import Tooltip from '@atlaskit/tooltip';
|
|
7
6
|
import { handleWrapperClass, resizerDangerClassName, resizerExtendedZone, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
|
|
8
7
|
const SUPPORTED_HANDLES = ['left', 'right'];
|
|
@@ -125,33 +124,15 @@ const ResizerNext = (props, ref) => {
|
|
|
125
124
|
[position]: thumb
|
|
126
125
|
};
|
|
127
126
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
if (!!handleTooltipContent) {
|
|
138
|
-
return {
|
|
139
|
-
...result,
|
|
140
|
-
[position]:
|
|
141
|
-
/*#__PURE__*/
|
|
142
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
143
|
-
React.createElement("div", {
|
|
144
|
-
contentEditable: false,
|
|
145
|
-
style: inheritedCSS
|
|
146
|
-
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
147
|
-
content: handleTooltipContent,
|
|
148
|
-
hideTooltipOnClick: true,
|
|
149
|
-
position: "mouse",
|
|
150
|
-
mousePosition: "auto-start",
|
|
151
|
-
testId: `resizer-handle-${position}-tooltip`
|
|
152
|
-
}, thumbWithTrack))
|
|
153
|
-
};
|
|
154
|
-
}
|
|
127
|
+
const thumbWithTrack =
|
|
128
|
+
/*#__PURE__*/
|
|
129
|
+
//It's important to have {thumb} element before the div, the thumb element is the one that gets focus and only the 1st element recives aria-descibedby attribute which is important for screen reader users
|
|
130
|
+
React.createElement(React.Fragment, null, thumb, /*#__PURE__*/React.createElement("div", {
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
132
|
+
className: classnames(resizerHandleTrackClassName, handleHighlight),
|
|
133
|
+
"data-testid": `resizer-handle-${position}-track`
|
|
134
|
+
}));
|
|
135
|
+
if (!!handleTooltipContent) {
|
|
155
136
|
return {
|
|
156
137
|
...result,
|
|
157
138
|
[position]:
|
|
@@ -160,34 +141,25 @@ const ResizerNext = (props, ref) => {
|
|
|
160
141
|
React.createElement("div", {
|
|
161
142
|
contentEditable: false,
|
|
162
143
|
style: inheritedCSS
|
|
163
|
-
},
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
171
|
-
className: classnames(resizerHandleTrackClassName, handleHighlight),
|
|
172
|
-
"data-testid": `resizer-handle-${position}-track`
|
|
173
|
-
}));
|
|
174
|
-
if (!!handleTooltipContent) {
|
|
175
|
-
return {
|
|
176
|
-
...result,
|
|
177
|
-
[position]: /*#__PURE__*/React.createElement(Tooltip, {
|
|
178
|
-
content: handleTooltipContent,
|
|
179
|
-
hideTooltipOnClick: true,
|
|
180
|
-
position: "mouse",
|
|
181
|
-
mousePosition: "auto-start",
|
|
182
|
-
testId: `resizer-handle-${position}-tooltip`
|
|
183
|
-
}, thumbWithTrack)
|
|
184
|
-
};
|
|
185
|
-
}
|
|
186
|
-
return {
|
|
187
|
-
...result,
|
|
188
|
-
[position]: thumbWithTrack
|
|
144
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
145
|
+
content: handleTooltipContent,
|
|
146
|
+
hideTooltipOnClick: true,
|
|
147
|
+
position: "mouse",
|
|
148
|
+
mousePosition: "auto-start",
|
|
149
|
+
testId: `resizer-handle-${position}-tooltip`
|
|
150
|
+
}, thumbWithTrack))
|
|
189
151
|
};
|
|
190
152
|
}
|
|
153
|
+
return {
|
|
154
|
+
...result,
|
|
155
|
+
[position]:
|
|
156
|
+
/*#__PURE__*/
|
|
157
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
158
|
+
React.createElement("div", {
|
|
159
|
+
contentEditable: false,
|
|
160
|
+
style: inheritedCSS
|
|
161
|
+
}, thumbWithTrack)
|
|
162
|
+
};
|
|
191
163
|
}, {});
|
|
192
164
|
}, [handleHighlight, handleTooltipContent]);
|
|
193
165
|
|
|
@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
9
9
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
10
10
|
import Layer from '../Layer';
|
|
11
11
|
const packageName = "@atlaskit/editor-common";
|
|
12
|
-
const packageVersion = "84.0
|
|
12
|
+
const packageVersion = "84.2.0";
|
|
13
13
|
const halfFocusRing = 1;
|
|
14
14
|
const dropOffset = '0, 8';
|
|
15
15
|
class DropList extends Component {
|
|
@@ -4,7 +4,6 @@ import React from 'react';
|
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
6
|
import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { N0 } from '@atlaskit/theme/colors';
|
|
9
8
|
import Tooltip from '@atlaskit/tooltip';
|
|
10
9
|
import { buttonStyle, buttonWrapperStyle } from './styles';
|
|
@@ -59,7 +58,7 @@ const Color = props => {
|
|
|
59
58
|
,
|
|
60
59
|
className: `${isSelected ? 'selected' : ''}`,
|
|
61
60
|
style: {
|
|
62
|
-
backgroundColor: colorStyle ||
|
|
61
|
+
backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
|
|
63
62
|
border: `1px solid ${borderColor}`
|
|
64
63
|
},
|
|
65
64
|
autoFocus: autoFocus
|
|
@@ -5,7 +5,6 @@ import { jsx } from '@emotion/react';
|
|
|
5
5
|
import { backgroundColorPalette } from '@atlaskit/adf-schema';
|
|
6
6
|
import Icon from '@atlaskit/icon';
|
|
7
7
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
8
|
-
import { DEFAULT_BORDER_COLOR } from './common';
|
|
9
8
|
import getColorMessage from './getColorMessage';
|
|
10
9
|
import paletteMessages from './paletteMessages';
|
|
11
10
|
import { mapPaletteColor } from './textColorPalette';
|
|
@@ -43,14 +42,10 @@ export const highlightColorPalette = [{
|
|
|
43
42
|
value: REMOVE_HIGHLIGHT_COLOR,
|
|
44
43
|
label: 'No color',
|
|
45
44
|
// Mostly informative, only used for analytics
|
|
46
|
-
border:
|
|
45
|
+
border: "var(--ds-border, #091E4224)",
|
|
47
46
|
message: getColorMessage(paletteMessages, 'no-color'),
|
|
48
47
|
decorator: jsx(EditorDiagonalLineIcon, null)
|
|
49
48
|
}];
|
|
50
49
|
backgroundColorPalette.forEach((label, color) => {
|
|
51
50
|
highlightColorPalette.push(mapPaletteColor(label, color));
|
|
52
|
-
});
|
|
53
|
-
export const highlightColorPaletteWithTokenBorders = highlightColorPalette.map(paletteColor => ({
|
|
54
|
-
...paletteColor,
|
|
55
|
-
border: "var(--ds-border, #091E4224)"
|
|
56
|
-
}));
|
|
51
|
+
});
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { colorPalette } from '@atlaskit/adf-schema';
|
|
2
|
-
import { DEFAULT_BORDER_COLOR } from './common';
|
|
3
2
|
import getColorMessage from './getColorMessage';
|
|
4
3
|
import paletteMessages from './paletteMessages';
|
|
5
4
|
export const mapPaletteColor = (label, color) => {
|
|
@@ -8,7 +7,7 @@ export const mapPaletteColor = (label, color) => {
|
|
|
8
7
|
return {
|
|
9
8
|
value: color,
|
|
10
9
|
label,
|
|
11
|
-
border:
|
|
10
|
+
border: "var(--ds-border, #091E4224)",
|
|
12
11
|
message
|
|
13
12
|
};
|
|
14
13
|
};
|
|
@@ -18,8 +17,4 @@ export const textColorPalette = [];
|
|
|
18
17
|
export const textColorPaletteTokenBorders = [];
|
|
19
18
|
colorPalette.forEach((label, color) => {
|
|
20
19
|
textColorPalette.push(mapPaletteColor(label, color));
|
|
21
|
-
});
|
|
22
|
-
export const textColorPaletteWithTokenBorders = textColorPalette.map(paletteColor => ({
|
|
23
|
-
...paletteColor,
|
|
24
|
-
border: "var(--ds-border, #091E4224)"
|
|
25
|
-
}));
|
|
20
|
+
});
|
|
@@ -5,8 +5,8 @@ export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/c
|
|
|
5
5
|
export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
|
|
6
6
|
export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
|
|
7
7
|
export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
|
|
8
|
-
export { textColorPalette
|
|
9
|
-
export { highlightColorPalette,
|
|
8
|
+
export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
|
|
9
|
+
export { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from './ColorPalette/Palettes/highlightColorPalette';
|
|
10
10
|
export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
|
|
11
11
|
export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';
|
|
12
12
|
export { default as borderColorPalette } from './ColorPalette/Palettes/borderColorPalette';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -232,6 +232,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
|
|
|
232
232
|
ACTION_SUBJECT["DROP_TARGET"] = "dropTarget";
|
|
233
233
|
ACTION_SUBJECT["DRAG"] = "drag";
|
|
234
234
|
ACTION_SUBJECT["ELEMENT"] = "element";
|
|
235
|
+
ACTION_SUBJECT["CONTEXT_MENU"] = "contextMenu";
|
|
235
236
|
return ACTION_SUBJECT;
|
|
236
237
|
}({});
|
|
237
238
|
export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["triggerRef"];
|
|
4
|
+
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
7
|
+
import { useIntl } from 'react-intl-next';
|
|
8
|
+
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
9
|
+
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
10
|
+
import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
|
|
11
|
+
import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
|
|
12
|
+
import { cardMessages as messages } from '../../messages';
|
|
13
|
+
import { StyledButton } from './StyledButton';
|
|
14
|
+
var Dropdown = function Dropdown(_ref) {
|
|
15
|
+
var testId = _ref.testId;
|
|
16
|
+
var _useIntl = useIntl(),
|
|
17
|
+
formatMessage = _useIntl.formatMessage;
|
|
18
|
+
var configureLinkLabel = formatMessage(messages.inlineConfigureLink);
|
|
19
|
+
var goToLinkLabel = formatMessage(messages.inlineGoToLink);
|
|
20
|
+
return jsx(DropdownMenu, {
|
|
21
|
+
trigger: function trigger(_ref2) {
|
|
22
|
+
var triggerRef = _ref2.triggerRef,
|
|
23
|
+
props = _objectWithoutProperties(_ref2, _excluded);
|
|
24
|
+
return jsx(StyledButton, _extends({
|
|
25
|
+
innerRef: triggerRef
|
|
26
|
+
}, props, {
|
|
27
|
+
iconBefore: jsx(ChevronDownIcon, {
|
|
28
|
+
label: configureLinkLabel,
|
|
29
|
+
size: 'small'
|
|
30
|
+
})
|
|
31
|
+
}));
|
|
32
|
+
},
|
|
33
|
+
testId: "".concat(testId, "-dropdown")
|
|
34
|
+
}, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
|
|
35
|
+
elemBefore: jsx(ShortcutIcon, {
|
|
36
|
+
label: goToLinkLabel,
|
|
37
|
+
size: 'medium'
|
|
38
|
+
})
|
|
39
|
+
}, goToLinkLabel), jsx(DropdownItem, {
|
|
40
|
+
elemBefore: jsx(PreferencesIcon, {
|
|
41
|
+
label: configureLinkLabel,
|
|
42
|
+
size: 'medium'
|
|
43
|
+
})
|
|
44
|
+
}, configureLinkLabel)));
|
|
45
|
+
};
|
|
46
|
+
export default Dropdown;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["innerRef"];
|
|
4
|
+
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
+
import { css, jsx } from '@emotion/react';
|
|
7
|
+
import Button from '@atlaskit/button';
|
|
8
|
+
import { N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
|
|
9
|
+
var buttonStyles = css({
|
|
10
|
+
display: 'flex',
|
|
11
|
+
background: "var(--ds-background-neutral, ".concat(N30A, ")"),
|
|
12
|
+
color: "var(--ds-icon, ".concat(N700, ")"),
|
|
13
|
+
'&:hover': {
|
|
14
|
+
background: "var(--ds-background-neutral-hovered, ".concat(N40A, ")")
|
|
15
|
+
},
|
|
16
|
+
'&:active': {
|
|
17
|
+
background: "var(--ds-background-neutral-pressed, ".concat(N60A, ")")
|
|
18
|
+
},
|
|
19
|
+
width: '1.375rem',
|
|
20
|
+
height: '1.25rem'
|
|
21
|
+
});
|
|
22
|
+
export var StyledButton = function StyledButton(_ref) {
|
|
23
|
+
var innerRef = _ref.innerRef,
|
|
24
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
+
return jsx(Button, _extends({}, props, {
|
|
26
|
+
ref: innerRef
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
|
|
28
|
+
,
|
|
29
|
+
css: buttonStyles
|
|
30
|
+
}));
|
|
31
|
+
};
|
|
@@ -1,29 +1,18 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
1
2
|
/** @jsx jsx */
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
|
+
import { useCallback, useLayoutEffect, useState } from 'react';
|
|
3
4
|
|
|
4
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
6
|
import { css, jsx } from '@emotion/react';
|
|
6
7
|
import { useIntl } from 'react-intl-next';
|
|
7
|
-
import Button from '@atlaskit/button';
|
|
8
8
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
9
|
import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
|
|
10
|
-
import { N0
|
|
10
|
+
import { N0 } from '@atlaskit/theme/colors';
|
|
11
11
|
import { layers } from '@atlaskit/theme/constants';
|
|
12
12
|
import Tooltip from '@atlaskit/tooltip';
|
|
13
13
|
import { cardMessages } from '../../messages';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
background: "var(--ds-background-neutral, ".concat(N30A, ")"),
|
|
17
|
-
color: "var(--ds-icon, ".concat(N700, ")"),
|
|
18
|
-
'&:hover': {
|
|
19
|
-
background: "var(--ds-background-neutral-hovered, ".concat(N40A, ")")
|
|
20
|
-
},
|
|
21
|
-
'&:active': {
|
|
22
|
-
background: "var(--ds-background-neutral-pressed, ".concat(N60A, ")")
|
|
23
|
-
},
|
|
24
|
-
width: '1.375rem',
|
|
25
|
-
height: '1.25rem'
|
|
26
|
-
});
|
|
14
|
+
import Dropdown from './Dropdown';
|
|
15
|
+
import { StyledButton } from './StyledButton';
|
|
27
16
|
var buttonWrapperStyles = css({
|
|
28
17
|
position: 'absolute',
|
|
29
18
|
zIndex: layers.card(),
|
|
@@ -33,6 +22,7 @@ var buttonWrapperStyles = css({
|
|
|
33
22
|
background: "var(--ds-surface-raised, ".concat(N0, ")"),
|
|
34
23
|
borderRadius: "var(--ds-border-radius, 3px)"
|
|
35
24
|
});
|
|
25
|
+
var showDropdownThresholdPx = 50;
|
|
36
26
|
export var OverlayButton = function OverlayButton(_ref) {
|
|
37
27
|
var _docNode$nodeSize;
|
|
38
28
|
var editorView = _ref.editorView,
|
|
@@ -42,6 +32,25 @@ export var OverlayButton = function OverlayButton(_ref) {
|
|
|
42
32
|
targetElementPos = _ref$targetElementPos === void 0 ? 0 : _ref$targetElementPos;
|
|
43
33
|
var _useIntl = useIntl(),
|
|
44
34
|
formatMessage = _useIntl.formatMessage;
|
|
35
|
+
var configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
|
|
36
|
+
var _useState = useState(false),
|
|
37
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
38
|
+
showDropdown = _useState2[0],
|
|
39
|
+
setShowDropdown = _useState2[1];
|
|
40
|
+
useLayoutEffect(function () {
|
|
41
|
+
var _domNode;
|
|
42
|
+
var domNode = editorView.nodeDOM(targetElementPos);
|
|
43
|
+
if (((_domNode = domNode) === null || _domNode === void 0 ? void 0 : _domNode.nodeType) === Node.TEXT_NODE) {
|
|
44
|
+
domNode = domNode.parentElement;
|
|
45
|
+
}
|
|
46
|
+
if (domNode instanceof HTMLElement) {
|
|
47
|
+
var _domNode$getBoundingC = domNode.getBoundingClientRect(),
|
|
48
|
+
width = _domNode$getBoundingC.width;
|
|
49
|
+
if (width < showDropdownThresholdPx) {
|
|
50
|
+
setShowDropdown(true);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, [editorView, targetElementPos]);
|
|
45
54
|
var docNode = editorView.state.doc.nodeAt(targetElementPos);
|
|
46
55
|
var nodeEnd = targetElementPos + ((_docNode$nodeSize = docNode === null || docNode === void 0 ? void 0 : docNode.nodeSize) !== null && _docNode$nodeSize !== void 0 ? _docNode$nodeSize : 0);
|
|
47
56
|
var isText = docNode === null || docNode === void 0 ? void 0 : docNode.isText;
|
|
@@ -61,18 +70,16 @@ export var OverlayButton = function OverlayButton(_ref) {
|
|
|
61
70
|
if (!targetElementPos || isSelected) {
|
|
62
71
|
return null;
|
|
63
72
|
}
|
|
64
|
-
var configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
|
|
65
73
|
return jsx("span", {
|
|
66
|
-
css: buttonWrapperStyles
|
|
67
|
-
|
|
74
|
+
css: buttonWrapperStyles,
|
|
75
|
+
"data-testid": testId
|
|
76
|
+
}, showDropdown ? jsx(Dropdown, {
|
|
77
|
+
testId: testId
|
|
78
|
+
}) : jsx(Tooltip, {
|
|
68
79
|
content: configureLinkLabel,
|
|
69
80
|
hideTooltipOnClick: true,
|
|
70
81
|
testId: "".concat(testId, "-tooltip")
|
|
71
|
-
}, jsx(
|
|
72
|
-
testId: testId
|
|
73
|
-
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
|
|
74
|
-
,
|
|
75
|
-
css: buttonStyles,
|
|
82
|
+
}, jsx(StyledButton, {
|
|
76
83
|
onClick: handleClick,
|
|
77
84
|
iconBefore: jsx(PreferencesIcon, {
|
|
78
85
|
label: configureLinkLabel,
|
package/dist/esm/link/index.js
CHANGED
|
@@ -10,4 +10,4 @@ export { default as HyperlinkLinkAddToolbar, HyperlinkLinkAddToolbarWithIntl, RE
|
|
|
10
10
|
export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
|
|
11
11
|
export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
|
|
12
12
|
export { stagingLinkPreferencesUrl, productionLinkPreferencesUrl } from './constants';
|
|
13
|
-
export { OverlayButton } from './ConfigureLinkOverlay
|
|
13
|
+
export { OverlayButton } from './ConfigureLinkOverlay';
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
import { isFedRamp } from './environment';
|
|
8
8
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
9
9
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
10
|
-
var packageVersion = "84.0
|
|
10
|
+
var packageVersion = "84.2.0";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -8,7 +8,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
8
8
|
import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
9
9
|
import classnames from 'classnames';
|
|
10
10
|
import { Resizable } from 're-resizable';
|
|
11
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import Tooltip from '@atlaskit/tooltip';
|
|
13
12
|
import { handleWrapperClass, resizerDangerClassName, resizerExtendedZone, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
|
|
14
13
|
var SUPPORTED_HANDLES = ['left', 'right'];
|
|
@@ -128,57 +127,36 @@ var ResizerNext = function ResizerNext(props, ref) {
|
|
|
128
127
|
if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
|
|
129
128
|
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, thumb));
|
|
130
129
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (!!handleTooltipContent) {
|
|
141
|
-
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position,
|
|
142
|
-
/*#__PURE__*/
|
|
143
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
144
|
-
React.createElement("div", {
|
|
145
|
-
contentEditable: false,
|
|
146
|
-
style: inheritedCSS
|
|
147
|
-
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
148
|
-
content: handleTooltipContent,
|
|
149
|
-
hideTooltipOnClick: true,
|
|
150
|
-
position: "mouse",
|
|
151
|
-
mousePosition: "auto-start",
|
|
152
|
-
testId: "resizer-handle-".concat(position, "-tooltip")
|
|
153
|
-
}, thumbWithTrack))));
|
|
154
|
-
}
|
|
130
|
+
var thumbWithTrack =
|
|
131
|
+
/*#__PURE__*/
|
|
132
|
+
//It's important to have {thumb} element before the div, the thumb element is the one that gets focus and only the 1st element recives aria-descibedby attribute which is important for screen reader users
|
|
133
|
+
React.createElement(React.Fragment, null, thumb, /*#__PURE__*/React.createElement("div", {
|
|
134
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
135
|
+
className: classnames(resizerHandleTrackClassName, handleHighlight),
|
|
136
|
+
"data-testid": "resizer-handle-".concat(position, "-track")
|
|
137
|
+
}));
|
|
138
|
+
if (!!handleTooltipContent) {
|
|
155
139
|
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position,
|
|
156
140
|
/*#__PURE__*/
|
|
157
141
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
158
142
|
React.createElement("div", {
|
|
159
143
|
contentEditable: false,
|
|
160
144
|
style: inheritedCSS
|
|
161
|
-
},
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
className: classnames(resizerHandleTrackClassName, handleHighlight),
|
|
169
|
-
"data-testid": "resizer-handle-".concat(position, "-track")
|
|
170
|
-
}));
|
|
171
|
-
if (!!handleTooltipContent) {
|
|
172
|
-
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, /*#__PURE__*/React.createElement(Tooltip, {
|
|
173
|
-
content: handleTooltipContent,
|
|
174
|
-
hideTooltipOnClick: true,
|
|
175
|
-
position: "mouse",
|
|
176
|
-
mousePosition: "auto-start",
|
|
177
|
-
testId: "resizer-handle-".concat(position, "-tooltip")
|
|
178
|
-
}, _thumbWithTrack)));
|
|
179
|
-
}
|
|
180
|
-
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, _thumbWithTrack));
|
|
145
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
146
|
+
content: handleTooltipContent,
|
|
147
|
+
hideTooltipOnClick: true,
|
|
148
|
+
position: "mouse",
|
|
149
|
+
mousePosition: "auto-start",
|
|
150
|
+
testId: "resizer-handle-".concat(position, "-tooltip")
|
|
151
|
+
}, thumbWithTrack))));
|
|
181
152
|
}
|
|
153
|
+
return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position,
|
|
154
|
+
/*#__PURE__*/
|
|
155
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
156
|
+
React.createElement("div", {
|
|
157
|
+
contentEditable: false,
|
|
158
|
+
style: inheritedCSS
|
|
159
|
+
}, thumbWithTrack)));
|
|
182
160
|
}, {});
|
|
183
161
|
}, [handleHighlight, handleTooltipContent]);
|
|
184
162
|
|
|
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
17
17
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
18
18
|
import Layer from '../Layer';
|
|
19
19
|
var packageName = "@atlaskit/editor-common";
|
|
20
|
-
var packageVersion = "84.0
|
|
20
|
+
var packageVersion = "84.2.0";
|
|
21
21
|
var halfFocusRing = 1;
|
|
22
22
|
var dropOffset = '0, 8';
|
|
23
23
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -4,7 +4,6 @@ import React from 'react';
|
|
|
4
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
6
|
import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { N0 } from '@atlaskit/theme/colors';
|
|
9
8
|
import Tooltip from '@atlaskit/tooltip';
|
|
10
9
|
import { buttonStyle, buttonWrapperStyle } from './styles';
|
|
@@ -49,7 +48,7 @@ var Color = function Color(props) {
|
|
|
49
48
|
,
|
|
50
49
|
className: "".concat(isSelected ? 'selected' : ''),
|
|
51
50
|
style: {
|
|
52
|
-
backgroundColor: colorStyle ||
|
|
51
|
+
backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
|
|
53
52
|
border: "1px solid ".concat(borderColor)
|
|
54
53
|
},
|
|
55
54
|
autoFocus: autoFocus
|