@atlaskit/renderer 109.46.0 → 109.46.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/Renderer/breakout-ssr.js +25 -4
  3. package/dist/cjs/ui/Renderer/index.js +1 -1
  4. package/dist/es2019/ui/Renderer/breakout-ssr.js +25 -4
  5. package/dist/es2019/ui/Renderer/index.js +1 -1
  6. package/dist/esm/ui/Renderer/breakout-ssr.js +25 -5
  7. package/dist/esm/ui/Renderer/index.js +1 -1
  8. package/package.json +21 -18
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 109.46.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#119417](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119417)
8
+ [`8cb3eccfd2a71`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8cb3eccfd2a71) -
9
+ Fix table resizing in SSR and hydration
10
+ - Updated dependencies
11
+
3
12
  ## 109.46.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/ui/Renderer/breakout-ssr.js CHANGED
@@ -9,6 +9,8 @@ exports.calcLineLength = exports.breakoutInlineScriptContext = void 0;
9
9
  exports.createBreakoutInlineScript = createBreakoutInlineScript;
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
  var _utils = require("@atlaskit/editor-common/utils");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
+ var _style = require("./style");
12
14
  /**
13
15
  * Inline Script that updates breakout node width on client side,
14
16
  * before main JavaScript bundle is ready.
@@ -36,10 +38,11 @@ function BreakoutSSRInlineScript() {
36
38
  });
37
39
  }
38
40
  function createBreakoutInlineScript(id) {
39
- return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n })(window);\n");
41
+ var shouldFixTableResizing = String(Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing')));
42
+ return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldFixTableResizing, ");\n })(window);\n");
40
43
  }
41
- var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
42
- function applyBreakoutAfterSSR(id, breakoutConsts) {
44
+ var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
45
+ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
43
46
  var MEDIA_NODE_TYPE = 'mediaSingle';
44
47
  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
45
48
  function findUp(element, condition) {
@@ -78,7 +81,15 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
78
81
  return;
79
82
  }
80
83
  if (node.classList.contains('pm-table-container') && mode === 'custom') {
81
- var effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
84
+ var isFullPage = renderer.classList.contains('is-full-page');
85
+ var rendererWidth = renderer.offsetWidth;
86
+ var effectiveWidth;
87
+ if (shouldFixTableResizing) {
88
+ // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
89
+ effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
90
+ } else {
91
+ effectiveWidth = rendererWidth - breakoutConsts.padding;
92
+ }
82
93
  width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
83
94
  } else {
84
95
  width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
@@ -113,6 +124,16 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
113
124
  applyMediaBreakout(item.target);
114
125
  }
115
126
  });
127
+
128
+ // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
129
+ if (renderer.style.visibility === 'hidden') {
130
+ // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
131
+ renderer.style.visibility = '';
132
+ // Since we don't have a screen width to use as initial value.
133
+ // The width is set to a fix number. This will cause horizontal scrollbar to appear.
134
+ // Hide it until we have the correct width.
135
+ renderer.style.overflowX = '';
136
+ }
116
137
  });
117
138
  var applyMediaBreakout = function applyMediaBreakout(card) {
118
139
  // width was already set by another breakout script
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -60,7 +60,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
60
60
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
61
61
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
62
62
  var packageName = "@atlaskit/renderer";
63
- var packageVersion = "109.46.0";
63
+ var packageVersion = "109.46.1";
64
64
  var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
65
65
  var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
66
66
  (0, _inherits2.default)(Renderer, _PureComponent);
package/dist/es2019/ui/Renderer/breakout-ssr.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { breakoutConsts } from '@atlaskit/editor-common/utils';
3
-
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { FullPagePadding } from './style';
4
5
  /**
5
6
  * Inline Script that updates breakout node width on client side,
6
7
  * before main JavaScript bundle is ready.
@@ -28,10 +29,11 @@ export function BreakoutSSRInlineScript() {
28
29
  });
29
30
  }
30
31
  export function createBreakoutInlineScript(id) {
32
+ const shouldFixTableResizing = String(Boolean(fg('platform-fix-table-ssr-resizing')));
31
33
  return `
32
34
  (function(window){
33
35
  ${breakoutInlineScriptContext};
34
- (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts);
36
+ (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${shouldFixTableResizing});
35
37
  })(window);
36
38
  `;
37
39
  }
@@ -42,8 +44,9 @@ export const breakoutInlineScriptContext = `
42
44
  breakoutConsts.calcBreakoutWidth = ${breakoutConsts.calcBreakoutWidth.toString()};
43
45
  breakoutConsts.calcLineLength = ${breakoutConsts.calcLineLength.toString()};
44
46
  breakoutConsts.calcWideWidth = ${breakoutConsts.calcWideWidth.toString()};
47
+ breakoutConsts.FullPagePadding = ${FullPagePadding.toString()};
45
48
  `;
46
- function applyBreakoutAfterSSR(id, breakoutConsts) {
49
+ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
47
50
  const MEDIA_NODE_TYPE = 'mediaSingle';
48
51
  const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
49
52
  function findUp(element, condition) {
@@ -82,7 +85,15 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
82
85
  return;
83
86
  }
84
87
  if (node.classList.contains('pm-table-container') && mode === 'custom') {
85
- const effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
88
+ const isFullPage = renderer.classList.contains('is-full-page');
89
+ const rendererWidth = renderer.offsetWidth;
90
+ let effectiveWidth;
91
+ if (shouldFixTableResizing) {
92
+ // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
93
+ effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
94
+ } else {
95
+ effectiveWidth = rendererWidth - breakoutConsts.padding;
96
+ }
86
97
  width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
87
98
  } else {
88
99
  width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
@@ -117,6 +128,16 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
117
128
  applyMediaBreakout(item.target);
118
129
  }
119
130
  });
131
+
132
+ // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
133
+ if (renderer.style.visibility === 'hidden') {
134
+ // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
135
+ renderer.style.visibility = '';
136
+ // Since we don't have a screen width to use as initial value.
137
+ // The width is set to a fix number. This will cause horizontal scrollbar to appear.
138
+ // Hide it until we have the correct width.
139
+ renderer.style.overflowX = '';
140
+ }
120
141
  });
121
142
  const applyMediaBreakout = card => {
122
143
  // width was already set by another breakout script
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -42,7 +42,7 @@ import { nodeToReact } from '../../react/nodes';
42
42
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
43
43
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
44
44
  const packageName = "@atlaskit/renderer";
45
- const packageVersion = "109.46.0";
45
+ const packageVersion = "109.46.1";
46
46
  export const defaultNodeComponents = nodeToReact;
47
47
  export class Renderer extends PureComponent {
48
48
  constructor(props) {
package/dist/esm/ui/Renderer/breakout-ssr.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { breakoutConsts } from '@atlaskit/editor-common/utils';
3
-
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { FullPagePadding } from './style';
4
5
  /**
5
6
  * Inline Script that updates breakout node width on client side,
6
7
  * before main JavaScript bundle is ready.
@@ -28,10 +29,11 @@ export function BreakoutSSRInlineScript() {
28
29
  });
29
30
  }
30
31
  export function createBreakoutInlineScript(id) {
31
- return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n })(window);\n");
32
+ var shouldFixTableResizing = String(Boolean(fg('platform-fix-table-ssr-resizing')));
33
+ return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldFixTableResizing, ");\n })(window);\n");
32
34
  }
33
- export var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n");
34
- function applyBreakoutAfterSSR(id, breakoutConsts) {
35
+ export var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
36
+ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
35
37
  var MEDIA_NODE_TYPE = 'mediaSingle';
36
38
  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
37
39
  function findUp(element, condition) {
@@ -70,7 +72,15 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
70
72
  return;
71
73
  }
72
74
  if (node.classList.contains('pm-table-container') && mode === 'custom') {
73
- var effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
75
+ var isFullPage = renderer.classList.contains('is-full-page');
76
+ var rendererWidth = renderer.offsetWidth;
77
+ var effectiveWidth;
78
+ if (shouldFixTableResizing) {
79
+ // Logic from https://stash.atlassian.com/projects/atlassian/repos/atlassian-frontend-monorepo/browse/platform/packages/editor/renderer/src/react/nodes/table.tsx?at=d3af2ef54521ccf10e9b094996ad9528ec05c7e3#610
80
+ effectiveWidth = isFullPage ? rendererWidth - 2 * breakoutConsts.FullPagePadding : rendererWidth;
81
+ } else {
82
+ effectiveWidth = rendererWidth - breakoutConsts.padding;
83
+ }
74
84
  width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
75
85
  } else {
76
86
  width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
@@ -105,6 +115,16 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
105
115
  applyMediaBreakout(item.target);
106
116
  }
107
117
  });
118
+
119
+ // Renderer is initially set to hidden until we figure out the proper width in packages/editor/editor-common/src/ui/WidthProvider/index.tsx
120
+ if (renderer.style.visibility === 'hidden') {
121
+ // Hiding until we get the correct width. But didn't remove them from the DOM so vertical scrollbar can still be correctly calculated.
122
+ renderer.style.visibility = '';
123
+ // Since we don't have a screen width to use as initial value.
124
+ // The width is set to a fix number. This will cause horizontal scrollbar to appear.
125
+ // Hide it until we have the correct width.
126
+ renderer.style.overflowX = '';
127
+ }
108
128
  });
109
129
  var applyMediaBreakout = function applyMediaBreakout(card) {
110
130
  // width was already set by another breakout script
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -52,7 +52,7 @@ import { nodeToReact } from '../../react/nodes';
52
52
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
53
53
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
54
54
  var packageName = "@atlaskit/renderer";
55
- var packageVersion = "109.46.0";
55
+ var packageVersion = "109.46.1";
56
56
  export var defaultNodeComponents = nodeToReact;
57
57
  export var Renderer = /*#__PURE__*/function (_PureComponent) {
58
58
  _inherits(Renderer, _PureComponent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "109.46.0",
3
+ "version": "109.46.1",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,35 +25,35 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@atlaskit/adf-schema": "^40.8.1",
28
- "@atlaskit/adf-utils": "^19.7.0",
29
- "@atlaskit/analytics-listeners": "^8.10.0",
30
- "@atlaskit/analytics-namespaced-context": "^6.10.0",
31
- "@atlaskit/analytics-next": "^10.0.0",
32
- "@atlaskit/button": "^19.1.0",
33
- "@atlaskit/code": "^15.4.0",
34
- "@atlaskit/editor-common": "^87.6.0",
28
+ "@atlaskit/adf-utils": "^19.8.0",
29
+ "@atlaskit/analytics-listeners": "^8.11.0",
30
+ "@atlaskit/analytics-namespaced-context": "^6.11.0",
31
+ "@atlaskit/analytics-next": "^10.1.0",
32
+ "@atlaskit/button": "^19.2.0",
33
+ "@atlaskit/code": "^15.5.0",
34
+ "@atlaskit/editor-common": "^87.10.0",
35
35
  "@atlaskit/editor-json-transformer": "^8.18.0",
36
36
  "@atlaskit/editor-palette": "1.6.0",
37
37
  "@atlaskit/editor-prosemirror": "5.0.1",
38
38
  "@atlaskit/editor-shared-styles": "^2.13.0",
39
39
  "@atlaskit/emoji": "^67.7.0",
40
40
  "@atlaskit/feature-gate-js-client": "^4.18.0",
41
- "@atlaskit/icon": "^22.11.0",
41
+ "@atlaskit/icon": "^22.12.0",
42
42
  "@atlaskit/link-datasource": "^2.10.0",
43
43
  "@atlaskit/media-card": "^78.0.0",
44
44
  "@atlaskit/media-client": "^27.3.0",
45
45
  "@atlaskit/media-client-react": "^2.0.0",
46
46
  "@atlaskit/media-common": "^11.3.0",
47
- "@atlaskit/media-filmstrip": "^47.1.0",
47
+ "@atlaskit/media-filmstrip": "^47.2.0",
48
48
  "@atlaskit/media-ui": "^25.10.0",
49
- "@atlaskit/media-viewer": "^48.6.0",
49
+ "@atlaskit/media-viewer": "^48.7.0",
50
50
  "@atlaskit/platform-feature-flags": "^0.3.0",
51
- "@atlaskit/smart-card": "^27.13.0",
51
+ "@atlaskit/smart-card": "^27.15.0",
52
52
  "@atlaskit/status": "^1.4.0",
53
53
  "@atlaskit/task-decision": "^17.10.0",
54
- "@atlaskit/theme": "^12.11.0",
55
- "@atlaskit/tokens": "^1.57.0",
56
- "@atlaskit/tooltip": "^18.6.0",
54
+ "@atlaskit/theme": "^13.0.0",
55
+ "@atlaskit/tokens": "^1.58.0",
56
+ "@atlaskit/tooltip": "^18.7.0",
57
57
  "@babel/runtime": "^7.0.0",
58
58
  "@emotion/react": "^11.7.1",
59
59
  "lodash": "^4.17.21",
@@ -72,11 +72,11 @@
72
72
  "@af/integration-testing": "*",
73
73
  "@af/visual-regression": "*",
74
74
  "@atlaskit/analytics-gas-types": "^5.1.0",
75
- "@atlaskit/css-reset": "^6.9.0",
75
+ "@atlaskit/css-reset": "^6.10.0",
76
76
  "@atlaskit/editor-test-helpers": "^18.30.0",
77
77
  "@atlaskit/link-provider": "^1.14.0",
78
- "@atlaskit/link-test-helpers": "^7.3.0",
79
- "@atlaskit/linking-common": "^5.9.0",
78
+ "@atlaskit/link-test-helpers": "^7.4.0",
79
+ "@atlaskit/linking-common": "^5.11.0",
80
80
  "@atlaskit/media-core": "^34.2.0",
81
81
  "@atlaskit/media-integration-test-helpers": "^3.0.0",
82
82
  "@atlaskit/media-test-helpers": "^34.0.0",
@@ -151,6 +151,9 @@
151
151
  },
152
152
  "platform.comments-on-media.bug.incorrect-badge-highlight": {
153
153
  "type": "boolean"
154
+ },
155
+ "platform-fix-table-ssr-resizing": {
156
+ "type": "boolean"
154
157
  }
155
158
  },
156
159
  "af:exports": {