@atlaskit/editor-common 78.29.0 → 78.29.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/extensibility/Extension/Extension/index.js +1 -1
  3. package/dist/cjs/extensibility/Extension/Extension/styles.js +2 -2
  4. package/dist/cjs/extensibility/MultiBodiedExtension/index.js +9 -4
  5. package/dist/cjs/extensibility/MultiBodiedExtension/styles.js +8 -1
  6. package/dist/cjs/media-single/CommentBadge.js +4 -0
  7. package/dist/cjs/messages/date.js +5 -0
  8. package/dist/cjs/monitoring/error.js +1 -1
  9. package/dist/cjs/ui/DropList/index.js +1 -1
  10. package/dist/cjs/ui/MediaSingle/styled.js +1 -1
  11. package/dist/cjs/ui/MultiBodiedExtension/index.js +1 -2
  12. package/dist/es2019/extensibility/Extension/Extension/index.js +1 -1
  13. package/dist/es2019/extensibility/Extension/Extension/styles.js +2 -2
  14. package/dist/es2019/extensibility/MultiBodiedExtension/index.js +9 -4
  15. package/dist/es2019/extensibility/MultiBodiedExtension/styles.js +8 -1
  16. package/dist/es2019/media-single/CommentBadge.js +4 -0
  17. package/dist/es2019/messages/date.js +5 -0
  18. package/dist/es2019/monitoring/error.js +1 -1
  19. package/dist/es2019/ui/DropList/index.js +1 -1
  20. package/dist/es2019/ui/MediaSingle/styled.js +3 -1
  21. package/dist/es2019/ui/MultiBodiedExtension/index.js +1 -2
  22. package/dist/esm/extensibility/Extension/Extension/index.js +1 -1
  23. package/dist/esm/extensibility/Extension/Extension/styles.js +2 -2
  24. package/dist/esm/extensibility/MultiBodiedExtension/index.js +9 -4
  25. package/dist/esm/extensibility/MultiBodiedExtension/styles.js +8 -1
  26. package/dist/esm/media-single/CommentBadge.js +4 -0
  27. package/dist/esm/messages/date.js +5 -0
  28. package/dist/esm/monitoring/error.js +1 -1
  29. package/dist/esm/ui/DropList/index.js +1 -1
  30. package/dist/esm/ui/MediaSingle/styled.js +1 -1
  31. package/dist/esm/ui/MultiBodiedExtension/index.js +1 -2
  32. package/dist/types/media-single/CommentBadge.d.ts +1 -0
  33. package/dist/types/messages/date.d.ts +5 -0
  34. package/dist/types-ts4.5/media-single/CommentBadge.d.ts +1 -0
  35. package/dist/types-ts4.5/messages/date.d.ts +5 -0
  36. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 78.29.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#92161](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92161) [`dbd9c915434d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dbd9c915434d) - [ux] Increases touch target for updated macro UI design (mostly just applies to bodied macros)
8
+
9
+ ## 78.29.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#92360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92360) [`6050340d4875`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6050340d4875) - [ED-23056] Exclude comment badge component from selector in MediaWrapper so that comment badge for draft comment can be positioned to the top right corner correctly
14
+
3
15
  ## 78.29.0
4
16
 
5
17
  ### Minor Changes
@@ -77,7 +77,7 @@ function ExtensionWithPluginState(props) {
77
77
  'without-frame': removeBorder
78
78
  });
79
79
  var newContentClassNames = (0, _classnames2.default)({
80
- 'remove-padding': showMacroInteractionDesignUpdates
80
+ 'with-padding-styles': showMacroInteractionDesignUpdates
81
81
  });
82
82
  var contentClassNames = (0, _classnames2.default)('extension-content', 'block', {
83
83
  'remove-border': showMacroInteractionDesignUpdates
@@ -54,8 +54,8 @@ var contentWrapper = exports.contentWrapper = (0, _react.css)({
54
54
  padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),
55
55
  display: 'flex',
56
56
  justifyContent: 'center',
57
- '&.remove-padding': {
58
- padding: 0
57
+ '&.with-padding-styles': {
58
+ padding: "var(--ds-space-100, 8px)"
59
59
  }
60
60
  });
61
61
  var overflowWrapperStyles = exports.overflowWrapperStyles = (0, _react.css)({
@@ -122,10 +122,11 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
122
122
  mbeWrapperStyles = breakoutStyles;
123
123
  }
124
124
  var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
125
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
126
125
  'with-border': showMacroInteractionDesignUpdates,
127
- 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
128
- 'with-danger-overlay': showMacroInteractionDesignUpdates
126
+ 'with-danger-overlay': showMacroInteractionDesignUpdates,
127
+ 'with-padding-background-styles': showMacroInteractionDesignUpdates,
128
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
129
+ 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
129
130
  });
130
131
  var containerClassNames = (0, _classnames.default)('multiBodiedExtension--container', {
131
132
  'remove-padding': showMacroInteractionDesignUpdates
@@ -134,6 +135,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
134
135
  'remove-margins': showMacroInteractionDesignUpdates,
135
136
  'remove-border': showMacroInteractionDesignUpdates
136
137
  });
138
+ var overlayClassNames = (0, _classnames.default)('multiBodiedExtension--overlay', {
139
+ 'with-margin': showMacroInteractionDesignUpdates
140
+ });
137
141
  var handleMouseEvent = function handleMouseEvent(didHover) {
138
142
  if (setIsNodeHovered) {
139
143
  setIsNodeHovered(didHover);
@@ -159,7 +163,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
159
163
  }
160
164
  }, (0, _react2.jsx)("div", {
161
165
  css: _styles.overlayStyles,
162
- className: "multiBodiedExtension--overlay"
166
+ className: overlayClassNames,
167
+ "data-testid": "multiBodiedExtension--overlay"
163
168
  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
164
169
  className: containerClassNames,
165
170
  css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
@@ -31,6 +31,10 @@ var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _r
31
31
  },
32
32
  '&.with-hover-border': {
33
33
  border: "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
34
+ },
35
+ '&.with-padding-background-styles': {
36
+ padding: "var(--ds-space-100, 8px)",
37
+ background: 'transparent'
34
38
  }
35
39
  });
36
40
  var overlayStyles = exports.overlayStyles = (0, _react.css)({
@@ -41,5 +45,8 @@ var overlayStyles = exports.overlayStyles = (0, _react.css)({
41
45
  opacity: 0,
42
46
  pointerEvents: 'none',
43
47
  transition: 'opacity 0.3s',
44
- zIndex: 1
48
+ zIndex: 1,
49
+ '&.with-margin': {
50
+ margin: "var(--ds-space-negative-100, -8px)"
51
+ }
45
52
  });
@@ -79,6 +79,10 @@ var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
79
79
  }, [status]);
80
80
  return (0, _react2.jsx)("div", {
81
81
  css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
82
+ // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
83
+ // can target the correct div
84
+ ,
85
+ "data-comment-badge": "true"
82
86
  }, (0, _react2.jsx)(_tooltip.default, {
83
87
  position: "top",
84
88
  content: title
@@ -15,5 +15,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
15
15
  id: 'fabric.editor.invalidDateError',
16
16
  defaultMessage: 'Enter a valid date',
17
17
  description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
18
+ },
19
+ onKeyUpDownText: {
20
+ id: 'fabric.editor.upDown',
21
+ defaultMessage: 'On the use of up and down arrow keys into the following input field, the date will update below',
22
+ description: 'The text for the date input informs the user that using the arrow keys (up and down) will update the date picker below'
18
23
  }
19
24
  });
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
16
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "78.29.0";
19
+ var packageVersion = "78.29.2";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // TODO: Sanitise the URL instead of just removing it
@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
22
22
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
23
23
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
24
24
  var packageName = "@atlaskit/editor-common";
25
- var packageVersion = "78.29.0";
25
+ var packageVersion = "78.29.2";
26
26
  var halfFocusRing = 1;
27
27
  var dropOffset = '0, 8';
28
28
  var DropList = /*#__PURE__*/function (_Component) {
@@ -180,7 +180,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
180
180
 
181
181
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
182
182
  var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
183
- return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n\n ", "\n\n /* Editor */\n & > figure {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & > div {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & * [data-mark-annotation-type='inlineComment'] {\n width: 100%;\n height: 100%;\n }\n\n &[data-node-type='embedCard'] > div {\n width: 100%;\n }\n\n /* Renderer */\n [data-node-type='media'] {\n position: static !important;\n\n > div {\n position: absolute;\n height: 100%;\n }\n }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
183
+ return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n\n ", "\n\n /* Editor */\n & > figure {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n // Comments on media project adds comment badge as child of the media wrapper,\n // thus we need to exclude it so that style is applied to intended div\n & > div:not([data-comment-badge='true']) {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & * [data-mark-annotation-type='inlineComment'] {\n width: 100%;\n height: 100%;\n }\n\n &[data-node-type='embedCard'] > div {\n width: 100%;\n }\n\n /* Renderer */\n [data-node-type='media'] {\n position: static !important;\n\n > div {\n position: absolute;\n height: 100%;\n }\n }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
184
184
  };
185
185
  var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
186
186
  var children = _ref3.children,
@@ -44,8 +44,7 @@ var mbeNavigation = (0, _react.css)({
44
44
  marginLeft: "var(--ds-space-100, 8px)",
45
45
  marginRight: "var(--ds-space-100, 8px)",
46
46
  '&.remove-margins': {
47
- marginLeft: 0,
48
- marginRight: 0
47
+ margin: "var(--ds-space-negative-100, -8px)"
49
48
  },
50
49
  '&.remove-border': {
51
50
  border: 'none'
@@ -67,7 +67,7 @@ function ExtensionWithPluginState(props) {
67
67
  'without-frame': removeBorder
68
68
  });
69
69
  const newContentClassNames = classnames({
70
- 'remove-padding': showMacroInteractionDesignUpdates
70
+ 'with-padding-styles': showMacroInteractionDesignUpdates
71
71
  });
72
72
  const contentClassNames = classnames('extension-content', 'block', {
73
73
  'remove-border': showMacroInteractionDesignUpdates
@@ -48,8 +48,8 @@ export const contentWrapper = css({
48
48
  padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,
49
49
  display: 'flex',
50
50
  justifyContent: 'center',
51
- '&.remove-padding': {
52
- padding: 0
51
+ '&.with-padding-styles': {
52
+ padding: "var(--ds-space-100, 8px)"
53
53
  }
54
54
  });
55
55
  export const overflowWrapperStyles = css({
@@ -110,10 +110,11 @@ const MultiBodiedExtensionWithWidth = ({
110
110
  mbeWrapperStyles = breakoutStyles;
111
111
  }
112
112
  const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
113
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
114
113
  'with-border': showMacroInteractionDesignUpdates,
115
- 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
116
- 'with-danger-overlay': showMacroInteractionDesignUpdates
114
+ 'with-danger-overlay': showMacroInteractionDesignUpdates,
115
+ 'with-padding-background-styles': showMacroInteractionDesignUpdates,
116
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
117
+ 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
117
118
  });
118
119
  const containerClassNames = classnames('multiBodiedExtension--container', {
119
120
  'remove-padding': showMacroInteractionDesignUpdates
@@ -122,6 +123,9 @@ const MultiBodiedExtensionWithWidth = ({
122
123
  'remove-margins': showMacroInteractionDesignUpdates,
123
124
  'remove-border': showMacroInteractionDesignUpdates
124
125
  });
126
+ const overlayClassNames = classnames('multiBodiedExtension--overlay', {
127
+ 'with-margin': showMacroInteractionDesignUpdates
128
+ });
125
129
  const handleMouseEvent = didHover => {
126
130
  if (setIsNodeHovered) {
127
131
  setIsNodeHovered(didHover);
@@ -143,7 +147,8 @@ const MultiBodiedExtensionWithWidth = ({
143
147
  onMouseLeave: () => handleMouseEvent(false)
144
148
  }, jsx("div", {
145
149
  css: overlayStyles,
146
- className: "multiBodiedExtension--overlay"
150
+ className: overlayClassNames,
151
+ "data-testid": "multiBodiedExtension--overlay"
147
152
  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
148
153
  className: containerClassNames,
149
154
  css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
@@ -26,6 +26,10 @@ export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
26
26
  },
27
27
  '&.with-hover-border': {
28
28
  border: `1px solid ${`var(--ds-border-input, ${N500})`}`
29
+ },
30
+ '&.with-padding-background-styles': {
31
+ padding: "var(--ds-space-100, 8px)",
32
+ background: 'transparent'
29
33
  }
30
34
  });
31
35
  export const overlayStyles = css({
@@ -36,5 +40,8 @@ export const overlayStyles = css({
36
40
  opacity: 0,
37
41
  pointerEvents: 'none',
38
42
  transition: 'opacity 0.3s',
39
- zIndex: 1
43
+ zIndex: 1,
44
+ '&.with-margin': {
45
+ margin: "var(--ds-space-negative-100, -8px)"
46
+ }
40
47
  });
@@ -66,6 +66,10 @@ export const CommentBadge = ({
66
66
  }, [status]);
67
67
  return jsx("div", {
68
68
  css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
69
+ // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
70
+ // can target the correct div
71
+ ,
72
+ "data-comment-badge": "true"
69
73
  }, jsx(Tooltip, {
70
74
  position: "top",
71
75
  content: title
@@ -9,5 +9,10 @@ export const messages = defineMessages({
9
9
  id: 'fabric.editor.invalidDateError',
10
10
  defaultMessage: 'Enter a valid date',
11
11
  description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
12
+ },
13
+ onKeyUpDownText: {
14
+ id: 'fabric.editor.upDown',
15
+ defaultMessage: 'On the use of up and down arrow keys into the following input field, the date will update below',
16
+ description: 'The text for the date input informs the user that using the arrow keys (up and down) will update the date picker below'
12
17
  }
13
18
  });
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "78.29.0";
3
+ const packageVersion = "78.29.2";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
7
7
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
8
8
  import Layer from '../Layer';
9
9
  const packageName = "@atlaskit/editor-common";
10
- const packageVersion = "78.29.0";
10
+ const packageVersion = "78.29.2";
11
11
  const halfFocusRing = 1;
12
12
  const dropOffset = '0, 8';
13
13
  class DropList extends Component {
@@ -214,7 +214,9 @@ export const mediaWrapperStyle = props => css`
214
214
  width: 100%;
215
215
  }
216
216
 
217
- & > div {
217
+ // Comments on media project adds comment badge as child of the media wrapper,
218
+ // thus we need to exclude it so that style is applied to intended div
219
+ & > div:not([data-comment-badge='true']) {
218
220
  position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
219
221
  height: 100%;
220
222
  width: 100%;
@@ -38,8 +38,7 @@ const mbeNavigation = css({
38
38
  marginLeft: "var(--ds-space-100, 8px)",
39
39
  marginRight: "var(--ds-space-100, 8px)",
40
40
  '&.remove-margins': {
41
- marginLeft: 0,
42
- marginRight: 0
41
+ margin: "var(--ds-space-negative-100, -8px)"
43
42
  },
44
43
  '&.remove-border': {
45
44
  border: 'none'
@@ -68,7 +68,7 @@ function ExtensionWithPluginState(props) {
68
68
  'without-frame': removeBorder
69
69
  });
70
70
  var newContentClassNames = classnames({
71
- 'remove-padding': showMacroInteractionDesignUpdates
71
+ 'with-padding-styles': showMacroInteractionDesignUpdates
72
72
  });
73
73
  var contentClassNames = classnames('extension-content', 'block', {
74
74
  'remove-border': showMacroInteractionDesignUpdates
@@ -48,8 +48,8 @@ export var contentWrapper = css({
48
48
  padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),
49
49
  display: 'flex',
50
50
  justifyContent: 'center',
51
- '&.remove-padding': {
52
- padding: 0
51
+ '&.with-padding-styles': {
52
+ padding: "var(--ds-space-100, 8px)"
53
53
  }
54
54
  });
55
55
  export var overflowWrapperStyles = css({
@@ -113,10 +113,11 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
113
113
  mbeWrapperStyles = breakoutStyles;
114
114
  }
115
115
  var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
116
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
117
116
  'with-border': showMacroInteractionDesignUpdates,
118
- 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
119
- 'with-danger-overlay': showMacroInteractionDesignUpdates
117
+ 'with-danger-overlay': showMacroInteractionDesignUpdates,
118
+ 'with-padding-background-styles': showMacroInteractionDesignUpdates,
119
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
120
+ 'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
120
121
  });
121
122
  var containerClassNames = classnames('multiBodiedExtension--container', {
122
123
  'remove-padding': showMacroInteractionDesignUpdates
@@ -125,6 +126,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
125
126
  'remove-margins': showMacroInteractionDesignUpdates,
126
127
  'remove-border': showMacroInteractionDesignUpdates
127
128
  });
129
+ var overlayClassNames = classnames('multiBodiedExtension--overlay', {
130
+ 'with-margin': showMacroInteractionDesignUpdates
131
+ });
128
132
  var handleMouseEvent = function handleMouseEvent(didHover) {
129
133
  if (setIsNodeHovered) {
130
134
  setIsNodeHovered(didHover);
@@ -150,7 +154,8 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
150
154
  }
151
155
  }, jsx("div", {
152
156
  css: overlayStyles,
153
- className: "multiBodiedExtension--overlay"
157
+ className: overlayClassNames,
158
+ "data-testid": "multiBodiedExtension--overlay"
154
159
  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
155
160
  className: containerClassNames,
156
161
  css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
@@ -26,6 +26,10 @@ export var mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
26
26
  },
27
27
  '&.with-hover-border': {
28
28
  border: "1px solid ".concat("var(--ds-border-input, ".concat(N500, ")"))
29
+ },
30
+ '&.with-padding-background-styles': {
31
+ padding: "var(--ds-space-100, 8px)",
32
+ background: 'transparent'
29
33
  }
30
34
  });
31
35
  export var overlayStyles = css({
@@ -36,5 +40,8 @@ export var overlayStyles = css({
36
40
  opacity: 0,
37
41
  pointerEvents: 'none',
38
42
  transition: 'opacity 0.3s',
39
- zIndex: 1
43
+ zIndex: 1,
44
+ '&.with-margin': {
45
+ margin: "var(--ds-space-negative-100, -8px)"
46
+ }
40
47
  });
@@ -71,6 +71,10 @@ export var CommentBadge = function CommentBadge(_ref) {
71
71
  }, [status]);
72
72
  return jsx("div", {
73
73
  css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
74
+ // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
75
+ // can target the correct div
76
+ ,
77
+ "data-comment-badge": "true"
74
78
  }, jsx(Tooltip, {
75
79
  position: "top",
76
80
  content: title
@@ -9,5 +9,10 @@ export var messages = defineMessages({
9
9
  id: 'fabric.editor.invalidDateError',
10
10
  defaultMessage: 'Enter a valid date',
11
11
  description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
12
+ },
13
+ onKeyUpDownText: {
14
+ id: 'fabric.editor.upDown',
15
+ defaultMessage: 'On the use of up and down arrow keys into the following input field, the date will update below',
16
+ description: 'The text for the date input informs the user that using the arrow keys (up and down) will update the date picker below'
12
17
  }
13
18
  });
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
8
8
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
9
- var packageVersion = "78.29.0";
9
+ var packageVersion = "78.29.2";
10
10
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
11
11
  // Remove URL as it has UGC
12
12
  // TODO: Sanitise the URL instead of just removing it
@@ -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 = "78.29.0";
20
+ var packageVersion = "78.29.2";
21
21
  var halfFocusRing = 1;
22
22
  var dropOffset = '0, 8';
23
23
  var DropList = /*#__PURE__*/function (_Component) {
@@ -170,7 +170,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
170
170
 
171
171
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
172
172
  export var mediaWrapperStyle = function mediaWrapperStyle(props) {
173
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n /* Editor */\n & > figure {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & > div {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & * [data-mark-annotation-type='inlineComment'] {\n width: 100%;\n height: 100%;\n }\n\n &[data-node-type='embedCard'] > div {\n width: 100%;\n }\n\n /* Renderer */\n [data-node-type='media'] {\n position: static !important;\n\n > div {\n position: absolute;\n height: 100%;\n }\n }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
173
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n /* Editor */\n & > figure {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n // Comments on media project adds comment badge as child of the media wrapper,\n // thus we need to exclude it so that style is applied to intended div\n & > div:not([data-comment-badge='true']) {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & * [data-mark-annotation-type='inlineComment'] {\n width: 100%;\n height: 100%;\n }\n\n &[data-node-type='embedCard'] > div {\n width: 100%;\n }\n\n /* Renderer */\n [data-node-type='media'] {\n position: static !important;\n\n > div {\n position: absolute;\n height: 100%;\n }\n }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
174
174
  };
175
175
  export var MediaWrapper = function MediaWrapper(_ref3) {
176
176
  var children = _ref3.children,
@@ -38,8 +38,7 @@ var mbeNavigation = css({
38
38
  marginLeft: "var(--ds-space-100, 8px)",
39
39
  marginRight: "var(--ds-space-100, 8px)",
40
40
  '&.remove-margins': {
41
- marginLeft: 0,
42
- marginRight: 0
41
+ margin: "var(--ds-space-negative-100, -8px)"
43
42
  },
44
43
  '&.remove-border': {
45
44
  border: 'none'
@@ -11,5 +11,6 @@ export type CommentBadgeProps = {
11
11
  onMouseEnter?: (e: React.MouseEvent) => void;
12
12
  onMouseLeave?: (e: React.MouseEvent) => void;
13
13
  isEditor?: boolean;
14
+ isDrafting?: boolean;
14
15
  };
15
16
  export declare const CommentBadge: ({ intl, width, height, status, mediaElement, onClick, onMouseEnter, onMouseLeave, isEditor, }: CommentBadgeProps) => jsx.JSX.Element;
@@ -9,4 +9,9 @@ export declare const messages: {
9
9
  defaultMessage: string;
10
10
  description: string;
11
11
  };
12
+ onKeyUpDownText: {
13
+ id: string;
14
+ defaultMessage: string;
15
+ description: string;
16
+ };
12
17
  };
@@ -11,5 +11,6 @@ export type CommentBadgeProps = {
11
11
  onMouseEnter?: (e: React.MouseEvent) => void;
12
12
  onMouseLeave?: (e: React.MouseEvent) => void;
13
13
  isEditor?: boolean;
14
+ isDrafting?: boolean;
14
15
  };
15
16
  export declare const CommentBadge: ({ intl, width, height, status, mediaElement, onClick, onMouseEnter, onMouseLeave, isEditor, }: CommentBadgeProps) => jsx.JSX.Element;
@@ -9,4 +9,9 @@ export declare const messages: {
9
9
  defaultMessage: string;
10
10
  description: string;
11
11
  };
12
+ onKeyUpDownText: {
13
+ id: string;
14
+ defaultMessage: string;
15
+ description: string;
16
+ };
12
17
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "78.29.0",
3
+ "version": "78.29.2",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -113,7 +113,7 @@
113
113
  "@atlaskit/icon": "^22.1.0",
114
114
  "@atlaskit/icon-object": "^6.3.0",
115
115
  "@atlaskit/in-product-testing": "^0.2.0",
116
- "@atlaskit/link-datasource": "^1.27.0",
116
+ "@atlaskit/link-datasource": "^1.28.0",
117
117
  "@atlaskit/link-picker": "^1.34.0",
118
118
  "@atlaskit/media-card": "^77.11.0",
119
119
  "@atlaskit/media-client": "^26.3.0",
@@ -121,7 +121,7 @@
121
121
  "@atlaskit/media-common": "^11.1.0",
122
122
  "@atlaskit/media-file-preview": "^0.5.0",
123
123
  "@atlaskit/media-picker": "^66.4.0",
124
- "@atlaskit/media-ui": "^25.7.0",
124
+ "@atlaskit/media-ui": "^25.8.0",
125
125
  "@atlaskit/media-viewer": "48.4.4",
126
126
  "@atlaskit/mention": "^23.0.0",
127
127
  "@atlaskit/menu": "^2.1.0",