@atlaskit/renderer 114.4.4 → 114.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/react/nodes/extensionFrame.js +8 -5
  3. package/dist/cjs/react/nodes/media/index.js +5 -12
  4. package/dist/cjs/react/nodes/multiBodiedExtension.js +24 -121
  5. package/dist/cjs/ui/Renderer/index.js +1 -1
  6. package/dist/cjs/ui/Renderer/style.js +1 -1
  7. package/dist/es2019/react/nodes/extensionFrame.js +8 -5
  8. package/dist/es2019/react/nodes/media/index.js +4 -11
  9. package/dist/es2019/react/nodes/multiBodiedExtension.js +23 -143
  10. package/dist/es2019/ui/Renderer/index.js +1 -1
  11. package/dist/es2019/ui/Renderer/style.js +3 -3
  12. package/dist/esm/react/nodes/extensionFrame.js +8 -5
  13. package/dist/esm/react/nodes/media/index.js +5 -12
  14. package/dist/esm/react/nodes/multiBodiedExtension.js +25 -122
  15. package/dist/esm/ui/Renderer/index.js +1 -1
  16. package/dist/esm/ui/Renderer/style.js +1 -1
  17. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 114.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#130460](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130460)
8
+ [`661496fcc810e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/661496fcc810e) -
9
+ Revised styles for MBE in Renderer
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 114.4.5
16
+
17
+ ### Patch Changes
18
+
19
+ - [#128664](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128664)
20
+ [`abca3266336d9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/abca3266336d9) -
21
+ [ED-23250] Remove form element from MediaFromUrl and consolidate experiments and feature flags in
22
+ prepartion for jira release
23
+ - Updated dependencies
24
+
3
25
  ## 114.4.4
4
26
 
5
27
  ### Patch Changes
package/dist/cjs/react/nodes/extensionFrame.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = require("@emotion/react");
8
- var _ui = require("@atlaskit/editor-common/ui");
9
8
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
9
  /**
11
10
  * @jsxRuntime classic
@@ -14,15 +13,19 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
 
15
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
15
 
17
- var containerCSS = (0, _react.css)({
16
+ var containerCSSOld = (0, _react.css)({
18
17
  minHeight: '100px',
19
18
  flexBasis: '100%'
20
19
  });
20
+ var containerCSSNew = (0, _react.css)({
21
+ padding: "var(--ds-space-100, 8px)",
22
+ minHeight: '100px',
23
+ // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
24
+ display: 'none'
25
+ });
21
26
  var ExtensionFrame = function ExtensionFrame(props) {
22
27
  return (0, _react.jsx)("div", {
23
- css: [containerCSS, (0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') &&
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
25
- _ui.sharedMultiBodiedExtensionStyles.extensionFrameContent],
28
+ css: [(0, _platformFeatureFlags.fg)('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
26
29
  "data-extension-frame": "true"
27
30
  }, props.children);
28
31
  };
package/dist/cjs/react/nodes/media/index.js CHANGED
@@ -36,7 +36,6 @@ var _reactIntlNext = require("react-intl-next");
36
36
  var _useInlineCommentsFilter = require("../../../ui/annotations/hooks/use-inline-comments-filter");
37
37
  var _useInlineCommentSubscriber = require("../../../ui/annotations/hooks/use-inline-comment-subscriber");
38
38
  var _types = require("@atlaskit/editor-common/types");
39
- var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
40
39
  var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
41
40
  var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
42
41
  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
@@ -371,7 +370,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
371
370
  var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
372
371
  var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
373
372
  var showCommentBadge = !!annotationMarks && !isInPageInclude && !isIncludeExcerpt;
374
- var shouldShowExternalMediaBadge = _this.props.type === 'external';
375
373
  return (0, _react2.jsx)(MediaLink, {
376
374
  mark: linkMark,
377
375
  onClick: _this.handleMediaLinkClickFn
@@ -383,27 +381,22 @@ var Media = /*#__PURE__*/function (_PureComponent) {
383
381
  data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
384
382
  border: !!borderMark
385
383
  })
386
- }, (0, _experiments.editorExperiment)('add-media-from-url', true) && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
384
+ }, (0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout') && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
387
385
  mediaElement: mediaSingleElement,
388
386
  mediaWidth: width,
389
387
  mediaHeight: height,
390
388
  useMinimumZIndex: true
391
389
  }, function (_ref9) {
392
- var badgeSize = _ref9.badgeSize,
393
- visible = _ref9.visible;
394
- return (0, _react2.jsx)(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_hide_external_media_badge') ? visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
395
- badgeSize: badgeSize,
390
+ var visible = _ref9.visible;
391
+ return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
396
392
  type: _this.props.type,
397
393
  url: _this.props.type === 'external' ? _this.props.url : undefined
398
- }) : shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
399
- badgeSize: badgeSize
400
394
  }), showCommentBadge && (0, _react2.jsx)(CommentBadgeNextWrapper, {
401
395
  marks: annotationMarks,
402
396
  mediaSingleElement: mediaSingleElement,
403
- isDrafting: isDrafting,
404
- badgeSize: badgeSize
397
+ isDrafting: isDrafting
405
398
  }));
406
- }), !(0, _experiments.editorExperiment)('add-media-from-url', true) && showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
399
+ }), !(0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout') && showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
407
400
  marks: annotationMarks,
408
401
  mediaSingleElement: mediaSingleElement,
409
402
  width: width,
package/dist/cjs/react/nodes/multiBodiedExtension.js CHANGED
@@ -6,19 +6,16 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = void 0;
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _react = require("@emotion/react");
12
- var _colors = require("@atlaskit/theme/colors");
13
12
  var _react2 = _interopRequireWildcard(require("react"));
14
- var _extension = require("./extension");
15
13
  var _ui = require("@atlaskit/editor-common/ui");
16
14
  var _consts = require("../../consts");
17
15
  var _utils = require("@atlaskit/editor-common/utils");
18
16
  var _actions = require("./multiBodiedExtension/actions");
19
17
  var _context = require("./multiBodiedExtension/context");
20
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
- var _templateObject, _templateObject2, _templateObject3;
18
+ var _templateObject;
22
19
  /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
23
20
  /**
24
21
  * @jsxRuntime classic
@@ -28,104 +25,22 @@ var _templateObject, _templateObject2, _templateObject3;
28
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
29
26
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
30
27
  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 && {}.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; }
31
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
32
- var navigationStylesOld = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeNavigation);
33
-
34
- // localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
35
- var navigationStylesNew = (0, _react.css)({
36
- borderTopLeftRadius: "var(--ds-border-radius, 3px)",
37
- borderTopRightRadius: "var(--ds-border-radius, 3px)",
38
- userSelect: 'none',
39
- WebkitUserModify: 'read-only',
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
41
- borderBottom: 'none !important',
42
- background: "var(--ds-surface, white)",
43
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
44
- '&.remove-margins': {
45
- margin: "var(--ds-space-negative-100, -8px)"
46
- },
47
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
48
- '&.remove-border': {
49
- border: 'none'
50
- },
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
52
- marginLeft: '0 !important',
53
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
54
- marginRight: '0 !important',
55
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
56
- '.mbe-add-tab-button, .mbe-remove-tab': {
57
- display: 'none'
58
- }
59
- });
60
-
61
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
62
- var containerStylesOld = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), _ui.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(_colors.N40, ")"));
63
-
64
- // localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
65
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
66
- var containerStylesNew = (0, _react.css)({
67
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
68
- background: 'transparent !important',
69
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
70
- 'padding:': {
71
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
72
- left: "var(--ds-space-100, 8px)".concat(" !important"),
73
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
74
- right: "var(--ds-space-100, 8px)".concat(" !important")
75
- },
76
- paddingBottom: "var(--ds-space-100, 8px)",
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
78
- '&.remove-padding': {
79
- paddingBottom: 0
80
- },
81
- position: 'relative',
82
- verticalAlign: 'middle',
83
- cursor: 'pointer',
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
85
- '.multiBodiedExtension-handler-result': {
86
- marginLeft: "var(--ds-space-100, 8px)"
87
- },
88
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
89
- ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
90
- display: 'none',
91
- background: 'transparent'
92
- },
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
94
- '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
95
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
96
- "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
97
- marginTop: 0
98
- }
99
- },
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
101
- '.ak-renderer-extension': {
102
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
103
- marginTop: '0 !important'
104
- },
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
106
- '[data-layout="full-width"], [data-layout="wide"]': {
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
108
- '.multiBodiedExtension-navigation': {
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
110
- borderRight: "3px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), " !important")
111
- }
28
+ var containerStyles = (0, _react.css)({
29
+ // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
30
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
31
+ '&:first-of-type > .ak-renderer-extension': {
32
+ marginTop: 0
112
33
  }
113
34
  });
114
35
  var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
115
36
  var children = _ref.children;
116
37
  return (0, _react.jsx)("article", {
117
38
  "data-testid": "multiBodiedExtension--frames"
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
119
- ,
120
- className: "multiBodiedExtension--frames"
121
39
  }, children);
122
40
  };
123
41
  var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
124
42
  var children = _ref2.children;
125
43
  return (0, _react.jsx)("nav", {
126
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
127
- className: "multiBodiedExtension-navigation",
128
- css: (0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
129
44
  "data-testid": "multiBodiedExtension-navigation"
130
45
  }, children);
131
46
  };
@@ -136,16 +51,21 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
136
51
  children = _ref3.children;
137
52
  var isTopLevel = path.length < 1;
138
53
  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
54
+
55
+ // This hierarchy is copied from regular extension (see extension.tsx)
139
56
  return (0, _react.jsx)("div", {
140
57
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
141
- className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
58
+ className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
142
59
  style: {
143
60
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
144
61
  width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
145
62
  },
146
63
  "data-layout": layout,
147
64
  "data-testid": "multiBodiedExtension--wrapper"
148
- }, children);
65
+ }, (0, _react.jsx)("div", {
66
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
67
+ className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
68
+ }, children));
149
69
  };
150
70
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
151
71
  var _extensionContext$pri;
@@ -195,41 +115,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
195
115
  localId: localId,
196
116
  fragmentLocalId: fragmentLocalId
197
117
  };
198
- var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
199
- var MultiBodiedExtensionNodeRenderer = (0, _react.jsx)(NodeRenderer, {
118
+ if (privateProps.__allowBodiedOverride) {
119
+ return (0, _react.jsx)(NodeRenderer, {
200
120
  node: node,
201
121
  actions: actions
202
122
  });
203
- try {
204
- if ( /*#__PURE__*/_react2.default.isValidElement(MultiBodiedExtensionNodeRenderer)) {
205
- // Return the content directly if it's a valid JSX.Element
206
- return (0, _extension.renderExtension)(MultiBodiedExtensionNodeRenderer, layout, {
207
- isTopLevel: path.length < 1
208
- });
209
- }
210
- } catch (e) {
211
- /** We don't want this error to block renderer */
212
- /** We keep rendering the default content */
213
- }
214
-
215
- // Always return default content if anything goes wrong
216
- return (0, _extension.renderExtension)(children, layout, {
217
- isTopLevel: path.length < 1
218
- });
219
- };
220
- if (privateProps.__allowBodiedOverride) {
221
- return renderMultiBodiedExtension();
222
123
  } else {
223
- return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
124
+ return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(MultiBodiedExtensionNavigation, null, (0, _react.jsx)(NodeRenderer, {
125
+ node: node,
126
+ actions: actions
127
+ })), (0, _react.jsx)(MultiBodiedExtensionChildrenContainer, null, children));
224
128
  }
225
- }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
129
+ }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
226
130
 
131
+ // make the frame visible
227
132
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
228
- var containerActiveFrameStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), activeChildIndex + 1);
133
+ var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
229
134
  return (0, _react.jsx)("section", {
230
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
231
- className: "multiBodiedExtension--container",
232
- css: [(0, _platformFeatureFlags.fg)('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
135
+ css: [containerStyles, containerActiveFrameStyles],
233
136
  "data-testid": "multiBodiedExtension--container",
234
137
  "data-active-child-index": activeChildIndex,
235
138
  "data-layout": layout
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
67
67
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
68
68
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
69
69
  var packageName = "@atlaskit/renderer";
70
- var packageVersion = "114.4.4";
70
+ var packageVersion = "114.5.0";
71
71
  var setAsQueryContainerStyles = (0, _react2.css)({
72
72
  containerName: 'ak-renderer-wrapper',
73
73
  containerType: 'inline-size',
package/dist/cjs/ui/Renderer/style.js CHANGED
@@ -125,7 +125,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
125
125
  if (allowNestedHeaderLinks) {
126
126
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
127
127
  }
128
- return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
128
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
129
129
  };
130
130
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
131
131
  var appearance = _ref3.appearance;
package/dist/es2019/react/nodes/extensionFrame.js CHANGED
@@ -5,17 +5,20 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx, css } from '@emotion/react';
8
- import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
9
8
  import { fg } from '@atlaskit/platform-feature-flags';
10
- const containerCSS = css({
9
+ const containerCSSOld = css({
11
10
  minHeight: '100px',
12
11
  flexBasis: '100%'
13
12
  });
13
+ const containerCSSNew = css({
14
+ padding: `${"var(--ds-space-100, 8px)"}`,
15
+ minHeight: '100px',
16
+ // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
17
+ display: 'none'
18
+ });
14
19
  const ExtensionFrame = props => {
15
20
  return jsx("div", {
16
- css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
18
- sharedMultiBodiedExtensionStyles.extensionFrameContent],
21
+ css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
19
22
  "data-extension-frame": "true"
20
23
  }, props.children);
21
24
  };
package/dist/es2019/react/nodes/media/index.js CHANGED
@@ -27,7 +27,6 @@ import { injectIntl } from 'react-intl-next';
27
27
  import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
28
28
  import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
29
29
  import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
30
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
31
30
  import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
32
31
  const linkStyle = css({
33
32
  position: 'absolute',
@@ -330,7 +329,6 @@ class Media extends PureComponent {
330
329
  const isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
331
330
  const isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
332
331
  const showCommentBadge = !!annotationMarks && !isInPageInclude && !isIncludeExcerpt;
333
- const shouldShowExternalMediaBadge = this.props.type === 'external';
334
332
  return jsx(MediaLink, {
335
333
  mark: linkMark,
336
334
  onClick: this.handleMediaLinkClickFn
@@ -344,26 +342,21 @@ class Media extends PureComponent {
344
342
  border: !!borderMark
345
343
  }
346
344
  }
347
- }, editorExperiment('add-media-from-url', true) && jsx(MediaBadges, {
345
+ }, fg('platform_editor_add_media_from_url_rollout') && jsx(MediaBadges, {
348
346
  mediaElement: mediaSingleElement,
349
347
  mediaWidth: width,
350
348
  mediaHeight: height,
351
349
  useMinimumZIndex: true
352
350
  }, ({
353
- badgeSize,
354
351
  visible
355
- }) => jsx(React.Fragment, null, fg('platform_editor_hide_external_media_badge') ? visible && jsx(ExternalImageBadge, {
356
- badgeSize: badgeSize,
352
+ }) => jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
357
353
  type: this.props.type,
358
354
  url: this.props.type === 'external' ? this.props.url : undefined
359
- }) : shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
360
- badgeSize: badgeSize
361
355
  }), showCommentBadge && jsx(CommentBadgeNextWrapper, {
362
356
  marks: annotationMarks,
363
357
  mediaSingleElement: mediaSingleElement,
364
- isDrafting: isDrafting,
365
- badgeSize: badgeSize
366
- }))), !editorExperiment('add-media-from-url', true) && showCommentBadge && jsx(CommentBadgeWrapper, {
358
+ isDrafting: isDrafting
359
+ }))), !fg('platform_editor_add_media_from_url_rollout') && showCommentBadge && jsx(CommentBadgeWrapper, {
367
360
  marks: annotationMarks,
368
361
  mediaSingleElement: mediaSingleElement,
369
362
  width: width,
package/dist/es2019/react/nodes/multiBodiedExtension.js CHANGED
@@ -7,116 +7,17 @@
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { jsx, css } from '@emotion/react';
10
- import { N40 } from '@atlaskit/theme/colors';
11
10
  import React, { useState } from 'react';
12
- import { renderExtension } from './extension';
13
- import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
11
+ import { WidthConsumer } from '@atlaskit/editor-common/ui';
14
12
  import { RendererCssClassName } from '../../consts';
15
13
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
16
14
  import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
17
15
  import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
18
- import { fg } from '@atlaskit/platform-feature-flags';
19
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
20
- const navigationStylesOld = css`
21
- ${sharedMultiBodiedExtensionStyles.mbeNavigation};
22
- margin-left: 0 !important;
23
- margin-right: 0 !important;
24
- .mbe-add-tab-button,
25
- .mbe-remove-tab {
26
- display: none;
27
- }
28
- `;
29
-
30
- // localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
31
- const navigationStylesNew = css({
32
- borderTopLeftRadius: "var(--ds-border-radius, 3px)",
33
- borderTopRightRadius: "var(--ds-border-radius, 3px)",
34
- userSelect: 'none',
35
- WebkitUserModify: 'read-only',
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
37
- borderBottom: 'none !important',
38
- background: "var(--ds-surface, white)",
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
40
- '&.remove-margins': {
41
- margin: "var(--ds-space-negative-100, -8px)"
42
- },
43
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
44
- '&.remove-border': {
45
- border: 'none'
46
- },
47
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
48
- marginLeft: '0 !important',
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
50
- marginRight: '0 !important',
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
52
- '.mbe-add-tab-button, .mbe-remove-tab': {
53
- display: 'none'
54
- }
55
- });
56
-
57
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
58
- const containerStylesOld = css`
59
- ${sharedMultiBodiedExtensionStyles.mbeExtensionContainer};
60
- .ak-renderer-extension {
61
- margin-top: 0 !important;
62
- }
63
-
64
- [data-layout='full-width'],
65
- [data-layout='wide'] {
66
- .multiBodiedExtension-navigation {
67
- border-right: 3px solid ${`var(--ds-border, ${N40})`} !important;
68
- }
69
- }
70
- `;
71
-
72
- // localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
73
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
74
- const containerStylesNew = css({
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
76
- background: 'transparent !important',
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
78
- 'padding:': {
79
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
80
- left: `${"var(--ds-space-100, 8px)"} !important`,
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
82
- right: `${"var(--ds-space-100, 8px)"} !important`
83
- },
84
- paddingBottom: "var(--ds-space-100, 8px)",
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
86
- '&.remove-padding': {
87
- paddingBottom: 0
88
- },
89
- position: 'relative',
90
- verticalAlign: 'middle',
91
- cursor: 'pointer',
92
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
93
- '.multiBodiedExtension-handler-result': {
94
- marginLeft: "var(--ds-space-100, 8px)"
95
- },
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
97
- ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
98
- display: 'none',
99
- background: 'transparent'
100
- },
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
102
- '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
104
- "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
105
- marginTop: 0
106
- }
107
- },
108
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
109
- '.ak-renderer-extension': {
110
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
111
- marginTop: '0 !important'
112
- },
113
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
114
- '[data-layout="full-width"], [data-layout="wide"]': {
115
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
116
- '.multiBodiedExtension-navigation': {
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
118
- borderRight: `3px solid ${`var(--ds-border, ${N40})`} !important`
119
- }
16
+ const containerStyles = css({
17
+ // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
18
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
19
+ '&:first-of-type > .ak-renderer-extension': {
20
+ marginTop: 0
120
21
  }
121
22
  });
122
23
  const MultiBodiedExtensionChildrenContainer = ({
@@ -124,18 +25,12 @@ const MultiBodiedExtensionChildrenContainer = ({
124
25
  }) => {
125
26
  return jsx("article", {
126
27
  "data-testid": "multiBodiedExtension--frames"
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
128
- ,
129
- className: `multiBodiedExtension--frames`
130
28
  }, children);
131
29
  };
132
30
  const MultiBodiedExtensionNavigation = ({
133
31
  children
134
32
  }) => {
135
33
  return jsx("nav", {
136
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
137
- className: "multiBodiedExtension-navigation",
138
- css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
139
34
  "data-testid": "multiBodiedExtension-navigation"
140
35
  }, children);
141
36
  };
@@ -147,16 +42,21 @@ const MultiBodiedExtensionWrapper = ({
147
42
  }) => {
148
43
  const isTopLevel = path.length < 1;
149
44
  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
45
+
46
+ // This hierarchy is copied from regular extension (see extension.tsx)
150
47
  return jsx("div", {
151
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
152
- className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`,
49
+ className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
153
50
  style: {
154
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
155
52
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
156
53
  },
157
54
  "data-layout": layout,
158
55
  "data-testid": "multiBodiedExtension--wrapper"
159
- }, children);
56
+ }, jsx("div", {
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
58
+ className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
59
+ }, children));
160
60
  };
161
61
  const MultiBodiedExtension = props => {
162
62
  var _extensionContext$pri;
@@ -204,48 +104,28 @@ const MultiBodiedExtension = props => {
204
104
  localId,
205
105
  fragmentLocalId
206
106
  };
207
- const renderMultiBodiedExtension = () => {
208
- const MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
107
+ if (privateProps.__allowBodiedOverride) {
108
+ return jsx(NodeRenderer, {
209
109
  node: node,
210
110
  actions: actions
211
111
  });
212
- try {
213
- if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
214
- // Return the content directly if it's a valid JSX.Element
215
- return renderExtension(MultiBodiedExtensionNodeRenderer, layout, {
216
- isTopLevel: path.length < 1
217
- });
218
- }
219
- } catch (e) {
220
- /** We don't want this error to block renderer */
221
- /** We keep rendering the default content */
222
- }
223
-
224
- // Always return default content if anything goes wrong
225
- return renderExtension(children, layout, {
226
- isTopLevel: path.length < 1
227
- });
228
- };
229
- if (privateProps.__allowBodiedOverride) {
230
- return renderMultiBodiedExtension();
231
112
  } else {
232
- return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
113
+ return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
114
+ node: node,
115
+ actions: actions
116
+ })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
233
117
  }
234
- }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
118
+ }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
235
119
 
120
+ // make the frame visible
236
121
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
237
122
  const containerActiveFrameStyles = css`
238
- .multiBodiedExtension--frames
239
- > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
123
+ & [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1}) {
240
124
  display: block;
241
- margin-left: 0;
242
- margin-right: 0;
243
125
  }
244
126
  `;
245
127
  return jsx("section", {
246
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
247
- className: "multiBodiedExtension--container",
248
- css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
128
+ css: [containerStyles, containerActiveFrameStyles],
249
129
  "data-testid": "multiBodiedExtension--container",
250
130
  "data-active-child-index": activeChildIndex,
251
131
  "data-layout": layout
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
48
48
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
49
49
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
50
50
  const packageName = "@atlaskit/renderer";
51
- const packageVersion = "114.4.4";
51
+ const packageVersion = "114.5.0";
52
52
  const setAsQueryContainerStyles = css({
53
53
  containerName: 'ak-renderer-wrapper',
54
54
  containerType: 'inline-size',
package/dist/es2019/ui/Renderer/style.js CHANGED
@@ -309,9 +309,9 @@ const tableSortableColumnStyle = ({
309
309
 
310
310
  &:hover:not(
311
311
  :has(
312
- .${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
313
- .${RendererCssClassName.SORTABLE_COLUMN}:hover
314
- )
312
+ .${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
313
+ .${RendererCssClassName.SORTABLE_COLUMN}:hover
314
+ )
315
315
  )
316
316
  > .${RendererCssClassName.SORTABLE_COLUMN}
317
317
  > .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
package/dist/esm/react/nodes/extensionFrame.js CHANGED
@@ -5,17 +5,20 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx, css } from '@emotion/react';
8
- import { sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
9
8
  import { fg } from '@atlaskit/platform-feature-flags';
10
- var containerCSS = css({
9
+ var containerCSSOld = css({
11
10
  minHeight: '100px',
12
11
  flexBasis: '100%'
13
12
  });
13
+ var containerCSSNew = css({
14
+ padding: "var(--ds-space-100, 8px)",
15
+ minHeight: '100px',
16
+ // by default all frames are hidden, this style is overridden in multiBodiedExtensions for active frame
17
+ display: 'none'
18
+ });
14
19
  var ExtensionFrame = function ExtensionFrame(props) {
15
20
  return jsx("div", {
16
- css: [containerCSS, fg('platform_editor_multi_body_extension_extensibility') &&
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
18
- sharedMultiBodiedExtensionStyles.extensionFrameContent],
21
+ css: [fg('platform_editor_multi_body_extension_extensibility') ? containerCSSNew : containerCSSOld],
19
22
  "data-extension-frame": "true"
20
23
  }, props.children);
21
24
  };
package/dist/esm/react/nodes/media/index.js CHANGED
@@ -42,7 +42,6 @@ import { injectIntl } from 'react-intl-next';
42
42
  import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
43
43
  import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
44
44
  import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
45
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
46
45
  import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
47
46
  var linkStyle = css({
48
47
  position: 'absolute',
@@ -362,7 +361,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
362
361
  var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
363
362
  var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
364
363
  var showCommentBadge = !!annotationMarks && !isInPageInclude && !isIncludeExcerpt;
365
- var shouldShowExternalMediaBadge = _this.props.type === 'external';
366
364
  return jsx(MediaLink, {
367
365
  mark: linkMark,
368
366
  onClick: _this.handleMediaLinkClickFn
@@ -374,27 +372,22 @@ var Media = /*#__PURE__*/function (_PureComponent) {
374
372
  data: _defineProperty({}, MEDIA_CONTEXT, {
375
373
  border: !!borderMark
376
374
  })
377
- }, editorExperiment('add-media-from-url', true) && jsx(MediaBadges, {
375
+ }, fg('platform_editor_add_media_from_url_rollout') && jsx(MediaBadges, {
378
376
  mediaElement: mediaSingleElement,
379
377
  mediaWidth: width,
380
378
  mediaHeight: height,
381
379
  useMinimumZIndex: true
382
380
  }, function (_ref9) {
383
- var badgeSize = _ref9.badgeSize,
384
- visible = _ref9.visible;
385
- return jsx(React.Fragment, null, fg('platform_editor_hide_external_media_badge') ? visible && jsx(ExternalImageBadge, {
386
- badgeSize: badgeSize,
381
+ var visible = _ref9.visible;
382
+ return jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
387
383
  type: _this.props.type,
388
384
  url: _this.props.type === 'external' ? _this.props.url : undefined
389
- }) : shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
390
- badgeSize: badgeSize
391
385
  }), showCommentBadge && jsx(CommentBadgeNextWrapper, {
392
386
  marks: annotationMarks,
393
387
  mediaSingleElement: mediaSingleElement,
394
- isDrafting: isDrafting,
395
- badgeSize: badgeSize
388
+ isDrafting: isDrafting
396
389
  }));
397
- }), !editorExperiment('add-media-from-url', true) && showCommentBadge && jsx(CommentBadgeWrapper, {
390
+ }), !fg('platform_editor_add_media_from_url_rollout') && showCommentBadge && jsx(CommentBadgeWrapper, {
398
391
  marks: annotationMarks,
399
392
  mediaSingleElement: mediaSingleElement,
400
393
  width: width,
package/dist/esm/react/nodes/multiBodiedExtension.js CHANGED
@@ -1,6 +1,6 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- var _templateObject, _templateObject2, _templateObject3;
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ var _templateObject;
4
4
  /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
5
5
  /**
6
6
  * @jsxRuntime classic
@@ -10,113 +10,28 @@ var _templateObject, _templateObject2, _templateObject3;
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
12
  import { jsx, css } from '@emotion/react';
13
- import { N40 } from '@atlaskit/theme/colors';
14
13
  import React, { useState } from 'react';
15
- import { renderExtension } from './extension';
16
- import { WidthConsumer, sharedMultiBodiedExtensionStyles } from '@atlaskit/editor-common/ui';
14
+ import { WidthConsumer } from '@atlaskit/editor-common/ui';
17
15
  import { RendererCssClassName } from '../../consts';
18
16
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
19
17
  import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
20
18
  import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
21
- import { fg } from '@atlaskit/platform-feature-flags';
22
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
23
- var navigationStylesOld = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
24
-
25
- // localized sharedMultiBodiedExtensionStyles.mbeNavigation in navigationCssExtendedNew
26
- var navigationStylesNew = css({
27
- borderTopLeftRadius: "var(--ds-border-radius, 3px)",
28
- borderTopRightRadius: "var(--ds-border-radius, 3px)",
29
- userSelect: 'none',
30
- WebkitUserModify: 'read-only',
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
32
- borderBottom: 'none !important',
33
- background: "var(--ds-surface, white)",
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
35
- '&.remove-margins': {
36
- margin: "var(--ds-space-negative-100, -8px)"
37
- },
38
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
39
- '&.remove-border': {
40
- border: 'none'
41
- },
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
43
- marginLeft: '0 !important',
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
45
- marginRight: '0 !important',
46
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
47
- '.mbe-add-tab-button, .mbe-remove-tab': {
48
- display: 'none'
49
- }
50
- });
51
-
52
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
53
- var containerStylesOld = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", ";\n\t.ak-renderer-extension {\n\t\tmargin-top: 0 !important;\n\t}\n\n\t[data-layout='full-width'],\n\t[data-layout='wide'] {\n\t\t.multiBodiedExtension-navigation {\n\t\t\tborder-right: 3px solid ", " !important;\n\t\t}\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"));
54
-
55
- // localized sharedMultiBodiedExtensionStyles.mbeExtensionContainer in containerStylesNew
56
- // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
57
- var containerStylesNew = css({
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
59
- background: 'transparent !important',
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
61
- 'padding:': {
62
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
63
- left: "var(--ds-space-100, 8px)".concat(" !important"),
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
65
- right: "var(--ds-space-100, 8px)".concat(" !important")
66
- },
67
- paddingBottom: "var(--ds-space-100, 8px)",
68
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
69
- '&.remove-padding': {
70
- paddingBottom: 0
71
- },
72
- position: 'relative',
73
- verticalAlign: 'middle',
74
- cursor: 'pointer',
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
76
- '.multiBodiedExtension-handler-result': {
77
- marginLeft: "var(--ds-space-100, 8px)"
78
- },
79
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
80
- ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
81
- display: 'none',
82
- background: 'transparent'
83
- },
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
85
- '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
87
- "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
88
- marginTop: 0
89
- }
90
- },
91
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
92
- '.ak-renderer-extension': {
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
94
- marginTop: '0 !important'
95
- },
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
97
- '[data-layout="full-width"], [data-layout="wide"]': {
98
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
99
- '.multiBodiedExtension-navigation': {
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
101
- borderRight: "3px solid ".concat("var(--ds-border, ".concat(N40, ")"), " !important")
102
- }
19
+ var containerStyles = css({
20
+ // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
22
+ '&:first-of-type > .ak-renderer-extension': {
23
+ marginTop: 0
103
24
  }
104
25
  });
105
26
  var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
106
27
  var children = _ref.children;
107
28
  return jsx("article", {
108
29
  "data-testid": "multiBodiedExtension--frames"
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
110
- ,
111
- className: "multiBodiedExtension--frames"
112
30
  }, children);
113
31
  };
114
32
  var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_ref2) {
115
33
  var children = _ref2.children;
116
34
  return jsx("nav", {
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
118
- className: "multiBodiedExtension-navigation",
119
- css: fg('platform_editor_emotion_refactor_renderer') ? navigationStylesNew : navigationStylesOld,
120
35
  "data-testid": "multiBodiedExtension-navigation"
121
36
  }, children);
122
37
  };
@@ -127,16 +42,21 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
127
42
  children = _ref3.children;
128
43
  var isTopLevel = path.length < 1;
129
44
  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
45
+
46
+ // This hierarchy is copied from regular extension (see extension.tsx)
130
47
  return jsx("div", {
131
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
132
- className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER),
49
+ className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
133
50
  style: {
134
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
135
52
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
136
53
  },
137
54
  "data-layout": layout,
138
55
  "data-testid": "multiBodiedExtension--wrapper"
139
- }, children);
56
+ }, jsx("div", {
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
58
+ className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
59
+ }, children));
140
60
  };
141
61
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
142
62
  var _extensionContext$pri;
@@ -186,41 +106,24 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
186
106
  localId: localId,
187
107
  fragmentLocalId: fragmentLocalId
188
108
  };
189
- var renderMultiBodiedExtension = function renderMultiBodiedExtension() {
190
- var MultiBodiedExtensionNodeRenderer = jsx(NodeRenderer, {
109
+ if (privateProps.__allowBodiedOverride) {
110
+ return jsx(NodeRenderer, {
191
111
  node: node,
192
112
  actions: actions
193
113
  });
194
- try {
195
- if ( /*#__PURE__*/React.isValidElement(MultiBodiedExtensionNodeRenderer)) {
196
- // Return the content directly if it's a valid JSX.Element
197
- return renderExtension(MultiBodiedExtensionNodeRenderer, layout, {
198
- isTopLevel: path.length < 1
199
- });
200
- }
201
- } catch (e) {
202
- /** We don't want this error to block renderer */
203
- /** We keep rendering the default content */
204
- }
205
-
206
- // Always return default content if anything goes wrong
207
- return renderExtension(children, layout, {
208
- isTopLevel: path.length < 1
209
- });
210
- };
211
- if (privateProps.__allowBodiedOverride) {
212
- return renderMultiBodiedExtension();
213
114
  } else {
214
- return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, renderMultiBodiedExtension()), jsx(MultiBodiedExtensionChildrenContainer, null, children));
115
+ return jsx(React.Fragment, null, jsx(MultiBodiedExtensionNavigation, null, jsx(NodeRenderer, {
116
+ node: node,
117
+ actions: actions
118
+ })), jsx(MultiBodiedExtensionChildrenContainer, null, children));
215
119
  }
216
- }, [loading, extensionContext, layout, path, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
120
+ }, [loading, extensionContext, marks, extensionKey, extensionType, parameters, content, localId, actions, children]);
217
121
 
122
+ // make the frame visible
218
123
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
219
- var containerActiveFrameStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), activeChildIndex + 1);
124
+ var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
220
125
  return jsx("section", {
221
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
222
- className: "multiBodiedExtension--container",
223
- css: [fg('platform_editor_emotion_refactor_renderer') ? containerStylesNew : containerStylesOld, containerActiveFrameStyles],
126
+ css: [containerStyles, containerActiveFrameStyles],
224
127
  "data-testid": "multiBodiedExtension--container",
225
128
  "data-active-child-index": activeChildIndex,
226
129
  "data-layout": layout
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
57
57
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
58
58
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
59
59
  var packageName = "@atlaskit/renderer";
60
- var packageVersion = "114.4.4";
60
+ var packageVersion = "114.5.0";
61
61
  var setAsQueryContainerStyles = css({
62
62
  containerName: 'ak-renderer-wrapper',
63
63
  containerType: 'inline-size',
package/dist/esm/ui/Renderer/style.js CHANGED
@@ -115,7 +115,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
115
115
  if (allowNestedHeaderLinks) {
116
116
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
117
117
  }
118
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
118
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
119
119
  };
120
120
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
121
121
  var appearance = _ref3.appearance;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "114.4.4",
3
+ "version": "114.5.0",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/status": "^3.0.0",
55
55
  "@atlaskit/task-decision": "^19.1.0",
56
56
  "@atlaskit/theme": "^18.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^4.2.0",
57
+ "@atlaskit/tmp-editor-statsig": "^4.4.0",
58
58
  "@atlaskit/tokens": "^4.5.0",
59
59
  "@atlaskit/tooltip": "^20.0.0",
60
60
  "@atlaskit/visually-hidden": "^3.0.0",
@@ -153,9 +153,6 @@
153
153
  "platform_editor_use_nested_table_pm_nodes": {
154
154
  "type": "boolean"
155
155
  },
156
- "platform_editor_hide_external_media_badge": {
157
- "type": "boolean"
158
- },
159
156
  "platform_editor_hyperlink_underline": {
160
157
  "type": "boolean"
161
158
  },
@@ -204,6 +201,9 @@
204
201
  "type": "boolean",
205
202
  "referenceOnly": true
206
203
  },
204
+ "platform_editor_add_media_from_url_rollout": {
205
+ "type": "boolean"
206
+ },
207
207
  "platform_editor_tables_numbered_column_correction": {
208
208
  "type": "boolean"
209
209
  }