@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.
Files changed (62) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/afm-cc/tsconfig.json +3 -0
  3. package/dist/cjs/analytics/types/context-menu-events.js +5 -0
  4. package/dist/cjs/analytics/types/enums.js +1 -0
  5. package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js +56 -0
  6. package/dist/cjs/link/ConfigureLinkOverlay/StyledButton.js +38 -0
  7. package/dist/cjs/link/ConfigureLinkOverlay/{OverlayButton.js → index.js} +29 -22
  8. package/dist/cjs/link/index.js +2 -2
  9. package/dist/cjs/monitoring/error.js +1 -1
  10. package/dist/cjs/resizer/Resizer.js +23 -45
  11. package/dist/cjs/ui/DropList/index.js +1 -1
  12. package/dist/cjs/ui-color/ColorPalette/Color/index.js +1 -2
  13. package/dist/cjs/ui-color/ColorPalette/Palettes/highlightColorPalette.js +6 -11
  14. package/dist/cjs/ui-color/ColorPalette/Palettes/textColorPalette.js +2 -11
  15. package/dist/cjs/ui-color/index.js +0 -12
  16. package/dist/es2019/analytics/types/context-menu-events.js +1 -0
  17. package/dist/es2019/analytics/types/enums.js +1 -0
  18. package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js +45 -0
  19. package/dist/es2019/link/ConfigureLinkOverlay/StyledButton.js +30 -0
  20. package/dist/es2019/link/ConfigureLinkOverlay/{OverlayButton.js → index.js} +28 -24
  21. package/dist/es2019/link/index.js +1 -1
  22. package/dist/es2019/monitoring/error.js +1 -1
  23. package/dist/es2019/resizer/Resizer.js +26 -54
  24. package/dist/es2019/ui/DropList/index.js +1 -1
  25. package/dist/es2019/ui-color/ColorPalette/Color/index.js +1 -2
  26. package/dist/es2019/ui-color/ColorPalette/Palettes/highlightColorPalette.js +2 -7
  27. package/dist/es2019/ui-color/ColorPalette/Palettes/textColorPalette.js +2 -7
  28. package/dist/es2019/ui-color/index.js +2 -2
  29. package/dist/esm/analytics/types/context-menu-events.js +1 -0
  30. package/dist/esm/analytics/types/enums.js +1 -0
  31. package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js +46 -0
  32. package/dist/esm/link/ConfigureLinkOverlay/StyledButton.js +31 -0
  33. package/dist/esm/link/ConfigureLinkOverlay/{OverlayButton.js → index.js} +31 -24
  34. package/dist/esm/link/index.js +1 -1
  35. package/dist/esm/monitoring/error.js +1 -1
  36. package/dist/esm/resizer/Resizer.js +23 -45
  37. package/dist/esm/ui/DropList/index.js +1 -1
  38. package/dist/esm/ui-color/ColorPalette/Color/index.js +1 -2
  39. package/dist/esm/ui-color/ColorPalette/Palettes/highlightColorPalette.js +1 -10
  40. package/dist/esm/ui-color/ColorPalette/Palettes/textColorPalette.js +1 -10
  41. package/dist/esm/ui-color/index.js +2 -2
  42. package/dist/types/analytics/types/context-menu-events.d.ts +11 -0
  43. package/dist/types/analytics/types/enums.d.ts +2 -1
  44. package/dist/types/analytics/types/events.d.ts +2 -1
  45. package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts +7 -0
  46. package/dist/types/link/ConfigureLinkOverlay/StyledButton.d.ts +7 -0
  47. package/dist/types/link/index.d.ts +2 -2
  48. package/dist/types/ui-color/ColorPalette/Palettes/highlightColorPalette.d.ts +0 -1
  49. package/dist/types/ui-color/ColorPalette/Palettes/textColorPalette.d.ts +1 -2
  50. package/dist/types/ui-color/index.d.ts +2 -2
  51. package/dist/types-ts4.5/analytics/types/context-menu-events.d.ts +11 -0
  52. package/dist/types-ts4.5/analytics/types/enums.d.ts +2 -1
  53. package/dist/types-ts4.5/analytics/types/events.d.ts +2 -1
  54. package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts +7 -0
  55. package/dist/types-ts4.5/link/ConfigureLinkOverlay/StyledButton.d.ts +7 -0
  56. package/dist/types-ts4.5/link/index.d.ts +2 -2
  57. package/dist/types-ts4.5/ui-color/ColorPalette/Palettes/highlightColorPalette.d.ts +0 -1
  58. package/dist/types-ts4.5/ui-color/ColorPalette/Palettes/textColorPalette.d.ts +1 -2
  59. package/dist/types-ts4.5/ui-color/index.d.ts +2 -2
  60. package/package.json +5 -10
  61. /package/dist/types/link/ConfigureLinkOverlay/{OverlayButton.d.ts → index.d.ts} +0 -0
  62. /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, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
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
- const buttonStyles = css({
15
- display: 'flex',
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
- }, jsx(Tooltip, {
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(Button, {
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/OverlayButton';
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";
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
- if (getBooleanFF('platform.editor.resizer.prevent-contenteditable')) {
129
- const thumbWithTrack =
130
- /*#__PURE__*/
131
- //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
132
- React.createElement(React.Fragment, null, thumb, /*#__PURE__*/React.createElement("div", {
133
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
134
- className: classnames(resizerHandleTrackClassName, handleHighlight),
135
- "data-testid": `resizer-handle-${position}-track`
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
- }, thumbWithTrack)
164
- };
165
- } else {
166
- const thumbWithTrack =
167
- /*#__PURE__*/
168
- //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
169
- React.createElement(React.Fragment, null, thumb, /*#__PURE__*/React.createElement("div", {
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.4";
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 || (fg('platform.editor.dynamic-palette-borders') ? "var(--ds-background-input, #FFFFFF)" : 'transparent'),
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: DEFAULT_BORDER_COLOR,
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: DEFAULT_BORDER_COLOR,
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, textColorPaletteWithTokenBorders } from './ColorPalette/Palettes/textColorPalette';
9
- export { highlightColorPalette, highlightColorPaletteWithTokenBorders, REMOVE_HIGHLIGHT_COLOR } from './ColorPalette/Palettes/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, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
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
- var buttonStyles = css({
15
- display: 'flex',
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
- }, jsx(Tooltip, {
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(Button, {
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,
@@ -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/OverlayButton';
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.4";
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
- if (getBooleanFF('platform.editor.resizer.prevent-contenteditable')) {
132
- var thumbWithTrack =
133
- /*#__PURE__*/
134
- //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
135
- React.createElement(React.Fragment, null, thumb, /*#__PURE__*/React.createElement("div", {
136
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
137
- className: classnames(resizerHandleTrackClassName, handleHighlight),
138
- "data-testid": "resizer-handle-".concat(position, "-track")
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
- }, thumbWithTrack)));
162
- } else {
163
- var _thumbWithTrack =
164
- /*#__PURE__*/
165
- //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
166
- React.createElement(React.Fragment, null, thumb, /*#__PURE__*/React.createElement("div", {
167
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
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.4";
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 || (fg('platform.editor.dynamic-palette-borders') ? "var(--ds-background-input, #FFFFFF)" : 'transparent'),
51
+ backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
53
52
  border: "1px solid ".concat(borderColor)
54
53
  },
55
54
  autoFocus: autoFocus