@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.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/extensibility/Extension/Extension/index.js +1 -1
- package/dist/cjs/extensibility/Extension/Extension/styles.js +2 -2
- package/dist/cjs/extensibility/MultiBodiedExtension/index.js +9 -4
- package/dist/cjs/extensibility/MultiBodiedExtension/styles.js +8 -1
- package/dist/cjs/media-single/CommentBadge.js +4 -0
- package/dist/cjs/messages/date.js +5 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui/MediaSingle/styled.js +1 -1
- package/dist/cjs/ui/MultiBodiedExtension/index.js +1 -2
- package/dist/es2019/extensibility/Extension/Extension/index.js +1 -1
- package/dist/es2019/extensibility/Extension/Extension/styles.js +2 -2
- package/dist/es2019/extensibility/MultiBodiedExtension/index.js +9 -4
- package/dist/es2019/extensibility/MultiBodiedExtension/styles.js +8 -1
- package/dist/es2019/media-single/CommentBadge.js +4 -0
- package/dist/es2019/messages/date.js +5 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui/MediaSingle/styled.js +3 -1
- package/dist/es2019/ui/MultiBodiedExtension/index.js +1 -2
- package/dist/esm/extensibility/Extension/Extension/index.js +1 -1
- package/dist/esm/extensibility/Extension/Extension/styles.js +2 -2
- package/dist/esm/extensibility/MultiBodiedExtension/index.js +9 -4
- package/dist/esm/extensibility/MultiBodiedExtension/styles.js +8 -1
- package/dist/esm/media-single/CommentBadge.js +4 -0
- package/dist/esm/messages/date.js +5 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui/MediaSingle/styled.js +1 -1
- package/dist/esm/ui/MultiBodiedExtension/index.js +1 -2
- package/dist/types/media-single/CommentBadge.d.ts +1 -0
- package/dist/types/messages/date.d.ts +5 -0
- package/dist/types-ts4.5/media-single/CommentBadge.d.ts +1 -0
- package/dist/types-ts4.5/messages/date.d.ts +5 -0
- 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
|
-
'
|
|
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
|
-
'&.
|
|
58
|
-
padding:
|
|
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-
|
|
128
|
-
'with-
|
|
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:
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
'
|
|
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
|
-
'&.
|
|
52
|
-
padding:
|
|
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-
|
|
116
|
-
'with-
|
|
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:
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
'
|
|
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
|
-
'&.
|
|
52
|
-
padding:
|
|
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-
|
|
119
|
-
'with-
|
|
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:
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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;
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "78.29.
|
|
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.
|
|
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.
|
|
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",
|