@atlaskit/editor-common 76.25.5 → 76.26.1
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 +16 -0
- package/dist/cjs/media-inline/constants.js +3 -2
- package/dist/cjs/media-inline/index.js +20 -1
- package/dist/cjs/media-inline/inline-image-wrapper.js +19 -5
- package/dist/cjs/media-inline/media-inline-image-card.js +8 -2
- package/dist/cjs/media-inline/styles.js +17 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/media-inline/constants.js +2 -1
- package/dist/es2019/media-inline/index.js +3 -1
- package/dist/es2019/media-inline/inline-image-wrapper.js +19 -5
- package/dist/es2019/media-inline/media-inline-image-card.js +7 -3
- package/dist/es2019/media-inline/styles.js +35 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/media-inline/constants.js +2 -1
- package/dist/esm/media-inline/index.js +3 -1
- package/dist/esm/media-inline/inline-image-wrapper.js +18 -5
- package/dist/esm/media-inline/media-inline-image-card.js +9 -3
- package/dist/esm/media-inline/styles.js +10 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/analytics/api.d.ts +1 -0
- package/dist/types/media-inline/constants.d.ts +1 -0
- package/dist/types/media-inline/index.d.ts +2 -0
- package/dist/types/media-inline/inline-image-wrapper.d.ts +3 -2
- package/dist/types/media-inline/styles.d.ts +3 -0
- package/dist/types/types/feature-flags.d.ts +8 -0
- package/dist/types-ts4.5/analytics/api.d.ts +1 -0
- package/dist/types-ts4.5/media-inline/constants.d.ts +1 -0
- package/dist/types-ts4.5/media-inline/index.d.ts +2 -0
- package/dist/types-ts4.5/media-inline/inline-image-wrapper.d.ts +3 -2
- package/dist/types-ts4.5/media-inline/styles.d.ts +3 -0
- package/dist/types-ts4.5/types/feature-flags.d.ts +8 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 76.26.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#58565](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58565) [`1f112c9375db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1f112c9375db) - replace table sticky scrollbar platform feature flag with an editorFeatureFlag
|
|
8
|
+
|
|
9
|
+
## 76.26.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#59421](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59421) [`3747754f8ab0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3747754f8ab0) - NO-ISSUE Added the capability to directly trigger an analytics event as an action to the editor analytics plugin
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#59245](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59245) [`0faff8fd352b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0faff8fd352b) - ED-20980 implemented default size for inline images.
|
|
18
|
+
|
|
3
19
|
## 76.25.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
|
|
6
|
+
exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
|
|
7
7
|
var DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_WIDTH = 250;
|
|
8
|
-
var DEFAULT_IMAGE_HEIGHT = exports.DEFAULT_IMAGE_HEIGHT = 200;
|
|
8
|
+
var DEFAULT_IMAGE_HEIGHT = exports.DEFAULT_IMAGE_HEIGHT = 200;
|
|
9
|
+
var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
|
|
@@ -15,6 +15,18 @@ Object.defineProperty(exports, "DEFAULT_IMAGE_WIDTH", {
|
|
|
15
15
|
return _constants.DEFAULT_IMAGE_WIDTH;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "DEFAULT_INLINE_IMAGE_ASPECT_RATIO", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _constants.DEFAULT_INLINE_IMAGE_ASPECT_RATIO;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "INLINE_IMAGE_WRAPPER_CLASS_NAME", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function get() {
|
|
27
|
+
return _styles.INLINE_IMAGE_WRAPPER_CLASS_NAME;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
18
30
|
Object.defineProperty(exports, "InlineImageWrapper", {
|
|
19
31
|
enumerable: true,
|
|
20
32
|
get: function get() {
|
|
@@ -27,6 +39,12 @@ Object.defineProperty(exports, "MediaInlineImageCard", {
|
|
|
27
39
|
return _mediaInlineImageCard.MediaInlineImageCard;
|
|
28
40
|
}
|
|
29
41
|
});
|
|
42
|
+
Object.defineProperty(exports, "mediaInlineImageStyles", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function get() {
|
|
45
|
+
return _styles.mediaInlineImageStyles;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
30
48
|
Object.defineProperty(exports, "shouldShowInlineImage", {
|
|
31
49
|
enumerable: true,
|
|
32
50
|
get: function get() {
|
|
@@ -36,4 +54,5 @@ Object.defineProperty(exports, "shouldShowInlineImage", {
|
|
|
36
54
|
var _mediaInlineImageCard = require("./media-inline-image-card");
|
|
37
55
|
var _utils = require("./utils");
|
|
38
56
|
var _inlineImageWrapper = require("./inline-image-wrapper");
|
|
39
|
-
var _constants = require("./constants");
|
|
57
|
+
var _constants = require("./constants");
|
|
58
|
+
var _styles = require("./styles");
|
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.InlineImageWrapper = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
7
9
|
var _react = require("@emotion/react");
|
|
8
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
+
var _constants = require("./constants");
|
|
12
|
+
var _styles = require("./styles");
|
|
9
13
|
/** @jsx jsx */
|
|
10
14
|
|
|
11
15
|
var wrapperStyle = (0, _react.css)({
|
|
12
16
|
display: 'inline-block',
|
|
13
17
|
verticalAlign: 'text-bottom',
|
|
14
|
-
|
|
18
|
+
overflow: 'hidden',
|
|
19
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
20
|
+
aspectRatio: "var(".concat(_styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
|
|
15
21
|
});
|
|
16
22
|
var selectedStyle = (0, _react.css)({
|
|
17
23
|
cursor: 'pointer',
|
|
@@ -21,8 +27,16 @@ var selectedStyle = (0, _react.css)({
|
|
|
21
27
|
});
|
|
22
28
|
var InlineImageWrapper = exports.InlineImageWrapper = function InlineImageWrapper(_ref) {
|
|
23
29
|
var children = _ref.children,
|
|
24
|
-
isSelected = _ref.isSelected
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
30
|
+
isSelected = _ref.isSelected,
|
|
31
|
+
aspectRatio = _ref.aspectRatio;
|
|
32
|
+
var style = aspectRatio ? (0, _defineProperty2.default)({}, _styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
|
|
33
|
+
return (
|
|
34
|
+
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
|
|
35
|
+
(0, _react.jsx)("span", {
|
|
36
|
+
style: style,
|
|
37
|
+
className: _styles.INLINE_IMAGE_WRAPPER_CLASS_NAME,
|
|
38
|
+
css: [wrapperStyle, isSelected && selectedStyle],
|
|
39
|
+
"data-testid": "inline-image-wrapper"
|
|
40
|
+
}, children)
|
|
41
|
+
);
|
|
28
42
|
};
|
|
@@ -22,7 +22,9 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
|
|
|
22
22
|
isSelected = _ref.isSelected,
|
|
23
23
|
intl = _ref.intl,
|
|
24
24
|
alt = _ref.alt,
|
|
25
|
-
isLazy = _ref.isLazy
|
|
25
|
+
isLazy = _ref.isLazy,
|
|
26
|
+
width = _ref.width,
|
|
27
|
+
height = _ref.height;
|
|
26
28
|
var _useState = (0, _react.useState)(),
|
|
27
29
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
28
30
|
fileState = _useState2[0],
|
|
@@ -88,8 +90,12 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
|
|
|
88
90
|
alt: alt
|
|
89
91
|
});
|
|
90
92
|
};
|
|
93
|
+
var aspectRatio = (0, _react.useMemo)(function () {
|
|
94
|
+
return width && height ? width / height : undefined;
|
|
95
|
+
}, [width, height]);
|
|
91
96
|
return (0, _react2.jsx)(_inlineImageWrapper.InlineImageWrapper, {
|
|
92
|
-
isSelected: isSelected
|
|
97
|
+
isSelected: isSelected,
|
|
98
|
+
aspectRatio: aspectRatio
|
|
93
99
|
}, content());
|
|
94
100
|
};
|
|
95
101
|
var MediaInlineImageCard = exports.MediaInlineImageCard = (0, _reactIntlNext.injectIntl)(MediaInlineImageCardInternal, {
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.mediaInlineImageStyles = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _typography = require("@atlaskit/theme/typography");
|
|
11
|
+
var _templateObject, _templateObject2;
|
|
12
|
+
var INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
|
|
13
|
+
var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
|
|
14
|
+
var inlineImageHeight = function inlineImageHeight(height) {
|
|
15
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n > .", ",\n > .mediaInlineView-content-wrap\n > .", " {\n height: ", "px;\n }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height);
|
|
16
|
+
};
|
|
17
|
+
var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n h1 {\n ", "\n }\n\n h2 {\n ", "\n }\n\n // 24px\n p,\n h3 {\n ", "\n }\n\n h4 {\n ", "\n }\n\n h5,\n h6 {\n ", "\n }\n"])), inlineImageHeight(_typography.headingSizes.h800.lineHeight), inlineImageHeight(_typography.headingSizes.h700.lineHeight), inlineImageHeight(_typography.headingSizes.h600.lineHeight), inlineImageHeight(_typography.headingSizes.h500.lineHeight), inlineImageHeight(_typography.headingSizes.h400.lineHeight));
|
|
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
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 = "76.
|
|
19
|
+
var packageVersion = "76.26.1";
|
|
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
|
|
@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
24
24
|
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); }; }
|
|
25
25
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
26
26
|
var packageName = "@atlaskit/editor-common";
|
|
27
|
-
var packageVersion = "76.
|
|
27
|
+
var packageVersion = "76.26.1";
|
|
28
28
|
var halfFocusRing = 1;
|
|
29
29
|
var dropOffset = '0, 8';
|
|
30
30
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { MediaInlineImageCard } from './media-inline-image-card';
|
|
2
2
|
export { shouldShowInlineImage } from './utils';
|
|
3
3
|
export { InlineImageWrapper } from './inline-image-wrapper';
|
|
4
|
-
export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
|
|
4
|
+
export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
|
|
5
|
+
export { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
|
|
6
|
+
export { mediaInlineImageStyles, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
|
|
@@ -5,8 +5,12 @@ import { B300 } from '@atlaskit/theme/colors';
|
|
|
5
5
|
const wrapperStyle = css({
|
|
6
6
|
display: 'inline-block',
|
|
7
7
|
verticalAlign: 'text-bottom',
|
|
8
|
-
|
|
8
|
+
overflow: 'hidden',
|
|
9
|
+
borderRadius: `${"var(--ds-border-radius, 3px)"}`,
|
|
10
|
+
aspectRatio: `var(${INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY}, ${DEFAULT_INLINE_IMAGE_ASPECT_RATIO})`
|
|
9
11
|
});
|
|
12
|
+
import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
|
|
13
|
+
import { INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
|
|
10
14
|
const selectedStyle = css({
|
|
11
15
|
cursor: 'pointer',
|
|
12
16
|
boxShadow: `0 0 0 1px ${`var(--ds-border-selected, ${B300})`}`,
|
|
@@ -15,9 +19,19 @@ const selectedStyle = css({
|
|
|
15
19
|
});
|
|
16
20
|
export const InlineImageWrapper = ({
|
|
17
21
|
children,
|
|
18
|
-
isSelected
|
|
22
|
+
isSelected,
|
|
23
|
+
aspectRatio
|
|
19
24
|
}) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
25
|
+
const style = aspectRatio ? {
|
|
26
|
+
[INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY]: aspectRatio
|
|
27
|
+
} : {};
|
|
28
|
+
return (
|
|
29
|
+
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
|
|
30
|
+
jsx("span", {
|
|
31
|
+
style: style,
|
|
32
|
+
className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
|
|
33
|
+
css: [wrapperStyle, isSelected && selectedStyle],
|
|
34
|
+
"data-testid": "inline-image-wrapper"
|
|
35
|
+
}, children)
|
|
36
|
+
);
|
|
23
37
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
3
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
4
4
|
import { jsx } from '@emotion/react';
|
|
5
5
|
import { createIntl, injectIntl } from 'react-intl-next';
|
|
6
6
|
import { Card } from '@atlaskit/media-card';
|
|
@@ -14,7 +14,9 @@ export const MediaInlineImageCardInternal = ({
|
|
|
14
14
|
isSelected,
|
|
15
15
|
intl,
|
|
16
16
|
alt,
|
|
17
|
-
isLazy
|
|
17
|
+
isLazy,
|
|
18
|
+
width,
|
|
19
|
+
height
|
|
18
20
|
}) => {
|
|
19
21
|
const [fileState, setFileState] = useState();
|
|
20
22
|
const [subscribeError, setSubscribeError] = useState();
|
|
@@ -76,8 +78,10 @@ export const MediaInlineImageCardInternal = ({
|
|
|
76
78
|
alt: alt
|
|
77
79
|
});
|
|
78
80
|
};
|
|
81
|
+
const aspectRatio = useMemo(() => width && height ? width / height : undefined, [width, height]);
|
|
79
82
|
return jsx(InlineImageWrapper, {
|
|
80
|
-
isSelected: isSelected
|
|
83
|
+
isSelected: isSelected,
|
|
84
|
+
aspectRatio: aspectRatio
|
|
81
85
|
}, content());
|
|
82
86
|
};
|
|
83
87
|
export const MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { css } from '@emotion/react';
|
|
2
|
+
import { headingSizes } from '@atlaskit/theme/typography';
|
|
3
|
+
export const INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
|
|
4
|
+
export const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
|
|
5
|
+
const inlineImageHeight = height => css`
|
|
6
|
+
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME},
|
|
7
|
+
> .mediaInlineView-content-wrap
|
|
8
|
+
> .${INLINE_IMAGE_WRAPPER_CLASS_NAME} {
|
|
9
|
+
height: ${height}px;
|
|
10
|
+
}
|
|
11
|
+
`;
|
|
12
|
+
export const mediaInlineImageStyles = css`
|
|
13
|
+
h1 {
|
|
14
|
+
${inlineImageHeight(headingSizes.h800.lineHeight)}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
h2 {
|
|
18
|
+
${inlineImageHeight(headingSizes.h700.lineHeight)}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// 24px
|
|
22
|
+
p,
|
|
23
|
+
h3 {
|
|
24
|
+
${inlineImageHeight(headingSizes.h600.lineHeight)}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h4 {
|
|
28
|
+
${inlineImageHeight(headingSizes.h500.lineHeight)}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h5,
|
|
32
|
+
h6 {
|
|
33
|
+
${inlineImageHeight(headingSizes.h400.lineHeight)}
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
@@ -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 = "76.
|
|
3
|
+
const packageVersion = "76.26.1";
|
|
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
|
|
@@ -9,7 +9,7 @@ import { themed } from '@atlaskit/theme/components';
|
|
|
9
9
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
10
10
|
import Layer from '../Layer';
|
|
11
11
|
const packageName = "@atlaskit/editor-common";
|
|
12
|
-
const packageVersion = "76.
|
|
12
|
+
const packageVersion = "76.26.1";
|
|
13
13
|
const halfFocusRing = 1;
|
|
14
14
|
const dropOffset = '0, 8';
|
|
15
15
|
class DropList extends Component {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { MediaInlineImageCard } from './media-inline-image-card';
|
|
2
2
|
export { shouldShowInlineImage } from './utils';
|
|
3
3
|
export { InlineImageWrapper } from './inline-image-wrapper';
|
|
4
|
-
export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
|
|
4
|
+
export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
|
|
5
|
+
export { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
|
|
6
|
+
export { mediaInlineImageStyles, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
1
2
|
/** @jsx jsx */
|
|
2
3
|
|
|
3
4
|
import { css, jsx } from '@emotion/react';
|
|
@@ -5,8 +6,12 @@ import { B300 } from '@atlaskit/theme/colors';
|
|
|
5
6
|
var wrapperStyle = css({
|
|
6
7
|
display: 'inline-block',
|
|
7
8
|
verticalAlign: 'text-bottom',
|
|
8
|
-
|
|
9
|
+
overflow: 'hidden',
|
|
10
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
11
|
+
aspectRatio: "var(".concat(INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")
|
|
9
12
|
});
|
|
13
|
+
import { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
|
|
14
|
+
import { INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, INLINE_IMAGE_WRAPPER_CLASS_NAME } from './styles';
|
|
10
15
|
var selectedStyle = css({
|
|
11
16
|
cursor: 'pointer',
|
|
12
17
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
|
|
@@ -15,8 +20,16 @@ var selectedStyle = css({
|
|
|
15
20
|
});
|
|
16
21
|
export var InlineImageWrapper = function InlineImageWrapper(_ref) {
|
|
17
22
|
var children = _ref.children,
|
|
18
|
-
isSelected = _ref.isSelected
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
isSelected = _ref.isSelected,
|
|
24
|
+
aspectRatio = _ref.aspectRatio;
|
|
25
|
+
var style = aspectRatio ? _defineProperty({}, INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, aspectRatio) : {};
|
|
26
|
+
return (
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
|
|
28
|
+
jsx("span", {
|
|
29
|
+
style: style,
|
|
30
|
+
className: INLINE_IMAGE_WRAPPER_CLASS_NAME,
|
|
31
|
+
css: [wrapperStyle, isSelected && selectedStyle],
|
|
32
|
+
"data-testid": "inline-image-wrapper"
|
|
33
|
+
}, children)
|
|
34
|
+
);
|
|
22
35
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
|
|
4
|
-
import { useEffect, useState } from 'react';
|
|
4
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
5
5
|
import { jsx } from '@emotion/react';
|
|
6
6
|
import { createIntl, injectIntl } from 'react-intl-next';
|
|
7
7
|
import { Card } from '@atlaskit/media-card';
|
|
@@ -15,7 +15,9 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
|
|
|
15
15
|
isSelected = _ref.isSelected,
|
|
16
16
|
intl = _ref.intl,
|
|
17
17
|
alt = _ref.alt,
|
|
18
|
-
isLazy = _ref.isLazy
|
|
18
|
+
isLazy = _ref.isLazy,
|
|
19
|
+
width = _ref.width,
|
|
20
|
+
height = _ref.height;
|
|
19
21
|
var _useState = useState(),
|
|
20
22
|
_useState2 = _slicedToArray(_useState, 2),
|
|
21
23
|
fileState = _useState2[0],
|
|
@@ -81,8 +83,12 @@ export var MediaInlineImageCardInternal = function MediaInlineImageCardInternal(
|
|
|
81
83
|
alt: alt
|
|
82
84
|
});
|
|
83
85
|
};
|
|
86
|
+
var aspectRatio = useMemo(function () {
|
|
87
|
+
return width && height ? width / height : undefined;
|
|
88
|
+
}, [width, height]);
|
|
84
89
|
return jsx(InlineImageWrapper, {
|
|
85
|
-
isSelected: isSelected
|
|
90
|
+
isSelected: isSelected,
|
|
91
|
+
aspectRatio: aspectRatio
|
|
86
92
|
}, content());
|
|
87
93
|
};
|
|
88
94
|
export var MediaInlineImageCard = injectIntl(MediaInlineImageCardInternal, {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
+
var _templateObject, _templateObject2;
|
|
3
|
+
import { css } from '@emotion/react';
|
|
4
|
+
import { headingSizes } from '@atlaskit/theme/typography';
|
|
5
|
+
export var INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
|
|
6
|
+
export var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
|
|
7
|
+
var inlineImageHeight = function inlineImageHeight(height) {
|
|
8
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n > .", ",\n > .mediaInlineView-content-wrap\n > .", " {\n height: ", "px;\n }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height);
|
|
9
|
+
};
|
|
10
|
+
export var mediaInlineImageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n h1 {\n ", "\n }\n\n h2 {\n ", "\n }\n\n // 24px\n p,\n h3 {\n ", "\n }\n\n h4 {\n ", "\n }\n\n h5,\n h6 {\n ", "\n }\n"])), inlineImageHeight(headingSizes.h800.lineHeight), inlineImageHeight(headingSizes.h700.lineHeight), inlineImageHeight(headingSizes.h600.lineHeight), inlineImageHeight(headingSizes.h500.lineHeight), inlineImageHeight(headingSizes.h400.lineHeight));
|
|
@@ -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 = "76.
|
|
9
|
+
var packageVersion = "76.26.1";
|
|
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
|
|
@@ -19,7 +19,7 @@ import { themed } from '@atlaskit/theme/components';
|
|
|
19
19
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
20
20
|
import Layer from '../Layer';
|
|
21
21
|
var packageName = "@atlaskit/editor-common";
|
|
22
|
-
var packageVersion = "76.
|
|
22
|
+
var packageVersion = "76.26.1";
|
|
23
23
|
var halfFocusRing = 1;
|
|
24
24
|
var dropOffset = '0, 8';
|
|
25
25
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -2,4 +2,5 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
import type { AnalyticsEventPayload } from './types';
|
|
3
3
|
export type EditorAnalyticsAPI = {
|
|
4
4
|
attachAnalyticsEvent: (payload: AnalyticsEventPayload, channel?: string) => (tr: Transaction) => boolean;
|
|
5
|
+
fireAnalyticsEvent: (payload: AnalyticsEventPayload) => void | undefined;
|
|
5
6
|
};
|
|
@@ -3,3 +3,5 @@ export { shouldShowInlineImage } from './utils';
|
|
|
3
3
|
export { InlineImageWrapper } from './inline-image-wrapper';
|
|
4
4
|
export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
|
|
5
5
|
export type { MediaInlineAttrs } from './types';
|
|
6
|
+
export { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
|
|
7
|
+
export { mediaInlineImageStyles, INLINE_IMAGE_WRAPPER_CLASS_NAME, } from './styles';
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import type { FC, ReactElement } from 'react';
|
|
3
|
-
type
|
|
3
|
+
type Props = {
|
|
4
4
|
children: ReactElement;
|
|
5
5
|
isSelected?: boolean;
|
|
6
|
+
aspectRatio?: number | string;
|
|
6
7
|
};
|
|
7
|
-
export declare const InlineImageWrapper: FC<
|
|
8
|
+
export declare const InlineImageWrapper: FC<Props>;
|
|
8
9
|
export {};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const INLINE_IMAGE_WRAPPER_CLASS_NAME = "media-inline-image-wrapper";
|
|
2
|
+
export declare const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = "--editor-media-inline-image-aspect-ratio";
|
|
3
|
+
export declare const mediaInlineImageStyles: import("@emotion/react").SerializedStyles;
|
|
@@ -237,6 +237,14 @@ export type FeatureFlags = {
|
|
|
237
237
|
* @default false
|
|
238
238
|
*/
|
|
239
239
|
extendedMediaResizeExperience?: boolean | undefined;
|
|
240
|
+
/**
|
|
241
|
+
* @description
|
|
242
|
+
* Enables the sticky scrollbar for tables
|
|
243
|
+
*
|
|
244
|
+
* @see https://product-fabric.atlassian.net/browse/ED-19773
|
|
245
|
+
* @default false
|
|
246
|
+
*/
|
|
247
|
+
stickyScrollbar?: boolean | undefined;
|
|
240
248
|
};
|
|
241
249
|
export type FeatureFlagKey = keyof FeatureFlags;
|
|
242
250
|
export type GetEditorFeatureFlags = () => FeatureFlags;
|
|
@@ -2,4 +2,5 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
import type { AnalyticsEventPayload } from './types';
|
|
3
3
|
export type EditorAnalyticsAPI = {
|
|
4
4
|
attachAnalyticsEvent: (payload: AnalyticsEventPayload, channel?: string) => (tr: Transaction) => boolean;
|
|
5
|
+
fireAnalyticsEvent: (payload: AnalyticsEventPayload) => void | undefined;
|
|
5
6
|
};
|
|
@@ -3,3 +3,5 @@ export { shouldShowInlineImage } from './utils';
|
|
|
3
3
|
export { InlineImageWrapper } from './inline-image-wrapper';
|
|
4
4
|
export { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
|
|
5
5
|
export type { MediaInlineAttrs } from './types';
|
|
6
|
+
export { DEFAULT_INLINE_IMAGE_ASPECT_RATIO } from './constants';
|
|
7
|
+
export { mediaInlineImageStyles, INLINE_IMAGE_WRAPPER_CLASS_NAME, } from './styles';
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import type { FC, ReactElement } from 'react';
|
|
3
|
-
type
|
|
3
|
+
type Props = {
|
|
4
4
|
children: ReactElement;
|
|
5
5
|
isSelected?: boolean;
|
|
6
|
+
aspectRatio?: number | string;
|
|
6
7
|
};
|
|
7
|
-
export declare const InlineImageWrapper: FC<
|
|
8
|
+
export declare const InlineImageWrapper: FC<Props>;
|
|
8
9
|
export {};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const INLINE_IMAGE_WRAPPER_CLASS_NAME = "media-inline-image-wrapper";
|
|
2
|
+
export declare const INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = "--editor-media-inline-image-aspect-ratio";
|
|
3
|
+
export declare const mediaInlineImageStyles: import("@emotion/react").SerializedStyles;
|
|
@@ -237,6 +237,14 @@ export type FeatureFlags = {
|
|
|
237
237
|
* @default false
|
|
238
238
|
*/
|
|
239
239
|
extendedMediaResizeExperience?: boolean | undefined;
|
|
240
|
+
/**
|
|
241
|
+
* @description
|
|
242
|
+
* Enables the sticky scrollbar for tables
|
|
243
|
+
*
|
|
244
|
+
* @see https://product-fabric.atlassian.net/browse/ED-19773
|
|
245
|
+
* @default false
|
|
246
|
+
*/
|
|
247
|
+
stickyScrollbar?: boolean | undefined;
|
|
240
248
|
};
|
|
241
249
|
export type FeatureFlagKey = keyof FeatureFlags;
|
|
242
250
|
export type GetEditorFeatureFlags = () => FeatureFlags;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "76.
|
|
3
|
+
"version": "76.26.1",
|
|
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/"
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"@atlaskit/in-product-testing": "^0.2.0",
|
|
110
110
|
"@atlaskit/link-datasource": "^1.19.0",
|
|
111
111
|
"@atlaskit/link-picker": "^1.30.0",
|
|
112
|
-
"@atlaskit/media-card": "^77.
|
|
112
|
+
"@atlaskit/media-card": "^77.5.0",
|
|
113
113
|
"@atlaskit/media-client": "^25.1.0",
|
|
114
114
|
"@atlaskit/media-picker": "^66.2.0",
|
|
115
115
|
"@atlaskit/mention": "^22.1.0",
|