@atlaskit/renderer 108.20.2 → 108.20.3
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 +7 -0
- package/dist/cjs/react/nodes/mediaInline.js +25 -4
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/Renderer/style.js +3 -2
- package/dist/es2019/react/nodes/mediaInline.js +25 -4
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/Renderer/style.js +6 -1
- package/dist/esm/react/nodes/mediaInline.js +25 -4
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/Renderer/style.js +3 -2
- package/dist/types/react/nodes/index.d.ts +1 -1
- package/dist/types/react/nodes/mediaInline.d.ts +5 -3
- package/dist/types-ts4.5/react/nodes/index.d.ts +1 -1
- package/dist/types-ts4.5/react/nodes/mediaInline.d.ts +5 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 108.20.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#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.
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 108.20.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -18,6 +18,7 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
|
18
18
|
var _mediaClientReact = require("@atlaskit/media-client-react");
|
|
19
19
|
var _MediaCard = require("../../ui/MediaCard");
|
|
20
20
|
var _reactIntlNext = require("react-intl-next");
|
|
21
|
+
var _mediaInline = require("@atlaskit/editor-common/media-inline");
|
|
21
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
22
23
|
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; }
|
|
23
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -28,9 +29,12 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
28
29
|
clipboardAttrs = _ref.clipboardAttrs,
|
|
29
30
|
mediaInlineProviders = _ref.mediaInlineProviders,
|
|
30
31
|
collectionName = _ref.collection,
|
|
31
|
-
featureFlags = _ref.featureFlags,
|
|
32
32
|
eventHandlers = _ref.eventHandlers,
|
|
33
|
-
identifier = _ref.identifier
|
|
33
|
+
identifier = _ref.identifier,
|
|
34
|
+
alt = _ref.alt,
|
|
35
|
+
width = _ref.width,
|
|
36
|
+
height = _ref.height,
|
|
37
|
+
type = _ref.type;
|
|
34
38
|
var _useState = (0, _react.useState)(),
|
|
35
39
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
36
40
|
contextIdentifierProvider = _useState2[0],
|
|
@@ -155,6 +159,15 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
|
|
|
155
159
|
isSelected: false
|
|
156
160
|
});
|
|
157
161
|
}
|
|
162
|
+
if (type && (0, _mediaInline.shouldShowInlineImage)(type)) {
|
|
163
|
+
return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
|
|
164
|
+
mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfigState),
|
|
165
|
+
identifier: identifier,
|
|
166
|
+
alt: alt,
|
|
167
|
+
width: width,
|
|
168
|
+
height: height
|
|
169
|
+
});
|
|
170
|
+
}
|
|
158
171
|
var handleMediaInlineClick = function handleMediaInlineClick(result) {
|
|
159
172
|
var _eventHandlers$media;
|
|
160
173
|
if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
|
|
@@ -193,7 +206,11 @@ var MediaInline = function MediaInline(props) {
|
|
|
193
206
|
providerFactory = props.providers,
|
|
194
207
|
intl = props.intl,
|
|
195
208
|
rendererAppearance = props.rendererAppearance,
|
|
196
|
-
featureFlags = props.featureFlags
|
|
209
|
+
featureFlags = props.featureFlags,
|
|
210
|
+
fileType = props.type,
|
|
211
|
+
alt = props.alt,
|
|
212
|
+
width = props.width,
|
|
213
|
+
height = props.height;
|
|
197
214
|
var clipboardAttrs = {
|
|
198
215
|
id: id,
|
|
199
216
|
collection: collection
|
|
@@ -215,7 +232,11 @@ var MediaInline = function MediaInline(props) {
|
|
|
215
232
|
intl: intl,
|
|
216
233
|
mediaInlineProviders: mediaInlineProviders,
|
|
217
234
|
collection: collection,
|
|
218
|
-
featureFlags: featureFlags
|
|
235
|
+
featureFlags: featureFlags,
|
|
236
|
+
type: fileType,
|
|
237
|
+
alt: alt,
|
|
238
|
+
width: width,
|
|
239
|
+
height: height
|
|
219
240
|
});
|
|
220
241
|
}
|
|
221
242
|
});
|
|
@@ -53,7 +53,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
53
53
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
54
54
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
55
55
|
var packageName = "@atlaskit/renderer";
|
|
56
|
-
var packageVersion = "108.20.
|
|
56
|
+
var packageVersion = "108.20.3";
|
|
57
57
|
var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
58
58
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
59
59
|
var _super = _createSuper(Renderer);
|
|
@@ -14,6 +14,7 @@ var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
|
14
14
|
var colors = _colors;
|
|
15
15
|
var _typography = require("@atlaskit/theme/typography");
|
|
16
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
|
+
var _mediaInline = require("@atlaskit/editor-common/media-inline");
|
|
17
18
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
18
19
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
19
20
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
@@ -122,10 +123,10 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
|
|
|
122
123
|
theme: theme
|
|
123
124
|
};
|
|
124
125
|
var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
|
|
125
|
-
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n
|
|
126
|
+
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n .", " {\n ", "\n }\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: ", " ", ";\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: ", ";\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n ", "\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: 0;\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow: 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: block;\n /* stylelint-enable */\n\n position: relative;\n border-radius: ", ";\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n ", "\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", ";\n & > div + div {\n margin-left: ", ";\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
|
|
126
127
|
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
127
128
|
dark: "var(--ds-text, #B8C7E0)"
|
|
128
|
-
})(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
|
|
129
|
+
})(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
|
|
129
130
|
light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
|
|
130
131
|
dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
|
|
131
132
|
})(themeProps), telepointerStyles(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
|
|
@@ -6,15 +6,19 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
|
6
6
|
import { getMediaClient } from '@atlaskit/media-client-react';
|
|
7
7
|
import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
|
|
8
8
|
import { createIntl, injectIntl } from 'react-intl-next';
|
|
9
|
+
import { shouldShowInlineImage, MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
|
|
9
10
|
export const RenderMediaInline = ({
|
|
10
11
|
rendererAppearance,
|
|
11
12
|
intl,
|
|
12
13
|
clipboardAttrs,
|
|
13
14
|
mediaInlineProviders,
|
|
14
15
|
collection: collectionName,
|
|
15
|
-
featureFlags,
|
|
16
16
|
eventHandlers,
|
|
17
|
-
identifier
|
|
17
|
+
identifier,
|
|
18
|
+
alt,
|
|
19
|
+
width,
|
|
20
|
+
height,
|
|
21
|
+
type
|
|
18
22
|
}) => {
|
|
19
23
|
const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
|
|
20
24
|
const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
|
|
@@ -81,6 +85,15 @@ export const RenderMediaInline = ({
|
|
|
81
85
|
isSelected: false
|
|
82
86
|
});
|
|
83
87
|
}
|
|
88
|
+
if (type && shouldShowInlineImage(type)) {
|
|
89
|
+
return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
|
|
90
|
+
mediaClient: getMediaClient(viewMediaClientConfigState),
|
|
91
|
+
identifier: identifier,
|
|
92
|
+
alt: alt,
|
|
93
|
+
width: width,
|
|
94
|
+
height: height
|
|
95
|
+
});
|
|
96
|
+
}
|
|
84
97
|
const handleMediaInlineClick = result => {
|
|
85
98
|
var _eventHandlers$media;
|
|
86
99
|
if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
|
|
@@ -124,7 +137,11 @@ const MediaInline = props => {
|
|
|
124
137
|
providers: providerFactory,
|
|
125
138
|
intl,
|
|
126
139
|
rendererAppearance,
|
|
127
|
-
featureFlags
|
|
140
|
+
featureFlags,
|
|
141
|
+
type: fileType,
|
|
142
|
+
alt,
|
|
143
|
+
width,
|
|
144
|
+
height
|
|
128
145
|
} = props;
|
|
129
146
|
const clipboardAttrs = {
|
|
130
147
|
id,
|
|
@@ -147,7 +164,11 @@ const MediaInline = props => {
|
|
|
147
164
|
intl: intl,
|
|
148
165
|
mediaInlineProviders: mediaInlineProviders,
|
|
149
166
|
collection: collection,
|
|
150
|
-
featureFlags: featureFlags
|
|
167
|
+
featureFlags: featureFlags,
|
|
168
|
+
type: fileType,
|
|
169
|
+
alt: alt,
|
|
170
|
+
width: width,
|
|
171
|
+
height: height
|
|
151
172
|
});
|
|
152
173
|
}
|
|
153
174
|
});
|
|
@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
35
35
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
36
36
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
37
37
|
const packageName = "@atlaskit/renderer";
|
|
38
|
-
const packageVersion = "108.20.
|
|
38
|
+
const packageVersion = "108.20.3";
|
|
39
39
|
export class Renderer extends PureComponent {
|
|
40
40
|
constructor(props) {
|
|
41
41
|
super(props);
|
|
@@ -4,6 +4,7 @@ import { fontFamily, fontSize } from '@atlaskit/theme/constants';
|
|
|
4
4
|
import * as colors from '@atlaskit/theme/colors';
|
|
5
5
|
import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
|
|
6
6
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
|
|
7
8
|
import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
|
|
8
9
|
import { shadowClassNames } from '@atlaskit/editor-common/ui';
|
|
9
10
|
import { browser } from '@atlaskit/editor-common/utils';
|
|
@@ -432,7 +433,11 @@ export const rendererStyles = wrapperProps => theme => {
|
|
|
432
433
|
${fullPageStyles(wrapperProps, themeProps)}
|
|
433
434
|
${fullWidthStyles(wrapperProps)}
|
|
434
435
|
|
|
435
|
-
|
|
436
|
+
.${RendererCssClassName.DOCUMENT} {
|
|
437
|
+
${mediaInlineImageStyles}
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
& h1 {
|
|
436
441
|
${headingAnchorStyle('h1')}
|
|
437
442
|
}
|
|
438
443
|
|
|
@@ -12,15 +12,19 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
|
12
12
|
import { getMediaClient } from '@atlaskit/media-client-react';
|
|
13
13
|
import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
|
|
14
14
|
import { createIntl, injectIntl } from 'react-intl-next';
|
|
15
|
+
import { shouldShowInlineImage, MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
|
|
15
16
|
export var RenderMediaInline = function RenderMediaInline(_ref) {
|
|
16
17
|
var rendererAppearance = _ref.rendererAppearance,
|
|
17
18
|
intl = _ref.intl,
|
|
18
19
|
clipboardAttrs = _ref.clipboardAttrs,
|
|
19
20
|
mediaInlineProviders = _ref.mediaInlineProviders,
|
|
20
21
|
collectionName = _ref.collection,
|
|
21
|
-
featureFlags = _ref.featureFlags,
|
|
22
22
|
eventHandlers = _ref.eventHandlers,
|
|
23
|
-
identifier = _ref.identifier
|
|
23
|
+
identifier = _ref.identifier,
|
|
24
|
+
alt = _ref.alt,
|
|
25
|
+
width = _ref.width,
|
|
26
|
+
height = _ref.height,
|
|
27
|
+
type = _ref.type;
|
|
24
28
|
var _useState = useState(),
|
|
25
29
|
_useState2 = _slicedToArray(_useState, 2),
|
|
26
30
|
contextIdentifierProvider = _useState2[0],
|
|
@@ -145,6 +149,15 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
|
|
|
145
149
|
isSelected: false
|
|
146
150
|
});
|
|
147
151
|
}
|
|
152
|
+
if (type && shouldShowInlineImage(type)) {
|
|
153
|
+
return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
|
|
154
|
+
mediaClient: getMediaClient(viewMediaClientConfigState),
|
|
155
|
+
identifier: identifier,
|
|
156
|
+
alt: alt,
|
|
157
|
+
width: width,
|
|
158
|
+
height: height
|
|
159
|
+
});
|
|
160
|
+
}
|
|
148
161
|
var handleMediaInlineClick = function handleMediaInlineClick(result) {
|
|
149
162
|
var _eventHandlers$media;
|
|
150
163
|
if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
|
|
@@ -183,7 +196,11 @@ var MediaInline = function MediaInline(props) {
|
|
|
183
196
|
providerFactory = props.providers,
|
|
184
197
|
intl = props.intl,
|
|
185
198
|
rendererAppearance = props.rendererAppearance,
|
|
186
|
-
featureFlags = props.featureFlags
|
|
199
|
+
featureFlags = props.featureFlags,
|
|
200
|
+
fileType = props.type,
|
|
201
|
+
alt = props.alt,
|
|
202
|
+
width = props.width,
|
|
203
|
+
height = props.height;
|
|
187
204
|
var clipboardAttrs = {
|
|
188
205
|
id: id,
|
|
189
206
|
collection: collection
|
|
@@ -205,7 +222,11 @@ var MediaInline = function MediaInline(props) {
|
|
|
205
222
|
intl: intl,
|
|
206
223
|
mediaInlineProviders: mediaInlineProviders,
|
|
207
224
|
collection: collection,
|
|
208
|
-
featureFlags: featureFlags
|
|
225
|
+
featureFlags: featureFlags,
|
|
226
|
+
type: fileType,
|
|
227
|
+
alt: alt,
|
|
228
|
+
width: width,
|
|
229
|
+
height: height
|
|
209
230
|
});
|
|
210
231
|
}
|
|
211
232
|
});
|
|
@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
45
45
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
46
46
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
47
47
|
var packageName = "@atlaskit/renderer";
|
|
48
|
-
var packageVersion = "108.20.
|
|
48
|
+
var packageVersion = "108.20.3";
|
|
49
49
|
export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
50
50
|
_inherits(Renderer, _PureComponent);
|
|
51
51
|
var _super = _createSuper(Renderer);
|
|
@@ -6,6 +6,7 @@ import { fontFamily, fontSize } from '@atlaskit/theme/constants';
|
|
|
6
6
|
import * as colors from '@atlaskit/theme/colors';
|
|
7
7
|
import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
|
|
8
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
|
+
import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
|
|
9
10
|
import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
|
|
10
11
|
import { shadowClassNames } from '@atlaskit/editor-common/ui';
|
|
11
12
|
import { browser } from '@atlaskit/editor-common/utils';
|
|
@@ -113,10 +114,10 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
|
|
|
113
114
|
theme: theme
|
|
114
115
|
};
|
|
115
116
|
var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
|
|
116
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n
|
|
117
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n .", " {\n ", "\n }\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: ", " ", ";\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: ", ";\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n ", "\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: 0;\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow: 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: block;\n /* stylelint-enable */\n\n position: relative;\n border-radius: ", ";\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n ", "\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", ";\n & > div + div {\n margin-left: ", ";\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n }\n\n & :not([data-node-type='decisionList']) > li {\n ", "\n }\n "])), editorFontSize(themeProps), themed({
|
|
117
118
|
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
118
119
|
dark: "var(--ds-text, #B8C7E0)"
|
|
119
|
-
})(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
|
|
120
|
+
})(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), themed({
|
|
120
121
|
light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
|
|
121
122
|
dark: "var(--ds-text-subtlest, ".concat(colors.DN200, ")")
|
|
122
123
|
})(themeProps), telepointerStyles(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
|
|
@@ -58,7 +58,7 @@ declare const BlockCard: React.ComponentType<{
|
|
|
58
58
|
}> & Loadable.LoadableComponent;
|
|
59
59
|
declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
|
|
60
60
|
declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
|
|
61
|
-
declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"
|
|
61
|
+
declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
|
|
62
62
|
declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
|
|
63
63
|
declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
|
|
64
64
|
declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
4
|
import type { FileIdentifier } from '@atlaskit/media-client';
|
|
@@ -7,6 +8,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
|
|
|
7
8
|
import type { RendererAppearance } from '../../ui/Renderer/types';
|
|
8
9
|
import type { MediaFeatureFlags } from '@atlaskit/media-common';
|
|
9
10
|
import type { RendererContext } from '../types';
|
|
11
|
+
import type { MediaInlineAttrs } from '@atlaskit/editor-common/media-inline';
|
|
10
12
|
type MediaInlineProviders = {
|
|
11
13
|
mediaProvider?: Promise<MediaProvider>;
|
|
12
14
|
contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
|
|
@@ -31,8 +33,8 @@ export type MediaInlineProps = {
|
|
|
31
33
|
rendererAppearance?: RendererAppearance;
|
|
32
34
|
featureFlags?: MediaFeatureFlags;
|
|
33
35
|
};
|
|
34
|
-
export declare const RenderMediaInline:
|
|
35
|
-
declare const _default:
|
|
36
|
-
WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"
|
|
36
|
+
export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
|
|
37
|
+
declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
|
|
38
|
+
WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
|
|
37
39
|
};
|
|
38
40
|
export default _default;
|
|
@@ -58,7 +58,7 @@ declare const BlockCard: React.ComponentType<{
|
|
|
58
58
|
}> & Loadable.LoadableComponent;
|
|
59
59
|
declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
|
|
60
60
|
declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
|
|
61
|
-
declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"
|
|
61
|
+
declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
|
|
62
62
|
declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
|
|
63
63
|
declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
|
|
64
64
|
declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
4
|
import type { FileIdentifier } from '@atlaskit/media-client';
|
|
@@ -7,6 +8,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
|
|
|
7
8
|
import type { RendererAppearance } from '../../ui/Renderer/types';
|
|
8
9
|
import type { MediaFeatureFlags } from '@atlaskit/media-common';
|
|
9
10
|
import type { RendererContext } from '../types';
|
|
11
|
+
import type { MediaInlineAttrs } from '@atlaskit/editor-common/media-inline';
|
|
10
12
|
type MediaInlineProviders = {
|
|
11
13
|
mediaProvider?: Promise<MediaProvider>;
|
|
12
14
|
contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
|
|
@@ -31,8 +33,8 @@ export type MediaInlineProps = {
|
|
|
31
33
|
rendererAppearance?: RendererAppearance;
|
|
32
34
|
featureFlags?: MediaFeatureFlags;
|
|
33
35
|
};
|
|
34
|
-
export declare const RenderMediaInline:
|
|
35
|
-
declare const _default:
|
|
36
|
-
WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"
|
|
36
|
+
export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
|
|
37
|
+
declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
|
|
38
|
+
WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
|
|
37
39
|
};
|
|
38
40
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "108.20.
|
|
3
|
+
"version": "108.20.3",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
33
33
|
"@atlaskit/button": "^16.18.0",
|
|
34
34
|
"@atlaskit/code": "^15.1.0",
|
|
35
|
-
"@atlaskit/editor-common": "^76.
|
|
35
|
+
"@atlaskit/editor-common": "^76.26.0",
|
|
36
36
|
"@atlaskit/editor-json-transformer": "^8.10.0",
|
|
37
37
|
"@atlaskit/editor-palette": "1.5.2",
|
|
38
38
|
"@atlaskit/editor-prosemirror": "1.1.0",
|