@atlaskit/renderer 120.2.4 → 120.2.6

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 (20) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/afm-cc/tsconfig.json +128 -128
  3. package/dist/cjs/react/nodes/inlineCard.js +62 -14
  4. package/dist/cjs/react/nodes/table.js +3 -1
  5. package/dist/cjs/react/nodes/tableNew.js +3 -1
  6. package/dist/cjs/ui/Renderer/RendererStyleContainer.js +28 -6
  7. package/dist/cjs/ui/Renderer/index.js +1 -1
  8. package/dist/es2019/react/nodes/inlineCard.js +45 -6
  9. package/dist/es2019/react/nodes/table.js +3 -1
  10. package/dist/es2019/react/nodes/tableNew.js +3 -1
  11. package/dist/es2019/ui/Renderer/RendererStyleContainer.js +28 -3
  12. package/dist/es2019/ui/Renderer/index.js +1 -1
  13. package/dist/esm/react/nodes/inlineCard.js +53 -6
  14. package/dist/esm/react/nodes/table.js +3 -1
  15. package/dist/esm/react/nodes/tableNew.js +3 -1
  16. package/dist/esm/ui/Renderer/RendererStyleContainer.js +29 -7
  17. package/dist/esm/ui/Renderer/index.js +1 -1
  18. package/dist/types/react/nodes/inlineCard.d.ts +2 -0
  19. package/dist/types-ts4.5/react/nodes/inlineCard.d.ts +2 -0
  20. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 120.2.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#190768](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190768)
8
+ [`45e3e754cfcc1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45e3e754cfcc1) -
9
+ [ux] Add open and panel hover buttons to inline smart card
10
+
11
+ ## 120.2.5
12
+
13
+ ### Patch Changes
14
+
15
+ - [#189276](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189276)
16
+ [`95e1796eaa4d0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/95e1796eaa4d0) -
17
+ [ux] Applies reduced padding in Full page renderer on narrow screens.
18
+ - Updated dependencies
19
+
3
20
  ## 120.2.4
4
21
 
5
22
  ### Patch Changes
package/afm-cc/tsconfig.json CHANGED
@@ -1,129 +1,129 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.confluence.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "composite": true,
7
- "outDir": "../../../../../confluence/tsDist/@atlaskit__renderer",
8
- "rootDir": "../"
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*"
18
- ],
19
- "references": [
20
- {
21
- "path": "../../adf-utils/afm-cc/tsconfig.json"
22
- },
23
- {
24
- "path": "../../../analytics/analytics-listeners/afm-cc/tsconfig.json"
25
- },
26
- {
27
- "path": "../../../analytics/analytics-namespaced-context/afm-cc/tsconfig.json"
28
- },
29
- {
30
- "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
31
- },
32
- {
33
- "path": "../../../design-system/button/afm-cc/tsconfig.json"
34
- },
35
- {
36
- "path": "../../../design-system/code/afm-cc/tsconfig.json"
37
- },
38
- {
39
- "path": "../../editor-json-transformer/afm-cc/tsconfig.json"
40
- },
41
- {
42
- "path": "../../editor-palette/afm-cc/tsconfig.json"
43
- },
44
- {
45
- "path": "../../editor-shared-styles/afm-cc/tsconfig.json"
46
- },
47
- {
48
- "path": "../../editor-tables/afm-cc/tsconfig.json"
49
- },
50
- {
51
- "path": "../../../elements/emoji/afm-cc/tsconfig.json"
52
- },
53
- {
54
- "path": "../../../measurement/feature-gate-js-client/afm-cc/tsconfig.json"
55
- },
56
- {
57
- "path": "../../../design-system/icon/afm-cc/tsconfig.json"
58
- },
59
- {
60
- "path": "../../../design-system/link/afm-cc/tsconfig.json"
61
- },
62
- {
63
- "path": "../../../linking-platform/link-datasource/afm-cc/tsconfig.json"
64
- },
65
- {
66
- "path": "../../../media/media-card/afm-cc/tsconfig.json"
67
- },
68
- {
69
- "path": "../../../media/media-client/afm-cc/tsconfig.json"
70
- },
71
- {
72
- "path": "../../../media/media-client-react/afm-cc/tsconfig.json"
73
- },
74
- {
75
- "path": "../../../media/media-common/afm-cc/tsconfig.json"
76
- },
77
- {
78
- "path": "../../../media/media-filmstrip/afm-cc/tsconfig.json"
79
- },
80
- {
81
- "path": "../../../media/media-ui/afm-cc/tsconfig.json"
82
- },
83
- {
84
- "path": "../../../media/media-viewer/afm-cc/tsconfig.json"
85
- },
86
- {
87
- "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
88
- },
89
- {
90
- "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
91
- },
92
- {
93
- "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
94
- },
95
- {
96
- "path": "../../../linking-platform/smart-card/afm-cc/tsconfig.json"
97
- },
98
- {
99
- "path": "../../../elements/status/afm-cc/tsconfig.json"
100
- },
101
- {
102
- "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
103
- },
104
- {
105
- "path": "../../../design-system/theme/afm-cc/tsconfig.json"
106
- },
107
- {
108
- "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
109
- },
110
- {
111
- "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
112
- },
113
- {
114
- "path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
115
- },
116
- {
117
- "path": "../../../design-system/visually-hidden/afm-cc/tsconfig.json"
118
- },
119
- {
120
- "path": "../../editor-common/afm-cc/tsconfig.json"
121
- },
122
- {
123
- "path": "../../../linking-platform/link-provider/afm-cc/tsconfig.json"
124
- },
125
- {
126
- "path": "../../../media/media-core/afm-cc/tsconfig.json"
127
- }
128
- ]
129
- }
2
+ "extends": "../../../../tsconfig.entry-points.confluence.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "composite": true,
7
+ "outDir": "../../../../../confluence/tsDist/@atlaskit__renderer",
8
+ "rootDir": "../"
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*"
18
+ ],
19
+ "references": [
20
+ {
21
+ "path": "../../adf-utils/afm-cc/tsconfig.json"
22
+ },
23
+ {
24
+ "path": "../../../analytics/analytics-listeners/afm-cc/tsconfig.json"
25
+ },
26
+ {
27
+ "path": "../../../analytics/analytics-namespaced-context/afm-cc/tsconfig.json"
28
+ },
29
+ {
30
+ "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
31
+ },
32
+ {
33
+ "path": "../../../design-system/button/afm-cc/tsconfig.json"
34
+ },
35
+ {
36
+ "path": "../../../design-system/code/afm-cc/tsconfig.json"
37
+ },
38
+ {
39
+ "path": "../../editor-json-transformer/afm-cc/tsconfig.json"
40
+ },
41
+ {
42
+ "path": "../../editor-palette/afm-cc/tsconfig.json"
43
+ },
44
+ {
45
+ "path": "../../editor-shared-styles/afm-cc/tsconfig.json"
46
+ },
47
+ {
48
+ "path": "../../editor-tables/afm-cc/tsconfig.json"
49
+ },
50
+ {
51
+ "path": "../../../elements/emoji/afm-cc/tsconfig.json"
52
+ },
53
+ {
54
+ "path": "../../../measurement/feature-gate-js-client/afm-cc/tsconfig.json"
55
+ },
56
+ {
57
+ "path": "../../../design-system/icon/afm-cc/tsconfig.json"
58
+ },
59
+ {
60
+ "path": "../../../design-system/link/afm-cc/tsconfig.json"
61
+ },
62
+ {
63
+ "path": "../../../linking-platform/link-datasource/afm-cc/tsconfig.json"
64
+ },
65
+ {
66
+ "path": "../../../media/media-card/afm-cc/tsconfig.json"
67
+ },
68
+ {
69
+ "path": "../../../media/media-client/afm-cc/tsconfig.json"
70
+ },
71
+ {
72
+ "path": "../../../media/media-client-react/afm-cc/tsconfig.json"
73
+ },
74
+ {
75
+ "path": "../../../media/media-common/afm-cc/tsconfig.json"
76
+ },
77
+ {
78
+ "path": "../../../media/media-filmstrip/afm-cc/tsconfig.json"
79
+ },
80
+ {
81
+ "path": "../../../media/media-ui/afm-cc/tsconfig.json"
82
+ },
83
+ {
84
+ "path": "../../../media/media-viewer/afm-cc/tsconfig.json"
85
+ },
86
+ {
87
+ "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
88
+ },
89
+ {
90
+ "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
91
+ },
92
+ {
93
+ "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
94
+ },
95
+ {
96
+ "path": "../../../linking-platform/smart-card/afm-cc/tsconfig.json"
97
+ },
98
+ {
99
+ "path": "../../../elements/status/afm-cc/tsconfig.json"
100
+ },
101
+ {
102
+ "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
103
+ },
104
+ {
105
+ "path": "../../../design-system/theme/afm-cc/tsconfig.json"
106
+ },
107
+ {
108
+ "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
109
+ },
110
+ {
111
+ "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
112
+ },
113
+ {
114
+ "path": "../../../design-system/tooltip/afm-cc/tsconfig.json"
115
+ },
116
+ {
117
+ "path": "../../../design-system/visually-hidden/afm-cc/tsconfig.json"
118
+ },
119
+ {
120
+ "path": "../../editor-common/afm-cc/tsconfig.json"
121
+ },
122
+ {
123
+ "path": "../../../linking-platform/link-provider/afm-cc/tsconfig.json"
124
+ },
125
+ {
126
+ "path": "../../../media/media-core/afm-cc/tsconfig.json"
127
+ }
128
+ ]
129
+ }
package/dist/cjs/react/nodes/inlineCard.js CHANGED
@@ -6,29 +6,47 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _react = require("@emotion/react");
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _react = require("react");
11
+ var _react2 = require("@emotion/react");
12
+ var _linkProvider = require("@atlaskit/link-provider");
10
13
  var _smartCard = require("@atlaskit/smart-card");
11
14
  var _ssr = require("@atlaskit/smart-card/ssr");
12
15
  var _ui = require("@atlaskit/editor-common/ui");
13
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
+ var _analyticsNext = require("@atlaskit/analytics-next");
18
+ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
14
19
  var _fallback = require("./fallback");
15
20
  var _SmartCardStorage = require("../../ui/SmartCardStorage");
16
21
  var _getCardClickHandler = require("../utils/getCardClickHandler");
17
- var _analyticsNext = require("@atlaskit/analytics-next");
18
22
  var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
19
23
  var _PortalContext = require("../../ui/Renderer/PortalContext");
20
24
  /**
21
25
  * @jsxRuntime classic
22
26
  * @jsx jsx
23
27
  */
28
+
24
29
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
30
 
31
+ var HoverLinkOverlayNoop = function HoverLinkOverlayNoop(props) {
32
+ return (0, _react2.jsx)("div", null, props.children);
33
+ };
34
+ var HoverLinkOverlayWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
35
+ return (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
36
+ }, _ui.HoverLinkOverlay, HoverLinkOverlayNoop);
26
37
  var InlineCard = function InlineCard(props) {
38
+ var _cardContext$value, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
27
39
  var url = props.url,
28
40
  data = props.data,
29
41
  eventHandlers = props.eventHandlers,
30
- smartLinks = props.smartLinks;
42
+ smartLinks = props.smartLinks,
43
+ rendererAppearance = props.rendererAppearance;
31
44
  var portal = (0, _PortalContext.usePortal)(props);
45
+ var cardContext = (0, _linkProvider.useSmartCardContext)();
46
+ var _useState = (0, _react.useState)(false),
47
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
48
+ isResolvedViewRendered = _useState2[0],
49
+ setIsResolvedViewRendered = _useState2[1];
32
50
  var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
33
51
  var cardProps = {
34
52
  url: url,
@@ -49,7 +67,7 @@ var InlineCard = function InlineCard(props) {
49
67
  };
50
68
  var inlineAnnotationProps = (0, _useInlineAnnotationProps.useInlineAnnotationProps)(props);
51
69
  var CompetitorPrompt = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.CompetitorPrompt;
52
- var CompetitorPromptComponent = CompetitorPrompt && url && (0, _platformFeatureFlags.fg)('prompt_whiteboard_competitor_link_gate') ? (0, _react.jsx)(CompetitorPrompt, {
70
+ var CompetitorPromptComponent = CompetitorPrompt && url && (0, _platformFeatureFlags.fg)('prompt_whiteboard_competitor_link_gate') ? (0, _react2.jsx)(CompetitorPrompt, {
53
71
  sourceUrl: url,
54
72
  linkType: "inline"
55
73
  }) : null;
@@ -57,15 +75,15 @@ var InlineCard = function InlineCard(props) {
57
75
  if (
58
76
  // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
59
77
  (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
60
- return (0, _react.jsx)("span", (0, _extends2.default)({
78
+ return (0, _react2.jsx)("span", (0, _extends2.default)({
61
79
  "data-inline-card": true,
62
80
  "data-card-data": data ? JSON.stringify(data) : undefined,
63
81
  "data-card-url": url
64
82
  // Ignored via go/ees005
65
83
  // eslint-disable-next-line react/jsx-props-no-spreading
66
- }, inlineAnnotationProps), (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
84
+ }, inlineAnnotationProps), (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
67
85
  data: analyticsData
68
- }, (0, _react.jsx)(_ssr.CardSSR, {
86
+ }, (0, _react2.jsx)(_ssr.CardSSR, {
69
87
  appearance: "inline",
70
88
  url: url,
71
89
  showHoverPreview: !hideHoverPreview,
@@ -73,9 +91,9 @@ var InlineCard = function InlineCard(props) {
73
91
  onClick: onClick
74
92
  })));
75
93
  }
76
- return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
94
+ return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
77
95
  data: analyticsData
78
- }, (0, _react.jsx)(_ssr.CardSSR, {
96
+ }, (0, _react2.jsx)(_ssr.CardSSR, {
79
97
  appearance: "inline",
80
98
  url: url,
81
99
  showHoverPreview: !hideHoverPreview,
@@ -89,19 +107,46 @@ var InlineCard = function InlineCard(props) {
89
107
  throw err;
90
108
  }
91
109
  };
92
- return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
110
+ var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url || ''];
111
+ var ari = (0, _smartCard.getObjectAri)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
112
+ var name = (0, _smartCard.getObjectName)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
113
+ var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
114
+ var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
115
+ ari: ari
116
+ }));
117
+ var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
118
+ var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
119
+ if (openPreviewPanel && isPanelAvailable) {
120
+ // Prevent anchor default behaviour(click to open the anchor link)
121
+ // When glance panel is available, let openPreviewPanel handle it
122
+ event.preventDefault();
123
+ openPreviewPanel({
124
+ url: url || '',
125
+ ari: ari,
126
+ name: name || '',
127
+ iconUrl: iconUrl
128
+ });
129
+ }
130
+ };
131
+ return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
93
132
  data: analyticsData
94
- }, (0, _react.jsx)("span", (0, _extends2.default)({
133
+ }, (0, _react2.jsx)("span", (0, _extends2.default)({
95
134
  "data-inline-card": true,
96
135
  "data-card-data": data ? JSON.stringify(data) : undefined,
97
136
  "data-card-url": url
98
137
  // Ignored via go/ees005
99
138
  // eslint-disable-next-line react/jsx-props-no-spreading
100
- }, inlineAnnotationProps), (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
139
+ }, inlineAnnotationProps), (0, _react2.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
101
140
  unsupportedComponent: _ui.UnsupportedInline
102
141
  // Ignored via go/ees005
103
142
  // eslint-disable-next-line react/jsx-props-no-spreading
104
- }, cardProps), (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
143
+ }, cardProps), (0, _react2.jsx)(HoverLinkOverlayWithCondition, {
144
+ isVisible: isResolvedViewRendered,
145
+ url: url || '',
146
+ compactPadding: rendererAppearance === 'comment',
147
+ showPanelButton: !!isPanelAvailable,
148
+ onClick: handleOpenGlancePanelClick
149
+ }, (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
105
150
  appearance: "inline",
106
151
  showHoverPreview: !hideHoverPreview,
107
152
  actionOptions: actionOptions
@@ -113,8 +158,11 @@ var InlineCard = function InlineCard(props) {
113
158
  return;
114
159
  }
115
160
  props.smartCardStorage.set(data.url, data.title);
161
+ if (data.title) {
162
+ setIsResolvedViewRendered(true);
163
+ }
116
164
  },
117
165
  onError: onError
118
- })), CompetitorPromptComponent)));
166
+ }))), CompetitorPromptComponent)));
119
167
  };
120
168
  var _default = exports.default = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
package/dist/cjs/react/nodes/table.js CHANGED
@@ -30,6 +30,7 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
30
30
  var _sticky = require("./table/sticky");
31
31
  var _table = require("./table/table");
32
32
  var _appearance = require("../utils/appearance");
33
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
33
34
  var _TableStickyScrollbar = require("./TableStickyScrollbar");
34
35
  var _tableNew = require("./tableNew");
35
36
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -425,7 +426,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
425
426
  // Please consider changes below carefully to not negatively impact SSR
426
427
  // `renderWidth` cannot be depended on during SSR
427
428
  var isRenderWidthValid = !!renderWidth && renderWidth > 0;
428
- var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
429
+ var fullPageRendererWidthCSS = (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
430
+ var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
429
431
  var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
430
432
  if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
431
433
  return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
package/dist/cjs/react/nodes/tableNew.js CHANGED
@@ -16,6 +16,7 @@ var _styles = require("@atlaskit/editor-common/styles");
16
16
  var _nodeWidth = require("@atlaskit/editor-common/node-width");
17
17
  var _style = require("../../ui/Renderer/style");
18
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
19
20
  var _utils = require("@atlaskit/editor-common/utils");
20
21
  var _types = require("@atlaskit/editor-common/types");
21
22
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -399,7 +400,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
399
400
  var stickyMode = this.state.stickyMode;
400
401
  var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
401
402
  var updatedLayout;
402
- var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
403
+ var fullPageRendererWidthCSS = (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
404
+ var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
403
405
  var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
404
406
  if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
405
407
  return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
package/dist/cjs/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -24,7 +24,7 @@ var _table2 = require("@atlaskit/editor-common/table");
24
24
  var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
25
25
  var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
26
26
  var _getBaseFontSize = require("./get-base-font-size");
27
- var _css, _css5;
27
+ var _css, _css7;
28
28
  /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
29
29
  /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
30
30
  /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -154,6 +154,15 @@ var responsiveBreakoutWidthFullWidth = (0, _react.css)((0, _defineProperty2.defa
154
154
  }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
155
155
  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
156
156
  }));
157
+ var responsiveBreakoutWidthWithReducedPadding = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({
158
+ '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)",
159
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
160
+ '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
161
+ }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
162
+ '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
163
+ }), "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
164
+ '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
165
+ }));
157
166
  var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
158
167
  '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
159
168
  '&:focus-within': {
@@ -173,6 +182,16 @@ var rendererFullPageStyles = (0, _react.css)({
173
182
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
174
183
  padding: "0 ".concat(_style.FullPagePadding, "px")
175
184
  });
185
+ var rendererFullPageStylesWithReducedPadding = (0, _react.css)((0, _defineProperty2.default)({
186
+ '--ak-renderer--full-page-gutter': "".concat(_style.FullPagePadding, "px"),
187
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
188
+ maxWidth: "".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px"),
189
+ margin: '0 auto',
190
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
191
+ padding: "0 var(--ak-renderer--full-page-gutter)"
192
+ }, "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
193
+ '--ak-renderer--full-page-gutter': "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
194
+ }));
176
195
  var rendererFullWidthStyles = (0, _react.css)({
177
196
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
178
197
  maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px"),
@@ -491,13 +510,13 @@ var paragraphSharedStyles = (0, _react.css)({
491
510
  letterSpacing: '-0.005em'
492
511
  }
493
512
  });
494
- var listsSharedStyles = (0, _react.css)((_css5 = {
513
+ var listsSharedStyles = (0, _react.css)((_css7 = {
495
514
  /* =============== INDENTATION SPACING ========= */
496
515
  'ul, ol': {
497
516
  boxSizing: 'border-box',
498
517
  paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
499
518
  }
500
- }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css5, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
519
+ }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css7, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
501
520
  /*
502
521
  Ensures list item content adheres to the list's margin instead
503
522
  of filling the entire block row. This is important to allow
@@ -529,7 +548,7 @@ var listsSharedStyles = (0, _react.css)((_css5 = {
529
548
  listStyleType: 'lower-alpha'
530
549
  }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
531
550
  listStyleType: 'lower-roman'
532
- }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
551
+ }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css7, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
533
552
  listStyleType: 'disc'
534
553
  }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
535
554
  listStyleType: 'circle'
@@ -1415,6 +1434,9 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
1415
1434
  innerRef = props.innerRef,
1416
1435
  testId = props.testId;
1417
1436
  var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
1437
+ var isPreviewPanelResponsivenessOn = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
1438
+ exposure: true
1439
+ });
1418
1440
  return (
1419
1441
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
1420
1442
  (0, _react.jsx)("div", {
@@ -1431,13 +1453,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
1431
1453
  '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
1432
1454
  '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
1433
1455
  },
1434
- css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
1456
+ css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
1435
1457
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1436
1458
  (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
1437
1459
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
1438
1460
  (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
1439
1461
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1440
- (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
1462
+ (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
1441
1463
  "data-testid": testId
1442
1464
  }, children)
1443
1465
  );
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
63
63
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
64
64
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
65
65
  var packageName = "@atlaskit/renderer";
66
- var packageVersion = "120.2.3";
66
+ var packageVersion = "120.2.5";
67
67
  var setAsQueryContainerStyles = (0, _react2.css)({
68
68
  containerName: 'ak-renderer-wrapper',
69
69
  containerType: 'inline-size'
package/dist/es2019/react/nodes/inlineCard.js CHANGED
@@ -3,26 +3,35 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  * @jsxRuntime classic
4
4
  * @jsx jsx
5
5
  */
6
+ import { useState } from 'react';
6
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
8
  import { jsx } from '@emotion/react';
8
- import { Card } from '@atlaskit/smart-card';
9
+ import { useSmartCardContext } from '@atlaskit/link-provider';
10
+ import { Card, getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
9
11
  import { CardSSR } from '@atlaskit/smart-card/ssr';
10
- import { UnsupportedInline } from '@atlaskit/editor-common/ui';
12
+ import { HoverLinkOverlay, UnsupportedInline } from '@atlaskit/editor-common/ui';
11
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
+ import { AnalyticsContext } from '@atlaskit/analytics-next';
15
+ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
12
16
  import { CardErrorBoundary } from './fallback';
13
17
  import { withSmartCardStorage } from '../../ui/SmartCardStorage';
14
18
  import { getCardClickHandler } from '../utils/getCardClickHandler';
15
- import { AnalyticsContext } from '@atlaskit/analytics-next';
16
19
  import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
17
20
  import { usePortal } from '../../ui/Renderer/PortalContext';
21
+ const HoverLinkOverlayNoop = props => jsx("div", null, props.children);
22
+ const HoverLinkOverlayWithCondition = componentWithCondition(() => fg('platform_editor_preview_panel_linking'), HoverLinkOverlay, HoverLinkOverlayNoop);
18
23
  const InlineCard = props => {
24
+ var _cardContext$value, _cardContext$value$st, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
19
25
  const {
20
26
  url,
21
27
  data,
22
28
  eventHandlers,
23
- smartLinks
29
+ smartLinks,
30
+ rendererAppearance
24
31
  } = props;
25
32
  const portal = usePortal(props);
33
+ const cardContext = useSmartCardContext();
34
+ const [isResolvedViewRendered, setIsResolvedViewRendered] = useState(false);
26
35
  const onClick = getCardClickHandler(eventHandlers, url);
27
36
  const cardProps = {
28
37
  url,
@@ -85,6 +94,27 @@ const InlineCard = props => {
85
94
  throw err;
86
95
  }
87
96
  };
97
+ const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[url || ''];
98
+ const ari = getObjectAri(cardState === null || cardState === void 0 ? void 0 : cardState.details);
99
+ const name = getObjectName(cardState === null || cardState === void 0 ? void 0 : cardState.details);
100
+ const iconUrl = getObjectIconUrl(cardState === null || cardState === void 0 ? void 0 : cardState.details);
101
+ const isPanelAvailable = ari && (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
102
+ ari
103
+ }));
104
+ const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
105
+ const handleOpenGlancePanelClick = event => {
106
+ if (openPreviewPanel && isPanelAvailable) {
107
+ // Prevent anchor default behaviour(click to open the anchor link)
108
+ // When glance panel is available, let openPreviewPanel handle it
109
+ event.preventDefault();
110
+ openPreviewPanel({
111
+ url: url || '',
112
+ ari,
113
+ name: name || '',
114
+ iconUrl
115
+ });
116
+ }
117
+ };
88
118
  return jsx(AnalyticsContext, {
89
119
  data: analyticsData
90
120
  }, jsx("span", _extends({
@@ -97,7 +127,13 @@ const InlineCard = props => {
97
127
  unsupportedComponent: UnsupportedInline
98
128
  // Ignored via go/ees005
99
129
  // eslint-disable-next-line react/jsx-props-no-spreading
100
- }, cardProps), jsx(Card, _extends({
130
+ }, cardProps), jsx(HoverLinkOverlayWithCondition, {
131
+ isVisible: isResolvedViewRendered,
132
+ url: url || '',
133
+ compactPadding: rendererAppearance === 'comment',
134
+ showPanelButton: !!isPanelAvailable,
135
+ onClick: handleOpenGlancePanelClick
136
+ }, jsx(Card, _extends({
101
137
  appearance: "inline",
102
138
  showHoverPreview: !hideHoverPreview,
103
139
  actionOptions: actionOptions
@@ -109,8 +145,11 @@ const InlineCard = props => {
109
145
  return;
110
146
  }
111
147
  props.smartCardStorage.set(data.url, data.title);
148
+ if (data.title) {
149
+ setIsResolvedViewRendered(true);
150
+ }
112
151
  },
113
152
  onError: onError
114
- })), CompetitorPromptComponent)));
153
+ }))), CompetitorPromptComponent)));
115
154
  };
116
155
  export default withSmartCardStorage(InlineCard);
package/dist/es2019/react/nodes/table.js CHANGED
@@ -17,6 +17,7 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
17
17
  import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
18
18
  import { Table } from './table/table';
19
19
  import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
20
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
20
21
  import { TableStickyScrollbar } from './TableStickyScrollbar';
21
22
  import { TableProcessorWithContainerStyles } from './tableNew';
22
23
  export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
@@ -371,7 +372,8 @@ export class TableContainer extends React.Component {
371
372
  // Please consider changes below carefully to not negatively impact SSR
372
373
  // `renderWidth` cannot be depended on during SSR
373
374
  const isRenderWidthValid = !!renderWidth && renderWidth > 0;
374
- const renderWidthCSS = rendererAppearance === 'full-page' ? `100cqw - ${FullPagePadding}px * 2` : `100cqw`;
375
+ const fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : `100cqw - ${FullPagePadding}px * 2`;
376
+ const renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : `100cqw`;
375
377
  const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
376
378
  if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
377
379
  return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`];
package/dist/es2019/react/nodes/tableNew.js CHANGED
@@ -5,6 +5,7 @@ import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common
5
5
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
6
6
  import { FullPagePadding } from '../../ui/Renderer/style';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
9
  import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
9
10
  import { SortOrder } from '@atlaskit/editor-common/types';
10
11
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -343,7 +344,8 @@ export class TableContainer extends React.Component {
343
344
  } = this.state;
344
345
  const lineLengthFixedWidth = akEditorDefaultLayoutWidth;
345
346
  let updatedLayout;
346
- const renderWidthCSS = rendererAppearance === 'full-page' ? `100cqw - ${FullPagePadding}px * 2` : `100cqw`;
347
+ const fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : `100cqw - ${FullPagePadding}px * 2`;
348
+ const renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : `100cqw`;
347
349
  const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
348
350
  if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
349
351
  return `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
package/dist/es2019/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -11,7 +11,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
11
11
  import { FullPagePadding } from './style';
12
12
  import { fg } from '@atlaskit/platform-feature-flags';
13
13
  import { RendererCssClassName } from '../../consts';
14
- import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
14
+ import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
15
15
  import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
16
16
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
17
17
  import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -215,6 +215,17 @@ const responsiveBreakoutWidthFullWidth = css({
215
215
  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
216
216
  }
217
217
  });
218
+ const responsiveBreakoutWidthWithReducedPadding = css({
219
+ '--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)`,
220
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
221
+ '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
222
+ [`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
223
+ '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
224
+ },
225
+ [`@media (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
226
+ '--ak-editor--breakout-container-without-gutter-width': `calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)`
227
+ }
228
+ });
218
229
  const hideHeadingCopyLinkWrapperStyles = css({
219
230
  '& h1, & h2, & h3, & h4, & h5, & h6': {
220
231
  [`.${HeadingAnchorWrapperClassName}`]: {
@@ -242,6 +253,17 @@ const rendererFullPageStyles = css({
242
253
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
243
254
  padding: `0 ${FullPagePadding}px`
244
255
  });
256
+ const rendererFullPageStylesWithReducedPadding = css({
257
+ '--ak-renderer--full-page-gutter': `${FullPagePadding}px`,
258
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
259
+ maxWidth: `${akEditorDefaultLayoutWidth}px`,
260
+ margin: '0 auto',
261
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
262
+ padding: `0 var(--ak-renderer--full-page-gutter)`,
263
+ [`@media (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
264
+ '--ak-renderer--full-page-gutter': `${akEditorGutterPaddingReduced}px`
265
+ }
266
+ });
245
267
  const rendererFullWidthStyles = css({
246
268
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
247
269
  maxWidth: `${akEditorFullWidthLayoutWidth}px`,
@@ -1811,6 +1833,9 @@ export const RendererStyleContainer = props => {
1811
1833
  testId
1812
1834
  } = props;
1813
1835
  const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
1836
+ const isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
1837
+ exposure: true
1838
+ });
1814
1839
  return (
1815
1840
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
1816
1841
  jsx("div", {
@@ -1827,13 +1852,13 @@ export const RendererStyleContainer = props => {
1827
1852
  '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
1828
1853
  '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
1829
1854
  },
1830
- css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
1855
+ css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
1831
1856
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1832
1857
  fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
1833
1858
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
1834
1859
  fg('editor_inline_comments_on_inline_nodes') &&
1835
1860
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1836
- fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
1861
+ fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
1837
1862
  "data-testid": testId
1838
1863
  }, children)
1839
1864
  );
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -49,7 +49,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
49
49
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
50
50
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
51
51
  const packageName = "@atlaskit/renderer";
52
- const packageVersion = "120.2.3";
52
+ const packageVersion = "120.2.5";
53
53
  const setAsQueryContainerStyles = css({
54
54
  containerName: 'ak-renderer-wrapper',
55
55
  containerType: 'inline-size'
package/dist/esm/react/nodes/inlineCard.js CHANGED
@@ -1,26 +1,43 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  /**
3
4
  * @jsxRuntime classic
4
5
  * @jsx jsx
5
6
  */
7
+ import { useState } from 'react';
6
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
9
  import { jsx } from '@emotion/react';
8
- import { Card } from '@atlaskit/smart-card';
10
+ import { useSmartCardContext } from '@atlaskit/link-provider';
11
+ import { Card, getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
9
12
  import { CardSSR } from '@atlaskit/smart-card/ssr';
10
- import { UnsupportedInline } from '@atlaskit/editor-common/ui';
13
+ import { HoverLinkOverlay, UnsupportedInline } from '@atlaskit/editor-common/ui';
11
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
+ import { AnalyticsContext } from '@atlaskit/analytics-next';
16
+ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
12
17
  import { CardErrorBoundary } from './fallback';
13
18
  import { withSmartCardStorage } from '../../ui/SmartCardStorage';
14
19
  import { getCardClickHandler } from '../utils/getCardClickHandler';
15
- import { AnalyticsContext } from '@atlaskit/analytics-next';
16
20
  import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
17
21
  import { usePortal } from '../../ui/Renderer/PortalContext';
22
+ var HoverLinkOverlayNoop = function HoverLinkOverlayNoop(props) {
23
+ return jsx("div", null, props.children);
24
+ };
25
+ var HoverLinkOverlayWithCondition = componentWithCondition(function () {
26
+ return fg('platform_editor_preview_panel_linking');
27
+ }, HoverLinkOverlay, HoverLinkOverlayNoop);
18
28
  var InlineCard = function InlineCard(props) {
29
+ var _cardContext$value, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
19
30
  var url = props.url,
20
31
  data = props.data,
21
32
  eventHandlers = props.eventHandlers,
22
- smartLinks = props.smartLinks;
33
+ smartLinks = props.smartLinks,
34
+ rendererAppearance = props.rendererAppearance;
23
35
  var portal = usePortal(props);
36
+ var cardContext = useSmartCardContext();
37
+ var _useState = useState(false),
38
+ _useState2 = _slicedToArray(_useState, 2),
39
+ isResolvedViewRendered = _useState2[0],
40
+ setIsResolvedViewRendered = _useState2[1];
24
41
  var onClick = getCardClickHandler(eventHandlers, url);
25
42
  var cardProps = {
26
43
  url: url,
@@ -81,6 +98,27 @@ var InlineCard = function InlineCard(props) {
81
98
  throw err;
82
99
  }
83
100
  };
101
+ var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url || ''];
102
+ var ari = getObjectAri(cardState === null || cardState === void 0 ? void 0 : cardState.details);
103
+ var name = getObjectName(cardState === null || cardState === void 0 ? void 0 : cardState.details);
104
+ var iconUrl = getObjectIconUrl(cardState === null || cardState === void 0 ? void 0 : cardState.details);
105
+ var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
106
+ ari: ari
107
+ }));
108
+ var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
109
+ var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
110
+ if (openPreviewPanel && isPanelAvailable) {
111
+ // Prevent anchor default behaviour(click to open the anchor link)
112
+ // When glance panel is available, let openPreviewPanel handle it
113
+ event.preventDefault();
114
+ openPreviewPanel({
115
+ url: url || '',
116
+ ari: ari,
117
+ name: name || '',
118
+ iconUrl: iconUrl
119
+ });
120
+ }
121
+ };
84
122
  return jsx(AnalyticsContext, {
85
123
  data: analyticsData
86
124
  }, jsx("span", _extends({
@@ -93,7 +131,13 @@ var InlineCard = function InlineCard(props) {
93
131
  unsupportedComponent: UnsupportedInline
94
132
  // Ignored via go/ees005
95
133
  // eslint-disable-next-line react/jsx-props-no-spreading
96
- }, cardProps), jsx(Card, _extends({
134
+ }, cardProps), jsx(HoverLinkOverlayWithCondition, {
135
+ isVisible: isResolvedViewRendered,
136
+ url: url || '',
137
+ compactPadding: rendererAppearance === 'comment',
138
+ showPanelButton: !!isPanelAvailable,
139
+ onClick: handleOpenGlancePanelClick
140
+ }, jsx(Card, _extends({
97
141
  appearance: "inline",
98
142
  showHoverPreview: !hideHoverPreview,
99
143
  actionOptions: actionOptions
@@ -105,8 +149,11 @@ var InlineCard = function InlineCard(props) {
105
149
  return;
106
150
  }
107
151
  props.smartCardStorage.set(data.url, data.title);
152
+ if (data.title) {
153
+ setIsResolvedViewRendered(true);
154
+ }
108
155
  },
109
156
  onError: onError
110
- })), CompetitorPromptComponent)));
157
+ }))), CompetitorPromptComponent)));
111
158
  };
112
159
  export default withSmartCardStorage(InlineCard);
package/dist/esm/react/nodes/table.js CHANGED
@@ -28,6 +28,7 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
28
28
  import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
29
29
  import { Table } from './table/table';
30
30
  import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
31
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
31
32
  import { TableStickyScrollbar } from './TableStickyScrollbar';
32
33
  import { TableProcessorWithContainerStyles } from './tableNew';
33
34
  export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
@@ -418,7 +419,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
418
419
  // Please consider changes below carefully to not negatively impact SSR
419
420
  // `renderWidth` cannot be depended on during SSR
420
421
  var isRenderWidthValid = !!renderWidth && renderWidth > 0;
421
- var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(FullPagePadding, "px * 2") : "100cqw";
422
+ var fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
423
+ var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
422
424
  var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
423
425
  if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
424
426
  return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
package/dist/esm/react/nodes/tableNew.js CHANGED
@@ -17,6 +17,7 @@ import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common
17
17
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
18
18
  import { FullPagePadding } from '../../ui/Renderer/style';
19
19
  import { fg } from '@atlaskit/platform-feature-flags';
20
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
20
21
  import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
21
22
  import { SortOrder } from '@atlaskit/editor-common/types';
22
23
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -393,7 +394,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
393
394
  var stickyMode = this.state.stickyMode;
394
395
  var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
395
396
  var updatedLayout;
396
- var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(FullPagePadding, "px * 2") : "100cqw";
397
+ var fullPageRendererWidthCSS = expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
398
+ var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
397
399
  var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
398
400
  if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
399
401
  return "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
package/dist/esm/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- var _css, _css5;
2
+ var _css, _css7;
3
3
  /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
4
4
  /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
5
5
  /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -13,7 +13,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
13
13
  import { FullPagePadding } from './style';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import { RendererCssClassName } from '../../consts';
16
- import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
16
+ import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
17
17
  import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
18
18
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
19
19
  import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -147,6 +147,15 @@ var responsiveBreakoutWidthFullWidth = css(_defineProperty({
147
147
  }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
148
148
  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
149
149
  }));
150
+ var responsiveBreakoutWidthWithReducedPadding = css(_defineProperty(_defineProperty({
151
+ '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)",
152
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
153
+ '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px")
154
+ }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
155
+ '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
156
+ }), "@media (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
157
+ '--ak-editor--breakout-container-without-gutter-width': "calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)"
158
+ }));
150
159
  var hideHeadingCopyLinkWrapperStyles = css({
151
160
  '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
152
161
  '&:focus-within': {
@@ -166,6 +175,16 @@ var rendererFullPageStyles = css({
166
175
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
167
176
  padding: "0 ".concat(FullPagePadding, "px")
168
177
  });
178
+ var rendererFullPageStylesWithReducedPadding = css(_defineProperty({
179
+ '--ak-renderer--full-page-gutter': "".concat(FullPagePadding, "px"),
180
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
181
+ maxWidth: "".concat(akEditorDefaultLayoutWidth, "px"),
182
+ margin: '0 auto',
183
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
184
+ padding: "0 var(--ak-renderer--full-page-gutter)"
185
+ }, "@media (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
186
+ '--ak-renderer--full-page-gutter': "".concat(akEditorGutterPaddingReduced, "px")
187
+ }));
169
188
  var rendererFullWidthStyles = css({
170
189
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
171
190
  maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px"),
@@ -484,13 +503,13 @@ var paragraphSharedStyles = css({
484
503
  letterSpacing: '-0.005em'
485
504
  }
486
505
  });
487
- var listsSharedStyles = css((_css5 = {
506
+ var listsSharedStyles = css((_css7 = {
488
507
  /* =============== INDENTATION SPACING ========= */
489
508
  'ul, ol': {
490
509
  boxSizing: 'border-box',
491
510
  paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
492
511
  }
493
- }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css5, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
512
+ }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css7, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
494
513
  /*
495
514
  Ensures list item content adheres to the list's margin instead
496
515
  of filling the entire block row. This is important to allow
@@ -522,7 +541,7 @@ var listsSharedStyles = css((_css5 = {
522
541
  listStyleType: 'lower-alpha'
523
542
  }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
524
543
  listStyleType: 'lower-roman'
525
- }), _defineProperty(_defineProperty(_defineProperty(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
544
+ }), _defineProperty(_defineProperty(_defineProperty(_css7, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
526
545
  listStyleType: 'disc'
527
546
  }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
528
547
  listStyleType: 'circle'
@@ -1408,6 +1427,9 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
1408
1427
  innerRef = props.innerRef,
1409
1428
  testId = props.testId;
1410
1429
  var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
1430
+ var isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
1431
+ exposure: true
1432
+ });
1411
1433
  return (
1412
1434
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
1413
1435
  jsx("div", {
@@ -1424,13 +1446,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
1424
1446
  '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
1425
1447
  '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
1426
1448
  },
1427
- css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
1449
+ css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, fg('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
1428
1450
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1429
1451
  fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
1430
1452
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
1431
1453
  fg('editor_inline_comments_on_inline_nodes') &&
1432
1454
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1433
- fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
1455
+ fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
1434
1456
  "data-testid": testId
1435
1457
  }, children)
1436
1458
  );
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -54,7 +54,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
54
54
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
55
55
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
56
56
  var packageName = "@atlaskit/renderer";
57
- var packageVersion = "120.2.3";
57
+ var packageVersion = "120.2.5";
58
58
  var setAsQueryContainerStyles = css({
59
59
  containerName: 'ak-renderer-wrapper',
60
60
  containerType: 'inline-size'
package/dist/types/react/nodes/inlineCard.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
4
4
  import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
5
5
  import type { SmartLinksOptions } from '../../types/smartLinksOptions';
6
6
  import { type MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
7
+ import type { RendererAppearance } from '../../ui/Renderer/types';
7
8
  export interface InlineCardProps extends MarkDataAttributes {
8
9
  url?: string;
9
10
  data?: object;
@@ -11,6 +12,7 @@ export interface InlineCardProps extends MarkDataAttributes {
11
12
  portal?: HTMLElement;
12
13
  smartLinks?: SmartLinksOptions;
13
14
  marks?: Mark[];
15
+ rendererAppearance?: RendererAppearance;
14
16
  }
15
17
  declare const _default: {
16
18
  new (props: import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>): {
package/dist/types-ts4.5/react/nodes/inlineCard.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
4
4
  import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
5
5
  import type { SmartLinksOptions } from '../../types/smartLinksOptions';
6
6
  import { type MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
7
+ import type { RendererAppearance } from '../../ui/Renderer/types';
7
8
  export interface InlineCardProps extends MarkDataAttributes {
8
9
  url?: string;
9
10
  data?: object;
@@ -11,6 +12,7 @@ export interface InlineCardProps extends MarkDataAttributes {
11
12
  portal?: HTMLElement;
12
13
  smartLinks?: SmartLinksOptions;
13
14
  marks?: Mark[];
15
+ rendererAppearance?: RendererAppearance;
14
16
  }
15
17
  declare const _default: {
16
18
  new (props: import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<InlineCardProps & WithSmartCardStorageProps, WithSmartCardStorageProps>>): {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "120.2.4",
3
+ "version": "120.2.6",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -271,6 +271,9 @@
271
271
  "platform_editor_avatar_group_margin_fix": {
272
272
  "type": "boolean"
273
273
  },
274
+ "platform_editor_preview_panel_linking": {
275
+ "type": "boolean"
276
+ },
274
277
  "platform_editor_numbered_column_in_include": {
275
278
  "type": "boolean"
276
279
  }