@atlaskit/renderer 125.4.1 → 126.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/afm-products/tsconfig.json +1 -1
  3. package/dist/cjs/react/index.js +15 -5
  4. package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js +1 -1
  5. package/dist/cjs/react/nodes/tableNew.js +6 -2
  6. package/dist/cjs/react/utils/merge-inlined-extension.js +92 -0
  7. package/dist/cjs/ui/MediaCard.js +2 -3
  8. package/dist/cjs/ui/Renderer/RendererStyleContainer.js +11 -11
  9. package/dist/cjs/ui/Renderer/index.js +3 -2
  10. package/dist/es2019/react/index.js +15 -5
  11. package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js +1 -1
  12. package/dist/es2019/react/nodes/tableNew.js +6 -2
  13. package/dist/es2019/react/utils/merge-inlined-extension.js +75 -0
  14. package/dist/es2019/ui/MediaCard.js +2 -3
  15. package/dist/es2019/ui/Renderer/RendererStyleContainer.js +11 -11
  16. package/dist/es2019/ui/Renderer/index.js +3 -2
  17. package/dist/esm/react/index.js +15 -5
  18. package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js +1 -1
  19. package/dist/esm/react/nodes/tableNew.js +6 -2
  20. package/dist/esm/react/utils/merge-inlined-extension.js +86 -0
  21. package/dist/esm/ui/MediaCard.js +2 -3
  22. package/dist/esm/ui/Renderer/RendererStyleContainer.js +11 -11
  23. package/dist/esm/ui/Renderer/index.js +3 -2
  24. package/dist/types/react/index.d.ts +4 -3
  25. package/dist/types/react/utils/merge-inlined-extension.d.ts +25 -0
  26. package/dist/types/ui/renderer-props.d.ts +7 -1
  27. package/dist/types-ts4.5/react/index.d.ts +4 -3
  28. package/dist/types-ts4.5/react/utils/merge-inlined-extension.d.ts +25 -0
  29. package/dist/types-ts4.5/ui/renderer-props.d.ts +7 -1
  30. package/docs/0-intro.tsx +30 -28
  31. package/package.json +3 -3
  32. package/build/tsconfig.json +0 -23
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 126.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`87c877957a81a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87c877957a81a) -
8
+ EDITOR-4544 - Inline Bodied Extension: merge inlined extensions with adjacent textblocks
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 125.4.1
4
15
 
5
16
  ### Patch Changes
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.products.json",
2
+ "extends": "../../../../tsconfig.local-consumption.json",
3
3
  "compilerOptions": {
4
4
  "declaration": true,
5
5
  "target": "es5",
@@ -29,6 +29,7 @@ var _rendererNode = require("./renderer-node");
29
29
  var _renderTextSegments = require("./utils/render-text-segments");
30
30
  var _segmentText = require("./utils/segment-text");
31
31
  var _getStandaloneBackgroundColorMarks = require("./utils/getStandaloneBackgroundColorMarks");
32
+ var _mergeInlinedExtension = require("./utils/merge-inlined-extension");
32
33
  var _excluded = ["key"];
33
34
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
34
35
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -221,6 +222,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
221
222
  this.isPresentational = init.isPresentational;
222
223
  this.disableTableOverflowShadow = init.disableTableOverflowShadow;
223
224
  this.onSetLinkTarget = init.onSetLinkTarget;
225
+ this.shouldDisplayExtensionAsInline = init.shouldDisplayExtensionAsInline;
224
226
  }
225
227
  return (0, _createClass2.default)(ReactSerializer, [{
226
228
  key: "resetState",
@@ -296,7 +298,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
296
298
  if (key === 'root-0') {
297
299
  this.resetState();
298
300
  }
299
- return this.renderNode(target, props, key, ReactSerializer.getChildNodes(fragment).map(function (node, index) {
301
+ return this.renderNode(target, props, key, this.getChildNodes(fragment).map(function (node, index) {
300
302
  if ((0, _nodes.isTextWrapper)(node)) {
301
303
  return _this2.serializeTextWrapper(node.content, {
302
304
  index: index,
@@ -531,7 +533,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
531
533
  var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
532
534
  return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
533
535
  extensionViewportSizes: this.extensionViewportSizes,
534
- nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
536
+ nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
537
+ shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
535
538
  });
536
539
  }
537
540
  }, {
@@ -760,16 +763,23 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
760
763
  }
761
764
  return this.getUniqueHeadingId(baseId, headingIds, ++counter);
762
765
  }
763
- }], [{
766
+ }, {
764
767
  key: "getChildNodes",
765
768
  value: function getChildNodes(fragment) {
766
769
  var children = [];
767
770
  fragment.forEach(function (node) {
768
771
  children.push(node);
769
772
  });
770
- return (0, _nodes.mergeTextNodes)(children);
773
+ children = (0, _nodes.mergeTextNodes)(children);
774
+ if (!!this.shouldDisplayExtensionAsInline && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
775
+ children = (0, _mergeInlinedExtension.mergeInlinedExtension)({
776
+ nodes: children,
777
+ shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
778
+ });
779
+ }
780
+ return children;
771
781
  }
772
- }, {
782
+ }], [{
773
783
  key: "getMarks",
774
784
  value: function getMarks(node) {
775
785
  if (!node.marks || node.marks.length === 0) {
@@ -43,7 +43,7 @@ var codeBlockSharedStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _
43
43
  backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
44
44
  borderRadius: "var(--ds-radius-small, 3px)",
45
45
  margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
46
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
46
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
47
47
  minWidth: "".concat(_editorSharedStyles.akEditorTableCellMinWidth, "px"),
48
48
  cursor: 'pointer',
49
49
  clear: 'both',
@@ -121,7 +121,9 @@ var addSortableColumn = exports.addSortableColumn = function addSortableColumn(r
121
121
  return row;
122
122
  });
123
123
  };
124
- var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
124
+ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows
125
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
126
+ ) {
125
127
  if (!rows.length) {
126
128
  return false;
127
129
  }
@@ -138,7 +140,9 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
138
140
  return node.type === _tableCell.TableHeader;
139
141
  });
140
142
  };
141
- var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
143
+ var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children
144
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
145
+ ) {
142
146
  return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
143
147
  };
144
148
  /**
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mergeInlinedExtension = mergeInlinedExtension;
7
+ 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; } } }; }
8
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
9
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
10
+ /**
11
+ * Merges extensions (displayed as inline) with adjacent textblocks
12
+ *
13
+ * Input:
14
+ * [
15
+ * { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
16
+ * { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
17
+ * { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
18
+ * ]
19
+ *
20
+ * Output:
21
+ * [
22
+ * { type: 'paragraph', content: [
23
+ * { type: 'text', text: 'Hello' },
24
+ * { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
25
+ * { type: 'text', text: '!' }
26
+ * ] },
27
+ * ]
28
+ */
29
+ function mergeInlinedExtension(_ref) {
30
+ var nodes = _ref.nodes,
31
+ shouldDisplayExtensionAsInline = _ref.shouldDisplayExtensionAsInline;
32
+ function isInlineBodiedExtension(node) {
33
+ var _node$attrs, _node$attrs2, _node$attrs3, _node$attrs4;
34
+ return Boolean((node === null || node === void 0 ? void 0 : node.type.name) === 'bodiedExtension' && shouldDisplayExtensionAsInline({
35
+ type: node.type.name,
36
+ extensionKey: (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionKey,
37
+ extensionType: (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionType,
38
+ parameters: (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.parameters,
39
+ content: node.content,
40
+ localId: (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.localId
41
+ }));
42
+ }
43
+ try {
44
+ // if it's [inlinedBodiedExtension], wrap it in a textblock
45
+ if (nodes.length === 1 && isInlineBodiedExtension(nodes[0])) {
46
+ return [nodes[0].type.schema.nodes.paragraph.create(null, nodes[0])];
47
+ }
48
+ var newNodes = [];
49
+ var _iterator = _createForOfIteratorHelper(nodes),
50
+ _step;
51
+ try {
52
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
53
+ var node = _step.value;
54
+ var previousNode = newNodes[newNodes.length - 1];
55
+
56
+ // first node
57
+ if (!previousNode) {
58
+ newNodes.push(node);
59
+ continue;
60
+ }
61
+
62
+ // textblock + inlinedBodiedExtension
63
+ if (isInlineBodiedExtension(node) && previousNode.isTextblock) {
64
+ newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.addToEnd(node));
65
+ }
66
+ // textblock(..., inlinedBodiedExtension) + textblock
67
+ else if (node.isTextblock && previousNode.isTextblock && isInlineBodiedExtension(previousNode.content.lastChild)) {
68
+ newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.append(node.content));
69
+ }
70
+ // inlinedBodiedExtension + textblock
71
+ else if (isInlineBodiedExtension(previousNode) && node.isTextblock) {
72
+ newNodes[newNodes.length - 1] = node.copy(node.content.addToStart(previousNode));
73
+ }
74
+ // inlinedBodiedExtension + non-textblock
75
+ else if (isInlineBodiedExtension(previousNode) && !node.isTextblock) {
76
+ newNodes[newNodes.length - 1] = node.type.schema.nodes.paragraph.create(null, previousNode);
77
+ newNodes.push(node);
78
+ }
79
+ // default case
80
+ else {
81
+ newNodes.push(node);
82
+ }
83
+ }
84
+ } catch (err) {
85
+ _iterator.e(err);
86
+ } finally {
87
+ _iterator.f();
88
+ }
89
+ return newNodes;
90
+ } catch (_unused) {}
91
+ return nodes;
92
+ }
@@ -17,7 +17,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
17
17
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
18
  var _react = _interopRequireWildcard(require("react"));
19
19
  var _traverse = require("@atlaskit/adf-utils/traverse");
20
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
20
  var _mediaCard = require("@atlaskit/media-card");
22
21
  var _mediaClientReact = require("@atlaskit/media-client-react");
23
22
  var _utils = require("@atlaskit/editor-common/utils");
@@ -247,7 +246,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
247
246
 
248
247
  // we need this statement for the mandatory mediaClientConfig below
249
248
  var mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
250
- var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
249
+ var Card = enableSyncMediaCard ? _mediaCard.CardSync : _mediaCard.Card;
251
250
  return (
252
251
  /*#__PURE__*/
253
252
  // Ignored via go/ees005
@@ -329,7 +328,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
329
328
  collectionName: collection,
330
329
  occurrenceKey: occurrenceKey
331
330
  };
332
- var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
331
+ var Card = enableSyncMediaCard ? _mediaCard.CardSync : _mediaCard.Card;
333
332
 
334
333
  // Quick solution to disable lazy loading of images on PDF export pages in Confluence to remedy an issue with images never loading
335
334
  // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233
@@ -239,7 +239,7 @@ var telepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#".co
239
239
  left: 0,
240
240
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
241
241
  fontSize: '10px',
242
- fontWeight: "var(--ds-font-weight-bold, 700)",
242
+ fontWeight: "var(--ds-font-weight-bold, 653)",
243
243
  width: '12.5px',
244
244
  height: '13px',
245
245
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
@@ -276,7 +276,7 @@ var rovoTelepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#
276
276
  '&::before': {
277
277
  content: '"Rovo"',
278
278
  position: 'absolute',
279
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
279
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
280
280
  fontWeight: "var(--ds-font-weight-semibold, 600)",
281
281
  color: "var(--ds-text-inverse, white)",
282
282
  background: "var(--ds-text, #292A2E)",
@@ -418,7 +418,7 @@ var headingsSharedStyles = (0, _react.css)({
418
418
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
419
419
  lineHeight: 16 / 11,
420
420
  color: "var(--ds-text-subtlest, #6B6E76)",
421
- fontWeight: "var(--ds-font-weight-bold, 700)",
421
+ fontWeight: "var(--ds-font-weight-bold, 653)",
422
422
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
423
423
  marginTop: '1.455em',
424
424
  textTransform: 'none'
@@ -433,7 +433,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
433
433
  marginTop: '1.45833em',
434
434
  '& strong': {
435
435
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
436
- fontWeight: "var(--ds-font-weight-bold, 700)"
436
+ fontWeight: "var(--ds-font-weight-bold, 653)"
437
437
  },
438
438
  '&::before': {}
439
439
  },
@@ -445,7 +445,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
445
445
  marginBottom: 0,
446
446
  '& strong': {
447
447
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
448
- fontWeight: "var(--ds-font-weight-bold, 700)"
448
+ fontWeight: "var(--ds-font-weight-bold, 653)"
449
449
  }
450
450
  },
451
451
  '& h3': {
@@ -456,7 +456,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
456
456
  marginBottom: 0,
457
457
  '& strong': {
458
458
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
459
- fontWeight: "var(--ds-font-weight-bold, 700)"
459
+ fontWeight: "var(--ds-font-weight-bold, 653)"
460
460
  }
461
461
  },
462
462
  '& h4': {
@@ -465,7 +465,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
465
465
  marginTop: "var(--ds-space-250, 1.25em)",
466
466
  '& strong': {
467
467
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
468
- fontWeight: "var(--ds-font-weight-bold, 700)"
468
+ fontWeight: "var(--ds-font-weight-bold, 653)"
469
469
  }
470
470
  },
471
471
  '& h5': {
@@ -476,7 +476,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
476
476
  textTransform: 'none',
477
477
  '& strong': {
478
478
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
479
- fontWeight: "var(--ds-font-weight-bold, 700)"
479
+ fontWeight: "var(--ds-font-weight-bold, 653)"
480
480
  }
481
481
  },
482
482
  '& h6': {
@@ -487,7 +487,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
487
487
  textTransform: 'none',
488
488
  '& strong': {
489
489
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
490
- fontWeight: "var(--ds-font-weight-bold, 700)"
490
+ fontWeight: "var(--ds-font-weight-bold, 653)"
491
491
  }
492
492
  }
493
493
  });
@@ -713,7 +713,7 @@ var codeMarkSharedStyles = (0, _react.css)({
713
713
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
714
714
  fontSize: '0.875em',
715
715
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
716
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
716
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
717
717
  fontWeight: "var(--ds-font-weight-regular, 400)",
718
718
  backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ")"),
719
719
  color: "var(--ds-text, ".concat(_colors.N800, ")"),
@@ -896,7 +896,7 @@ var headerSmartCardStyles = (0, _react.css)({
896
896
  });
897
897
  var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
898
898
  '& .UnknownBlock': {
899
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
899
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
900
900
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
901
901
  fontSize: "".concat(14 / 16, "rem"),
902
902
  fontWeight: "var(--ds-font-weight-regular, 400)",
@@ -70,7 +70,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
70
70
  var TABLE_INFO_TIMEOUT = 10000;
71
71
  var RENDER_EVENT_SAMPLE_RATE = 0.2;
72
72
  var packageName = "@atlaskit/renderer";
73
- var packageVersion = "125.4.0";
73
+ var packageVersion = "125.4.1";
74
74
  var setAsQueryContainerStyles = (0, _react2.css)({
75
75
  containerName: 'ak-renderer-wrapper',
76
76
  containerType: 'inline-size'
@@ -268,7 +268,8 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
268
268
  textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
269
269
  allowTableAlignment: props.UNSTABLE_allowTableAlignment,
270
270
  allowTableResizing: props.UNSTABLE_allowTableResizing,
271
- disableTableOverflowShadow: props.disableTableOverflowShadow
271
+ disableTableOverflowShadow: props.disableTableOverflowShadow,
272
+ shouldDisplayExtensionAsInline: props.shouldDisplayExtensionAsInline
272
273
  };
273
274
  }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
274
275
  var serializer = (0, _useMemoFromPropsDerivative.useMemoFromPropsDerivative)(function (serializerProps) {
@@ -18,6 +18,7 @@ import { insideBlockNode, insideBreakoutExpand, insideBreakoutLayout, insideMult
18
18
  import { renderTextSegments } from './utils/render-text-segments';
19
19
  import { segmentText } from './utils/segment-text';
20
20
  import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
21
+ import { mergeInlinedExtension } from './utils/merge-inlined-extension';
21
22
  function mergeMarks(marksAndNodes) {
22
23
  return marksAndNodes.reduce((acc, markOrNode) => {
23
24
  const prev = acc.length && acc[acc.length - 1] || null;
@@ -208,6 +209,7 @@ export default class ReactSerializer {
208
209
  this.isPresentational = init.isPresentational;
209
210
  this.disableTableOverflowShadow = init.disableTableOverflowShadow;
210
211
  this.onSetLinkTarget = init.onSetLinkTarget;
212
+ this.shouldDisplayExtensionAsInline = init.shouldDisplayExtensionAsInline;
211
213
  }
212
214
  resetState() {
213
215
  this.headingIds = [];
@@ -278,7 +280,7 @@ export default class ReactSerializer {
278
280
  if (key === 'root-0') {
279
281
  this.resetState();
280
282
  }
281
- return this.renderNode(target, props, key, ReactSerializer.getChildNodes(fragment).map((node, index) => {
283
+ return this.renderNode(target, props, key, this.getChildNodes(fragment).map((node, index) => {
282
284
  if (isTextWrapper(node)) {
283
285
  return this.serializeTextWrapper(node.content, {
284
286
  index,
@@ -481,7 +483,8 @@ export default class ReactSerializer {
481
483
  return {
482
484
  ...this.getProps(node, path),
483
485
  extensionViewportSizes: this.extensionViewportSizes,
484
- nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
486
+ nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
487
+ shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
485
488
  };
486
489
  }
487
490
  getEmojiProps(node, path = []) {
@@ -675,12 +678,19 @@ export default class ReactSerializer {
675
678
  }
676
679
  return this.getUniqueHeadingId(baseId, headingIds, ++counter);
677
680
  }
678
- static getChildNodes(fragment) {
679
- const children = [];
681
+ getChildNodes(fragment) {
682
+ let children = [];
680
683
  fragment.forEach(node => {
681
684
  children.push(node);
682
685
  });
683
- return mergeTextNodes(children);
686
+ children = mergeTextNodes(children);
687
+ if (!!this.shouldDisplayExtensionAsInline && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
688
+ children = mergeInlinedExtension({
689
+ nodes: children,
690
+ shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
691
+ });
692
+ }
693
+ return children;
684
694
  }
685
695
  static getMarks(node) {
686
696
  if (!node.marks || node.marks.length === 0) {
@@ -37,7 +37,7 @@ const codeBlockSharedStyles = css({
37
37
  backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
38
38
  borderRadius: "var(--ds-radius-small, 3px)",
39
39
  margin: `${blockNodesVerticalMargin} 0 0 0`,
40
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
40
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
41
41
  minWidth: `${akEditorTableCellMinWidth}px`,
42
42
  cursor: 'pointer',
43
43
  clear: 'both',
@@ -90,7 +90,9 @@ export const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
90
90
  return row;
91
91
  });
92
92
  };
93
- export const isHeaderRowEnabled = rows => {
93
+ export const isHeaderRowEnabled = (rows
94
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
95
+ ) => {
94
96
  if (!rows.length) {
95
97
  return false;
96
98
  }
@@ -107,7 +109,9 @@ export const isHeaderRowEnabled = rows => {
107
109
  }
108
110
  return children.every(node => node.type === TableHeader);
109
111
  };
110
- export const tableCanBeSticky = (node, children) => {
112
+ export const tableCanBeSticky = (node, children
113
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
114
+ ) => {
111
115
  return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
112
116
  };
113
117
  /**
@@ -0,0 +1,75 @@
1
+ /**
2
+ * Merges extensions (displayed as inline) with adjacent textblocks
3
+ *
4
+ * Input:
5
+ * [
6
+ * { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
7
+ * { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
8
+ * { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
9
+ * ]
10
+ *
11
+ * Output:
12
+ * [
13
+ * { type: 'paragraph', content: [
14
+ * { type: 'text', text: 'Hello' },
15
+ * { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
16
+ * { type: 'text', text: '!' }
17
+ * ] },
18
+ * ]
19
+ */
20
+ export function mergeInlinedExtension({
21
+ nodes,
22
+ shouldDisplayExtensionAsInline
23
+ }) {
24
+ function isInlineBodiedExtension(node) {
25
+ var _node$attrs, _node$attrs2, _node$attrs3, _node$attrs4;
26
+ return Boolean((node === null || node === void 0 ? void 0 : node.type.name) === 'bodiedExtension' && shouldDisplayExtensionAsInline({
27
+ type: node.type.name,
28
+ extensionKey: (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionKey,
29
+ extensionType: (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionType,
30
+ parameters: (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.parameters,
31
+ content: node.content,
32
+ localId: (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.localId
33
+ }));
34
+ }
35
+ try {
36
+ // if it's [inlinedBodiedExtension], wrap it in a textblock
37
+ if (nodes.length === 1 && isInlineBodiedExtension(nodes[0])) {
38
+ return [nodes[0].type.schema.nodes.paragraph.create(null, nodes[0])];
39
+ }
40
+ const newNodes = [];
41
+ for (const node of nodes) {
42
+ const previousNode = newNodes[newNodes.length - 1];
43
+
44
+ // first node
45
+ if (!previousNode) {
46
+ newNodes.push(node);
47
+ continue;
48
+ }
49
+
50
+ // textblock + inlinedBodiedExtension
51
+ if (isInlineBodiedExtension(node) && previousNode.isTextblock) {
52
+ newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.addToEnd(node));
53
+ }
54
+ // textblock(..., inlinedBodiedExtension) + textblock
55
+ else if (node.isTextblock && previousNode.isTextblock && isInlineBodiedExtension(previousNode.content.lastChild)) {
56
+ newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.append(node.content));
57
+ }
58
+ // inlinedBodiedExtension + textblock
59
+ else if (isInlineBodiedExtension(previousNode) && node.isTextblock) {
60
+ newNodes[newNodes.length - 1] = node.copy(node.content.addToStart(previousNode));
61
+ }
62
+ // inlinedBodiedExtension + non-textblock
63
+ else if (isInlineBodiedExtension(previousNode) && !node.isTextblock) {
64
+ newNodes[newNodes.length - 1] = node.type.schema.nodes.paragraph.create(null, previousNode);
65
+ newNodes.push(node);
66
+ }
67
+ // default case
68
+ else {
69
+ newNodes.push(node);
70
+ }
71
+ }
72
+ return newNodes;
73
+ } catch {}
74
+ return nodes;
75
+ }
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import React, { Component, useContext } from 'react';
4
4
  import { filter } from '@atlaskit/adf-utils/traverse';
5
- import { fg } from '@atlaskit/platform-feature-flags';
6
5
  import { Card as CardAsync, CardSync, CardLoading, CardError } from '@atlaskit/media-card';
7
6
  import { MediaClientContext } from '@atlaskit/media-client-react';
8
7
  import { withImageLoader } from '@atlaskit/editor-common/utils';
@@ -183,7 +182,7 @@ export class MediaCardView extends Component {
183
182
 
184
183
  // we need this statement for the mandatory mediaClientConfig below
185
184
  const mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
186
- const Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? CardSync : CardAsync;
185
+ const Card = enableSyncMediaCard ? CardSync : CardAsync;
187
186
  return (
188
187
  /*#__PURE__*/
189
188
  // Ignored via go/ees005
@@ -265,7 +264,7 @@ export class MediaCardView extends Component {
265
264
  collectionName: collection,
266
265
  occurrenceKey
267
266
  };
268
- const Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? CardSync : CardAsync;
267
+ const Card = enableSyncMediaCard ? CardSync : CardAsync;
269
268
 
270
269
  // Quick solution to disable lazy loading of images on PDF export pages in Confluence to remedy an issue with images never loading
271
270
  // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233
@@ -314,7 +314,7 @@ const telepointerStyles = css({
314
314
  left: 0,
315
315
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
316
316
  fontSize: '10px',
317
- fontWeight: "var(--ds-font-weight-bold, 700)",
317
+ fontWeight: "var(--ds-font-weight-bold, 653)",
318
318
  width: '12.5px',
319
319
  height: '13px',
320
320
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
@@ -353,7 +353,7 @@ const rovoTelepointerStyles = css({
353
353
  '&::before': {
354
354
  content: '"Rovo"',
355
355
  position: 'absolute',
356
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
356
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
357
357
  fontWeight: "var(--ds-font-weight-semibold, 600)",
358
358
  color: "var(--ds-text-inverse, white)",
359
359
  background: "var(--ds-text, #292A2E)",
@@ -496,7 +496,7 @@ const headingsSharedStyles = css({
496
496
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
497
497
  lineHeight: 16 / 11,
498
498
  color: "var(--ds-text-subtlest, #6B6E76)",
499
- fontWeight: "var(--ds-font-weight-bold, 700)",
499
+ fontWeight: "var(--ds-font-weight-bold, 653)",
500
500
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
501
501
  marginTop: '1.455em',
502
502
  textTransform: 'none'
@@ -511,7 +511,7 @@ const headingsSharedStylesWithEditorUGC = css({
511
511
  marginTop: '1.45833em',
512
512
  '& strong': {
513
513
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
514
- fontWeight: "var(--ds-font-weight-bold, 700)"
514
+ fontWeight: "var(--ds-font-weight-bold, 653)"
515
515
  },
516
516
  '&::before': {}
517
517
  },
@@ -523,7 +523,7 @@ const headingsSharedStylesWithEditorUGC = css({
523
523
  marginBottom: 0,
524
524
  '& strong': {
525
525
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
526
- fontWeight: "var(--ds-font-weight-bold, 700)"
526
+ fontWeight: "var(--ds-font-weight-bold, 653)"
527
527
  }
528
528
  },
529
529
  '& h3': {
@@ -534,7 +534,7 @@ const headingsSharedStylesWithEditorUGC = css({
534
534
  marginBottom: 0,
535
535
  '& strong': {
536
536
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
537
- fontWeight: "var(--ds-font-weight-bold, 700)"
537
+ fontWeight: "var(--ds-font-weight-bold, 653)"
538
538
  }
539
539
  },
540
540
  '& h4': {
@@ -543,7 +543,7 @@ const headingsSharedStylesWithEditorUGC = css({
543
543
  marginTop: "var(--ds-space-250, 1.25em)",
544
544
  '& strong': {
545
545
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
546
- fontWeight: "var(--ds-font-weight-bold, 700)"
546
+ fontWeight: "var(--ds-font-weight-bold, 653)"
547
547
  }
548
548
  },
549
549
  '& h5': {
@@ -554,7 +554,7 @@ const headingsSharedStylesWithEditorUGC = css({
554
554
  textTransform: 'none',
555
555
  '& strong': {
556
556
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
557
- fontWeight: "var(--ds-font-weight-bold, 700)"
557
+ fontWeight: "var(--ds-font-weight-bold, 653)"
558
558
  }
559
559
  },
560
560
  '& h6': {
@@ -565,7 +565,7 @@ const headingsSharedStylesWithEditorUGC = css({
565
565
  textTransform: 'none',
566
566
  '& strong': {
567
567
  // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
568
- fontWeight: "var(--ds-font-weight-bold, 700)"
568
+ fontWeight: "var(--ds-font-weight-bold, 653)"
569
569
  }
570
570
  }
571
571
  });
@@ -822,7 +822,7 @@ const codeMarkSharedStyles = css({
822
822
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
823
823
  fontSize: '0.875em',
824
824
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
825
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
825
+ fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
826
826
  fontWeight: "var(--ds-font-weight-regular, 400)",
827
827
  backgroundColor: `var(--ds--code--bg-color,${`var(--ds-background-neutral, ${N20})`})`,
828
828
  color: `var(--ds-text, ${N800})`,
@@ -1035,7 +1035,7 @@ const headerSmartCardStyles = css({
1035
1035
  });
1036
1036
  const baseOtherStyles = css({
1037
1037
  '& .UnknownBlock': {
1038
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
1038
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
1039
1039
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
1040
1040
  fontSize: `${14 / 16}rem`,
1041
1041
  fontWeight: "var(--ds-font-weight-regular, 400)",