@atlaskit/renderer 118.7.1 → 119.0.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 (22) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/react/marks/breakout.js +2 -2
  3. package/dist/cjs/ui/Renderer/RendererStyleContainer.js +12 -5
  4. package/dist/cjs/ui/Renderer/breakout-ssr.js +12 -5
  5. package/dist/cjs/ui/Renderer/index.js +1 -1
  6. package/dist/cjs/ui/annotations/hover/mounter.js +20 -1
  7. package/dist/cjs/ui/annotations/selection/mounter.js +18 -1
  8. package/dist/es2019/react/marks/breakout.js +2 -2
  9. package/dist/es2019/ui/Renderer/RendererStyleContainer.js +9 -1
  10. package/dist/es2019/ui/Renderer/breakout-ssr.js +12 -5
  11. package/dist/es2019/ui/Renderer/index.js +1 -1
  12. package/dist/es2019/ui/annotations/hover/mounter.js +20 -1
  13. package/dist/es2019/ui/annotations/selection/mounter.js +18 -1
  14. package/dist/esm/react/marks/breakout.js +2 -2
  15. package/dist/esm/ui/Renderer/RendererStyleContainer.js +12 -5
  16. package/dist/esm/ui/Renderer/breakout-ssr.js +12 -5
  17. package/dist/esm/ui/Renderer/index.js +1 -1
  18. package/dist/esm/ui/annotations/hover/mounter.js +20 -1
  19. package/dist/esm/ui/annotations/selection/mounter.js +18 -1
  20. package/dist/types/ui/Renderer/breakout-ssr.d.ts +4 -1
  21. package/dist/types-ts4.5/ui/Renderer/breakout-ssr.d.ts +4 -1
  22. package/package.json +15 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 119.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 119.0.0
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 118.7.1
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/react/marks/breakout.js CHANGED
@@ -30,10 +30,10 @@ var getWidth = function getWidth(width, mode) {
30
30
  return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
31
31
  } else {
32
32
  if (mode === 'full-width') {
33
- return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))))");
33
+ return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width)))");
34
34
  }
35
35
  if (mode === 'wide') {
36
- return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width)))";
36
+ return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width))";
37
37
  }
38
38
  }
39
39
  };
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, _css4;
27
+ var _css, _css5;
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 */
@@ -147,6 +147,13 @@ var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
147
147
  }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
148
148
  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
149
149
  }));
150
+ var responsiveBreakoutWidthFullWidth = (0, _react.css)((0, _defineProperty2.default)({
151
+ '--ak-editor--breakout-container-without-gutter-width': '100cqw',
152
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
153
+ '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
154
+ }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
155
+ '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
156
+ }));
150
157
  var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
151
158
  '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
152
159
  '&:focus-within': {
@@ -484,13 +491,13 @@ var paragraphSharedStyles = (0, _react.css)({
484
491
  letterSpacing: '-0.005em'
485
492
  }
486
493
  });
487
- var listsSharedStyles = (0, _react.css)((_css4 = {
494
+ var listsSharedStyles = (0, _react.css)((_css5 = {
488
495
  /* =============== INDENTATION SPACING ========= */
489
496
  'ul, ol': {
490
497
  boxSizing: 'border-box',
491
498
  paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
492
499
  }
493
- }, (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)(_css4, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
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), {
494
501
  /*
495
502
  Ensures list item content adheres to the list's margin instead
496
503
  of filling the entire block row. This is important to allow
@@ -522,7 +529,7 @@ var listsSharedStyles = (0, _react.css)((_css4 = {
522
529
  listStyleType: 'lower-alpha'
523
530
  }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
524
531
  listStyleType: 'lower-roman'
525
- }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
532
+ }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
526
533
  listStyleType: 'disc'
527
534
  }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
528
535
  listStyleType: 'circle'
@@ -1421,7 +1428,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
1421
1428
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
1422
1429
  (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
1423
1430
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1424
- (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, (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidth : null],
1431
+ (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' && (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : null],
1425
1432
  "data-testid": testId
1426
1433
  }, children)
1427
1434
  );
package/dist/cjs/ui/Renderer/breakout-ssr.js CHANGED
@@ -33,19 +33,23 @@ function BreakoutSSRInlineScript(_ref) {
33
33
  }
34
34
  }
35
35
  var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
36
+ var shouldSkipScript = {
37
+ table: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize'),
38
+ breakout: (0, _platformFeatureFlags.fg)('platform_breakout_cls')
39
+ };
36
40
  return /*#__PURE__*/_react.default.createElement("script", {
37
41
  "data-breakout-script-id": id
38
42
  // To investigate if we can replace this.
39
43
  // eslint-disable-next-line react/no-danger
40
44
  ,
41
45
  dangerouslySetInnerHTML: {
42
- __html: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
46
+ __html: createBreakoutInlineScript(id, shouldSkipScript)
43
47
  },
44
48
  "data-testid": "breakout-ssr-inline-script"
45
49
  });
46
50
  }
47
- function createBreakoutInlineScript(id, optionalFlagArg) {
48
- return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false, ");\n })(window);\n");
51
+ function createBreakoutInlineScript(id, shouldSkipScript) {
52
+ return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ");\n })(window);\n");
49
53
  }
50
54
  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.calcBreakoutWithCustomWidth = ").concat(_utils.breakoutConsts.calcBreakoutWithCustomWidth.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");
51
55
 
@@ -98,7 +102,10 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
98
102
  }
99
103
 
100
104
  // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
101
- if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
105
+ if (shouldSkipBreakoutScript.table && node.classList.contains('pm-table-container')) {
106
+ return;
107
+ }
108
+ if (shouldSkipBreakoutScript.breakout && node.classList.contains('fabric-editor-breakout-mark')) {
102
109
  return;
103
110
  }
104
111
 
@@ -110,7 +117,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
110
117
  var effectiveWidth = rendererWidth - breakoutConsts.padding;
111
118
  width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
112
119
  } else if (resizedBreakout) {
113
- width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null,
120
+ width = breakoutConsts.calcBreakoutWithCustomWidth(mode, Number(node.dataset.width) || null,
114
121
  // Ignored via go/ees005
115
122
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
116
123
  renderer.offsetWidth);
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
62
62
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
63
63
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
64
64
  var packageName = "@atlaskit/renderer";
65
- var packageVersion = "118.7.1";
65
+ var packageVersion = "119.0.0";
66
66
  var setAsQueryContainerStyles = (0, _react2.css)({
67
67
  containerName: 'ak-renderer-wrapper',
68
68
  containerType: 'inline-size'
package/dist/cjs/ui/annotations/hover/mounter.js CHANGED
@@ -12,6 +12,7 @@ var _types = require("@atlaskit/analytics-listeners/types");
12
12
  var _analytics = require("@atlaskit/editor-common/analytics");
13
13
  var _RendererActionsContext = require("../../RendererActionsContext");
14
14
  var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
16
17
  var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
17
18
  var Component = props.component,
@@ -67,7 +68,10 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
67
68
  action: _analytics.ACTION.CREATE_NOT_ALLOWED,
68
69
  actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
69
70
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
70
- attributes: {},
71
+ attributes: {
72
+ documentPosition: documentPosition,
73
+ isAnnotationAllowed: isAnnotationAllowed
74
+ },
71
75
  eventType: _analytics.EVENT_TYPE.TRACK
72
76
  }).fire(_types.FabricChannel.editor);
73
77
  }
@@ -98,6 +102,21 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
98
102
  });
99
103
  var positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
100
104
  if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
105
+ if ((0, _platformFeatureFlags.fg)('cc_comments_improve_apply_draft_errors')) {
106
+ if (createAnalyticsEvent) {
107
+ createAnalyticsEvent({
108
+ action: _analytics.ACTION.CREATE_NOT_ALLOWED,
109
+ actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
110
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
111
+ attributes: {
112
+ positionToAnnotate: positionToAnnotate,
113
+ applyAnnotationMissing: !applyAnnotation,
114
+ annotationId: options.annotationId
115
+ },
116
+ eventType: _analytics.EVENT_TYPE.TRACK
117
+ }).fire(_types.FabricChannel.editor);
118
+ }
119
+ }
101
120
  return false;
102
121
  }
103
122
  var annotation = {
package/dist/cjs/ui/annotations/selection/mounter.js CHANGED
@@ -113,7 +113,9 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
113
113
  actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
114
114
  actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
115
115
  attributes: {
116
- inlineNodeNames: inlineNodeTypes
116
+ inlineNodeNames: inlineNodeTypes,
117
+ documentPosition: documentPosition,
118
+ isAnnotationAllowed: isAnnotationAllowed
117
119
  },
118
120
  eventType: _analytics.EVENT_TYPE.TRACK
119
121
  }).fire(_types.FabricChannel.editor);
@@ -151,6 +153,21 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
151
153
  // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
152
154
  var positionToAnnotate = (0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
153
155
  if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
156
+ if ((0, _platformFeatureFlags.fg)('cc_comments_improve_apply_draft_errors')) {
157
+ if (createAnalyticsEvent) {
158
+ createAnalyticsEvent({
159
+ action: _analytics.ACTION.CREATE_NOT_ALLOWED,
160
+ actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
161
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
162
+ attributes: {
163
+ positionToAnnotate: positionToAnnotate,
164
+ applyAnnotationMissing: !applyAnnotation,
165
+ annotationId: options.annotationId
166
+ },
167
+ eventType: _analytics.EVENT_TYPE.TRACK
168
+ }).fire(_types.FabricChannel.editor);
169
+ }
170
+ }
154
171
  return false;
155
172
  }
156
173
  var annotation = {
package/dist/es2019/react/marks/breakout.js CHANGED
@@ -22,10 +22,10 @@ const getWidth = (width, mode) => {
22
22
  return `min(${width}px, var(--ak-editor--breakout-container-without-gutter-width))`;
23
23
  } else {
24
24
  if (mode === 'full-width') {
25
- return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width))))`;
25
+ return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width)))`;
26
26
  }
27
27
  if (mode === 'wide') {
28
- return `min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width)))`;
28
+ return `min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width))`;
29
29
  }
30
30
  }
31
31
  };
package/dist/es2019/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -207,6 +207,14 @@ const responsiveBreakoutWidth = css({
207
207
  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
208
208
  }
209
209
  });
210
+ const responsiveBreakoutWidthFullWidth = css({
211
+ '--ak-editor--breakout-container-without-gutter-width': '100cqw',
212
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
213
+ '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
214
+ [`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
215
+ '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
216
+ }
217
+ });
210
218
  const hideHeadingCopyLinkWrapperStyles = css({
211
219
  '& h1, & h2, & h3, & h4, & h5, & h6': {
212
220
  [`.${HeadingAnchorWrapperClassName}`]: {
@@ -1814,7 +1822,7 @@ export const RendererStyleContainer = props => {
1814
1822
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
1815
1823
  fg('editor_inline_comments_on_inline_nodes') &&
1816
1824
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1817
- 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, fg('platform_breakout_cls') ? responsiveBreakoutWidth : null],
1825
+ 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' && fg('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && fg('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : null],
1818
1826
  "data-testid": testId
1819
1827
  }, children)
1820
1828
  );
package/dist/es2019/ui/Renderer/breakout-ssr.js CHANGED
@@ -25,25 +25,29 @@ export function BreakoutSSRInlineScript({
25
25
  }
26
26
  }
27
27
  const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
28
+ const shouldSkipScript = {
29
+ table: fg('platform-ssr-table-resize'),
30
+ breakout: fg('platform_breakout_cls')
31
+ };
28
32
  return /*#__PURE__*/React.createElement("script", {
29
33
  "data-breakout-script-id": id
30
34
  // To investigate if we can replace this.
31
35
  // eslint-disable-next-line react/no-danger
32
36
  ,
33
37
  dangerouslySetInnerHTML: {
34
- __html: fg('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
38
+ __html: createBreakoutInlineScript(id, shouldSkipScript)
35
39
  },
36
40
  "data-testid": "breakout-ssr-inline-script"
37
41
  });
38
42
  }
39
- export function createBreakoutInlineScript(id, optionalFlagArg) {
43
+ export function createBreakoutInlineScript(id, shouldSkipScript) {
40
44
  return `
41
45
  (function(window){
42
46
  if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {
43
47
  return;
44
48
  }
45
49
  ${breakoutInlineScriptContext};
46
- (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false});
50
+ (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${JSON.stringify(shouldSkipScript)});
47
51
  })(window);
48
52
  `;
49
53
  }
@@ -107,7 +111,10 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
107
111
  }
108
112
 
109
113
  // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
110
- if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
114
+ if (shouldSkipBreakoutScript.table && node.classList.contains('pm-table-container')) {
115
+ return;
116
+ }
117
+ if (shouldSkipBreakoutScript.breakout && node.classList.contains('fabric-editor-breakout-mark')) {
111
118
  return;
112
119
  }
113
120
 
@@ -119,7 +126,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
119
126
  const effectiveWidth = rendererWidth - breakoutConsts.padding;
120
127
  width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
121
128
  } else if (resizedBreakout) {
122
- width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null,
129
+ width = breakoutConsts.calcBreakoutWithCustomWidth(mode, Number(node.dataset.width) || null,
123
130
  // Ignored via go/ees005
124
131
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
125
132
  renderer.offsetWidth);
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
48
48
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
49
49
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
50
50
  const packageName = "@atlaskit/renderer";
51
- const packageVersion = "118.7.1";
51
+ const packageVersion = "119.0.0";
52
52
  const setAsQueryContainerStyles = css({
53
53
  containerName: 'ak-renderer-wrapper',
54
54
  containerType: 'inline-size'
package/dist/es2019/ui/annotations/hover/mounter.js CHANGED
@@ -5,6 +5,7 @@ import { FabricChannel } from '@atlaskit/analytics-listeners/types';
5
5
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
6
6
  import { RendererContext as ActionsContext } from '../../RendererActionsContext';
7
7
  import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  export const Mounter = /*#__PURE__*/React.memo(props => {
9
10
  const {
10
11
  component: Component,
@@ -63,7 +64,10 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
63
64
  action: ACTION.CREATE_NOT_ALLOWED,
64
65
  actionSubject: ACTION_SUBJECT.ANNOTATION,
65
66
  actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
66
- attributes: {},
67
+ attributes: {
68
+ documentPosition,
69
+ isAnnotationAllowed: isAnnotationAllowed
70
+ },
67
71
  eventType: EVENT_TYPE.TRACK
68
72
  }).fire(FabricChannel.editor);
69
73
  }
@@ -94,6 +98,21 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
94
98
  });
95
99
  const positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
96
100
  if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
101
+ if (fg('cc_comments_improve_apply_draft_errors')) {
102
+ if (createAnalyticsEvent) {
103
+ createAnalyticsEvent({
104
+ action: ACTION.CREATE_NOT_ALLOWED,
105
+ actionSubject: ACTION_SUBJECT.ANNOTATION,
106
+ actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
107
+ attributes: {
108
+ positionToAnnotate,
109
+ applyAnnotationMissing: !applyAnnotation,
110
+ annotationId: options.annotationId
111
+ },
112
+ eventType: EVENT_TYPE.TRACK
113
+ }).fire(FabricChannel.editor);
114
+ }
115
+ }
97
116
  return false;
98
117
  }
99
118
  const annotation = {
package/dist/es2019/ui/annotations/selection/mounter.js CHANGED
@@ -110,7 +110,9 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
110
110
  actionSubject: ACTION_SUBJECT.ANNOTATION,
111
111
  actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
112
112
  attributes: {
113
- inlineNodeNames: inlineNodeTypes
113
+ inlineNodeNames: inlineNodeTypes,
114
+ documentPosition,
115
+ isAnnotationAllowed
114
116
  },
115
117
  eventType: EVENT_TYPE.TRACK
116
118
  }).fire(FabricChannel.editor);
@@ -148,6 +150,21 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
148
150
  // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
149
151
  const positionToAnnotate = fg('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
150
152
  if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
153
+ if (fg('cc_comments_improve_apply_draft_errors')) {
154
+ if (createAnalyticsEvent) {
155
+ createAnalyticsEvent({
156
+ action: ACTION.CREATE_NOT_ALLOWED,
157
+ actionSubject: ACTION_SUBJECT.ANNOTATION,
158
+ actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
159
+ attributes: {
160
+ positionToAnnotate,
161
+ applyAnnotationMissing: !applyAnnotation,
162
+ annotationId: options.annotationId
163
+ },
164
+ eventType: EVENT_TYPE.TRACK
165
+ }).fire(FabricChannel.editor);
166
+ }
167
+ }
151
168
  return false;
152
169
  }
153
170
  const annotation = {
package/dist/esm/react/marks/breakout.js CHANGED
@@ -22,10 +22,10 @@ var getWidth = function getWidth(width, mode) {
22
22
  return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
23
23
  } else {
24
24
  if (mode === 'full-width') {
25
- return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))))");
25
+ return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width)))");
26
26
  }
27
27
  if (mode === 'wide') {
28
- return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width)))";
28
+ return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor--breakout-container-without-gutter-width))";
29
29
  }
30
30
  }
31
31
  };
package/dist/esm/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- var _css, _css4;
2
+ var _css, _css5;
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 */
@@ -140,6 +140,13 @@ var responsiveBreakoutWidth = css(_defineProperty({
140
140
  }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
141
141
  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
142
142
  }));
143
+ var responsiveBreakoutWidthFullWidth = css(_defineProperty({
144
+ '--ak-editor--breakout-container-without-gutter-width': '100cqw',
145
+ // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
146
+ '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px")
147
+ }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
148
+ '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
149
+ }));
143
150
  var hideHeadingCopyLinkWrapperStyles = css({
144
151
  '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
145
152
  '&:focus-within': {
@@ -477,13 +484,13 @@ var paragraphSharedStyles = css({
477
484
  letterSpacing: '-0.005em'
478
485
  }
479
486
  });
480
- var listsSharedStyles = css((_css4 = {
487
+ var listsSharedStyles = css((_css5 = {
481
488
  /* =============== INDENTATION SPACING ========= */
482
489
  'ul, ol': {
483
490
  boxSizing: 'border-box',
484
491
  paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
485
492
  }
486
- }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css4, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
493
+ }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css5, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
487
494
  /*
488
495
  Ensures list item content adheres to the list's margin instead
489
496
  of filling the entire block row. This is important to allow
@@ -515,7 +522,7 @@ var listsSharedStyles = css((_css4 = {
515
522
  listStyleType: 'lower-alpha'
516
523
  }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
517
524
  listStyleType: 'lower-roman'
518
- }), _defineProperty(_defineProperty(_defineProperty(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
525
+ }), _defineProperty(_defineProperty(_defineProperty(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
519
526
  listStyleType: 'disc'
520
527
  }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
521
528
  listStyleType: 'circle'
@@ -1414,7 +1421,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
1414
1421
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
1415
1422
  fg('editor_inline_comments_on_inline_nodes') &&
1416
1423
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
1417
- 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, fg('platform_breakout_cls') ? responsiveBreakoutWidth : null],
1424
+ 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' && fg('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && fg('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : null],
1418
1425
  "data-testid": testId
1419
1426
  }, children)
1420
1427
  );
package/dist/esm/ui/Renderer/breakout-ssr.js CHANGED
@@ -24,19 +24,23 @@ export function BreakoutSSRInlineScript(_ref) {
24
24
  }
25
25
  }
26
26
  var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
27
+ var shouldSkipScript = {
28
+ table: fg('platform-ssr-table-resize'),
29
+ breakout: fg('platform_breakout_cls')
30
+ };
27
31
  return /*#__PURE__*/React.createElement("script", {
28
32
  "data-breakout-script-id": id
29
33
  // To investigate if we can replace this.
30
34
  // eslint-disable-next-line react/no-danger
31
35
  ,
32
36
  dangerouslySetInnerHTML: {
33
- __html: fg('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
37
+ __html: createBreakoutInlineScript(id, shouldSkipScript)
34
38
  },
35
39
  "data-testid": "breakout-ssr-inline-script"
36
40
  });
37
41
  }
38
- export function createBreakoutInlineScript(id, optionalFlagArg) {
39
- return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false, ");\n })(window);\n");
42
+ export function createBreakoutInlineScript(id, shouldSkipScript) {
43
+ return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(JSON.stringify(shouldSkipScript), ");\n })(window);\n");
40
44
  }
41
45
  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.calcBreakoutWithCustomWidth = ").concat(breakoutConsts.calcBreakoutWithCustomWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
42
46
 
@@ -89,7 +93,10 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
89
93
  }
90
94
 
91
95
  // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
92
- if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
96
+ if (shouldSkipBreakoutScript.table && node.classList.contains('pm-table-container')) {
97
+ return;
98
+ }
99
+ if (shouldSkipBreakoutScript.breakout && node.classList.contains('fabric-editor-breakout-mark')) {
93
100
  return;
94
101
  }
95
102
 
@@ -101,7 +108,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
101
108
  var effectiveWidth = rendererWidth - breakoutConsts.padding;
102
109
  width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
103
110
  } else if (resizedBreakout) {
104
- width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null,
111
+ width = breakoutConsts.calcBreakoutWithCustomWidth(mode, Number(node.dataset.width) || null,
105
112
  // Ignored via go/ees005
106
113
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
107
114
  renderer.offsetWidth);
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
53
53
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
54
54
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
55
55
  var packageName = "@atlaskit/renderer";
56
- var packageVersion = "118.7.1";
56
+ var packageVersion = "119.0.0";
57
57
  var setAsQueryContainerStyles = css({
58
58
  containerName: 'ak-renderer-wrapper',
59
59
  containerType: 'inline-size'
package/dist/esm/ui/annotations/hover/mounter.js CHANGED
@@ -5,6 +5,7 @@ import { FabricChannel } from '@atlaskit/analytics-listeners/types';
5
5
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
6
6
  import { RendererContext as ActionsContext } from '../../RendererActionsContext';
7
7
  import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  export var Mounter = /*#__PURE__*/React.memo(function (props) {
9
10
  var Component = props.component,
10
11
  range = props.range,
@@ -59,7 +60,10 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
59
60
  action: ACTION.CREATE_NOT_ALLOWED,
60
61
  actionSubject: ACTION_SUBJECT.ANNOTATION,
61
62
  actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
62
- attributes: {},
63
+ attributes: {
64
+ documentPosition: documentPosition,
65
+ isAnnotationAllowed: isAnnotationAllowed
66
+ },
63
67
  eventType: EVENT_TYPE.TRACK
64
68
  }).fire(FabricChannel.editor);
65
69
  }
@@ -90,6 +94,21 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
90
94
  });
91
95
  var positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
92
96
  if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
97
+ if (fg('cc_comments_improve_apply_draft_errors')) {
98
+ if (createAnalyticsEvent) {
99
+ createAnalyticsEvent({
100
+ action: ACTION.CREATE_NOT_ALLOWED,
101
+ actionSubject: ACTION_SUBJECT.ANNOTATION,
102
+ actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
103
+ attributes: {
104
+ positionToAnnotate: positionToAnnotate,
105
+ applyAnnotationMissing: !applyAnnotation,
106
+ annotationId: options.annotationId
107
+ },
108
+ eventType: EVENT_TYPE.TRACK
109
+ }).fire(FabricChannel.editor);
110
+ }
111
+ }
93
112
  return false;
94
113
  }
95
114
  var annotation = {
package/dist/esm/ui/annotations/selection/mounter.js CHANGED
@@ -104,7 +104,9 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
104
104
  actionSubject: ACTION_SUBJECT.ANNOTATION,
105
105
  actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
106
106
  attributes: {
107
- inlineNodeNames: inlineNodeTypes
107
+ inlineNodeNames: inlineNodeTypes,
108
+ documentPosition: documentPosition,
109
+ isAnnotationAllowed: isAnnotationAllowed
108
110
  },
109
111
  eventType: EVENT_TYPE.TRACK
110
112
  }).fire(FabricChannel.editor);
@@ -142,6 +144,21 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
142
144
  // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
143
145
  var positionToAnnotate = fg('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
144
146
  if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
147
+ if (fg('cc_comments_improve_apply_draft_errors')) {
148
+ if (createAnalyticsEvent) {
149
+ createAnalyticsEvent({
150
+ action: ACTION.CREATE_NOT_ALLOWED,
151
+ actionSubject: ACTION_SUBJECT.ANNOTATION,
152
+ actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
153
+ attributes: {
154
+ positionToAnnotate: positionToAnnotate,
155
+ applyAnnotationMissing: !applyAnnotation,
156
+ annotationId: options.annotationId
157
+ },
158
+ eventType: EVENT_TYPE.TRACK
159
+ }).fire(FabricChannel.editor);
160
+ }
161
+ }
145
162
  return false;
146
163
  }
147
164
  var annotation = {
package/dist/types/ui/Renderer/breakout-ssr.d.ts CHANGED
@@ -12,6 +12,9 @@ declare global {
12
12
  export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript }: {
13
13
  noOpSSRInlineScript: Boolean;
14
14
  }): React.JSX.Element | null;
15
- export declare function createBreakoutInlineScript(id: number, optionalFlagArg?: boolean): string;
15
+ export declare function createBreakoutInlineScript(id: number, shouldSkipScript: {
16
+ table: boolean;
17
+ breakout: boolean;
18
+ }): string;
16
19
  export declare const breakoutInlineScriptContext: string;
17
20
  export declare const calcLineLength: () => number;
package/dist/types-ts4.5/ui/Renderer/breakout-ssr.d.ts CHANGED
@@ -12,6 +12,9 @@ declare global {
12
12
  export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript }: {
13
13
  noOpSSRInlineScript: Boolean;
14
14
  }): React.JSX.Element | null;
15
- export declare function createBreakoutInlineScript(id: number, optionalFlagArg?: boolean): string;
15
+ export declare function createBreakoutInlineScript(id: number, shouldSkipScript: {
16
+ table: boolean;
17
+ breakout: boolean;
18
+ }): string;
16
19
  export declare const breakoutInlineScriptContext: string;
17
20
  export declare const calcLineLength: () => number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "118.7.1",
3
+ "version": "119.0.1",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/analytics-next": "^11.1.0",
32
32
  "@atlaskit/button": "^23.2.0",
33
33
  "@atlaskit/code": "^17.2.0",
34
- "@atlaskit/editor-common": "^106.9.0",
34
+ "@atlaskit/editor-common": "^107.0.0",
35
35
  "@atlaskit/editor-json-transformer": "^8.24.0",
36
36
  "@atlaskit/editor-palette": "^2.1.0",
37
37
  "@atlaskit/editor-prosemirror": "7.0.0",
@@ -43,21 +43,21 @@
43
43
  "@atlaskit/link": "^3.2.0",
44
44
  "@atlaskit/link-datasource": "^4.11.0",
45
45
  "@atlaskit/media-card": "^79.3.0",
46
- "@atlaskit/media-client": "^33.4.0",
46
+ "@atlaskit/media-client": "^34.0.0",
47
47
  "@atlaskit/media-client-react": "^4.1.0",
48
48
  "@atlaskit/media-common": "^12.2.0",
49
- "@atlaskit/media-filmstrip": "^50.1.0",
49
+ "@atlaskit/media-filmstrip": "^51.0.0",
50
50
  "@atlaskit/media-ui": "^28.3.0",
51
- "@atlaskit/media-viewer": "^52.2.0",
51
+ "@atlaskit/media-viewer": "^52.3.0",
52
52
  "@atlaskit/platform-feature-flags": "^1.1.0",
53
53
  "@atlaskit/platform-feature-flags-react": "^0.2.0",
54
54
  "@atlaskit/react-ufo": "^3.13.0",
55
- "@atlaskit/smart-card": "^38.9.0",
55
+ "@atlaskit/smart-card": "^38.13.0",
56
56
  "@atlaskit/status": "^3.0.0",
57
57
  "@atlaskit/task-decision": "^19.2.0",
58
58
  "@atlaskit/theme": "^18.0.0",
59
- "@atlaskit/tmp-editor-statsig": "^7.1.0",
60
- "@atlaskit/tokens": "^5.2.0",
59
+ "@atlaskit/tmp-editor-statsig": "^8.0.0",
60
+ "@atlaskit/tokens": "^5.3.0",
61
61
  "@atlaskit/tooltip": "^20.3.0",
62
62
  "@atlaskit/visually-hidden": "^3.0.0",
63
63
  "@babel/runtime": "^7.0.0",
@@ -71,7 +71,7 @@
71
71
  },
72
72
  "peerDependencies": {
73
73
  "@atlaskit/link-provider": "^3.3.0",
74
- "@atlaskit/media-core": "^36.1.0",
74
+ "@atlaskit/media-core": "^37.0.0",
75
75
  "react": "^18.2.0",
76
76
  "react-dom": "^18.2.0"
77
77
  },
@@ -83,10 +83,10 @@
83
83
  "@atlaskit/css-reset": "^7.3.0",
84
84
  "@atlaskit/link-provider": "^3.3.0",
85
85
  "@atlaskit/link-test-helpers": "^8.0.0",
86
- "@atlaskit/linking-common": "^9.0.0",
87
- "@atlaskit/media-core": "^36.1.0",
86
+ "@atlaskit/linking-common": "^9.1.0",
87
+ "@atlaskit/media-core": "^37.0.0",
88
88
  "@atlaskit/media-integration-test-helpers": "workspace:^",
89
- "@atlaskit/media-test-helpers": "^36.1.0",
89
+ "@atlaskit/media-test-helpers": "^37.0.0",
90
90
  "@atlaskit/mention": "^24.2.0",
91
91
  "@atlaskit/modal-dialog": "^14.2.0",
92
92
  "@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-d1445f2f74.patch",
@@ -130,6 +130,9 @@
130
130
  "confluence_frontend_table_scrollbar_ttvc_fix": {
131
131
  "type": "boolean"
132
132
  },
133
+ "cc_comments_improve_apply_draft_errors": {
134
+ "type": "boolean"
135
+ },
133
136
  "platform-ssr-table-resize": {
134
137
  "type": "boolean"
135
138
  },