@atlaskit/editor-core 216.2.3 → 216.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 216.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e61bb8b32e4b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e61bb8b32e4b1) -
8
+ [https://hello.jira.atlassian.cloud/browse/EDITOR-4386](EDITOR-4386) - clean up
9
+ platform_editor_disable_unnecessary_expand_renders
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 216.3.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [`c4d3ca353b93a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4d3ca353b93a) -
20
+ [https://hello.jira.atlassian.cloud/browse/EDITOR-4326](EDITOR-4326) - clean up
21
+ editor_a11y_announce_date_picker_open
22
+
23
+ ### Patch Changes
24
+
25
+ - [`6689b1fda3892`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6689b1fda3892) -
26
+ Add fallback prop to ExcludeFromHydration component to prevent layout shift during hydration when
27
+ platform_editor_hydratable_ui is enabled. The toolbar now renders a placeholder that reserves
28
+ space until the full toolbar hydrates.
29
+ - Updated dependencies
30
+
3
31
  ## 216.2.3
4
32
 
5
33
  ### Patch Changes
@@ -11,6 +11,7 @@
11
11
  ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
12
12
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
13
13
  ._4cvr1h6o{align-items:center}
14
+ ._4t3i17qo{height:var(--ak-editor-fullpage-toolbar-height)}
14
15
  ._4t3izwfg{height:2pc}
15
16
  ._7cca15wb{container-type:inline-size}
16
17
  ._bfhkvuon{background-color:var(--ds-surface,#fff)}
@@ -34,7 +34,8 @@ var styles = {
34
34
  firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
35
35
  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
36
36
  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o",
37
- backgroundColor: "_bfhkvuon"
37
+ backgroundColor: "_bfhkvuon",
38
+ toolbarPlaceholder: "_n7zlia51 _bfhkvuon _4t3i17qo"
38
39
  };
39
40
  var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
40
41
  var children = _ref.children,
@@ -59,6 +60,17 @@ var SecondChildWrapper = function SecondChildWrapper(_ref3) {
59
60
  className: (0, _runtime.ax)([styles.secondChildWrapperOneLine])
60
61
  }, children);
61
62
  };
63
+
64
+ /**
65
+ * Placeholder component that reserves the toolbar's space during hydration
66
+ * to prevent layout shift when the actual toolbar renders.
67
+ */
68
+ var ToolbarPlaceholder = function ToolbarPlaceholder() {
69
+ return /*#__PURE__*/_react.default.createElement("div", {
70
+ "data-testid": "ak-editor-main-toolbar-placeholder",
71
+ className: (0, _runtime.ax)([styles.toolbarPlaceholder])
72
+ });
73
+ };
62
74
  var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
63
75
  var _editorAPI$toolbar, _editorAPI$toolbar2, _useToolbarPortal;
64
76
  var editorAPI = _ref4.editorAPI,
@@ -98,7 +110,9 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
98
110
  }, [editorView]);
99
111
  return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref6) {
100
112
  var ContextPanelWidth = _ref6.width;
101
- return /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
113
+ return /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, {
114
+ fallback: /*#__PURE__*/_react.default.createElement(ToolbarPlaceholder, null)
115
+ }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
102
116
  editorView: editorView,
103
117
  childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
104
118
  isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -13,11 +13,14 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
13
  * ExcludeFromHydration component delays rendering of its children until after the initial
14
14
  * hydration phase, based on a feature flag check. If the feature flag is disabled,
15
15
  * it will render children immediately after hydration.
16
- * @param param0
16
+ * @param children - The content to render after hydration
17
+ * @param fallback - Optional fallback content to render during hydration (e.g., a placeholder to prevent layout shift)
17
18
  * @returns
18
19
  */
19
20
  function ExcludeFromHydration(_ref) {
20
- var children = _ref.children;
21
+ var children = _ref.children,
22
+ _ref$fallback = _ref.fallback,
23
+ fallback = _ref$fallback === void 0 ? null : _ref$fallback;
21
24
  var _useState = (0, _react.useState)(false),
22
25
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
23
26
  shouldRender = _useState2[0],
@@ -29,7 +32,7 @@ function ExcludeFromHydration(_ref) {
29
32
  setShouldRender(true);
30
33
  }, []);
31
34
  if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !shouldRender) {
32
- return null;
35
+ return fallback !== null && fallback !== void 0 ? fallback : null;
33
36
  }
34
37
  return children;
35
38
  }
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
- var version = exports.version = "216.2.2";
8
+ var version = exports.version = "0.0.0-development";
@@ -11,6 +11,7 @@
11
11
  ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
12
12
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
13
13
  ._4cvr1h6o{align-items:center}
14
+ ._4t3i17qo{height:var(--ak-editor-fullpage-toolbar-height)}
14
15
  ._4t3izwfg{height:2pc}
15
16
  ._7cca15wb{container-type:inline-size}
16
17
  ._bfhkvuon{background-color:var(--ds-surface,#fff)}
@@ -25,7 +25,8 @@ const styles = {
25
25
  firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
26
26
  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
27
27
  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o",
28
- backgroundColor: "_bfhkvuon"
28
+ backgroundColor: "_bfhkvuon",
29
+ toolbarPlaceholder: "_n7zlia51 _bfhkvuon _4t3i17qo"
29
30
  };
30
31
  const MainToolbarWrapper = ({
31
32
  children,
@@ -53,6 +54,17 @@ const SecondChildWrapper = ({
53
54
  className: ax([styles.secondChildWrapperOneLine])
54
55
  }, children);
55
56
  };
57
+
58
+ /**
59
+ * Placeholder component that reserves the toolbar's space during hydration
60
+ * to prevent layout shift when the actual toolbar renders.
61
+ */
62
+ const ToolbarPlaceholder = () => {
63
+ return /*#__PURE__*/React.createElement("div", {
64
+ "data-testid": "ak-editor-main-toolbar-placeholder",
65
+ className: ax([styles.toolbarPlaceholder])
66
+ });
67
+ };
56
68
  export const FullPageToolbarNext = ({
57
69
  editorAPI,
58
70
  beforeIcon,
@@ -92,7 +104,9 @@ export const FullPageToolbarNext = ({
92
104
  }, [editorView]);
93
105
  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
94
106
  width: ContextPanelWidth
95
- }) => /*#__PURE__*/React.createElement(ExcludeFromHydration, null, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
107
+ }) => /*#__PURE__*/React.createElement(ExcludeFromHydration, {
108
+ fallback: /*#__PURE__*/React.createElement(ToolbarPlaceholder, null)
109
+ }, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
96
110
  editorView: editorView,
97
111
  childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
98
112
  isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -6,11 +6,13 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
6
  * ExcludeFromHydration component delays rendering of its children until after the initial
7
7
  * hydration phase, based on a feature flag check. If the feature flag is disabled,
8
8
  * it will render children immediately after hydration.
9
- * @param param0
9
+ * @param children - The content to render after hydration
10
+ * @param fallback - Optional fallback content to render during hydration (e.g., a placeholder to prevent layout shift)
10
11
  * @returns
11
12
  */
12
13
  function ExcludeFromHydration({
13
- children
14
+ children,
15
+ fallback = null
14
16
  }) {
15
17
  const [shouldRender, setShouldRender] = useState(false);
16
18
  useEffect(() => {
@@ -20,7 +22,7 @@ function ExcludeFromHydration({
20
22
  setShouldRender(true);
21
23
  }, []);
22
24
  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !shouldRender) {
23
- return null;
25
+ return fallback !== null && fallback !== void 0 ? fallback : null;
24
26
  }
25
27
  return children;
26
28
  }
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "216.2.2";
2
+ export const version = "0.0.0-development";
@@ -11,6 +11,7 @@
11
11
  ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
12
12
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
13
13
  ._4cvr1h6o{align-items:center}
14
+ ._4t3i17qo{height:var(--ak-editor-fullpage-toolbar-height)}
14
15
  ._4t3izwfg{height:2pc}
15
16
  ._7cca15wb{container-type:inline-size}
16
17
  ._bfhkvuon{background-color:var(--ds-surface,#fff)}
@@ -25,7 +25,8 @@ var styles = {
25
25
  firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
26
26
  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
27
27
  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o",
28
- backgroundColor: "_bfhkvuon"
28
+ backgroundColor: "_bfhkvuon",
29
+ toolbarPlaceholder: "_n7zlia51 _bfhkvuon _4t3i17qo"
29
30
  };
30
31
  var MainToolbarWrapper = function MainToolbarWrapper(_ref) {
31
32
  var children = _ref.children,
@@ -50,6 +51,17 @@ var SecondChildWrapper = function SecondChildWrapper(_ref3) {
50
51
  className: ax([styles.secondChildWrapperOneLine])
51
52
  }, children);
52
53
  };
54
+
55
+ /**
56
+ * Placeholder component that reserves the toolbar's space during hydration
57
+ * to prevent layout shift when the actual toolbar renders.
58
+ */
59
+ var ToolbarPlaceholder = function ToolbarPlaceholder() {
60
+ return /*#__PURE__*/React.createElement("div", {
61
+ "data-testid": "ak-editor-main-toolbar-placeholder",
62
+ className: ax([styles.toolbarPlaceholder])
63
+ });
64
+ };
53
65
  export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
54
66
  var _editorAPI$toolbar, _editorAPI$toolbar2, _useToolbarPortal;
55
67
  var editorAPI = _ref4.editorAPI,
@@ -89,7 +101,9 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
89
101
  }, [editorView]);
90
102
  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref6) {
91
103
  var ContextPanelWidth = _ref6.width;
92
- return /*#__PURE__*/React.createElement(ExcludeFromHydration, null, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
104
+ return /*#__PURE__*/React.createElement(ExcludeFromHydration, {
105
+ fallback: /*#__PURE__*/React.createElement(ToolbarPlaceholder, null)
106
+ }, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
93
107
  editorView: editorView,
94
108
  childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
95
109
  isShortcutToFocusToolbar: isShortcutToFocusToolbar,
@@ -7,11 +7,14 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
7
7
  * ExcludeFromHydration component delays rendering of its children until after the initial
8
8
  * hydration phase, based on a feature flag check. If the feature flag is disabled,
9
9
  * it will render children immediately after hydration.
10
- * @param param0
10
+ * @param children - The content to render after hydration
11
+ * @param fallback - Optional fallback content to render during hydration (e.g., a placeholder to prevent layout shift)
11
12
  * @returns
12
13
  */
13
14
  function ExcludeFromHydration(_ref) {
14
- var children = _ref.children;
15
+ var children = _ref.children,
16
+ _ref$fallback = _ref.fallback,
17
+ fallback = _ref$fallback === void 0 ? null : _ref$fallback;
15
18
  var _useState = useState(false),
16
19
  _useState2 = _slicedToArray(_useState, 2),
17
20
  shouldRender = _useState2[0],
@@ -23,7 +26,7 @@ function ExcludeFromHydration(_ref) {
23
26
  setShouldRender(true);
24
27
  }, []);
25
28
  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !shouldRender) {
26
- return null;
29
+ return fallback !== null && fallback !== void 0 ? fallback : null;
27
30
  }
28
31
  return children;
29
32
  }
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "216.2.2";
2
+ export var version = "0.0.0-development";
@@ -3,10 +3,12 @@ import type React from 'react';
3
3
  * ExcludeFromHydration component delays rendering of its children until after the initial
4
4
  * hydration phase, based on a feature flag check. If the feature flag is disabled,
5
5
  * it will render children immediately after hydration.
6
- * @param param0
6
+ * @param children - The content to render after hydration
7
+ * @param fallback - Optional fallback content to render during hydration (e.g., a placeholder to prevent layout shift)
7
8
  * @returns
8
9
  */
9
- declare function ExcludeFromHydration({ children }: {
10
+ declare function ExcludeFromHydration({ children, fallback, }: {
10
11
  children: React.ReactNode;
12
+ fallback?: React.ReactNode;
11
13
  }): React.ReactNode;
12
14
  export default ExcludeFromHydration;
@@ -3,10 +3,12 @@ import type React from 'react';
3
3
  * ExcludeFromHydration component delays rendering of its children until after the initial
4
4
  * hydration phase, based on a feature flag check. If the feature flag is disabled,
5
5
  * it will render children immediately after hydration.
6
- * @param param0
6
+ * @param children - The content to render after hydration
7
+ * @param fallback - Optional fallback content to render during hydration (e.g., a placeholder to prevent layout shift)
7
8
  * @returns
8
9
  */
9
- declare function ExcludeFromHydration({ children }: {
10
+ declare function ExcludeFromHydration({ children, fallback, }: {
10
11
  children: React.ReactNode;
12
+ fallback?: React.ReactNode;
11
13
  }): React.ReactNode;
12
14
  export default ExcludeFromHydration;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "216.2.3",
3
+ "version": "216.4.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -66,7 +66,7 @@
66
66
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
67
67
  "@atlaskit/react-ufo": "^4.16.0",
68
68
  "@atlaskit/task-decision": "^19.2.0",
69
- "@atlaskit/tmp-editor-statsig": "^16.11.0",
69
+ "@atlaskit/tmp-editor-statsig": "^16.12.0",
70
70
  "@atlaskit/tokens": "^9.1.0",
71
71
  "@atlaskit/tooltip": "^20.12.0",
72
72
  "@atlaskit/width-detector": "^5.0.0",
@@ -107,7 +107,7 @@
107
107
  "@atlaskit/media-integration-test-helpers": "workspace:^",
108
108
  "@atlaskit/media-test-helpers": "^39.0.0",
109
109
  "@atlaskit/modal-dialog": "^14.9.0",
110
- "@atlaskit/renderer": "^125.2.0",
110
+ "@atlaskit/renderer": "^125.3.0",
111
111
  "@atlaskit/section-message": "^8.12.0",
112
112
  "@atlaskit/synchrony-test-helpers": "workspace:^",
113
113
  "@atlaskit/toggle": "^15.2.0",
@@ -157,10 +157,6 @@
157
157
  "type": "boolean",
158
158
  "referenceOnly": "true"
159
159
  },
160
- "editor_a11y_announce_date_picker_open": {
161
- "type": "boolean",
162
- "referenceOnly": true
163
- },
164
160
  "platform_editor_ai_generic_prep_for_aifc_2": {
165
161
  "type": "boolean"
166
162
  },
@@ -179,10 +175,6 @@
179
175
  "platform_editor_prevent_toolbar_width_reflow": {
180
176
  "type": "boolean"
181
177
  },
182
- "platform_editor_disable_unnecessary_expand_renders": {
183
- "type": "boolean",
184
- "referenceOnly": "true"
185
- },
186
178
  "platform-editor-single-player-expand": {
187
179
  "type": "boolean",
188
180
  "referenceOnly": "true"